こうすればダサいデザインに出来上がる。改善する方法もデザイナーが解説【バナー】

こんにちは。WebデザイナーのKizinekoです。

デザインをしていて、「なんかダサい…」と思ったことはありませんか？そのデザイン、ちょっとした意識で良くなるかも！
今回はデザインがダサくなってしまう原因や、ブラッシュアップする方法を考えていきたいと思います。

ダサいデザインとは？

実際に、ダサいバナーと良いデザインのバナーを例に挙げてみます。

この二つのバナーデザインを見て何を思うでしょうか？
「そもそも内容が意味不明！」という事は差し置いて、デザインだけに注目してください。

①のデザインは、目がチカチカとしますし素人がパワポで作った感じが出ている＝ダサいですよね。

例が極端過ぎて参考にならないと思われるかも知れませんが、このバナーを例に、どんなデザインでも共通してダサくなる原因を解説していきます。

デザイン①「ダサい」デザインについて

デザイン①は「暴力的・悪魔的」というキャッチコピーそのものを表すデザインとなっており、インパクトがあるものとなっています。

ただ、原色を乱用した配色となっており、殆どの人が大変不快感を感じられるデザインとなっています。不快感を与えたい場面では打って付けのデザインではあります。（そんな場面無い）

つまりこの記事のテーマにある通り、ダサいという事です。

デザイン②「イイ感じ」なデザインについて

それに比べ、デザイン②はどうでしょうか。
オレンジを基調とした配色でデザインで、①より遥かに目に優しく、情報が見やすくなっているのでは無いでしょうか。
文字を使ったデザインの本質として、「情報整理」という役割があります。
①のデザインではどの情報が重要なものなのか伝わりづらいですが、②では比較的スッと情報を取り入れる事が出来ると思います。

その為、良いデザイン の例となります。

デザインがダサい原因について

お次は、①のダサいデザインを元に、何が”ダサい”原因を作っているのか探っていきたいと思います。

ダサい原因：原色の割合が多い

原色（または純色）などの彩度の高い色はデザイン上ではアクセントカラーとして一部でのみ使うべき色です。

背景色も文字色も原色（または純色）を使うと目が疲れる・ユーザーがどこに目をやるべきか（どこが重要な情報なのか）迷ってしまう原因となります。

原色×原色となる事は控えて、白や黒などの無彩色の割合を増やす、他の色の彩度を抑えるなどでバランスを保つことが出来ます。

ダサい原因：配色バランスが悪い

一般的に、1つのデザイン中に使用する色は、3～5色（白と黒を含む）がベターと言われています。
さらにそれらの色は、一定の調和が保たれている必要があります。

ダサいバナーデザインの例では、7色以上を使っていますし、それらのほとんどがアクセントカラーに使うような彩度の高い色ばかりです。

デザインでもファッションでも、暖色系・寒色系など、同じトーンでまとめると、なんとなく全体がまとまるのは想像がつきますよね。

また、赤×黒の組み合わせはデザイン的には基本的にNGというか使いこなすのが難しい配色です。
ダサい例のバナーではこの赤×黒の配色を多用しています。どうしても…という場合以外は、赤×黒の配色は避けるのがベターです。

どんな色を使用したらいいのか、迷う場合は、AdobeColorのカラーホイール機能を使うと色彩理論に基づいたバランスの良いパレットを作成できますよ。

ダサい原因：背景色と文字色のコントラストが低い

ダサいデザインの例では、インターネット黎明期のHPを彷彿とさせるレインボーの背景色にしていますが、これは文字色と彩度や明度が近くなってしまい、文字と背景のコントラストがつかず見づらくなる原因となるためNGです。

基本的に背景色を使用する場合は、濃い背景色なら文字色は白文字。背景色が淡いなら文字は黒文字。など、一定のコントラストを保つようにしましょう。

ダサい原因：デフォルト比率から引き伸ばしたフォント

基本的に、デフォルト比率から引き伸ばしたフォントはNGです。
枠内に収めようと横や縦に引き伸ばさずに、フォントサイズの調整や字間の調整で対応しましょう。

ダサい原因：3D文字や、濃いドロップシャドウを使う

