初心者がやりがちなデザイン3ない原則

今回は、デザインをするときにできるだけ意識的に避けるといいことについて書きます。

デザイン3ない原則

勝手に「デザイン3ない原則」と命名しましたが、あくまで造語です。

「読みづらい文字は読みやすく」
「立たせたい時は背景を濃くしてみる」
「変わった書体でインパクトを出す」

など、断片的なデザイン知識だけの方がやりがちなやり過ぎをまとめました。知っているだけで意識的に避けることができるようになると思うので、デザインにこだわりたい方は是非参考にしてみてください。

1. 囲み過ぎない

1つ目は「囲み過ぎない」です。
イベントの告知など、たくさんの情報を決められた範囲に収めなければいけないデザインをする場合に起こりがちです。情報を整理するために、情報のレイヤーや種類を分け、デザイン原則を上手く使いながらセパレートしていくのがセオリーですが、安易に囲み（背景に色を敷くも含む）を増やしていくと、窮屈な印象を与えるデザインに仕上がってしまうことが多いです。

下図、左が囲み過ぎている極端な例と、右が改善したデザインです。

ヘッダー・タイトル・日付・子見出し・本文・トピックの6つの要素がありますが、囲ったり背景に色を敷いて情報を整理しようとすると左のようになり、窮屈で且つかえって見辛くなるので、情報がわかり辛くなってしまいます。

改善方法としては、囲ったり背景に色を敷いて分けるのではなく、

「色分けで情報を分類する」
「囲わずに罫線だけでセパレートする」
「共通のモチーフ（上記の場合はチェックマーク）を用意して、情報のくくりを明確にする」

などを組み合わせることで、窮屈感なく情報を整理することができます。

どうしても囲まないと、情報の整理が上手くできない、という時にやむなく囲いを多用する場合は、囲いのマージンや幅を揃えるなど、極力見やすいデザインになるように尽力するといいと思います。

2. 影つけ過ぎない

2つ目は「影つけ過ぎない」です。写真の上に文字をおいたり、同系色の背景にオブジェクトを配置する時、文字やオブジェクトの視認性を担保するために影をつけることがあります。（ドロップシャドウ）

ただし、多用すると視認性がそれほど上がらないうえ、少し野暮ったい印象になってしまうことがあるので注意した方が良いです。また、どうしても影をつける場合は、影の付け方を少し検討してみましょう。

下図、左が視認性の悪い例、右が改善した例です。

まず右側の一番上から説明します。どうしても影をつけたい場合は、ドロップシャドウのぼかし幅を広めに取り、透明度も抑えめにして、さりげなく影をつけることをお勧めします。黒の文字に黒の影を強くかけすぎると、左の上のようにかえって見辛くなってしまいます。

影をつけなくても成立する場合は、右の真ん中のように思い切って文字と背景のコントラストを保つように、色を調整することをお勧めします。

文字の色が何らかの要因で指定があったり、背景とのコントラストを保てない場合は、文字を線で囲む袋文字という状態にして、文字と背景をセパレーションしてみましょう。この時、文字の線は少し太めに幅を取っておくことがお勧めです。また、文字の周りに線が入ることで、文字間が少し不揃いに見える場合は、カーニングも調整しておくと見栄えがさらに良くなります。

3. 変な書体使わない

最後は「変な書体使わない」です。制作するものにもよりますが、「目立たせたいところは他と見え方をかえる」という断片的なデザインの考えを持っている時にやりがちです。

基本的に、世の中でよく使われている書体というのは限られているので、突然みたこともない書体を使うと、見る側が戸惑ってしまい、

「目立って入るけれど情報が入ってこない」

という状態になりがちです。

書体を見出しなどで書体を変えて目立たせたい場合は、クセの強い書体を使うのはできるだけ避け、「見出しは明朝体、本文はゴシック体」などのように書体の種類を変えるに留める方が無難です。

「クセの強い書体」がどんな書体かは、慣れて見極められるようになっていく必要がありますが、やたらと角が立っていたり、筆感が強かったり、みたことがないようなものはクセが強い可能性が高いです。

まとめ

「デザイン3ない原則」として、やりがちだけどやめた方がいいデザインについて書きました。デザインする時に、事後でもいいので「囲み過ぎていないか？影をつけ過ぎていないか？変な書体が使われていないか？」を意識して見直す癖をつけると、より受け手に伝わりやすく見やすいデザインにできると思います。

【運営会社】 合同会社meno
：https://www.meno-inc.com/