【 デザイン4大原則 】

というように、webデザインは感覚ではなく原則や法則に基づいた理論。

ホームページのサンプル集を見ていても、すごくきれいに整って見えるものや、情報がすっと入ってくるデザインってありますよね。

そのようなデザインを作るために必要なのは、優れたデザイン感覚より、人間の視線を誘導するものや、無意識のうちに優先度がつけられるような理論に沿ったデザインです。

このブログではデザインの基本である4大原則【近接】【整列】【反復】【対比】について解説していきます。

【近接】：関連する情報を配置でグループ分け

近接は、関連する要素の配置を近づけることで視覚的にグループ分けすることをいいます。

例として、このブログのTOPページのSERVICE一覧を見てみます。

HP制作、LP制作、サイト修正という三項目に分かれていることがパッと見て分かります。

このように、同じ情報を持つ要素間の間隔を短くして、異なる要素同士に距離をもたせることで、視覚的に情報をグループ分けをすることを【近接】といいます。

【近接】のpoint

・同じ情報を持つ要素の距離は短く

・異なる情報を持つ要素の距離は長く

【整列】：情報の配置に統一感を出す

整列は、グループ分けされた情報の配置や色などのルールを設けて統一することを言います。

例として、この記事の目次に使った画像を見ていきます。

下の画像のように、各グループの情報の配置がバラバラだと何が同じ情報で何が異なる情報なのか瞬間的に捉えることができません。

これは配置に言えるだけでなく、例えば使用するフォントやその色、太さなどそれぞれに統一のルールを持たせることで、瞬間的に情報をとらえることができます。

【整列】のpoint

・分類された情報に統一のルールを設定する

・配置は右寄せ、左寄せ、中央寄せなど揃えるように配置

【※整列の悪い例】

【反復】：同じレイアウトを繰り返す

反復は、同じ要素ごとに同じレイアウトを繰り返すことを言います。

下画像の例では、アイコン（中ぴ揃え）、タイトル（中央揃え、文字サイズ中）、詳細（左揃え、文字サイズ小）という同じデザインルールが繰り返されています。

このように、同じデザインルールを反復することで、瞬時に同じ情報を持っていることが瞬間的に捉えられるようになります。

注意点は、一つのデザインルールをHP全体で反復すると面白味を失ってしまうことがあります。そのような際は、複数のデザインルールを設けることで統一感を演出しつつも単調になりすぎないデザインにしましょう。

【反復】のpoint

・同じ情報持つ要素には同じデザインルールを設ける

・デザインが単調になりすぎないよう、HP全体に複数のデザインルールを設ける

【対比】：情報に優先度をつける

対比は、何が重要な情報なのか、何を一番先に見てほしいのかデザインで強弱をつけて情報に優先順位をつけることを言います。

例として、下のタイムセールを表すデザインで、左のデザインは全ての情報に強弱がなく、見てもらう人間に一番何を伝えたいのか、重要な情報をとらえることができません。

右のように、まず【SALE】というお得な情報を提供していること、そして次にそれが【どのくらいお得になるのか】を優先的に表現しています。

このように、フォントのサイズや色に強弱をつけることで、情報に優先順位をつけ知ってもらいたい情報を優先的に捉えるようにすることができます。

【対比】のpoint

・情報に優先順位をつける

・優先順位の高いものと低いもので、フォントサイズ、色を変えることで強弱をつける

まとめ

このブログでは、デザイン４つの原則を解説しました。

この基本的な原則は、広告やWebサイト等身の回りの様々なところで利用されています。

日常の中でこのような原則を意識してみても、面白いかもしれませんね。