あなたのデザインがダサい7の理由　ダサくなる原因と改善するコツ

頑張って作ったのに、なぜかダサく見える。それはセンスがないのではなくダサく見えやすい要素を重ねてしまっていることがほとんどです。

この記事では、チラシ、ポスター、バナー、Web、スライドなどに共通するダサく見える原因と直し方を、図解をたっぷり使って初心者向けにわかりやすく解説します。

上の作例は「ダサいデザイン」の参考例として作成したものです。なぜ上図がダサいと感じるのか、言葉にすることはできるでしょうか。

ダサく見えるデザインの多くには「余白」「情報量」「文字」「色」「装飾」「写真」などの複数の問題があります。本記事ではデザインがダサくなるのはなぜなのか？どうしたらダサい印象を払拭できるのか、図解をもとにわかりやすく解説します。

本記事では、窮屈、読みにくい、古く見える、統一感がないなど、意図した印象を作れていない状態をまとめて「ダサく見える」と表現します。色や表現の好みそのものを否定する意味ではありません。

余白がないと窮屈でダサく見える

文字や写真を空いている場所へ詰め込むと、要素同士がぶつかり、どこから見ればよいのか分かりにくくなります。枠の端まで文字が迫っている状態も、急いで作ったような窮屈さにつながります。

余白を増やすだけで、情報のまとまりが分かれ、目立たせたい要素も自然に見つけやすくなります。

枠の内側に余白がないと安っぽく見える

文字枠、ボタン、ふきだしなどは、文字と境界線の距離が近いほど窮屈に見えます。上下左右へ十分な余白を取り、文字が枠へ押し込まれているように見えない状態へ直します。

余白を増やしすぎると要素同士の関係が弱くなるため、同じグループの中は近く、別のグループとの間は広く取るのが基本です。

文字間や行間が狭いと読みづらくダサく見える

文字が詰まっていると、文章を読む前から重く感じます。字間を広げればよいとは限りませんが、文字同士が接近して見える場合は少し広げ、行間も文字サイズに合わせて調整します。

リストや説明枠では、枠の内側、行間、項目間の3種類を分けて考えます。すべての間隔を同じにせず、項目のまとまりが分かる差をつけると整って見えます。

余白の取り方を詳しく知りたい場合は、ホワイトスペースの考え方も確認してください。

情報を詰め込みすぎるとごちゃごちゃしてダサく見える

伝えたいことを全部入れると、情報量は増えても内容は伝わりにくくなります。文字、数字、写真、アイコンが同じ強さで並ぶと、視線が散り、何も印象に残りません。

文字が多すぎると何を見ればよいか分からなくなる

上記のアイキャッチ画像は、右側に目がいきましたね。

左側のアイキャッチは書いてある内容は同じにも関わらず不要な文字が多すぎるため、情報量が多いにも関わらず伝わりません。

日時、場所、料金など削れない情報がある場合は、削除するのではなく、大きさ、太さ、色、位置へ差をつけます。すべてを目立たせようと全部を大きくしたりすると、どの情報も目立たなくなります。

目立つ要素が多すぎると視線が散ってゴチャついてみえる

大きい文字、派手な色、人物の顔、強い装飾を画面の各所へ置くと、視線が行き来して落ち着きません。最初に見せる要素へ強い表現を集め、それ以外は一段弱くします。

アイキャッチや小さなバナーでは、文字をすべて読ませるより、内容を瞬時に判断できるほうが重要です。一方、チラシや案内資料は必要情報を省けないため、情報の強弱で整理します。

装飾を重ねすぎると古く重く見えてダサくなりやすい

影、縁取り、背景枠、グラデーション、光沢、立体化は、どれも見た目の変化が大きい機能です。複数を同時に使うと文字の内容より加工が目立ち、画面全体が重く見えます。

デフォルトの立体・光沢効果はダサく見えやすい

ソフトの初期設定でかけた立体化や光沢は効果が強く、背景やほかの要素と光の向き、質感、奥行きが合わないことが多いため、文字だけが浮いて見えます。

初心者は、まずデフォルト効果を外した状態から作り、必要な効果を一つずつ加えるほうが無難です。

ただし、ゲーム、イベントロゴ、玩具、立体感を主題にした表現など、強い質感が内容と合う場合は問題ありません。

