TYRANNO CREATIVE ARTS(ティラノ・クリエイティブ・アーツ)サービスの価値を最大限
発掘するWEB制作会社

BLOG

バナーデザインをちょっとプロっぽく見せる7つのコツ

2019.3.4

WEBサイトのコツ

デザインのコツ

なんかダサイ。なにか古臭い。なにか怪しげ。

だけど、何がどうして?そうなってしまったのか、説明しろと言われても説明が難しいのが、デザインというもの。

今回はそんなダサいデザインを、どうしたら気持ちの良い、いわゆるプロっぽいデザインにできるのかを解説したいと思います。

デザインスキルアップ

まずこちら。素人感満載のバナーです。フォントは日本人ならだれもがチョイスをしたことがある「MSゴシック」を使用。

さらに、ワンクリックで他との差を出せる「斜体」をあしらっています。

なぜか、文字のまわりが「もやりもやり」としています。これは画像のサイズが小さすぎたり、解像度が低すぎると、もやが出て、いっそう怪しさが際立ちます。

「白背景じゃ寂しいから、写真をいれてみっかな!女の子の写真も入れて、可愛い女の子にたくさん見てもらえるようにしよう」

ということで、文字と写真が完全にバッティングして、とにかく読みづらくなりました。

デザインスキルアップ

「黒がダメなら、白だな」

ほぼ読みにくさは変わりません。

デザインスキルアップ

「ああ!なんかモヤモヤしてると思った。画像サイズちゃんと調べてなかったわ」

デザインスキルアップ

モヤがなくなり、綺麗にはなりましたが、文字の見づらさは相変わらず。

「そうか!文字に目立つ色でフチをつければいいんだ!」

デザインスキルアップ

これ、まさに典型的なパターンの完成です。

黒い文字に、赤を合わせると、色が喧嘩してチカチカするうえ、お互い黒系統なので、文字が沈んでしまい見づらくなります。

パワーポイントなどで安易に、文字にフチをつけると、文字の内側にフチがめり込むため、文字の原型が潰れ、ますます読みづらく、怪しい雰囲気になっていきます。

ちなみにデザイナー初心者は、はじめ何も知らずこれをやってしまい、よく怒られます。

「そうか!白い文字を際立たせるには、背景を暗くしてみればいいのか!」

デザインスキルアップ

素晴らしい気づきです。だいぶ文字が見やすく、さらに余計な装飾や色がなくなり、スッキリしました。

とはいえ、まだまだ素人感は抜けません。

「フォントがダメなのかな?色々変えてみよう」

デザインスキルアップ

だいぶいい感じです。このフォントはWindowsやMacにも入っている(たぶん)「游ゴシック」の太字です。

「なんか文字がバラバラな気がするなあ」

デザインスキルアップ

そうです。文字と文字の隙間がバラバラだと、気の抜けた感じになってしまいます。

文字間をきゅっと調節しましょう。お使いのソフトやアプリに、自動調節の機能があれば使ってみてください。

カーニングというやつです。

「んー。なんかパッと明るい感じにしたいな」

デザインスキルアップ

素晴らしい。白い文字の下に、1枚敷くことで、文字に背景ができてメリハリがつきます。

白文字には濃い色を。黒文字であれば、明るい白っぽい色の下地をつけてみましょう。

文字と背景の色の差、コントラストをはっきりさせればさせるほど、文字が際立って、ぱきっとします。

「最後に一手間、加えるかな!」

文字のまわりにさりげなく、濃い目の緑の光彩(ふわーとした効果)をつけ、より文字と背景のコントラストを強くし、文字を目立たせます。

緑の下地を少し透明にして、写真の全体像がぼんやり見えるようにし、イメージをより伝わりやすくします。

さらに、「保存版」の吹き出しをつけることで、アクセントをつけ、より目がとまるようにしました。

もとのバナーはこちら。ぜひ比較してみてください。

デザインスキルアップ

ぜひ、みなさんもチャレンジしてみてください!

意外とダサいバナーのほうがクリックされたりすることもあるので、一概には言えないのがWEBマーケティングの怖いところですが(笑)。

ちなみに私の本業はWEBデザイナーでなく、WEBディレクターやWEBコンサルなので、「おれにもバナー作ってくれ!」という相談ではなく、「うちのWEBサイトどうしたらいい!?」というご相談をいただけると嬉しいです。

毎月3社限定<無料>個別相談会受付中!

中小企業の経営者、ご担当社様向けに、個別相談会を開催しております。
現在、無料で行なっておりますので、この機会をぜひ、ご利用ください。
個別相談会の詳細はこちらから

法人の方はこちら

個人の方はこちら

経営者・フリーランス・個⼈起業家のための
ブランディング講座