1秒でユーザーを惹きつけるオシャレなブログアイキャッチ画像の作り方

ブログアイキャッチの作り方アイキャッチ

今回は、アイキャッチ画像のトレンドや、制作の参考になるサイトをご紹介していきたいと思います。

SPONSORED LINK

アイキャッチ画像をサイトに設定する目的

ブログ・ウェブサイトの記事へユーザーを誘導したり、記事への関心を高め、集客率のアップのため記事に設定する画像のことを「アイキャッチ」と呼びます。アイキャッチを使えば、記事の見栄えがよくなるだけでなく、Google画像検索からの流入も期待できます。

 アイキャッチ画像の最適サイズ

アイキャッチを作るとき、まず設定するのが「サイズ」。特に決まったサイズというものはなく、ブログ・サイトによって画像比率もバラバラです。

4:3の比率で作るオーソドックスな長方形

まず、最もオーソドックスなのが4:3の比率。ユーザーにもストレスを与えず、文章を読むときにも邪魔にならないサイズです。

1アイキャッチの作り方

16:9または16:5で作るワイド型

主にHDサイズとなる16:9や16:5のようなワイドサイズ。これはスクロールを減らしたいレスポンシブサイトのアイキャッチでよく用いられます。

2アイキャッチの作り方

例を挙げると、WEBマガジン「Food & Design Post」のFUTUREカテゴリーのアイキャッチに、16:5の画像が使用されていますね。

3アイキャッチの作り方

Food & Design Post | フードカルチャーをデザインの視点で追うライフスタイルWebマガジン

当ブログのアイキャッチ画像デザイン

当ブログは、アイキャッチを頻繁に変更しています。ブログを始めたころは「フリーフォトをリサイズしただけ期」。その次はシンプルデザインに影響された「フリーフォト+キャプション期」、その次はトレンドに影響された「フラットデザイン期」、そして現在の「グレー背景+キャプション期」。

【当ブログのアイキャッチ史】

  1. フリーフォトのみ
  2. フリーフォト+白キャプション
  3. フラットデザイン期
  4. グレー背景+アイコン+キャプション(現在)

1、フリーフォト期

ネイビードレス

今は国内外を問わず、無料の写真素材もオシャレなものが増えました。風景やオブジェクトなら海外のサイト、人物画像が欲しい時は国内のサイトがおすすめですね。

ブログを始めた当時、私はあまりアイキャッチにこだわりを持っていませんでした。そのため海外のフリーフォトを800・500pxにリサイズして貼り付けるという、まあ早い話が手抜きをしていたわけです。

フリーフォトをアイキャッチにすると確かに楽ですが、ブログが一気に無個性化してしまいます。アフィリエイトブログと勘違いされ、ユーザーにそっ閉じされる場合もあるので、やはり何かしら加工してアイキャッチに使用したほうがよさそうです。

2、フリーフォト+白キャプション期

アイキャッチの中でも最もオーソドックなスタイルが「写真+キャプション」の組み合わせ。短時間で簡単に作ることができ、かつ画像検索でも記事内容が視覚的に伝わりやすいというメリットがあります。

おしゃれなフリーフォトを選び、その上に白キャプションを乗せるだけのものであれば、2~3分で簡単に作れてます。キャプションをすべて中央揃えで統一し、それをテンプレとして用意しておけば、レイアウトを考える手間も省けます。

私が過去に作ったものだと、地政学の良書を紹介する記事のアイキャッチ(WordPress移転前に使用していたもの)が、フリーフォト+白キャプションです。世界地図写真をベースにし、ぼかしをかけてキャプションを乗せるだけ。作成時間3分。

f:id:hiroseyonaka:20151206191722p:plain
(例)フリーフォト+白キャプションのアイキャッチ1

ファッション記事用のアイキャッチにしていたのがこちら。超シンプルです。

フリーフォト白キャプションアイキャッチ1
(例)フリーフォト白キャプションアイキャッチ2

フリーフォト+白キャプションに本の枠をプラスしたのが、こちら。

フリーフォト白キャプションアイキャッチ2
(例)フリーフォト+白キャプションのアイキャッチ3

フリーフォト+白キャプションでアイキャッチを作るとき、競合サイトと差をつけたいなら、このような「ひと工夫」を加えるのがオススメ。

3、フラットデザイン期

当ブログは、トレンドの「フラットデザイン」を取り入れたアイキャッチを作り、記事に設定していた時期もあります。アイキャッチに凝りだすと画像編集にばかり時間をかけ、肝心の記事を書かなくなってしまうので、できるだけ大雑把なデザインにするよう心がけていました。