3D文字を有効活用する場合は、画面全体の光源、色、質感を同じ方向へ揃えたりする必要があるため、雑に使うとダサくなりやすいので注意してください。

影・縁取り・グラデーションなど装飾を重ねると文字がくどく見える

文字装飾が過剰になると、ごちゃごちゃして「まとまりのないダサさ」が生まれます。

装飾を加える場合は、背景から文字を分離する、重要語を目立たせる、押せるボタンに見せるなど、目的を一つに絞り装飾の目的を明確にします。

目的を満たす最小限の効果だけを残すと、内容が読みやすくなり、全体のゴチャついた印象も抑えることができます。

原色やグラデーションはダサくみえやすい

原色や蛍光色は彩度が高く、広い面積や複数箇所へ使うと、すべての要素が強く主張します。視線が落ち着かず、文字も写真も見づらくなり、安っぽい印象につながりやすい配色です。

強い色を広い面積で何色も使うとまとまりがなくなる

原色は安易に使うとチープでダサい印象になりやすいです。

特に初心者は、原色、蛍光色、カラフルな配色を同時に使うと、色同士の強さを調整しにくくなるため使用を控えるのがおすすめです。

迷った場合は、背景と大部分の色の彩度を下げて落ち着かせ、強い色は一か所のアクセントへ絞るとデザイン全体が落ち着きます。

ただし、原色や蛍光色そのものが常に悪いわけではありません。スポーツ、子ども向け、音楽イベント、警告表示など、強い刺激や活気が目的に合う場面では有効です。

その場合も、強い色の面積を限定し、周囲の色を落ち着かせます。初心者が目的なく広い範囲へ使うと崩れやすいため、まずはアクセントとして扱うのが無難です。

使う色が多すぎると強調が消えてダサく見える

色による強調は、周囲が落ち着いているから機能します。強い色が多い場合は、背景に使うベースカラー、印象を作るメインカラー、限られた箇所を目立たせるアクセントカラーへ役割を分けます。

初心者は3〜4色程度から始めると管理しやすくなります。同じ役割の色を増やさず、必要な場合は同じ色の明るさや濃さを変えて補います。

色数の多いグラデーションはコテコテに見えやすい

色数の多いグラデーションや、色相が大きく離れた色を直接つなぐグラデーションは背景だけが強く目立ったりします。文字の可読性も落ちやすいため、初心者には扱いが難しい表現です。

慣れないうちは、色相が近い2色、同系色の明暗、色温度が近い2〜3色から始めると自然につながります。

変化が乏しくてつまらなく見えるかもしれませんが、色数を増やすほど調整項目も増えるため、まずはシンプルな組み合わせを試してみてください。

色相が近い色、同系色、色温度が近い色は、途中で急激な変化が起きにくく、初心者でもまとめやすい組み合わせです。

補色を直接つなぐと途中が濁ってダサく見えやすい

色相環で離れた色、特に補色に近い組み合わせは、直接つなぐと途中の色が濁りやすくなります。補色は強い対比を作れる組み合わせですが、滑らかなグラデーションとして使うには調整が必要です。

使用する場合は、片方の色相に近い中間色を挟み、変化を段階的にします。

上図のように、色相環で隣り合う方向へ色をつなぐほど、途中の濁りを抑えやすくなります。

配色の組み合わせと比率が悪いとダサく見える

一色ずつはきれいでも、色相、明るさ、鮮やかさがばらばらで、使用面積にも差がないとまとまりません。

色を増やすほど良くなるのではなく、色同士の関係と使う比率が重要です。

配色の比率や色の選び方を詳しく確認したい場合は、配色デザインの解説も参考にしてください。

文字の配置やフォントが揃っていないとダサく見える

文字は内容だけでなく、配置、大きさ、太さ、書体、行間でも印象が変わります。少しずつ位置がずれ、複数の書体や揃え方が混ざると、細部まで確認せず置いたように見えます。

文字が揃っていないと雑でダサく見える

中央揃えにするなら中心を揃え、左揃えにするなら左端を揃えます。わずかなずれでも、複数箇所へ重なると画面全体が不安定に見えます。

文字だけでなく、写真、図形、アイコンの端も同じ基準線へ揃えると、まとまりが生まれます。左揃え、中央揃え、右揃えはどれも使えますが、理由なく混ぜないことが重要です。

内容に合わないフォントはちぐはぐでダサく見える

内容と合っていないフォントを使うとチグハグ感がでてダサく見えやすくなります。

