-本日のアジェンダ-
1限目
学科 レイアウトデザイン基礎④
課題制作
2限目
学科 レイアウトデザイン基礎④
スマホのカンプについて
3限目
学科 レイアウトデザイン基礎④
課題制作
4限目
学科 レイアウトデザイン基礎④
課題制作
5限目
学科 レイアウトデザイン基礎④
課題制作
本日のテーマ
PCとSPのデザインラフを完成させましょう。
①-5.スマホラフ
各デバイスの画面サイズ
| 端末 | ポイント | Retina | ピクセル |
| iPhone X iPhone XS iPhone 11 Pro | 375×812 | 3 | 1125×2436 |
| iPhone XR iPhone 11 | 414×896 | 2 | 828×1792 |
| iPhone 12 iPhone 12 Pro | 390×844 | 3 | 1170×2532 |
| iPhone XS Max iPhone 11 Pro Max | 414×896 | 3 | 1242×2688 |
| iPhone 12 Pro Max | 428×926 | 3 | 1284×2778 |
今回は、スマホラフを幅414pxで作成しましょう。
【覚えておきましょう！】
画像を書き出す際は2〜3倍にします。写真やアイコンは非破壊データ（パスやスマートオブジェクト化）にして起きましょう。
【作品】オリジナルサイト_20210323_デザインカンプ
※PCとSPのjpgを提出してください。
課題の評価点
①隣接
要素をグループ化しましょう。画像とそのテキストの関係性の様に、関連する項目は近くに置く。別の項目とは距離を取る様に。
②グリッド
左寄せ、中央寄せ、右寄せ。揃えるとこを決めましょう。
頭を揃えましょう。
③ルール
同じレベルの物はデザインにルールを持たせましょう。
④コントラスト
文字の大きさや配色に強弱を付けましょう。
タイトルと本文のジャンプ率を意識する。色の組み合わせは読みやすいコントラストにしましょう。（例：黄色に白は避ける。）
⑤F型
ユーザーの目線の動きを意識しましょう。左から右へ、上から下へ目線が動きます。ファーストビューでサイトの要点が伝わる様に。