TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

DESIGN

デザインの基礎 / 意識するべき4つのポイントを解説





こんにちはトミー( @TOMCREATIVE106 )です!

今回はレイアウトに関するデザインの基礎を解説していきたいと思います。

自分で作ったものがなんかしっくりこないとか、
なんかださくなってしまうと思う方は今回ご紹介することから意識すれば、
少なからず見やすく情報整理がされたデザインになると思うので、是非ご覧になっていただけたら嬉しいです。

デザインとは何か!

まず根本的な所から考えていきたいと思います。

デザインとは。

人間の行為(その多くは目的を持つ)をより良いかたちでかなえるための「計画」も意味する。

引用: フリー百科事典『ウィキペディア(Wikipedia)』

分かりやすく言うと
デザインされたものは人間が見るものであり、
そのためにより良い形で設計していくものが「デザイン」ということです。

じゃあデザイナーは何を意識して作っているのかというと、
見る人に一番わかってほしいことや伝えたいことを意識して、
要素に「優先順位」をつけて、紙面やWEB上で設計をおこなっています。



デザインは足し算ではなく引き算をしてみよう

人って多くの情報を頭にインプットするのって中々難しいと思います。
それを解決できるのが「デザイン」です。

ここで一つ例をお見せします。

これは何も手を加えていない「営業時間」のテキストです。

この状態だと文字数が多くて、
内容を読み解くのに少し時間がかかってしまうと思います。

人ってそれだけでストレスを感じて、読みたくないって思ってしまいます。

そうなった時にデザイン初心者の方は、「足し算」をしがちです。

独特なフォントにしてしまったり。

細かく複数の色で分けてしまったり。

そうすると逆に読みにくくなってしまいます。

こういう時はまず、「引き算」をしてみましょう。

オレンジの「から」の部分を、

文字を減らすという意味で記号に変換してみます。

次に緑の「曜日」とか祝日の「日」の部分がなくても、人は何曜日か認識が可能です。

なので削除します。

そうすると、要素が減ったことによって3つのグループに見えるようになりました。

ただ営業時間だけじゃなく、周りにもデザインは施してあるとおもうので、
さらに装飾をして親切な見た目にしてあげると。

営業時間という一つのグループになり、
その中で2つのグループに縮小ができ、見る人が、一段と情報処理しやすくなると思います。

すごく簡単に言うと、このような作業の集合体がデザインで、
プロのデザイナーは、このようなことを意識して情報設計をしています。



基礎中の基礎「デザインの4原則」

「デザインの4原則」というものはご存知でしょうか。
これを意識すればとても見やすいレイアウト、デザインにすることができます。

デザインの4原則とは
「整列」「隣接」「強弱」「対比」という4つの法則です。

一つずつ解説していきます。

整列

デザイン要素を整列することによって、
スッキリとした見た目になって見やすいデザインにする効果があります。

このように整列されていない四角が並んでいることによって、
ずれている四角に、何か意図的な意味を感じられると思います。

そうすると情報量が多く感じられてしまい、情報処理に時間がかかってしまいます。

「整列」で大事なことは、「見えないライン」を意識して制作することです。

これを綺麗に整列してみます。


見えない2本のラインがみえてくると思います。

こうすることによって情報量が減り、スッキリとした見た目にすることができます。

よく名刺などである配列で言うと、
左のラインだけでもしっかりそろえてあげるとスッキリした見た目になります。

また左揃えと右揃えの混合なんかもよく見ますよね。

整列のポイントは、
揃えるところはしっかり揃える。崩すところは崩す。
という割り切りが必要で、あまり意図がない部分はしっかり整列させることが大切です。

隣接

隣接というのは、
関係性の近い要素ををひとかたまりに見えるようにデザインすることで、
要素のグループを視覚的に見せることができる効果です。

このように野菜や果物の下に名称があった場合
赤線の範囲を切り取ると、上下どちらに名称がかかっているのか分かりづらいと思います。

隣接をうまく活用するには、余白がとても重要です。

関係性があるものは余白を狭く配置し、
関係ないものは広くとってあげるだけでわかりやすくなると思います。

ちなみにIPhoneのホーム画面もこの法則にのっとって見やすくデザインされています。

このように人が見た時に、瞬時にわかるように隣接を活用していくことがとても大切です。

対比

「強弱」とも言われていますが、簡単に言うと「メリハリ」のことになります

これが主に優先順位と大きく関わってくる部分です。

各要素の違いをはっきりと見せてあげることで、
どこから見れば良いのか、どこが重要な部分なのか、優先順位をしっかり示してあげることができます。

今回のサムネイルも対比を使用しています。

デザインの「基礎」がメインのコンテンツなので、「基礎」という字を大きくしています。
更に言うと、見えない2本のラインを意識して「整列」も活用しています。

後は見出しとか段落とかに対して対比を活用させてあげると、
優先順位がはっきりとし見やすいデザインになったと思います。

 

反復

反復というのは
同じ種類のものは同じデザインで繰り返し使用することで、一貫性をもたせる効果があります。

WEBサイトを例に出すとヘッダーとフッターで共通の物が多いですよね。

それはどのページに行っても共通のものがあるため、
同じサイトにいると相手に伝達する効果があります。

もっと深堀すると、
ヘッダーフッターが一緒でも、下層ページだけメインビジュアルの大きさ、見出しの位置などを固定すると、
TOPページとの差別化もでき、このサイトの下層ページという情報を相手に伝えることができます。





おわりに

以上がデザインの4原則というものです。

動画では以前紹介した名刺デザインを例に、
この4原則がしっかり反映されているかご紹介しているので、
是非合わせてご覧いただければと思います。

少しでも参考になれば幸いです。