記録 #DAY04~6 tips1

プロトタイプ内容

・PCやデバイスによってユーザーが使用する画面サイズは様々に想定されるので、デザインの際にも画面サイズを考慮しながら制作することがとても重要。日本における画面サイズのシェアを調べると、画面解像度 幅1920(px)×高さ1080(px)が全体の25%前後と最も多いですが、幅1366(px)×高さ768(px)も14%前後とまだ一定以上のユーザーが使用しています。また、ユーザーによっては、ブラウザを全画面表示しない場合もあるので、一般的には以下のサイズで画面を設計するのが望ましいとされています。

✅コンテンツ幅は1000px前後に設定する
✅ファーストビューに表示させたい要素は、なるべく高さ550pxくらいまでに入れるようにする
※ただし、背景画像などブラウザ幅が小さくなった時に見切れても問題ないものは画面全体に配置してもOK。

色関係

WEBサイトの印象を決定付ける配色選びはWEBデザインにおいて、重要な役割を担います。
制作の中での要件やターゲット伝えたいことなどを前提に選びましょう。
なのでまずは「色の意味」であったり「色が与える心理状態」などの部分を予習・学習してみましょう！
それら要件からメインとなる色を決めていきます。
多くの場合ロゴのカラーやコーポレートカラーなどから定めていきますが、
なぜロゴの色が「xx色」なのか。なぜコーポレートカラーが「xx色」なのか。
✅ ターゲット・目的を理解すること
✅ 色が与える影響を調べること
✅ ロゴやコーポレートカラーがある場合はそれらに着目すること

画像には透過度70%~80%ほどで色を被せる。暗めのカラーを用いると洗練されてた感が出る。

SPに関してデザイン

1.重要な情報がFVに収まっているか
・キャッチコピー
・CVボタン
・メイン画像
・人が指で押せるには最小でもheight:42px必要
・左右の余白、左右14~20pxの余白をとっておくのがスタンダード、迷ったら16px。
文字
迷ったら最小サイズは13~14pxであれば特に問題ないと思います。
本文;14px
ボタンラベル；16px
小見出し；20px
セクションタイトル;24px
キャッチ;36px
こんな感じで迷ったら８の倍数、４の倍数で刻んで設定する

レイヤード　option + command [ = 一番下に持っていく