パワーポイント等で出せそうな3Dの文字や、むやみやたらとドロップシャドウを付けることはNGです。
文字単体のクオリティはアップ出来ますが、全体で見た時にゴチャゴチャとしてしまう原因となります。

ダサい原因：あしらいがダサい

ファッションで、全体の配色や洋服は良いけど、アクセサリーが安っぽいと全体的に安っぽく見えてしまいますよね？
アクセサリー＝デザインでいうあしらい、と捉えて頂ければ幸いです。
吹き出しや矢印の形などのあしらいも、デザインのクオリティを左右する重要な要素になります。

powerpoint等の図形で描画できるような形（やたらとトゲトゲしてる、吹き出しのしっぽが長い等）にしてしまうと、素人感が出てダサい原因になります。

ダサい原因：文字の太さ、フォントを何種類も使う

文字の太さは基本的に2種類（細字、太字の2種）がベターです。
また、重要なキャッチコピーや見出しに太字を使い、本文は細字を使う事が基本です。

フォントに明朝体を使用する場合、明朝体は小さな文字になると可読性が低く、ゴチャゴチャとしてしまう原因となるため、見出しやキャッチコピー部分などの大きな文字のみ明朝体、その他はゴシック体にする事がベターです。

ダサい原因：余白が狭すぎる

ダサいバナーデザイン例ではこちらは大きく問題ではありませんが、デザインがダサくなる原因の1つに「余白が狭すぎる」があります。

デザインは余白を設ける事で、要素要素をグループとして捉えられ、正しく情報整理できる重要な要素です。
余白が狭すぎると圧迫感が出たり、余白に規則性がないとゴチャゴチャとした印象になります。

ダサい原因：結局どの情報が重要なのか、情報整理がされていない

例のバナーではとにかく全ての要素を目立たせる勢いで配置・配色されています。
例えば、ノートを取る時、大量に赤マーカーを引くと、かえってどの部分を覚えればいいか分からなくなりますよね？
デザインに取り掛かる前にそのバナーの目的や、バナーを見たユーザーが最も知りたい情報は何か等を整理してから、制作に取り掛かりましょう。

デザインをブラッシュアップすると…

以上の、「ダサい原因」に気を付けて制作してみると、下のようなバナーにすることが出来ます。

改善ポイント：配色は3色でまとめる・コントラストを付ける

白＋黒＋オレンジの主に3色でシンプルにまとめました。
また、背景色（オレンジ）を使う場合は白文字を使うなどして、一定のコントラストをとり文字の可読性を保っています。

改善ポイント：要素の”目立たせ方”を見直し

デザイン①「ダサい」デザインでは要素を目立たせる手段として”派手な色を使う”、”トゲトゲした吹き出しを使う”などの、何をしてもいい無法地帯のような形でしたが、

ブラッシュアップ後は”ジャンプ率を上げる”、”アクセントカラーを使う”などのシンプルな方法に変える事で、悪目立ちせず、全体のバランスを保ちながら要素要素を強調できるようになりました。

また、あしらいを使うにしても、トゲが長すぎるパワポ感ある物などではなく、シンプルな物を使う用にしました。

デザインのコツは？

デザインのコツ：参考デザインを用意する

どんなクリエイティブでもそうですが、何も引き出しの無い、初心者の状態で「オリジナリティ」を出そうとするとかえってダサくなってしまいます。絵を描く人でも、まずはデッサンや模写から始めると思います。

まずは、作りたいデザインのテイストに近い参考デザインをいくつか用意し、それらの特徴を真似て制作してみるのがおススメです。

デザインのコツ：一定のトンマナを設ける

デザインに、ある一定のコンセプトやルール（トンマナ）を設けて制作することで、一貫性のあるデザインが作れます。

「トンマナ」とは「トーン＆マナー」の略称で、デザインやスタイル、文言などに一貫性をもたせるルールのこと。 「調子や色」という意味を持つトーン（tone）と、「様式や作風」という意味を持つマナー（manner）を組み合わせて作られた言葉です。

https://pantograph.co.jp/blog/uiux/tone-manner.html

ダサいデザインをブラッシュアップのまとめ

当記事が現在デザインに取り組まれている方の少しでも参考になれば幸いです。