伝わりやすい!デザインのポイント

Pocket

こんにちは!ユイPです。季節はあっという間に夏ですね!
晴天が恋しいので早く梅雨が明けてほしいものです。

今回のテーマはタイトルの通り「伝わりやすい」デザインです。
伝わりやすい、見やすい、わかりやすい。そんなデザインをする時のポイント(フォントの選び方や、色づかい、配置など)をご紹介します。


≪伝わる!文字編≫

フォントは太めのものを使う

これは前に文字についての記事を書いた際にも少し書きましたが、ゴシック等の太いフォントは視認性(目で見たときの確認のしやすさのこと)が高いのでとにかく見やすいです。
見やすさ重視の場合は太くて力強いフォントを使いましょう。

大小の差をつける

一番見せたい文章と、補足的な文章がある場合どちらも似たような大きさだと見せたい部分が真っ先に目に入ってきにくいです。
なのでしっかりと差をつけて、大事な部分を目立つようにします。
この画像の場合「モモ太郎」がメインのタイトルで「~いぬ、サル、キジをお供につれて~」がサブタイトルになるのでタイトルの「モモ太郎」の部分を大きくしました。

≪伝わる!配色編≫

色の明度で差をつける

白と黒のように明るさに大きく差がある色を組み合わせると可読性(読みやすさのこと)が高くなります。
二色で構成する場合、有彩色(赤や青など色味をもった色)に白と黒(無彩色)のどちらかの色を使うと上手くまとまる配色が出来ます。

彩度の高い色を使う

鮮やかな色はとにかく目を引きます。「ビビッドカラー」と呼ばれるような色です。
反対に「パステルカラー」に分類される色は、とても可愛い。けれど目立たせたいデザインの際は不向きかもしれません。
ただしビビッドカラーは考えて配色を行わないと安っぽくなったりとてつもなくダサくなったりします…取扱いにはご注意を。

補色を組み合わせてみる

補色とは、色相環で正反対に位置している色同士の事を差します。
真逆に位置している色なので使う事でインパクトのある色合いにする事が出来ます。例えばクリスマス(赤と緑は補色関係)ただし真逆なので純粋にその2色だけを使うとチカチカして見づらくなってしまう事も…そんな時は、白や黒などの色を間に挟んでみる(縁をつけたり)と見やすくなります。

≪伝わる!レイアウト編≫

視線誘導はZ型もしくはF型の法則

「Zの法則」「Fの法則」というのがあります。人の視線の動きを文字の形で表した法則です。
【Z型】視線は左上から順番に左上→右上→左下→右下とZの形に移動していきます。
主にチラシやポスターなどの媒体ではこの動きになります。
【F型】左上から始まって右上→左下と動き、下に下がってまた左→右と移動していきます。
右下は見られにくいという特徴があります。WEB上ではこの視線の動きになる事が多いと言われています。
媒体によって、この法則を意識しながらどこにどの要素を置くか考えて配置を行いましょう。

一か所だけ位置を変えてみる

一つ目立たせたい要素がある時は、一か所だけ位置を変えてみるのもあり。人間の視線は揃っていないものに目がいきやすいからです。
位置じゃなくて色や大きさを変えてみるのも◎


以上、伝わりやすいデザインをする際のポイントでした。
さらっと覚えておくときっと役に立つはず!

今年の夏は去年ほど暑くないといいですね。ユイPでした。
Have a nice summer!

ツイッター↓
ユイP@デジマースブログ

Pocket