【デザイン】今さら聞けないデザインの基本4原則
はじめに
今回はデザインの基本4原則について解説していきます。
デザインを本業にしていなくとも覚えておいて損はない知識なので、ぜひ最後までご覧になってください。
デザインの基本4原則とは
デザインの基本4原則は、Webページやスマホアプリの画面、プレゼン資料やドキュメントなどで使える汎用的な原則で、これを意識することで 「読みやすい。分かりやすい、伝わりやすい」 レイアウトにすることができます。
その名の通り4種類の原則があり、それぞれ 「近接」、「整列」、「反復」、「強調(記事によっては対比、コントラストとしている箇所もあり)」 と呼ばれています。
それぞれどういった内容なのかを、実例を見ながら解説していきます。
今回扱う実例
以下のようなWebページがあったとします。
私は趣味が読書で特に推理小説が好きなので、初心者の方に紹介したいイチオシの作家と作品をまとめたページになります。
どんなにデザインに疎い方でも、これが悪いデザインだと直感的にわかると思います。
それは突き詰めていくとデザインの基本4原則が守られていないためです。
それでは順番に、原則に当てはめた修正を適用していきましょう。
①近接
近接とは、 「関連性の高い情報は物理的に距離を近づける」 ということです。
逆の言い方をするなら「関連のない情報同士は余白で適度な距離を保つ」です。
今回の例でいうと「作家と作品」は関連性が高いので、それらを一塊のグループにします。
その上で、グループ同士の距離を少し離します。
こうすることで、表示されている情報がどういうまとまりなのかが直感的に理解しやすくなります。
②整列
続いて整列です。
整列は、 「各情報要素を揃える」 ことです。
最も分かりやすい例が「左寄せ、中央寄せ、右寄せ」などです。
今回は、先ほど近接でグループ化した「作家と作品」の表示位置を揃えます。
作家名が左寄せになりました。
こうすることで、表示されている内容が見た目から伝わりやすくなります。
③反復
さらに反復です。
反復は、 「各要素にルールを定めて、それを繰り返す」 ことです。
何回も同じルールで情報を繰り返すことで、「◯◯という表示は××を意味している」ということが理解しやすくなります。
今回の例では、「作家名の頭に付ける記号」や「作家名や作品名のスタイル」がバラバラなのでそれを統一します。
全体的に統一感が生まれ、「頭に◯が付いている所が作家名だ」と理解できます。
④強調
最後に強調です。
これは、「より伝えたい情報を視覚的に明確にする」ことです。
例えば色を変えてみたり、フォントやサイズ、太さを変えてみたり等です。
今回は作家名を色付けして強調してみます。
「おすすめの作家名」という情報が強調されました。
ここまでの内容を確認できるWebページを公開しました
おまけとして、今回紹介した内容を順番に追体験できるWebページを公開しています。
ページ下部に4原則に対応するチェックボックスが用意してあり、それらを組み合わせることで画面にどういった変化が現れるかを確認できます。
まとめ
今回はデザインの基本4原則について紹介しました。
デザインの知識がなくとも、この内容を守るだけで見やすいレイアウトが実現できます。
また、冒頭で述べた通り、プレゼン資料などに適用することもできるため、幅広い用途に対応しています。
意識するだけで見栄えがグッと良くなるので、ぜひ実践してみてください。
Discussion