デザインの小技

こんにちは。今回はちょっとしたデザインの小技を紹介していきます！

普段何気なく見ている資料やアイキャッチですが、なぜ見やすいのか考えたことはありますか？色・配置・フォントが大まかな大事な要素なのですが、一つずつ気をつけている点を解説していこうと思います。

普段デザイナーはこのようなことを意識して作成しているんだ〜と知りつつ、今後自分で資料だったりチラシを作成するのに役立ててみてください。

 

色編

配色はデザインを印象づける重要な要素となります。

同じ要素を配置していても配色が違うと受ける印象が異なります。

例えば情シスナビのブログ記事のアイキャッチはテンプレートが存在し、1つのテンプレートに4-8色パターンが存在するのですがそれぞれ受ける印象が異なります。

一番左のアイキャッチは爽やかな印象を受けますが、一番右のアイキャッチはクール・知的な印象を受けますよね。同じ色相でも明度・彩度を変更するだけで受ける印象はかなり変わってきます。

中央2つのアイキャッチも同じ色相の緑色が使用されていますが、見比べてみると左の方はより爽やかで右の方はより落ち着いた印象を受けますよね。

色には意味が存在し、色によって人が受ける印象は異なるので配色する際には自分が相手にどのような印象を持たせたいのか？を考えた上で設計してみましょう！

ポイントとしてはまずは使用する色を2色程度に抑えることです。

「この文章とこの文章では意味合いが違うから色を使って分けてみよう」「取り敢えずたくさん色を使えば賑やかになって良いはず」といった思考で配色してみると雑多で悲惨なデザインが出来上がってしまいます。情シスナビのアイキャッチテンプレートの文字色をいじってみました。左がいじったもので右がオリジナルのテンプレートとなります。

それぞれの項目ごとに色を変えてみたのですがまとまりがない印象を受けますよね。どこが重要で何を見せたいのかがいまいち伝わってきません。

一方で右のアイキャッチは文字色を2色に抑えているので見やすいです。シンプルな配色なので「ここが重要！」を強調したい意図が伝わってきますし、「3」のみ文字サイズを大きめにしているのが目に入ってきやすいですよね。

このように何を見せたいのか？強調したいのか？を考えた上で使用する色はなるべく少なめにするとまとまったデザインが出来上がります。もし色数を多くしたい場合は同系色を使用するようにすると散らばった印象になりづらくなります。

 

あとは少し余談ですが、何気なく使用している黒も重要なポイントです。

デザイナーが黒色を使用する際にまずカラーコード「#000000」の真っ黒な色は使用しません。なぜなら真っ黒はWebサイトに資料やチラシ、アイキャッチなどの文字が並ぶ媒体では主張が強すぎて目立ちすぎてしまうからです。

この情シスナビの文字色も実は「#000000」ではなく「#333333」などグレー寄りの黒を使用しています。
左がオリジナルのものでカラーコードは「#333333」。右が黒色の部分を「#000000」にしたものとなります。

こうして見比べてみるとなんとなく右の方が黒色の主張が強いと感じませんか？文字の要素が強くてアイキャッチの印象が薄れてしまっています。

他のWebサイトの文字色設定も覗いてみてください。意図的でない限り真っ黒を使用しているサイトは存在しません。

それは紙媒体も同じで世の中の雑誌やチラシも同様に黒色の配色にも気を使っています。

黒色＝真っ黒だと限定せずに黒色にもこだわりを持って色設定をしてみると一段階上の見やすいデザインに近づけることができます！

そして自分がこだわりを持って配色を行うと目が肥えてきて世の中の黒色が#000000か否か見分けられるようになってきます🔍

 

配置編

次は配置編です。

まず人は左上から右下に「Z」の字を描くように視線が流れていきます。
つまり、視線誘導的には見せたいものを左に置いた方がベストということになります。
優先度を自分の中で整理してみて優先度順に左から並べてみるようにしてみましょう。

 

デザイナーの場合は文字間にも気をつけて文字組みを行っています。
デフォルトで文字を入力すると文字間が均等にならないのです。

この画像を見るとなんとなく分かるかと思うのですが、「文字同士」の文字間と「ありません」の文字間が異なっていますよね。「ありません」が間延びしており不揃いな印象があります。漢字が並び文字間が狭い状態が続いた後なので、デザイナー目線だと余計に余白が気になります。

そのため、普段デザイナーはアイキャッチやチラシを作成する時に文字間を均等にする作業を行います。これをカーニング(文字詰め)と呼びます。

では実際にカーニングを行って画像の文字間を均等にしてみましょう。

いかがでしょうか？先ほどの画像と見比べると文字間が均等になったのではないでしょうか。

デザインツールではショートカットを使用することでカーニングが簡単に行えるのでそちらを使って目視で文字間を変更してみました。

目視でやるためデザイナーの力量が問われます。私の場合はずっと触っているとよく分からなくなるターンが発生するので一回別の作業を行い、目をリセットさせて改めて確認することもあります。

あとついでに行間も狭くて読みづらかったので離しています。

デフォルトの状態とカーニング適用後で比較してみました。

こうして見比べてみると結構違いがありますね。

世の中のデザインの文字間を見てみるのも結構面白いので今後意識して見てみてください。

 

フォント編

最後にフォントについてです。基本的にフォントはゴシック体を選ぶと視認性・可読性両方に置いて問題ないものが出来上がるのでおすすめです。

また複数のフォントを組み合わせるのはあまりおすすめしません。単体で見るとかっこいいフォントかもしれませんが、それらを組み合わせるとそれぞれのかっこいいが主張しあい雑多なものが出来上がってしまいます。そのデザインを見た人間に「何を主張したいのか」が上手く伝わらないよく分からないデザインが出来上がってしまうので初心者の場合はやめた方が良いです。

NG例です。とっ散らかっている印象を受けますよね。

どうしても複数のフォントを使用したい場合は、「ゴシック体＋別のフォント」を使用してみてください。

2つのフォントに抑えると見やすさが損なわれずに強調したいポイントを強調できます。

 

まとめ

デザインに関する小技を紹介してみましたがいかがでしたでしょうか。

初心者向けの内容とデザイナー目線の細かいこだわりポイントを書いてみました。

参考できるところは参考にしつつ、普段デザイナーはこのようなところに気をつけているんだと知っていただけたら幸いです！