読者です 読者をやめる 読者になる 読者になる

よなかのはなし

LifeHacks And Hello!Project Blog

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

ブログ

f:id:hiroseyonaka:20151227220618p:plain

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

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

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

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

 

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

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

 

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

f:id:hiroseyonaka:20151227193140p:plain

 

まず、最もオーソドックスなのが4:3の比率。

ユーザーにもストレスを与えず、文章を読むときにも邪魔にならないサイズと言えますね。このサイトのアイキャッチ画像も4:3の比率で作っています。

 

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

f:id:hiroseyonaka:20151227193218p:plain

 

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

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

 

f:id:hiroseyonaka:20151227190750p:plain

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

 

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

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

 

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

 

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

f:id:hiroseyonaka:20151227185323p:plain

 

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

 

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

 

https://designschool.canva.com/wp-content/uploads/sites/2/cache/2015/06/2-Wilderlands-Presentation/2-Wilderlands-Presentation-662x497.png出典:50 Free Branding Templates For Your Business

 

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

 

f:id:hiroseyonaka:20151206191722p:plain

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

 

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

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

 

f:id:hiroseyonaka:20151216201327p:plain

 

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

 

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

Cinema Display Psd Mockup | Psd Mock Up Templates | Pixeden

 

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

Responsive Showcase Device Mockup

 

自分のカラーをアピールしたいなら、個性的な「コラージュ」で!

 「コラージュ」とは、様々な素材を組み合わせて作品を作る技法のことです。最近はjpegやpng画像を使ったデジタルコラージュも人気で、専門書も出ているほど。

 

デジタル×アナログでつくるコラージュテクニック 」は、おしゃれなコラージュのチュートリアルや、アイキャッチにも応用できようなテクニックが多く掲載されているのでおすすめです。

 

デジタル×アナログでつくるコラージュテクニック Cut, Paste, Collective.

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

 

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

 

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

 

f:id:hiroseyonaka:20151210190831p:plain

 

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

 

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

Pixabay

 

f:id:hiroseyonaka:20151227191147p:plain

 Free Images - Pixabay

 

 

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

 

 Pixabayのおすすめのエディター

 

tookapic | Pixabay

風景からアイテムまでオールマイティーな写真素材をアップしてくださっています。個人的に1番お世話になっているエディター。

 

ArtsyBee | Pixabay

ロマンチックでレトロガーリーな素材を多くアップされています。

 

ClkerFreeVectorImages | Pixabay

クリップアートならこちら一択。

 

 

DeviantArt

f:id:hiroseyonaka:20151227191331p:plain

 DeviantArt - The largest online art gallery and community

 

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

検索するときは「PNG PACK」や「PNG SET」といったキーワードで。

 

pixiv

f:id:hiroseyonaka:20151227191356p:plain

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

 

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

 

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

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

 

株式会社LIG

f:id:hiroseyonaka:20151227191631p:plain

株式会社LIG

 

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

 

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中(1)社員編 | 株式会社LIG

 

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中(2)アニメーション編 | 株式会社LIG

 

 

PhotoshopVIP

f:id:hiroseyonaka:20151227191726p:plain

 PhotoshopVIP - Photoshopの無料素材や、フリーフォント、最新ニュース、チュートリアルをいち早くお届けするデザインブログ

 

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

 

箱庭

f:id:hiroseyonaka:20151227191801p:plain

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

 

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

 

マイフェイバリット関西

f:id:hiroseyonaka:20151227191828p:plain

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

 

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

 

NSSG

f:id:hiroseyonaka:20151227191911p:plain

NSSG - Branding, Design

 

デザイン性に特化したおしゃれかつシンプルなアイキャッチが良い方は、デザインスタジオの「NSSG」が参考になると思います。画像を選んだりレイアウトする度に「自分にはなんてセンスがないんだ!」とお悩みの方も多いと思いますが(私もそのひとり…)、NSSGのアイキャッチを参考にすると、自然とセンスのいいアイキャッチが作れると思いますよ。

 

まとめ

私自身もまだまだアイキャッチに関しては勉強中の身、今後も参考になるサイトやレイアウトがあればこの記事も随時更新していきたいと思います。

記事の文章ももちろん重要ですが、アイキャッチも手抜きにならないように、個性をだしながらこだわっていきたいですね!