パッと伝わる分かりやすいデザインの作り方

わかりやすいデザインってどんなの？

すぐ理解できるもの？
図解がで説明されているもの？
やさしい言葉を使っているもの？


あなたはどんなデザインだと思いますか？

この記事でわかること

デザインにはいろいろあります。
本当にいろいろ…

デザインの基本について調べるだけでも
たくさんの情報が「私」の視界を埋め尽くし
めいいっぱいに飛び込んできますよね。
（このサイトがあなたの中で光ってたらいいな…）

デザインの法則とか、
これだけは覚えておきたい制作のコツとか
さまざまですね。

私もデザインを作っていて、
「なんかしっくりこないな」って時に見返したりします。

そして、いろいろ試していて、
「○○があれば分かりやすくなる！」
と分かったことがありました。

この回では、それについて
かんたんに伝えていきますね。

デザインの役割ってなに？

分かりやすいデザインを作る（テクニックの）前に、
まずはデザインの役割のことを
お話しなければなりません。

これを意識して作る・作らないでは
大きな差がでるかです。


デザインには、
大きく２つの役割があります。

ひとつは装飾、
もうひとつは情報伝達です。

「装飾・アート」の役割としては、
主にグッズや雑貨など商品そのものが多いですね。

「情報伝達」としての役割は、
主に広告やパッケージなど
日常的に身の回りにたくさんあって、
日々消費されています。
（消耗品とは違いますよ）

主に、パッケージやポスター、LPやバナーのようなもの。


あなたが作ろうとしているデザインは
ー装飾・アート
ー情報伝達
どちらでしょうか？

情報伝達のものが多いのではないでしょうか？

私も、装飾を目的にしたデザインよりも
情報を伝えるためのものを作ることが多いです。

情報伝達の目的ってなに？

あなたが作る/作ろうとしているデザインは、
きっと「情報伝達」が多いと思うんです。

だから、ここからは
「情報を伝えること」が目的のデザインについて
お話を進めますね！

さて、必要なものを伝える場合
相手に伝わらなければ意味がないですよね？

「これ買ってきて～」
って言われても
何を買ってくればいいのかなかなか分かりませんよね。
（ご家族とかでツーカーの仲なら話は別ですが（‘ε’ ）

こんな風に、伝わるためには
わかりやすく&理解しやすくなければ意味がないです。

これ、情報伝達するデザインの
最初の一歩であり、
超大事なことでもあります！

デザインの役割についてお話したところで、
次は、いよいよ分かりやすいデザインのコツを
お届けしていきましょう！

規則性が分かりやすさのカギ

結論からいいます！
わかりやすいデザインのためには
「規則性」をつくること。

規則あるものは、
私たちの脳も喜ぶ言われます。

なぜなら規則があると、
理解しやすくなる→覚えやすくなるからです。

つまり、「規則がある＝分かりやすい」と言えます。

「じゃあさ、じゃあさ、」規則ってどうやって作ったらいいの？

こんな疑問、今きっとあなたの中で浮かんだのでは？

次から説明していきましょう！

規則その1 　はじまりを揃える

カッコよく言葉にするならば
「グリッドを意識する」です。

文字や枠の端を揃えて配置すること。

下の画像をみてください。
例えば、こんな感じ。


左は、ひと目見ても
バ～ラバラ！う～わあ！
あなたも、きっとそう感じましたよね。

