ブログの集客を加速させる「アイキャッチ」とそのデザインについて


ブログの集客を加速させる「アイキャッチ」とそのデザインについて

こんにちは。
最近よく社内でFacebookアカウントの乗っ取り被害にあってます、デザイナーの佐藤タカアキ(@sato_tkaaki)です。(犯人は多分この人です。)

さて私のデザイナー業務の一つに、日々更新されるLIGブログ記事の「アイキャッチ画像を作成する」という仕事があります。そして先日、毎日地道に作成してきたアイキャッチの数が、ちょうど300個に達しました。
そこで本日は、きりも良いので、アイキャッチを300個作成する中で私が学んだ「ブログのアイキャッチ作成時の参考にしてほしい情報」を紹介させていただきます。

アイキャッチとは

まずは「そもそもアイキャッチって何?」という方のために説明させていただきます。
アイキャッチとは、ターゲットユーザーの注意を引いて記事へと誘導させ、クリック意欲を刺激することなどを目的とした画像イメージとなります。
一般的な広告であれば、写真やイラストにキャッチコピーを加えたものが中心となります。
実店舗であれば、その商品についての説明書きや、商品のディスプレイなどがアイキャッチと呼ばれています。
そしてWebサイト上では、商品画像の配置や全体のレイアウト、文字通り目を引きつけるような画像イメージがアイキャッチと呼ばれています。

アイキャッチの必要性

アイキャッチの概要についてはだいたいご理解いただけたかと思います。
続いて「なんでブログ記事にアイキャッチが必要なの?」という疑問をお持ちの方に向けて、アイキャッチの必要性について説明させていただきます。
そもそもブログの記事は、より多くのユーザーに見ていただくために拡散されることが大切になります。そこでアイキャッチの登場となるわけですが、その理由は、単にブログの見栄えがよくなるから、というだけのものではありません。

SNSがビジネスツールとして定着してきた昨今、ブログの記事はSNSによる拡散からのユーザーの流入経路として、大きな役割を担うようになりました。それに伴い、アイキャッチはさらに重要なものとなってきました。

例えばブログ記事にアイキャッチ画像を設定しておくと、Facebookで「いいね!」が押されたとき、記事のタイトルだけでなく画像も一緒にニュースフィードに表示されます。

アイキャッチ画像を設定した場合

1

アイキャッチ画像を設定しなかった場合

2

どちらの方がブログ記事への興味を持たれやすいか、そして流入数の増大につながるかは一目瞭然ですよね。
アイキャッチ画像を設定することで拡散力の増大につながるのは、もちろんFacebookだけではありません。はてブやTwitterでも同様であり、設定しない手はないでしょう。

アイキャッチの効果的な魅せ方

では次に、どういったアイキャッチを作成すればいいのか。特に膨大な量となるブログ記事用のアイキャッチを作成していくなら、いつかアイデアも行き詰まるときがきてしまうかもしれません。
そこで、これまで実際に私がLIGブログで作成してきたアイキャッチを例に、参考となるアイキャッチの作成パターン10選を紹介させていただきます。

カラーで魅せるアイキャッチ

該当するブログ記事のカラーを全面に押し出し、人間の視覚にダイレクトに訴えかけるアイキャッチの例です。
紹介するコンテンツの認知度が高い場合に効果的です。

Welcome to Japan! 日本各地の魅力を海外に伝えるサイトまとめ

211
http://liginc.co.jp/web/useful/99449

Google検索がもっと便利になる検索オプション・テクニックまとめ

83
http://liginc.co.jp/web/service/google/86222

IEでも再現可能!簡単にエフェクトがきいたホバーボタンを作る方法

92
http://liginc.co.jp/web/js/jquery/88512

並べて魅せるアイキャッチ

さまざまな写真を並べることによって、更なるインパクトと、単体の写真とはまた違ったメッセージ性とを生むことができます。
特に人の顔写真を並べると、程よい緊張感を生むことができ、背景のみでもコンテンツのイメージを伝えることができます。

スタッフページが個性的な、広告・Web系企業のコーポレートサイトまとめ

250
http://liginc.co.jp/web/matome-web/107327

Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個

212
http://liginc.co.jp/web/js/jquery/78246

クライアントも満足!コーポレイトサイトのコンテンツ候補10例

64
http://liginc.co.jp/web/useful/86583

インパクトで魅せるアイキャッチ

とにかく一発でユーザーの目を引くことを目的としたアイキャッチデザインです。
しかし、ただ派手な絵を作ればよいというわけではありません。
あくまでもブログ記事のタイトル、内容に即したデザインとなるよう心がけましょう。

例えば以下のアイキャッチは「5つ」「比較」という2つのキーワードにフォーカスし、5つの腕との腕相撲で内容を表現しています。

WordPressの5つの主要セキュリティプラグインを詳細に比較してみた

243
http://liginc.co.jp/web/wp/plug-in/106684

Photoshop初心者が写真加工や編集をおこなうための必須ツール20選・前編

254
http://liginc.co.jp/web/design/photoshop/110177

クラウドファンディングの始め方を公開!CAMPFIRE着火の手順まとめ

47
http://liginc.co.jp/web/service/84283

アイコンで魅せるアイキャッチ

アイコンで記事の内容を連想させるアイキャッチパターンです。ツールやアプリの紹介系記事でよく使用されています。
有名どころですと、Chromeウェブストアなどがこの手法を上手く取り入れていると思います。

