ダサいデザインをデザイナーがブラッシュアップしてみた！【バナー】

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

Kizineko

デザインをしていて、「なんかダサい…」と思ったことはありませんか？そのデザイン、ちょっとした意識で良くなるかも！

今回はデザインがダサくなってしまう原因や、ブラッシュアップする方法を考えていきたいと思います。

ダサいデザインとは？

今回は、バナーのデザインを例にあげてみます。

この二つのバナーデザインを見て何を思うでしょうか。

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

デザイン①は「暴力的・悪魔的」というキャッチコピーそのものを表すデザインとなっており、インパクトがあるものとなっています。ただ、原色を乱用した配色となっており、殆どの人が大変不快感を感じられるデザインとなっています。

不快感を与えたい場面では打って付けのデザインではあります。（そんな場面無い）

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

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

それに比べ、デザイン②はどうでしょうか。オレンジを基調とした配色でデザイン①より遥かに目に優しく、情報が見やすくなっているのでは無いでしょうか。不快感を与えたく無い・大衆の目に触れるバナーである場合には打って付けです。

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

お次はこちらのバナーが不快感を与える原因を探っていきたいと思います。

原色・純色の割合が多い

原色や純色などの彩度の高い色はデザイン上ではアクセントカラーとして一部でのみ使うべき色です。背景色も文字色も原色（または純色）を使うと目が疲れる・ユーザーがどこに目をやるべきか（どこが重要な情報なのか）迷ってしまう原因となります。

また、混同しやすい原色と純色の違いについては下記です。

原色と純色の違い 原色と純色は混用しやすい言葉です。 原色とは他の色を混ぜても得られない独立した色を指します。純色とは、 ある色相のなかで最も彩度が高い色を指します。

引用：http://rock77.fc2web.com/main/color/color1-6.html#:~:text=%E5%8E%9F%E8%89%B2%E3%81%A8%E7%B4%94%E8%89%B2%E3%81%AE%E9%81%95%E3%81%84,%E9%AB%98%E3%81%84%E8%89%B2%E3%82%92%E6%8C%87%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

配色バランスが悪い

赤×黒の組み合わせは基本的にNGというかかなり難しく、例のバナーではこの赤×黒の配色を多用しています。

赤×黒の配色がどうしても必要という場合、赤の彩度を落とすなり、黒の明度を少し上げるなり調整が必須です。

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

例ではインターネット黎明期のホームページを彷彿とさせるレインボーの背景色にしていますが、これはNGです。

基本的に背景を使用する場合、文字色に影響の少ないカラーにする・文字色自体を変える事でコントラストを保つ事が大切です。

例えば、黒い文字色であれば薄い背景色。黒い背景であれば白い文字色。背景画像を使用する際は画像の透明度を下げる、その上に色レイヤを重ねる。等を行い文字がくっきり見えるように調整しましょう。

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

基本的に、デフォルト比率から引き伸ばしたフォントはNGです。

枠内に収めようと横や縦に引き伸ばさずに、フォントサイズの調整や、字間の調整で対応しましょう。

3D文字や、濃いドロップシャドウを使う

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

吹き出しや矢印の形がダサい

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

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

文字の太さは基本的に2種類（細字、太字の2種）、フォントは明朝体を使用する場合、見出しやキャッチコピー部分などの大きな文字のみにし（明朝体は小さな文字になると可読性が低い為）、その他はゴシック体にする事がベターです。

結局どの情報が重要なのか、情報整理がされていない

例のバナーではとにかく全ての要素を目立たせる勢いで配置・配色されています。ノートを取る時に重要箇所全てに赤マーカーを引くような感じです。きっとこのバナーを見たユーザは結局何が言いたいのか、伝わらないはずです。

これらを避けるには、デザインに取り掛かる前にバナーの目的や、ユーザが最も知りたい情報等を整理して取り掛かる必要があります。

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

ブラッシュアップ後のバナーがこちらです。

使用カラーは白+黒+もう1色がベター！

デザイン①「ダサい」デザインでは、1つのバナーに7色以上を使っていたのに対し、ブラッシュアップ後のバナーでは約3色に抑えています。3〜4色に収めることで全体に統一感を持たせる事ができます。

目立たせたい要素には「ジャンプ率」を意識！

デザイン①「ダサい」デザインでは要素を目立たせる手段として”派手な色を使う”、”トゲトゲした吹き出しを使う”のみだったのに対し、ブラッシュアップ後は"ジャンプ率を上げる"、"アクセントカラーを使う"が基本となりました。

限られた枠組み（トンマナ）の中で配色・あしらいをつける

デザイン①「ダサい」デザインではトンマナなんてものはなく、何色を使っても、フォントを引き伸ばしても良く、とにかく各要素を目立たせれば良いという、無法地帯のような形でした。

ブラッシュアップ後は、ある一定のルール（トンマナ）を設け、その枠組みの中で強弱をつけている為統一感が保たれています。