集客効果も抜群!1秒でユーザーを惹きつけるオシャレなブログアイキャッチ画像の作り方

WordPressアイキャッチ

ブログでは、文章と同じくらい重要な役割を持つアイキャッチ。今回はそんなアイキャッチ画像のトレンドや、制作の参考になるサイトをご紹介していきたいと思います。

SPONSORED LINK

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

ブログ・ウェブサイトの記事へユーザーを誘導したり、記事への関心を高めて集客率のアップを狙うために設定する画像のことを、アイキャッチと呼びます。

アイキャッチを使うことで記事全体の見栄えが良くなるのはもちろん、画像検索からのアクセスも期待できるためSEOにも有利。アイキャッチと類似したものにウェブバナーがありますが、個人的にはアイキャッチはバナーほどデザインが凝っていないもの、というイメージです。

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

アイキャッチを作る際に、まず決めなければならないのが「サイズ」。特に決まったサイズというものはないので、サイトによって画像比率もバラバラです。

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

1アイキャッチの作り方

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

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

2アイキャッチの作り方

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

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

3アイキャッチの作り方

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

アイキャッチ画像デザインの主流は3パターン

現在、多くのサイトで使用されているアイキャッチのデザインは、大きく3つに分けることができます。

  1. 写真
  2. 写真+キャプション
  3. キャプチャ画像

1、写真を使ったアイキャッチ

5アイキャッチの作り方

今は国内外を問わず、無料の写真素材もおしゃれなものが増えました。加工なしでも十分おしゃれに見えるので、写真をそのままアイキャッチにしているサイトもよく見かけます。私がよく利用しているのは、以下のサイト。風景やオブジェクトなら海外のサイト、人物の画像が欲しい時は国内のサイトと使い分けています。

【Free Stock Photos】
Free Stock Photos | Stockvault.net – Free Photos – Free Images

【StockSnap】
StockSnap.io – Beautiful Free Stock Photos (CC0)

【IM Fee】
IM Free – Free Website Templates, Free Images & More

【ぱくたそ】
ぱくたそ – フリー写真素材・無料ダウンロード

【写真AC】
写真素材なら「写真AC」無料(フリー)ダウンロードOK

2、写真+キャプションのアイキャッチ

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

フリー素材でおしゃれな写真を選び、ぼかしをかけて上にキャプションを乗せるだけのものであれば2~3分で簡単に作れてしまいますし、キャプションは中央揃えにすれば見栄えも良いのでレイアウトを考える手間も省け、効率面でも優秀。写真とタイポグラフィを組み合わせたアイキャッチを作るなら、以下の記事がとても参考になります。

50 Free Branding Templates For Your Business

6アイキャッチの作り方

出典:50 Free Branding Templates For Your Business

私自身が過去に作ったものだと、地政学の良書を取り上げたこのアイキャッチが、写真+タイポグラフィタイプです。世界地図の写真をベースにし、画像にぼかしをかけてキャプションを乗せています。所要時間3分。

f:id:hiroseyonaka:20151206191722p:plain

写真+キャプションでアイキャッチを作るとき、競合サイトと差をつけたいなら、ちょっとした「一工夫」を加えることも必要です。地政学本のアイキャッチでは、ただキャプションを乗せるだけでなく、ワンポイントとして地球のアイコンを乗せました。

3、キャプチャ画像のアイキャッチ

サイトのキャプチャをアイキャッチにする場合は、WEBサイト紹介、ブログの収益報告、あとはWEBTIP記事などが多いですよね。ただ、サイトの背景画像が淡い色の場合、キャプチャを貼り付けても目立たないことがあります。そんな時はフリーのモックアップ素材を使ってみましょう。

8アイキャッチの作り方

これは、おしゃれなミニマルサイトを紹介する記事を書く際に作成したアイキャッチ画像ですが、ブログの背景色とキャプチャの背景色がともに白で目立たなかったので、iMacのモックアップ素材を使いました。

▼実際に使用したiMacのモックアップ素材(無料)はこちら。

Cinema Display Psd Mockup | Psd Mock Up Templates | Pixeden

デスクトップ、タブレット、スマートフォンがセットになっている、こちらのモックアップ素材(無料)もアイキャッチを作るときによく使います。

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

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

9アイキャッチの作り方

 出典:デジタル・アナログで作るコラージュテクニック

アイキャッチをコラージュで作る場合、1枚あたりの製作時間は約10分ほどでしょうか。普通に考えればその時間で記事書けよという話なんですが、個性的なアイキャッチは画像検索された時に目立つので、そこそこ時間をかけてでもオリジナリティのある画像を作っておくと、後々効いてきます(SEO的な意味で)。

私も以前、こちらのエントリーのアイキャッチをコラージュで作りました。材料は商用フリーの無料写真とpixivの無料素材パーツのみで、製作時間は5分ほど。

10アイキャッチの作り方

凝り性の方は納得行くまで延々とデータいじり続けて一向に完成しないのでコラージュは止めといたほうがいいと思いますが、そこそこのクオリティで満足できる人にはおすすめです。個性溢れるアイキャッチは他のブロガーとかぶらないので満足度も高いし、安心できますよ。

コラージュの材料を集められるサイト一覧

Pixabay

Free Images – Pixabay

Pixabayは海外のフリー写真素材を一気に検索・ダウンロードできるので、素材集めにはもっていこい。写真だけでなく、イラスト・ベクター素材も検索できるので便利です。画像数が膨大なので、検索する際はキーワードをかなりピンポイントで絞り込むのがコツです。

DeviantArt

DeviantArt – The largest online art gallery and community

DeviantArtでも、無料素材が配布されています。中でも、コラージュに使える「png画像セット」は重宝するので気に入ったものがあればダウンロードしておくと便利。検索するときは「PNG PACK」や「PNG SET」といったキーワードで。

pixiv

イラストコミュニケーションサービス[pixiv(ピクシブ)]

お絵かきサイトで有名なpixivにも、フリー素材をアップしている方が多いので、定期的に確認しておいて損はありません。pixivはテクスチャをはじめ、花やレース、スイーツのパーツ素材を多く手に入れることができます。

アイキャッチが参考になるサイト

アイキャッチのデザインのヒントを探すなら、やはりプロが制作した大手サイトを参考にするのが1番!ある程度デザインが決まってから制作に取り掛からないと、記事を書くよりアイキャッチを作るのに時間がかかって本末転倒になりかねませんので、事前にリサーチをしておきましょう。

株式会社LIG

14アイキャッチの作り方

株式会社LIG

株式会社LIGでは、以下のエントリーでアイキャッチのPSD素材を無料配布しています。アイキャッチ自体はものすごくおしゃれというわけではありませんが、デザインやレイアウトが苦手な方でも真似しやすいデザインだと思います。

PhotoshopVIP

15アイキャッチの作り方

PhotoshopVIP

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

箱庭

16アイキャッチの作り方

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

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

マイフェイバリット関西

17アイキャッチの作り方

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

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

NSSG

18アイキャッチの作り方

NSSG – Branding, Design

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

SPONSORED LINK

あわせて読みたい



トップへ戻る