高級感を出したい内容へ子ども向けの丸い書体を使う、やさしい内容へ鋭く重い書体を使うなど、伝えたい印象と書体が反対を向くと違和感が生まれます。

書体を選ぶ前に、高級、親しみ、力強さ、楽しさ、信頼感など、与えたい印象を言葉にします。書体そのものの好みより、内容、写真、配色との一致を優先します。

読みにくい文字は見た目も悪くなる

細い文字を小さく使う、背景との明度差が小さい、行間が狭い、長文へ装飾書体を使うと、読者は内容を理解する前に疲れます。

短い見出しと長い本文では、適した書体や間隔が異なります。可読性、判別性、誘目性を確認し、実際に表示する大きさで読めるかを見ます。

フォントの種類が多すぎると統一感がなくなってダサく見える

個性的なフォントを何種類も使うと、それぞれが別の雰囲気を持ち込みます。

デザイン性の高いフォントは使い所によっては効果的ですが、複数のフォントを多用してしまうと雰囲気がばらばらになり、統一感のないデザインになってしまいます。

初心者は本文用と見出し用を中心に絞り、同じ書体の太さや大きさで変化を出すことを意識してみてください。

適切な文字サイズになっておらずダサく感じる

文字サイズが大きすぎたり、小さすぎたりすると整っていない印象を与え、ダサく感じやすくなります。

小さくすれば良くなるわけでも、大きければ必ずしも見やすい、というわけではありません。文字サイズも使用箇所や媒体によって適正が変わります。

印刷物やWebで読みやすい大きさは、文字サイズの考え方で詳しく解説しています。

写真やイラストの使い方が悪いとダサく見える

写真やイラストは面積が大きく、画面全体の印象を決めます。文字を重ねすぎる、明度差が足りない、素材のテイストが違う、画質が悪いと、ほかを整えても違和感が残ります。

文字で写真を隠すと素材が活きずダサく見える

被写体の顔、商品、重要な部分へ文字や図形を重ねると、写真を使った意味が弱くなります。背景が細かい場所へ文字を置くと、写真も文字も見えにくくなります。

文字を置ける余白がある写真を選び、被写体と文字を別の領域へ配置します。写真の上へ文字を置くこと自体は問題ありませんが、主役を隠さないことが条件です。

写真と文字の明度差がないと読みにくくダサく見える

写真をそのまま使うと、文字を置く場所だけ明るい、全体が暗い、色かぶりが強いなど、デザインに合わない状態が残ることがあります。

文字と背景の明度差が小さい場合は、写真を暗くする、文字色を変える、半透明の背景を敷く、文字位置を移動するなど、読みやすさを優先して調整します。

素材のテイストがバラバラだと寄せ集めに見えてダサくなる

リアルな写真、フラットなイラスト、立体的なアイコン、手書き風の線など、質感が異なる素材を理由なく混ぜると、一つのデザインに見えません。

同じ作者やシリーズから選ぶ、線の太さを揃える、色調を合わせる、角の形を統一するなど、共通点を作ります。色とフォントも素材の方向性へ合わせます。

画質や構図が悪い写真は全体を安っぽく見せる

写真がぼやけている、圧縮ノイズが目立つ、被写体が小さすぎる、文字を置く場所がない場合は、レイアウトだけでは補えません。

レイアウトやデザインが全く同じでも写真の品質によって台無しになってしまうことも多いです。

また、撮影した写真を使用する場合などは映り込んだ余計なものを消したり、色味を調整したりするだけで印象は大きく変わります。

画像のレタッチについては以下の記事で詳しく解説しています。

ダサく見える原因を仕上げ前に確認する

近接・整列・反復・対比を覚えると失敗を減らせる

余白、位置、統一、強調の基本になるのが、近接、整列、反復、対比の4原則です。今回紹介したダサく見える原因の多くも、4原則へ当てはめると直す場所を判断しやすくなります。

大きな違和感を取り除いた後は、字間、線幅、角丸、影の濃さなど、細部を少しずつ整えます。

アイキャッチやバナーへ応用する場合は、サムネイルでの見え方や文字量など、媒体固有の条件も確認してください。

ダサく見えるデザインを改善したいときは、派手なテクニックを足すより、余白不足、情報過多、過剰装飾、強すぎる色、文字や素材の不統一を取り除くだけで見た目が改善されます。