facebook&ブログ両対応「アイキャッチ画像」の作り方を公開します

「人は見かけが9割」なんていう本も出ていますが、ブログ記事も最初の印象で読まれるか読まれないかって左右される部分があります。

ブログ記事が人の目に付く場面として想定されるのが、FacebookやTwitterなどのSNS。

SNSでのシェアによる拡散は無視できないものがあります。

このシェアされる際に最初に目に飛び込んでくるのが「アイキャッチ画像」ではないでしょうか。

また、アイキャッチ画像の有無で、読まれるかどうかにも差が出るように感じます。

つまりアイキャッチ画像というのは本の表紙、店の看板のようなもの!!

なので僕はアイキャッチ用の画像を別途作るように心がけています。最近ですが。

と言ってもブログ記事用の画像と、アイキャッチ用の画像、後述するブログサムネイル用の画像と、何種類も画像を作るのも手間ですよね。

その全てを1つで賄えるアイキャッチ画像を作ろう、というのが今回の趣旨です。

僕のブログの書き方

手前味噌ながら、僕がブログ記事のテーマを決めてから、完成させるまでのざっくりした流れを紹介します。

せっかくなので、前回の記事「【燻製レシピ】切れてるチーズで作る!ペッパースモークチーズの作り方」のときのやつで。

これは「燻製作りをもっと広めたい!」という願いを込めて(笑)作ったものなので、写真撮影も自分で行いました。

ただ燻製作りという作業の都合上、途中で止めるわけにもいかないので、いったん燻製作りを完成させてからブログの作成を行いました。

全体の手順としては、

  1. 写真で紹介したいポイントを想定する
  2. 燻製を作りつつ写真を撮る(燻製作りはここで終了)
  3. ブログ用に写真をリサイズ、加工する
  4. 文章を書く
  5. アイキャッチ用の画像を作る

という流れになります。

今回紹介するのは5番目の「アイキャッチ画像を作る」の部分ですね。

そもそもアイキャッチ画像って何?

たぶんこの記事に辿り着く人はブログを書かれている方だと思うので説明不要かもしれませんが・・・

アイキャッチ画像というのはざっくり言うと「ブログ記事の表紙となる画像」です。

ブログ本体の表紙はヘッダー画像だと思うのですが、記事の表紙はアイキャッチ画像ですね。

ブログ記事一覧ページの小さなサムネイル画像にも同じ画像を使われることが多いので「アイキャッチ画像=サムネイル画像」と捉えて良いかもしれません。使っているブログやブログテーマによって異なりますが、記事の先頭にドドンと大きく表示される場合もあります。

また、FacebookやTwitterでシェアされたときや、はてブされて新着エントリーなどに表示される画像も、このアイキャッチ画像となります。

つまり、ブログ記事が読まれる前に読者へアピールするため画像、それがアイキャッチ画像!!

アイキャッチ画像を設定している場合

例えば「良い記事があったからフェイスブックでシェアしたい!」と思ってリンクを貼り付けた場合、正しくアイキャッチ画像を設定していると、こんな感じに表示されます。

Facebookシェア(アイキャッチ画像あり)

画像がバッチリ表示されて目につく!

素敵!!

付き合って!!!

アイキャッチ画像を設定していない場合

ところが、アイキャッチ画像を設定していない場合だと・・・

Facebookシェア(アイキャッチ画像なし)

こんな感じで、記事内の画像を勝手に引っ張ってきて表示しちゃいます。これはしょんぼり。

はてなブックマークだとこんな感じで、

はてなブックマーク

画像による訴求ができなくなります。これはこれで目立つし本文も読めて良いのですが。

こうやって比べると、アイキャッチ画像が重要な感じがしてきましたね!

Facebookでシェアされた時を想定する

まず、Facebookでブログ記事がシェアされた場合を想定します。

なぜFacebookを一番最初に想定するかというと、Facebook用の画像が一番大きいサイズなんですね。

ブログのサムネイルなんかはブログシステムが勝手に縮小とか切り抜きとかしてくれるので、大は小を兼ねるでFacebook用の画像サイズで作成します。

Facebookに表示される画像サイズ

Facebookに目立つように表示されるためには、横1200px*縦630pxの画像が必要となります。

アイキャッチサンプル

