動画のゴール

▼ UI制作でマストなディスプレイ概念を知ろう

1.高解像ディスプレイ

2.レスポンシブとは

3.デザインデータ作成

‍

▼ メリット

○ ディスプレイ考慮がないと不完全なデザインを組んでしまう。
・デスクトップ⇄スマホ：異なる画面幅に対応する
・高解像ディスプレイへの対応・画像の扱い

‍

○知識があるとUIデザインからヒントを得やすい

・実装しやすいデザインの作り方
・どのデバイスでも綺麗に見えるデザインの作り方

‍

‍

問い

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

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

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

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

と言われたら。

‍

これを理解するために

1.高解像ディスプレイ

2.レスポンシブ

3.デザインデータ作成

について知りましょう。

‍

‍

レティナ/高解像度ディスプレイについて

‍

なんですかそれは

• ディスプレを綺麗に映し出す技術です
• 1ドットの中に2倍や3倍のピクセルを凝縮している。結果色が鮮明に映る仕組み
• スマホやPCのディスプレイに標準対応

なにが重要なのよ

• 画像がボケる
• 実寸とは別
• コードで書かれたテキストや線などは見た目の影響はない

仕組み

• こちらのリンクで詳しく書いております〜！（動画の内容と同じです）
• https://takumikai.notion.site/80c84bdbab0d4c92958b8aa5d2b9ff88

‍

‍

動画のゴール

▼ UI制作でマストなディスプレイ概念を知ろう

1.高解像ディスプレイ

2.レスポンシブとは

3.デザインデータ作成

‍

▼ メリット

○ ディスプレイ考慮がないと不完全なデザインを組んでしまう。
・デスクトップ⇄スマホ：異なる画面幅に対応する
・高解像ディスプレイへの対応・画像の扱い

‍

○知識があるとUIデザインからヒントを得やすい

・実装しやすいデザインの作り方
・どのデバイスでも綺麗に見えるデザインの作り方

‍

‍

問い

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

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

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

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

と言われたら。

‍

これを理解するために

1.高解像ディスプレイ

2.レスポンシブ

3.デザインデータ作成

について知りましょう。

‍

‍

レティナ/高解像度ディスプレイについて

‍

なんですかそれは

• ディスプレを綺麗に映し出す技術です
• 1ドットの中に2倍や3倍のピクセルを凝縮している。結果色が鮮明に映る仕組み
• スマホやPCのディスプレイに標準対応

なにが重要なのよ

• 画像がボケる
• 実寸とは別
• コードで書かれたテキストや線などは見た目の影響はない

仕組み

• こちらのリンクで詳しく書いております〜！（動画の内容と同じです）
• ※メンバーのみ

‍

‍

‍

‍

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