5-1.知らないと怖い”高解像度"ディスプレイについて

動画のゴール

▼ 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のディスプレイに標準対応

なにが重要なのよ

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

仕組み

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

‍

‍

‍

‍