ノンデザイナーズ・デザインブック 整理とアウトプット
お盆期間(2025/08/09~2025/08/017)にノンデザイナーズ・デザインブックを全て読んだのでその整理とアウトプットをここに残します。
近接
近接は類似する要素をグループ化することです。見出しと本文、ラベルと入力欄などが挙げられます。要素をグループ化するにはまずは掲載する情報を洗い出す必要があります。洗い出すことで散らばっている情報を類似したグループにまとめることができ、結果として近接を満たすことができます。近接を適用することで情報をグループとしてまとめることができる、空白を確保することができるなどの利点があります。以下の例は近接を適用したものとなります。見出しと本文を関連のあるもの同士でグループ化しています。
整列
整列は簡単に言えば要素を揃えることを指します。中央揃えはラインが中央にまっすぐあるため整列を満たします。しかし、テキストによる左右の長さがバラバラなため、余白が確保しづらく、弱い整列となります。左揃え(テキストなど)、右揃え(金額など)を適用すると強い整列となり、情報がより整理されます。以下の例は整列を適用したものとなります。左揃えにすることで強い整列を実現しています。
反復
反復は余白、罫線、フォントなど意識的に繰り返せるものを指します。見出しのフォントサイズとウェイトを反復させたり、flexでgapを指定してアイテム間の余白を統一するなどが挙げられます。反復は反復させる対象が一貫性を持っていなくても共通性があるように見せてくれます。例えば以下の例では小見出し(ANCや軽量性など)の左にそれぞれ異なるアイコンを配置していますが、反復しているように見えます。各項目間の余白も統一しているためこれも反復とみなすことができます。小見出しのフォントサイズとウェイトも反復しています。
対比
コントラストはデザインにアクセントをつけるためにあります。前述した近接、整列、反復を適用してもデザインがパッとしない、素人っぽさが抜けないことがあります。それらは要素間の対比が弱い可能性があります。例えば画像とテキストを横配置した要素をクロスさせて表示させることはよくあると思います。これも対比とみなすことができ、デザインにおいて飽きっぽさをなくすためにあると思われます。
コントラストは大胆に行う必要があります。特にフォントにおいては類似したウェイト、サイズ、書体などを使用すると弱いコントラストとなり、一貫性が失われる可能性があります。
フォントにおけるコントラスト
フォントはサイズ、太さ、構造、フォーム、方向、色でコントラストを作ることができます。また強いコントラスを作るにはそれらの要素を複数組み合わせる必要があります。
1. サイズによるコントラスト
フォントサイズによってコントラストを作ります。見出しと本文でフォントサイズに差をつけています。
2. 太さによるコントラスト
サイズによるコントラストでは見出しと本文の太さが類似しているため、見出しを太くしました。
これによりさらに強いコントラストが生まれます。
3. 構造によるコントラスト
これは2種類以上のフォントを使用することでコントラストを作ります。フォントはなんでもいいわけではなく類似しているフォントは弱いコントラストとなるため避けた方がいいかもしれないです。
サンセリフ体とセリフ体などを組み合わせると強いコントラストとなります。
4. フォームによるコントラスト
フォームとは文字の外形を指します。英語なら全て大文字で記載した場合は長方形となります。また、日本語フォントも長方形となります。全て大文字にすると一文字ずつ読む必要があるため長文には避けるべきです。ですが、キャッチコピーや見出しを全て大文字、サブテキストや本文を小文字にすればそこでコントラストが生まれそうです。
5. 方向によるコントラスト
これはテキストの方向によってコントラストを作ります。キャッチコピーを縦配置したり、コーポレートサイトのキャッチコピーをサイン風で右斜めにするなどが挙げられます。
6. 色によるコントラスト
人間の目は暖色に強く惹かれ、寒色は人間の目から遠ざかります。赤などは少量でも強く惹かれるため使用する際は注意が必要です。寒色は広い範囲に使用しても疲れないため両者の使い分けが重要です。
今回はここまでとなります。
Discussion