印象が180度変わる!トップ画像にインパクトを
2017/09/17
以前ブログで「良いサイトはトップ画像に迫力(力強さ)がある」と記載いたしました。
その経験を踏まえ、今回はブログ(るじログ)のトップ画像を大胆に変更いたしましたので解説していきます。
トップ画像のBefore
パっと見の第一印象として、「フリーランスのブログだなぁ」としか入って来ませんでした。背景もぼかしているが文字の印象を潰しているため中途半端。右側のブログの背景色もなんか違う感じがする。あと何か象徴的な何かが足りない...。
など、改めて見直したら改善点がたくさんでてきました。
要はインパクトが薄いトップ画像でした。
トップ画像のAfter
思い切って変えて見ました。変更点を箇条書きにすると
- 背景の透明具合をさらに薄く
- ブログの文字をモジってインパクトを出す
- 内容とフォントの変更
- フリーランスに色づけ
1. 背景の透明具合をさらに薄く
背景画像は前回と同じものを使っていますが、前回の反省点「薄さが中途半端」だったため、さらに薄くしてみました。
すると、文字がよりはっきりと見えやすくなったため、デザインのテクニックとして紹介します。
こちら(上画像)がぼかし弱めの背景で作りました。背景がまだ主張するため文字が入って来づらくなっており、お互いに中途半端になってしまします。
こちら(上画像)はぼかし強めの背景で作りました。背景がぼんやりした半面、文字がくっきりと目立ちやすくなりました。
弊社のブログのトップ画像の目的は「どんなブログか伝えること」なので断然こちらのほうがいいですね。
2. ブログの文字をモジってインパクトを出す
文字をモジるとは、以前に【たった10分】おしゃれなロゴが誰でも簡単にできる方法で紹介しました。
前回のトップ画像は「象徴的なモノがなく、インパクトがなかった」です。そこで象徴的なモノを作るべく、どこかの文字をモジってインパクトを出そうと考えたところ「ブログ」がいいと思いました。理由として、
- 3文字と少ない
- カタカナ
- 濁点が入っている
の上記3点よりモジりやすそうと判断しました。
文字が少ないと編集するのも簡単だし、カタカナだと画数が少ないから変更するイメージがつきやい。さらに濁点は一番モジりやすいポイントであるため、「ブログ」という文字は一番最適だした。(今回、濁点にはモジりませんでした)
ブログの「ロ」がビックリ箱になっており、「グ」を吹き飛ばしています。インパクトを与えること間違いなしですね。
3. 内容とフォントの変更
前回は「フリーランス の による のための ブログ」というキャッチフレーズで背景の透明具合とあいまって入って来ずらい内容でしたが、「フリーランスデザイナーによる生き残りブログ」に変更することで、
- フリーランスさが伝わってくる
- デザインについても詳しそう
- 「生き残り」というフレーズにより興味をそそられる
などキャッチフレーズを変えるだけでこんなにも与える印象が変わってきます。
さらにフォントも前回は少しデザインちっくな印象でしたが、今回は「生き残り(サバイバル)感」を出そう思い、少しトゲっとしたフォントをチョイスしました。このように、「キャッチフレーズにデザイン性と生き残り感」を加えたことにより、引き立たせることができました。
4. フリーランスに色づけ
トップ画右下にある「ブログ」を盛大にモジりインパクトを加えることに成功しましたが、これだけではブログだけが目立ちすぎて全体が入ってきません。
そこで「フリーランス」というワードに色を加えてみました。すると全体にバランスが生まれて見やすい画像に変わりました。
上画像がBeforeで下画像がAfterです。どうでしょうか。フリーランスに色が入るだけで全体的に「入って来やすく」なりますね。
インパクトを与えるまとめ
今回リニューアルしたトップ画像にインパクトを与えた要点をまとめます。
- 背景画像の透明度を上げた
- 「ブログ」という文字を盛大にモジった
- キャッチフレーズに危機感を出し、フォントもそれに追従するようにした
- 「フリーランス」というワードに色をつけることにより全体にバランスをもたらした
以上4点によりブログのトップ画像にインパクトを与えることができるようになり、「見てみたい!」と思われるようなブログに少しはなったと思います。
【WEBデザイン保存版】直帰率はトップ画像で全てが決まる でもご紹介しましたが、トップ画像に力強さを加えると直帰率が大きく下がり滞在率が大きく上がるというメリットしかないデータがとれています。
「いい記事を書いているんだけどお客さんがあまり来てくれないだよぉ」という方は思い切って変えてみるといい結果が出ると思いますよ。