デザインの基本【レイアウト】４つの基本原則

【近接】Proximity

近接とは、関連性の高い情報をグループごとにまとめて配置することです。たくさんの情報があるときや複雑な情報をわかりやすく見せることができます。関連性の高い要素を１つのグループにまとめることで直感的に伝わるデザインです。

近づける、遠ざける

レイアウトは、グループを意識して近づけたり、遠ざけたりするだけで見やすくなります。情報の関連性を意識して整理しながら配置していきましょう。

区切る、囲う

グループを強調したいときには、区切ったり、囲ったりします。間隔をあけるだけでは、区別が弱いときや、差別化したいときに有効です。

【整列】Alignment

整列とは、ひとつひとつの情報をきちんと揃えて配置することです。たくさんの情報を見栄え良く見せることができます。要素を一直線上に揃えることで情報もスマートに伝わるデザインです。

はしっこは先頭揃え

レイアウトは、はしっこを先頭揃えにするだけで見やすくなります。基本的には、左と上を揃えることを意識するだけで見た目がすっきりします。

安定感のある中央揃え

文字が少ないときには、安定感のある中央揃えにします。文字数が比較的少なくゆったり見せたいときに有効です。

【対比】Contrast

対比とは、重要性によってメリハリ（強弱）をつけて配置することです。たくさんの情報を主役と脇役のようにわかりやすく見せることができます。差をつけて目立たせることで重要な情報が伝わりやすくなるデザインです。

大きくする、小さくする

レイアウトは、大きくしたり、小さくしたりするだけで伝わりやすくなります。伝えたい情報の重要性を意識して強弱をつけることで目に留まりやすくなります。

変化を使って目立たせる

情報がぼやけてしまうときには、色やあしらいを使って目立たせます。伝えたい複数の情報の中でも、明確に伝えたいメッセージがあるときに有効です。

【反復】Repetition

反復とは、同じデザインルールを繰り返して配置することです。情報量が多いときに一貫性を持たせることで読み手の負担も少なく見せることができます。同列の情報は、同じデザインルールを繰り返すように並べることで規則性のあるデザインになります。

１つ型を作ってくり返す

レイアウトは、１つ型を作ってくり返すだけで見やすくなります。同列の情報を並べる場合などでテンポよく整って見えます。

色だけ変える

同じデザインルールの中でも、一部の色だけを変えます。比較するときなどに少しだけ差をつけたり区別したいときに効果的です。