今回は、アイキャッチ画像のトレンドや、制作の参考になるサイトをご紹介していきたいと思います。
目次
アイキャッチ画像をサイトに設定する目的
ブログ・ウェブサイトの記事へユーザーを誘導したり、記事への関心を高め、集客率のアップのため記事に設定する画像のことを「アイキャッチ」と呼びます。アイキャッチを使えば、記事の見栄えがよくなるだけでなく、Google画像検索からの流入も期待できます。
アイキャッチを作るとき、まず設定するのが「サイズ」。特に決まったサイズというものはなく、ブログ・サイトによって画像比率もバラバラです。
4:3
まず、比率4:3。ユーザーにストレスを与えず、文章を読むときにも邪魔にならないオーソドックスなサイズです。
16:9または16:5
HDサイズとなる16:9や16:5のようなワイドサイズ。これはスクロールを減らしたいレスポンシブサイトのアイキャッチでよく用いられます。
例を挙げると、WEBマガジン「Food & Design Post」のFUTUREカテゴリーのアイキャッチに、16:5の画像が使用されていますね。
出典：Food & Design Post | フードカルチャーをデザインの視点で追うライフスタイルWebマガジン
当ブログのアイキャッチデザイン
当ブログは、アイキャッチをかなり頻繁に変更しています。ブログを始めたころは「フリーフォトをリサイズしただけ期」。その次はシンプルデザインに影響された「フリーフォト＋キャプション期」、その次はトレンドに影響された「フラットデザイン期」、そして現在の「グレー背景＋キャプション期」。
【当ブログのアイキャッチ史】
1.フリーフォトのみ
2.フリーフォト＋白キャプション
3.フラットデザイン期
4.グレー背景＋アイコン＋キャプション（現在）
1. フリーフォト期
今は国内外を問わず、無料の写真素材もオシャレなものが増えました。風景やオブジェクトなら海外のサイト、人物画像が欲しい時は国内のサイトがおすすめですね。
ブログを始めた当時、私はあまりアイキャッチにこだわりを持っていませんでした。そのため海外のフリーフォトを800・500pxにリサイズして貼り付けるという、まあ早い話が手抜きをしていたわけです。
フリーフォトをアイキャッチにすると確かに楽ですが、ブログが一気に無個性化してしまいます。アフィリエイトブログと勘違いされ、ユーザーにそっ閉じされる場合もあるので、やはり何かしら加工してアイキャッチに使用したほうがよさそうです。
2. フリーフォト＋白キャプション期
アイキャッチの中でも最もオーソドックなスタイルが「写真＋キャプション」の組み合わせ。短時間で簡単に作ることができ、かつ画像検索でも記事内容が視覚的に伝わりやすいというメリットがあります。
おしゃれなフリーフォトを選び、その上に白キャプションを乗せるだけのものであれば、２～３分で簡単に作れます。キャプションをすべて中央揃えで統一し、それをテンプレとして用意しておけば、レイアウトを考える手間も省けます。
私が過去に作ったものだと、地政学の良書を紹介する記事のアイキャッチ（WordPress移転前に使用していたもの）が、フリーフォト＋白キャプションです。世界地図写真をベースにし、ぼかしをかけてキャプションを乗せるだけ。作成時間３分。
（例）フリーフォト＋白キャプションのアイキャッチ１
ファッション記事用のアイキャッチにしていたのがこちら。超シンプルです。
（例）フリーフォト白キャプションアイキャッチ２
フリーフォト＋白キャプションに本の枠をプラスしたのが、こちら
フリーフォト＋白キャプションでアイキャッチを作るときは、こうした「ひと工夫」を加えるのがオススメ。
3. フラットデザイン期
当ブログは、トレンドの「フラットデザイン」を取り入れたアイキャッチを作り、記事に設定していた時期もあります。アイキャッチに凝りだすと画像編集にばかり時間をかけ、肝心の記事を書かなくなってしまうので、できるだけ大雑把なデザインにするよう心がけていました。
これは「ブログにSNSボタンを設置する方法」の記事用に作ったアイキャッチ。twitter、Facebook、はてなブックマーク、Pocketの４色をイメージして作っています。断じて手抜きではありません。フラットデザインです。
（例）フラットデザインのアイキャッチ１
次は、アンドロイド端末関連の記事用に作ったアイキャッチ。言うまでもありませんが、背景はドロイド君カラー。そこにドロイド君の頭部をくっつけて「アンドロイド端末の記事だよ！」と主張しています。
（例）フラットデザインのアイキャッチ２
次は、ブログレイアウトに関する記事のアイキャッチ。黄金比の図解をフラットデザインにしました。
（例）フラットデザインのアイキャッチ３
4. グレー背景＋イラスト＋キャプション期
WordPressに移転してから、ブログデザインを一度見直しました。ついでなので、アイキャッチも飽きがこないデザインにしようと思い、グレー背景＋イラスト＋キャプションの組み合わせで統一。
これは、はてなブログカスタマイズ記事のアイキャッチ。派手さはありませんが、シンプルで分かりやすいデザインになっているかと思います。
（例）グレー背景＋イラスト＋キャプションのアイキャッチ１
アイキャッチに使用するイラストも、できるだけシンプルなものを選択。ないときは自分で作ります。フルCSSで作れる囲み枠を紹介した記事では、超絶シンプルな囲み枠のイラストを作って中央に配置しました。
（例）グレー背景＋イラスト＋キャプションのアイキャッチ２
グレー背景＋イラスト＋キャプションで作るアイキャッチは、専用のテンプレを用意しておけば数分で作ることができます。
個性的なコラージュアイキャッチ
「コラージュ」とは、様々な素材を組み合わせて作品を作る技法のことです。最近はjpgやpng画像を使った「デジタルコラージュ」も人気。デジタル×アナログでつくるコラージュテクニック 」は、おしゃれなコラージュのチュートリアルや、アイキャッチにも応用できようなテクニックが多く掲載されているのでおすすめです。
出典：デジタル・アナログで作るコラージュテクニック
アイキャッチをコラージュで作る場合、１枚にかかる製作時間は１０分ほどでしょうか。その時間で記事書けよと言われそうですが、個性的なアイキャッチは画像検索された時に目立つので、オリジナリティのあるものを作るとSEOにも効果があります。
私が過去に作ったコラージュ・アイキャッチがこちら。材料はフリーフォトとpixivの無料素材パーツのみ。製作時間は５分です。
（例）コラージュを使用したアイキャッチ１
コラージュとは少し違うのですが、自作の素材を組み合わせて本やゲームのタイトル画面を模したアイキャッチを作ることもあります。
（例）遙かなる時空の中で3のタイトル画面を模したアイキャッチ
アイキャッチ作成の参考になるサイト
アイキャッチデザインのバリエーションを増やしたいときは、プロが制作した大手サイトをチェックしましょう！アイキャッチがおしゃれなサイトをいつくかピックアップしてみましたので、よろしければご参考に。
株式会社LIG
株式会社LIGは、アイキャッチのPSD素材を無料配布しています。デザインやレイアウトが苦手な方でも真似しやすいアイキャッチを多数作られていますね。
PhotoshopVIP
無料素材やチュートリアルを紹介している「PhotoshopVIP」。アイキャッチもデザイン性の高いものが多く参考になります。海外のブログから引用しているアイキャッチも多いですしね。
箱庭
箱庭 haconiwa｜女子クリエーターのためのライフスタイル作りマガジン
ガーリーで女性らしいアイキャッチなら「箱庭」がとても参考になります。ハンドドローイング素材と写真の組み合わせが秀逸。
マイフェイバリット関西
関西のおでかけWEBマガジン マイ・フェイバリット関西（マイフェバ）
やや商業的な雰囲気にしたければ、WEBマガジンの「マイフェイバリット関西」がおすすめです。凝っているように見えますが、バッチ素材を用意すればすぐに真似できそうなアイキャッチばかり。レイアウトの参考にもなりそう。
NSSG
デザイン性に特化したおしゃれかつシンプルなアイキャッチが良い方は、「NSSG」が参考になると思います。
