こんにちは！デザイナーのタニグチですー。
入社して約半年が経ちました。頑張ってます。ただひたすらに。
特にサイト上のレイアウトをする上でのノウハウに関してはその重要性をひしひしと感じ始めています。勉強しなくては…。
今週は（自分が忘れないためにも）webデザイン上のレイアウトで基本となっている「4つの原則」にフォーカスして紹介していこうと思います！
近接の原則
近接の原則とは「関係性の強い情報を近づけ、関係性の低い情報同士は遠ざける」という原則です。
例えば、上のように関連性のある情報と無い情報を同じの間隔で配置した場合、テキストがどのコンテンツの説明しているものか一目では判断しづらいですよね。
関連性の高い要素同士を近づけ、関連性の低い情報同士は遠ざけました。これで各要素の関連性が明確に判別出来ます。
整列の原則
整列の原則とは、位置を揃える。色を揃える。文字の大きさを揃えるという原則です。近接の原則に則って情報のグループ化を行い、さらに印象よくまとまったサイトに見せるために、各要素を整列させていく作業は必須となります。
各要素をセンスよく配置するコツはコンテンツ間に見えない線を引く事が重要です。例えば写真画像とテキストの上辺等…ケースバイケースで揃えるべきものが変わってくるのが難しいところですが…。
対比の原則
対比の原則とは「各要素の重要度を考慮し、差別化する」という原則です。近接の原則、整列の原則が「まとめる」という事に対し、対比の原則ではあえて差別化し要素にメリハリを持たせる事で、閲覧者の視線を重要コンテンツに誘導する事が目的となっています。
重要度に合わせメリハリを付けました。この作業はバナーデザインでも重要となってきます。
反復の原則
反復の原則とは「同じ構成・デザインの要素を繰り返し使用する」という原則です。サイト上で統一感を出す事を目的としています。
例えば上のようなECサイト(MADFOOTのサイトです)では製品一覧で同じフォーマットの要素を他数掲載しますが、このような場合に製品ごとにグループ化し、それらを繰り返し使用する事で、サイトにリズムを持たせる事が出来ます。このサイトは一貫性のある良いデザインですね！
これらの法則、デザイナーはほぼ無意識でできて当然の事ですが、自分はまだまだ意識して改善していくべき事柄です…頑張ります。