これは「ブログにSNSボタンを設置する方法」の記事用に作ったアイキャッチ。twitter、Facebook、はてなブックマーク、Pocketの4色をイメージして作っています。断じて手抜きではありません。フラットデザインです。

フリーフォト白キャプションアイキャッチ4
(例)フラットデザインのアイキャッチ1

次は、アンドロイド端末関連の記事用に作ったアイキャッチ。言うまでもありませんが、背景はドロイド君カラー。そこにドロイド君の頭部をくっつけて「アンドロイド端末の記事だよ!」と主張しています。

フリーフォト白キャプションアイキャッチ5
(例)フラットデザインのアイキャッチ2

次は、ブログレイアウトに関する記事のアイキャッチ。黄金比の図解をフラットデザインにしました。

フリーフォト白キャプションアイキャッチ6
(例)フラットデザインのアイキャッチ3

4、グレー背景+イラスト+キャプション期

WordPressに移転してから、ブログデザインを一度見直しました。ついでなので、アイキャッチも飽きがこないデザインにしようと思い、グレー背景+イラスト+キャプションの組み合わせで統一。

一番最初に紹介した地政学の良書を紹介する記事のアイキャッチ。派手さはありませんが、今はシンプルで分かりやすいデザインになっているかと思います。

地政学を独習する人が読むべき本アイキャッチ
(例)グレー背景+イラスト+キャプションのアイキャッチ1

アイキャッチに使用するイラストも、できるだけシンプルなものを選ぶようにしています。ないときは自分で作ります。フルCSSで作れる囲み枠を紹介した記事では、超絶シンプルな囲み枠のイラストを作って中央に配置しました。

フルCSSで作る囲み枠3種類アイキャッチ
(例)グレー背景+イラスト+キャプションのアイキャッチ2

グレー背景+イラスト+キャプションで作るアイキャッチは、専用のテンプレを用意しておけばほんの数分で作ることができます。

個性的な「コラージュ」で作るアイキャッチ

「コラージュ」とは、様々な素材を組み合わせて作品を作る技法のことです。最近はjpgやpng画像を使った「デジタルコラージュ」も人気。「デジタル×アナログでつくるコラージュテクニック 」は、おしゃれなコラージュのチュートリアルや、アイキャッチにも応用できようなテクニックが多く掲載されているのでおすすめです。

9アイキャッチの作り方
 出典:デジタル・アナログで作るコラージュテクニック

アイキャッチをコラージュで作る場合、1枚にかかる製作時間は10分ほどでしょうか。その時間で記事書けよと言われそうですが、個性的なアイキャッチは画像検索された時に目立つので、オリジナリティのあるものを作るとSEOにも効果があります。

私が過去に作ったコラージュ・アイキャッチがこちら。材料はフリーフォトとpixivの無料素材パーツのみ。製作時間は5分です。

泣ける本映画音楽アイキャッチ
(例)コラージュを使用したアイキャッチ1

アイキャッチ作成の参考になるサイト

アイキャッチデザインのバリエーションを増やしたいときは、プロが制作した大手サイトをチェックしましょう!アイキャッチがおしゃれなサイトをいつくかピックアップしてみましたので、よろしければご参考に。

株式会社LIG

14アイキャッチの作り方

株式会社LIG

株式会社LIGは、アイキャッチのPSD素材を無料配布しています。デザインやレイアウトが苦手な方でも真似しやすいアイキャッチを多数作られていますね。

PhotoshopVIP

15アイキャッチの作り方

PhotoshopVIP

無料素材やチュートリアルを紹介している「PhotoshopVIP」。アイキャッチもデザイン性の高いものが多く参考になります。海外のブログから引用しているアイキャッチも多いですしね。

箱庭

16アイキャッチの作り方

箱庭 haconiwa|女子クリエーターのためのライフスタイル作りマガジン

ガーリーで女性らしいアイキャッチなら「箱庭」がとても参考になります。ハンドドローイング素材と写真の組み合わせが秀逸。

マイフェイバリット関西

17アイキャッチの作り方

関西のおでかけWEBマガジン マイ・フェイバリット関西(マイフェバ)

やや商業的な雰囲気にしたければ、WEBマガジンの「マイフェイバリット関西」がおすすめです。凝っているように見えますが、バッチ素材を用意すればすぐに真似できそうなアイキャッチばかり。レイアウトの参考にもなりそう。

NSSG

18アイキャッチの作り方

NSSG – Branding, Design

デザイン性に特化したおしゃれかつシンプルなアイキャッチが良い方は、「NSSG」が参考になると思います。

SPONSORED LINK

あわせて読みたい



トップへ戻る