「Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集」は 2,022 年の 3 月の 17 日に Amazon で購入したみたい。
これまでに何度か読んだ。
目次
メモ
人の視線の流れについて。
14 ページに人の視線の流れについて記述されていた。
人の視線の流れ ( Z 型の法則、 F 型の法則)
人はサイトを見る時に Z や F の形に沿って見ていくと言われています。
Z 型の法則は、初めてアクセスしたサイトで全体を見る時のパターンです。
視線が左上から右上へ流れた後、左下から右下へ流れます。
F 型の法則は、具体的な情報を得るために内容を読む時に見られるパターンです。
視線が左から右へ流れた後、次は元の開始位置より少し下から始めます。
以降それをページの最後まで繰り返します。
モニターサイズについて。
17 ページにモニターサイズについて記述されていた。
左図は StartCounter が出している日本国内のモニターシェア統計です。
2,021 年 3 月の時点で一番多いのがフル HD サイズの 1,920px x 1,080px 、
そして HD サイズの 1,366px x 768px と続いています。
この数値から考えると、フルサイズで表示させたい画像は最大 1,366px 以上で切り出せば、多くの環境できれいに表示させることができます。
タイポグラフィについて。
18 ページにタイポグラフィについて記述されていた。
欧文書体の場合、行間は 120% ~ が良いみたいで、日文書体の場合、 150% ~ 200% が良いみたい。
日文の行長は 40 文字以内が良いみたい。
行間を調整して文章を読みやすくする
文字サイズやフォントによっても左右されますが、
欧文だと 120% ~ 、日本語だと 150% ~ 200% 程行間を開けると読みやすくなると言われています。
また、アクセシビリティのガイドラインでは 1 行内の文字は、全角の場合 40 字以内を推奨しています。
フォントサイズにメリハリを付けて文章にコントラストを作る
一般的な本文のフォントサイズは 14px ~ 16px が多く、
見出しは 2 倍以上のサイズを設定し、文字の太さでも差別化をするとわかりやすい見え方になります。
色の割合について。
62 ページに色の割合について記述されていた。
色は使用する面積で印象が変わるので、
色の割合はそれぞれベースカラー : メインカラー : アクセントカラー = 70 : 25 : 5 の割合で使うとバランスの取れた配色になります。
デザインの組み立て方について。
182 ページにデザインの組み立て方について記述されていた。
1. ヒアリング クライアントの要望や現状のサイト分析を行う
2. 調査分析 競合サイトを調べる
3. サイト設計 (技術仕様書・サイトマップ) 全体の技術仕様やページ数を決める
4. 画面情報設計 (ワイヤーフレーム作成) 各ページに掲載する情報や機能をレイアウトに落とし込む。
5. デザイン 全体のデザインとパーツデザインを作りこんで印象を肉付けする
6. コーディング以降の工程に続く