こんな感じで、横長の画像となります。

結構大きいですが、昨今のデジカメやスマホで撮影する写真ならば問題ないサイズです。

ただ、このように写真だけペロンと貼っただけでは、ブログ記事の内容がわかりづらいですよね。

ブログ記事のタイトルを入れよう

ですので、この画像にブログ記事タイトルを入れることで、ひと目で内容を把握できるようします。

アイキャッチサンプル(文字入れ)

こんな感じにすると記事の内容もわかりやすくなりますね。

だけど、ちょっと待って下さい!!

Facebook用としてはこれで良いのですが、ブログのサムネイル用としてはちょっと問題があるのです。

ブログのサムネイルサイズも想定する

Facebook用としては上のように横長の画像で良いのですが、ブログのサムネイル画像ってほとんどが正方形なんですよね。

上の横長画像もアイキャッチ用に指定した場合、ブログシステムが正方形にトリミング(画像を切り抜くこと)してしまいます。

つまり、こんな画像になります。

アイキャッチサンプル(サムネイル)

切れてるのはお前だろ!っていう。

これじゃちょっと精神的によろしくありません。

サムネイルでよくある画像サイズ

ブログのサムネイル画像は正方形に切り抜かれてしまうため、それを想定したアイキャッチ画像を作ることになります。

具体的には、入れた文字が切れないように中心に寄せる、ということです。

アイキャッチサンプル(文字中央寄せ)

ついでに燻製ということで煙っぽいイメージにしてみました(笑)

この画像がブログのサムネイルサイズになると、

アイキャッチサンプル(サムネイル中央寄せ)

こうなります!

実際の表示だとこんな感じですね。

記事一覧イメージ

これで、ひとつの画像で「Facebook用の画像」「ブログのサムネイル画像」に対応することが出来ました。

その他のサンプル

もう一つサンプルを示します。

僕が運営している別のブログで「【あるあるネタ】入浴中にお風呂でやっちゃう、人には言えない15のコト」というのがあるのですが、このアイキャッチ画像も同じ手法で作っています。

元の画像は無料写真素材PAKUTASOさんからダウンロードしたこの写真。

アイキャッチサンプル2

この写真を横1200px*縦630pxにリサイズし、ブログサムネイルサイズを想定して文字入れしたのがこちら。

アイキャッチサンプル2(完成)

実際に正方形にトリミングされると、

アイキャッチサンプル2(サムネイル)

「どうしてもお姉さんを入れたい」という熱意も伝わると嬉しいです。

まとめ

このように、ひとつの画像で「Facebook用の画像」「ブログサムネイルの画像」に対応するには以下の点に注意して作成します。

  • 画像サイズは1200px*630px(最低でも600*315px、縦横比率が大事)
  • 正方形にトリミングされることを想定して文字を入れる

この2点を抑えておけば、素敵なアイキャッチ画像を作ることができます!!

画像チェックにはこのサイトが便利!

今回はアイキャッチ画像の作成方法を紹介させていただきましたが、実際にFacebookでどのように表示されるか確認したい場合は「OGP画像シミュレータ」というサイトが便利です。

OGP画像シミュレータ | og:image Simulator
デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみよう!

作った画像をドラッグ&ドロップするだけで、Facebookでの表示イメージや正方形での表示イメージがシミュレーションできるので、納得のいくまで調整しましょう。

また、なんかの拍子にFacebookにリンク貼っても画像が出なくなっちゃった!という方はこちらのサイトを参考に。

http://hiroma20.me/2015/05/facebook_thumbnail_debugger/

オシャレなアイ・キャッチ画像の作り方、教えます

【ブロガー向け】完全無料!PIXLRでオシャレなアイキャッチ画像を作る方法
【ブロガー向け】完全無料!PIXLRでオシャレなアイキャッチ画像を作る方法
他人と差がつくオシャレなアイキャッチ画像を作りたい! そう思っているブロガーさんは多いと思います。 でも、画像作成なんてやったことがない、難しそうというイメージがあるし、画像を作るのってPhotoshopとかいう専用のソフトが必要なんでしょ・・・? ...
facebook&ブログ両対応「アイキャッチ画像」の作り方を公開します
この記事が役に立ったら
いいねお願いします!
スポンサーリンク

更新情報をお届けします!