フリーランスは知っておきたいオンラインクラウド請求書作成ツール8選

248
http://liginc.co.jp/web/tool/other-tool/106594

全東京都内のシェアオフィス・コワーキングスペースまとめ【完全版】

255
http://liginc.co.jp/life/business/109100

UBERだけじゃない!スマホでタクシーが呼べる配車サービス・アプリまとめ

155
http://liginc.co.jp/web/tool/mac-iphone/97590

動きをつけて目を引くアイキャッチ

静止画のアイキャッチが多い中、動きのあるアイキャッチはやはり目立ちます。
例えば以下のアイキャッチはGIF画像を使用しております。GIF画像の作成も昔に比べて容易になっているので、まだ活用したことがないという人はこれを機に一度挑戦してみてはいかがでしょうか。

初心者デザイナーにオススメ!アイディアの集め方とその活用方法

57
http://liginc.co.jp/web/design/material/86193

写真の一部がちょっとだけ動く、シネマグラフを使ったサイトまとめ

174
http://liginc.co.jp/web/tool/mac-iphone/98199

オウンドメディアを活用!コーポレートサイトに広告を掲載した結果まとめ

48
http://liginc.co.jp/web/useful/83966

疑問系で投げかけるアイキャッチ

ユーザー心理に訴えかけるアイキャッチ画像となります。
文字を効果的に使うことで心に直接響かせる手法となりますが、過剰な煽り文などを用いることにならないよう注意しましょう。

ネイティブアドって何?今話題のインターネット広告の基本が誰でもわかる5つのポイント

257
http://liginc.co.jp/web/useful/109529

夏までに痩せたい!短期間でダイエットに成功するためのサイト・アプリまとめ

131
http://liginc.co.jp/web/tool/app/94545

正しい時期はいつ?取引先へのお中元・お歳暮マナー10ヶ条

名称未設定-3
http://liginc.co.jp/life/matome-life/98196

写真で魅せるアイキャッチ

とにかく写真で魅せましょう。
ただし、モデルのアサイン、シチュエーション設計、撮影、加工作業など、それなりに工数がかかることも認識しておきましょう。

大食い王の座を賭けて、ケンタッキーフライドチキン食べ放題に行ってきた

61
http://liginc.co.jp/life/gogo/food/99477

料理人を大募集!長野のゲストハウスLAMPで一緒に働きませんか?

245_1
http://liginc.co.jp/omoshiro/lamp/106823

パワハラ・セクハラで相手を不快にさせないように注意するべきオフィスでの発言7選

191
http://liginc.co.jp/life/business/100797

動物で魅せるアイキャッチ

可愛いは正義ですよね。
特に記事内キーワードに「苦手」「困難」「克服」など、負のイメージワードが用いられているときなど、印象を緩和させるために活用していくのが良いと思います。

新入社員が5月病になる原因と予防・対策・治療方法まとめ

83
http://liginc.co.jp/life/useful-info/87096

ビジネス書が苦手な人にもおすすめ!マネージャー・リーダー論の本5選

137_2
http://liginc.co.jp/life/business/95128

怒られたくない!上司と上手くコミュニケーションをとるための5つのコツ

150
http://liginc.co.jp/life/business/87680

モノトーン・シルエットで引き締めるアイキャッチ

モノトーンやシルエットには画を引き締め、適度な緊張感を生み出す効果があります。
真面目系記事のアイキャッチにオススメです。

強い組織づくりのために試行錯誤しつつも、柔軟さは大切にしたい。

2651
http://liginc.co.jp/life/president/110844

写真を効果的に使ってコンセプトを伝えるWebサイト10選

2241
http://liginc.co.jp/web/design/102665

Googleアルゴリズムの変更に耐え得る体幹の強いメディアをつくろう

名称未設定-3
http://liginc.co.jp/web/seo/95213

言葉の比喩表現で魅せるアイキャッチ

赤ちゃんとパソコンでPhotoshop初心者を表現してみたり、人物のほうをドラッグ&ドロップしてみたりなど、比喩表現を用いればさまざまな魅せ方が可能となります。

撮影した写真を加工しよう!Photoshop初心者が知っておきたい使い方・基本設定まとめ

246
http://liginc.co.jp/web/design/photoshop/105768

jQuery UIを利用して要素をドラッグアンドドロップさせてみる

225
http://liginc.co.jp/web/js/jquery/102848

新しいサービスをつくろう!締め切り間近のハッカソンまとめ6選

206
http://liginc.co.jp/web/design/102434

まとめ

いかがでしたでしょうか?
一言で「アイキャッチ」といっても、人の目を引くデザインは簡単に思い浮かぶものではありません。
派手さに走って注意を引くという方法もたまには良いとは思いますが、今回のようにブログ記事のアイキャッチであれば、目的はあくまでも「ブログ記事への誘導」です。
まず記事内容を自身がしっかり理解したうえで、読者がスムーズに入ることができるようなアイキャッチ作成を心がけるようにしましょう。

私もまだまだ勉強中の身ですので、今後もさまざまな新しい手法やデザインのアイキャッチを、自身の手で生み出していけるよう精進してまいります。

それではまた。

01

この記事を書いた人

佐藤タカアキ
佐藤タカアキ デザイナー 2014年入社
幸いにもデザイナーという肩書きをいただき、良くも悪くも毎日多忙な日々を送っているフリをしています。