あなたがデザイナーとして活躍されていたら
きっと気になって手直ししなくなるレベルでしょう( ((( ͡°　 ͡°
（はい！私はうずうず…あなたも仲間だと嬉しい…）

でも！
右は、文字が何を示しているのか・
説明しているのかが、
ひと目でわかります。

そして、何より左揃えになっているので
説明それぞれのスタート地点が
どこなのかも分かりやすく見やすいです。

このように、揃えて規則をつくることで、
上から下へ、左から右へと
視線の誘導もできるんです。

画像の右の場合は、キレイに並んでいるので
上→下への自然な視線の流れができています。

そして、左揃えによって
説明のスタート地点が分かるので、
自然と左→右へと
視線を動かしてもらえるんです。

規則その2 　繰り返す

これは、デザインの4大原則のうちの一つですね。
だから、もしかすると、あなたにとっては
耳にタコができる内容かもしれません…が
少しお付き合いを！

同じパターンのものを繰り返し置くことで、
同じ種類のものだとわかりやすいです。

また、視線の動き・理解という観点からみても、
日常で経験してきた慣れによって
感覚的に分かりやすくなります。

言葉だけでは、わかりにくいので
下の参考画像をみてみましょう。

このような感じです。

左側は、配置に動きがあって
文字の位置や四角（＝画像を現す）のサイズもバラバラ。
だから、まとまりなく見えてしまいます。

一方、右側は、スッキリ！！！
なんといってもキレイですよね。
（見ている私も心地よい！！！）

四角（＝写真）のサイズもそれぞれ同じ大きさなので、
四角＋文字を1グループとして
繰り返して並べています。

整ったレイアウトなので、
脳が次を自然と予測しやすいです。
すると脳のエネルギー消費が少なくて済みます。

そうして、そのレイアウトをみた相手は
「内容を見ようかな」という気持ちになりやすいです。

左と右を比べて、あなたはどちらを読みたいと思いますか？

赤い矢印のように
間隔も同じようにとると
より見やすくてス～ッキリとした
レイアウトになりますよ。

規則その3　配色でグループ化

3つ目は、配色で規則をつける方法です。

こちらもまずは
下の画像をみていただきましょう！



配色でグループ分けして、
さらに色ごとにわけて並べるというシンプルなスタンス。

たったこれだけでも、
いろいろなものが散らばっている場合と比べると
読んでもらえる可能性がぐんと上がるでしょう。
（画像は、繰り返しもあるので一層読みやすくなっていますよ）

例えるなら、幼い子が次から次へと遊んでは
無造作に散らかったぐっしゃ～～っなおもちゃを
キレイに決まった場所に片づけた後のような
スッキリ感！！！

整えられたお部屋には
積極的に入ろっかな～ってなりますよね？

裏技1　分かりやすい配色とは？

ちなみに、配色は
同じカテゴリーのものに同じ色を使ったり、
画像のように同じ色で少し明るさ（明度）を変えて
グループを並べる方法もありますよ。

明度を変えて並べる場合は、
だんだんに色が薄くなる（または濃くなる）並べ方がおすすめです。


ただ、たくさんのグループを色でわけることは
個人的にはおすすめしません。

なぜなら、あまりにも色が多すぎると、
色で分けているということが
かえって分かりにくくなることもあるからです。

目的なく色がたくさんありすぎると、
それだけで相手は
見る気持ちを削ぐ場合もあるので
「自分がそれを見たとき、はたして読みたいと思うか」
「その情報を知りたいと思うだろうか」
ということを基準に検討してみてくださいね。

裏技2　多色（たくさんの色相）で分かりやすく表現する方法

ちなみのちなみに、
どうしても多色並べるというときは、
虹色順の並べ方がおすすめしたい…！

デザインした画像が、
ほかの画像と並んだとき
小さく表示されたとき
など、そんな場面で目立ち、
より相手に目を留めてもらいやすくなるからです。


虹色というのは、色相環の順番です。
大雑把にいうと
「赤色→オレンジ→黄色→緑色→青色→藍色→紫色」という順番です。

参考に一般財団法人 日本色彩研究所さんの
色相環の参考サイト（項目名：PCCSの色相）を載せておきますね！
よかったら参考にしてみてください～

裏技3　一色（1色相）で分かりやすく表現する方法

ここまでは多色でしたが、
反対に一色のときは・・・？

場合によっては
1色しか使えない…
とか限られたときってありますよね。

これって、例えば印刷方法でもよくあるんです。
1色でシルク印刷をするときとか。
「シルク印刷１C」って言ったりします。
（膨大な情報伝達のツールではありませんがトートバッグとかでよくあります）


ちょっと話がズレましたね…

印刷のことはさておき、
雰囲気づくりなどで紙媒体とか
一色しか使えないというときでも、
明度や彩度を変えていいというなら

明度・彩度を変えて
法則を決めて並べるものひとつの方法です。

ただ、本当に一色だけというとき、
繰り返すことのできるポイントはないかを考えてみてください。

下の画像は、形を繰り返しています。

形の他に考えられるものは、
・太さ
・サイズ
情報＋余白
なども考えられます。

まとめ

ここまで、わかりやすいデザインのコツ
について伝えてきました。

ポイントは、
デザインのなかで規則をつくること

▽規則の作り方はこのような感じでしたね▽
●揃える
●繰り返す
●色でグループをつくる
● 色＋繰り返す
●サイズ・太さ・形＋余白＋繰り返す

規則性があると、見た相手が
「次にどのような情報がくるか？」を
予測できるので分かりやすくなるんです。

すると、見てもらいやすくなります。

情報を伝えるデザインを作るときは、
「規則性」を大切にしてみてくださいね。



みなとんでした♪

《注》
このブログは個人的な研究や視点・観点をもとに書いています。
したがって、読者さんのデザインや広告内容の売上等を確実にアップさせるというものではありません。
あくまでこんな工夫があるんだなという観点・視点の一つとして読んでくださいね。
たのし～く書いているので、あなたもたのし～く読んでくれたらうれしいなww乁(´꒳`乁)