ブロックチェーン・AI・システム開発の株式会社INDETAIL

デザイナーでなくても知っておきたい!レイアウトデザインの基礎。

2014.04.24
Peeko

レイアウトデザインって難しい。
日々そんなことを考えています、Peekoです。

今回はデザイナーの基礎である4つの原則を紹介したいと思います。

・デザイナーではないけれど、デザインについて知りたい。
・見やすい資料を作りたい。

そんな方におすすめです。

いいデザインには使われている4つの基本原則

近接

近接とは、関連する項目をまとめる(グループ化する)ことです。
要素をグループ化することによって、ぼんやりとした断片の集まりではなく、一つのまとまったグループに見えるようになります。

 

Before                  After
proximity

Beforeはただ適当に配置されただけの文字です。
それぞれ個の情報しか無いように見えますが、Afterのように関係のある項目でまとめてみると「動物」と「花」という2つのグループに分かれていることがわかりました。

 

 整列

整列とは、ページ上のグループの位置や大きさなどを揃えて意識的に統一させることです。
整列させると書いてある内容がわかりやすいですし、何より見た目が整っていてきれいです。

 

Before                  After

alignment

Beforeはグループとしてはまとまっていますが、どんな種類の動物(または花)があるか分かりにくいです。
Afterは文字の大きさを合わせ、左揃えで並べただけですが、比べると格段に認識しやすくなりました。

 

反復

反復とは、同じデザインスタイルを全体を通して繰り返すことです。
同じデザインスタイルを繰り返し使うことによって「一貫性」を持たせることができるので、より認識しやすくなりますし、統一感がでます。

 

Before                  After

repetition

Beforeは文字の大きさやフォントがバラバラのため、視覚的に認識し辛いです。
ネコやバラが大きいので目立ちますが、情報がスムーズに頭に入ってこない感じがします。
Afterはデザインスタイルを同じにしているため「まず動物と花という大項目があって、その下に小項目として種類の名前が書いてある」と整理した状態で認識できます。

 

コントラスト

コントラストとは、見ている人の目を惹きつけ、視覚的な面白さを加えることです。
主に、文字の大きさや色などを変えることで強弱をつけます。
コントラストは大胆にメリハリをつけることが大切です。

 

Before                  After

contrast

Afterのようにコントラストをつけることにより、Beforeのただの文字列に比べ、メリハリが付き視覚的に面白みがでました。
また、一層グループの結びつきが強くなったと感じられます。
メリハリのない文字列は目が滑ってしまい、うっかり重要な内容を見落としてしまいますし、退屈なページは読む気がなくなってしまいがちです。

 まとめ

「近接」「整列」「反復」「コントラスト」4つの基本原則で気を付けなければならないことは、どれか一つの原則が独立して成り立つことはなく、4つの原則が互いに関連し相乗効果を生むということです。

レイアウトデザインの4つの基本原則を紹介しましたが、無意識に使っていたことも多かったのではないでしょうか?
無意識に使っていた原則を意識して使うことで、これまで作成していたエクセルやパワーポイントの資料が見違えるように見やすくなります。

また、この4つの基本原則を意識して、いいなと思うデザインを見てみると今までとは違った見え方、発見があるかもしれませんね。
参考文献
ノンデザイナーズ デザインブック  著者 Robin Williams

「いいね」ボタンを押すと、最新情報をすぐに確認できます。