シミルデザイン

ブログ

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

2019.3.4 WEBサイトのコツ

デザインのコツ
Pocket

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

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

 

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

 

デザインスキルアップ

 

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

 

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

 

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

 

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

 

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

 

デザインスキルアップ

 

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

 

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

 

デザインスキルアップ

 

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

 

デザインスキルアップ

 

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

 

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

 

デザインスキルアップ

 

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

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

 

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

 

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

 

 

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

 

デザインスキルアップ

 

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

 

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

 

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

 

デザインスキルアップ

 

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

 

 

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

 

デザインスキルアップ

 

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

 

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

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

 

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

 

デザインスキルアップ

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

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

 

デザインスキルアップ

 

 

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

 

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

 

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

 

法人の方へ

WEBサイト制作のご依頼

時代にあったコンセプトのある新しいサイトにリニューアルしたい。
ブログや運用をしっかり見直して、経営者本人や社員でも想いをもって
運用できる体制を整えたい。という法人の方、ぜひご相談ください。

ご相談はこちらより

個人起業家の方へ

相思相愛WEB集客習得プログラム

Simil Designでは企業で培ったWEBマーケティングのノウハウと、独立後、ひとりWEB集客で培った経験を体系化し、
WEB集客習得実践講座をスタートしました。

ご自身でWEBづくり、WEB集客を身に付けたい方はぜひご相談ください。

相思相愛WEB集客習得プログラム

LINE@はじめました!
WEB集客などのノウハウなどを配信します。
また、気軽にご質問いただけるので、ぜひ登録してみてください!

友だち追加

 

 

同じカテゴリの記事

新着記事