近接の法則を使う
以下引用
関係する情報を近づける
人は位置的に近いものを「関係があるもの」と認識する習性があるそうです。つまり、位置関係を整理するだけで、視覚的に理解しやすいレイアウトを作ることができるのです。
例えば、下図のメニュー。どのドリンク名がどのイラストを指しているのか、すぐに理解できますか？
このメニューは情報の位置関係がまったく整理されていません。
上下左右の余白がほぼ均等になっているので、それぞれの関係性が見えづらくなっています。
では、どの文章とどのイラストが関係しているのか、情報を整理してそれらを近づけてみましょう。
いかがでしょうか。位置関係が整理され、情報を理解しやすくなりました。
このようなレイアウトの原則を「近接」といいます。
近接のポイントは「余白」
大見出しと本文の間、画像と画像の間など、ついついすべての余白を均等にしてしまい、隙間を埋めるようなレイアウトにしていませんか？
余白を何気なく設定せずに、関係する要素同士の余白、そうでないもの同士の余白…という風に、余白の一つ一つを整理し、近接を効果的に使いましょう。
最小本文文字サイズ
◎：16px
可読性に適している
○：18~20px
中・高齢者向けや小学校3年以下など小さい文字が見づらい人向け
○：13~15px
小さめではあるが可読性を保てる。情報量が多いサイト（ブログ系、キュレーション系、マニュアル系など）に向いている。
△：10~12px
福島のお客様では読みづらいと言われやすい。採用する場合は強い裏付けが必要。希望・求められているサイトのスタイリッシュさを実現するのに必要など
補足
最小本文文字サイズはiPhone10(375px)、PC(1280px)共通です。
最小余白
スマホ：上下左右10px
PC：上下10px 左右50px
補足
画面端からの最小余白。あくまで最小の余白のため、これより広くても大丈夫
ボタンのテイストは揃える
枠線の有無、角丸の有無、影の有無、ホバー アニメーションの有無を揃える。
文字数を設定する
ダミー文章を入れる際、目安何文字のテキストを本番で挿入予定かも決めておく。また、目安の文字数を決める際に、参考サイトなどの別サイトから文章をコピーし、想定している目安の文字数が現実離れしてないかを確認する。
補足
記事一覧の記事タイトルの場合、別サイトから記事一覧の記事タイトルを入れてみる。会社概要の理念だったら、別サイトの理念の文章を入れてみるなど。
記事一覧の記事タイトル
サムネイルと本文のレイアウトで、4行以上になる場合は2カラムにしない。
タッチ領域の最小サイズ
ボタンやハンバーガーメニューなど、積極的にタッチをして欲しいパーツは、縦横最小42pxは確保する。
装飾は統一
矢印などの装飾は同じものを使用する
画像の最大占有率
一枚の画像だけで画面の7割を占めないようにする。
備考
背景画像として使用する場合、画像をメインコンテンツとして表示したい意図がある場合はOK
見出し、本文の種類を統一する
見出しや本文のフォントサイズや装飾などを、それぞれの場所によって異なるものをデザインしない。
予めいくつか種類を用意しておき、そのパターンを使い回す。
目安としてフォント種類は
- 大見出し（ページのタイトルなどの大見出し）
- 小見出し１（HTMLで言うh2相当）
- 小見出し２（HTMLで言うh3相当）
- 本文
- 補足文章
など
備考
各フォントの種類はAdobe XDのドキュメントアセットの文字スタイルとして名前を付けて保存しておく。
色を統一する
デザイン作成中にパーツごとでそれぞれ色の設定をしない。
予め使用する色を選んでおき、その色を使い回す。
目安として色の種類は
- メインカラー
- ベースカラー
- フォントカラー
- アクセントカラー
- ボーダーカラー（枠線で使用する色）
など
備考
各色の種類はAdobe XDのドキュメントアセットのカラーとして保存しておく。
余白を統一する
デザイン作成中にコンテンツ間ごとでそれぞれ余白の設定をしない。
予め使用する余白を選んでおき、その余白を使い回す。
目安として余白の種類は
- セクション間の余白
- 最後のセクションとフッターとの余白
- 余白大（各セクションの小見出しとセクションコンテンツの間の広めの余白などで使う用途）
- 余白中（記事一覧の各記事の中くらい余白などで使う用途）
- 余白小（記事一覧の各記事のサムネイル画像とタイトルの間などのグループ内のパーツ間の余白などで使う用途）
- 余白極小（記事一覧の各記事のタイトルと投稿日時の間、カテゴリー同士のより小さい余白などで使う用途）
など
余白を統一する目的としては、「近接の法則を使う」にも関連する。
備考
各余白の種類はAdobe XDのアートボード外でメモとして記載しておく。
角、角丸、丸のテイストを統一する
「色付き背景のコンテンツ」や「枠線のコンテンツ」など、サイト内で「角or角丸」、「角丸を何pxつけるか」は統一させる。
コンテンツごとで角だったり、角丸だったり、角丸の具合のpxが違うというったデザインは統一感がないので行わない。
画像は理由がなければアスペクト比を3:2 にする
画像は理由がなければアスペクト比を3:2にする。3:2にする理由は多くのカメラの写真が3:2で、カメラマンが撮影した写真をそのまま反映できるため。
デザイン上、アスペクト比を変更する必要がある場合はOK。ただし、その場合は写真素材が切り取られる可能性を留意すること。
写真は著作権に気を付ける
商用利用可能なものを使う。撮影した写真は、写真自体がWeb掲載OKか、被写体の人にWeb掲載の許可が取れているかを確認する。
アイコンやイラストのフリー素材はできれば作者、最低限テイストを揃える
サイト全体で統一感を保つため、アイコンやイラストのフリー素材は同一作者のものをサイト全体で利用する。
もし同一作者でカバーしきれない場合、テイストが似ている素材を採用する。
テイストが似ている素材が入手できない場合は、作成するか、該当箇所をアイコンやイラスト無しでデザインできないかを検討する。