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

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

ダサいデザインとは？

ダサいとは、「恰好悪い」「野暮ったい」「垢抜けない」などといった意味を持つ俗語である

https://ja.wikipedia.org/wiki/%E3%83%80%E3%82%B5%E3%81%84

「ダサい」という印象は、つい感覚的な問題だと思われがちです。
たしかに、人によって“良い”と感じる基準は異なりますが、実際には「整っていない」「要素が多すぎる」「配色がうるさい」など、理屈で説明できる原因がある場合がほとんどです。

今回は、そういった“なんとなくダサい”という違和感を払拭するために、具体的にどう改善すればよいか、その方法をご紹介していきます。

ダサいデザイン、良いデザインの例

実際に、「ダサい」原因となるものを全て詰め込んで作った壊滅的にダサいバナーと、一般的なバナーを作ってみました。

バナーの内容が意味不明なことは一旦置いておいて、①よりも②の方が、バナーとして視認性が高く見やすいと感じる方がほとんどなのではないでしょうか。

具体的に、それぞれのデザイン的な特徴について解説し、なぜ「ダサく」見えてしまうのか、その原因やポイントを紐解いていきたいと思います！

「ダサいデザイン」の原因

①色の問題

原色の割合が多い

原色（または純色）などの彩度の高い色は、基本的にはアクセント・ポイントカラーとして使うべき色です。
その為、あまり全体的に使用すると、どこが注目すべき情報なのかが分かりづらくなりますし、目を疲れさせる原因となります。

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

色の数が多すぎる、配色バランスが悪い

一般的に、1つのデザイン中に使用する色は、3～5色（白と黒を含む）がベターと言われています。

また、デザインでもファッションでも、暖色系・寒色系など、同じトーンでまとめると、なんとなく全体がまとまるのは想像がつきますよね。色そのもののイメージではなく、色同士の組み合わせによって起きるイメージもあります。

どんな色を使用したらいいか、迷う場合は、AdobeColorのカラーホイール機能を使ったり、Web公開されている配色パターンからスポイト抽出して制作するのも一つの手です。

②コントラストの問題

背景色と文字色のコントラストが低い

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

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

文字組やジャンプ率を意識していない

文字組（もじぐみ）とは、文字のサイズ、字間、行間などを調整して、文章を読みやすく、美しく見せるための作業のことです。

https://studio.virtual-planner.com/typesetting/

文字組とは、細かい行間や字間の調整、文字同士のレイアウトなどを指します。
必ずしもすべてのデザインで必要というわけではありませんが、見栄えの良いデザインを作るうえで非常に重要な要素です。

たとえば、右側のデザインでは「7/31まで!!」と「60%OFF」の文字の端を揃えたり、大きさにメリハリをつけて配置しています。こうした文字組によって、情報の伝わりやすさや視線の流れが整い、より強いインパクトを与えることができます。

フォント・あしらいの問題

デフォルト比率から引き伸ばしたフォント

フォントを縦横に引き伸ばすのは、基本的に避けるべきNG行為です。
スーパーのチラシやPOPなど、特殊な用途では見かけることもありますが、一般的なデザインの現場ではタブーとされています。
フォントは本来の比率で美しく読めるように設計されており、縦や横に無理やり引き伸ばすと、文字の形が歪み、野暮ったく見えるからです。

あしらいがダサい・装飾に頼りすぎ

ファッションでも、洋服のコーディネートや配色は完璧なのに、アクセサリーが安っぽいと、全体まで安っぽく見えてしまうことってありますよね？

デザインにおける「あしらい」（吹き出しや矢印、アイコンなどの装飾）は、まさにそのアクセサリーのような存在です。些細に見えて、全体の印象やクオリティを大きく左右する重要な要素です。

文字の太さ、フォントを何種類も使う

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

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

③余白のバランスが悪い

デザインがダサくなる原因の1つに「余白が狭すぎる」「反対に広すぎる」「間隔がバラバラ」等があります。

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

ダサいデザインを改善する方法

さきほどのダサいバナーを、改善した物がこちらです。

具体的には、以下のようにして改善しました。

使う色は少なくまとめて、統一性アップ

白＋黒＋オレンジの主に3色でシンプルにまとめました。
たった3色でも、グラデーションや淡いトーン、薄いグレーなどを取り入れることで、単調になりすぎず、統一感のあるデザインに仕上げることができます。

あしらいはシンプルに・使い過ぎない

「ダサい」デザインでは要素を目立たせる手段として「派手な色を使う」「トゲトゲした吹き出しを使う」などの、何をしてもいい無法地帯のような形でしたが、ブラッシュアップ後は「ジャンプ率を上げる」「アクセントカラーを使う」などのシンプルな手法に変える事で、全体の統一性を保ちながらも強調できるようになりました。

デザインがダサくならないようにするコツは？

参考デザインを用意しよう！

どんなクリエイティブでもそうですが、基本的には既存のスタイルを大きく逸脱しない形で制作しないと、「違和感」が生まれてしまう原因となります。

絵を描く人でも、まずはデッサンや模写を練習する事が基本的ですし、音楽制作でもコピーバンドや耳コピから始めると思います。

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

一定のトンマナを設ける

ダサくなる原因の主な原因として挙げられたのが、デザインに規則性が無い事です。
その為、まずは使用する色を決める、テーマを決める等、一定のルール（トンマナ）を予め決めておくのがおすすめです。

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

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

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

本記事が少しでも参考になれば幸いです。