動画のゴール

□ レスポンシブに作る際のデータのポイントを学びましょう

以下のことを実際のやり方を見せていきます。参考にしてまずははじめてみましょう。

‍

▼ この動画の項目

1 : デザインデータの作り方

2 : 可変/不可変の決め方

3 : 画像の扱い

4 : 実装者とコミュニケーションをとろう

‍

□ 動画で使っているFigmaのデータはこちら

https://www.figma.com/file/iaXpHPClRMRI8YCxVmmJyd/3-1.UI%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC?node-id=1438%3A12250

‍

‍

1.デザインデータの作り方

画面幅ごとにデザインデータを作ろう

• 最小はPCとSPだけでOK
• キャンバスごとにデータを作る
• 基本はプリセットのサイズを使うでOK
• PC : 1440pxぐらい / SP : 375px の横幅

まずはメインになる幅から作り込む

• いきなり複数を同時に進行しない。
• １番見られる/使われる画面から作成する
• その後に別の画面幅を考えて、調整していく

‍

‍

2.可変/不可変を考えよう

1.固定 / 可変 のUIパーツを考えよう

• 自分で考えずに、まずは世界的に使われているサービスがどう実装しているか調べて、参考にしよう
• PCアプリを出しているサービスは参考になりやすいです。例：Spotify / Apple系
• Google系もブラウザで観て参考になりそうです。

2.Figmaが好きなら可変に組もう

• 初心者はここまでやらなくてオッケーです。
• 会社に入ってデザインシステムやりたい人はやると良いかも
• 僕もここまでやらないです。（やらなくても伝わるため）

‍

‍

3.画像の扱い

2倍〜サイズを用意

• 2倍のものを用意して使いましょう。
• お手元のPCでもボケないと思います。

アイコン類はsvg形式のものを

• 可変で行えます
• 色も変えられます。
• svgとは？：コードで出力する形式の画像ファイルなのです。

‍

‍

4.実装者とコミュニケーションをとろう

データは完璧じゃない。コメント/コミュニケーションを取って共有

• エンジニアさんには口頭でカバー
• メモでも良いです
• データだけ見て全てがわかる人は、それまでにコミュニケーションを築き上げた人です

‍

※ 動画で見せているドキュメントのイメージはこちら

動画のゴール

□ レスポンシブに作る際のデータのポイントを学びましょう

以下のことを実際のやり方を見せていきます。参考にしてまずははじめてみましょう。

‍

▼ この動画の項目

1 : デザインデータの作り方

2 : 可変/不可変の決め方

3 : 画像の扱い

4 : 実装者とコミュニケーションをとろう

‍

‍

□ 例題の質問に答えていきましょう

‍

質問：どういうデザインデータを作りますか？

<条件1> “MacBook Air”のディスプレイがメインディスプレイ

2018 年以降に発売されたモデルの MacBook Air。標準解像度は 2560 x 1600、1 インチ当たりのピクセル数 (ppi) は 227 です。数百万色に対応しています。

<条件2>PCで見るし、スマホで見るしって画面を作って

と言われたら。

‍

‍

1.デザインデータの作り方

画面幅ごとにデザインデータを作ろう

• 最小はPCとSPだけでOK
• キャンバスごとにデータを作る
• 基本はプリセットのサイズを使うでOK
• PC : 1440pxぐらい / SP : 375px の横幅

まずはメインになる幅から作り込む

• いきなり複数を同時に進行しない。
• １番見られる/使われる画面から作成する
• その後に別の画面幅を考えて、調整していく

‍

‍

2.可変/不可変を考えよう

1.固定 / 可変 のUIパーツを考えよう

• 自分で考えずに、まずは世界的に使われているサービスがどう実装しているか調べて、参考にしよう
• PCアプリを出しているサービスは参考になりやすいです。例：Spotify / Apple系
• Google系もブラウザで観て参考になりそうです。

2.Figmaが好きなら可変に組もう

• 初心者はここまでやらなくてオッケーです。
• 会社に入ってデザインシステムやりたい人はやると良いかも
• 僕もここまでやらないです。（やらなくても伝わるため）

‍

‍

3.画像の扱い

2倍〜サイズを用意

• 2倍のものを用意して使いましょう。
• お手元のPCでもボケないと思います。

アイコン類はsvg形式のものを

• 可変で行えます
• 色も変えられます。
• svgとは？：コードで出力する形式の画像ファイルなのです。

‍

‍

4.実装者とコミュニケーションをとろう

データは完璧じゃない。コメント/コミュニケーションを取って共有

• エンジニアさんには口頭でカバー
• メモでも良いです
• データだけ見て全てがわかる人は、それまでにコミュニケーションを築き上げた人です

‍

※ 動画で見せているドキュメントのイメージはこちら

‍

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript