「人は見かけが９割」なんていう本も出ていますが、ブログ記事も最初の印象で読まれるか読まれないかって左右される部分があります。
ブログ記事が人の目に付く場面として想定されるのが、FacebookやTwitterなどのSNS。
SNSでのシェアによる拡散は無視できないものがあります。
このシェアされる際に最初に目に飛び込んでくるのが「アイキャッチ画像」ではないでしょうか。
また、アイキャッチ画像の有無で、読まれるかどうかにも差が出るように感じます。
つまりアイキャッチ画像というのは本の表紙、店の看板のようなもの！！
なので僕はアイキャッチ用の画像を別途作るように心がけています。最近ですが。
と言ってもブログ記事用の画像と、アイキャッチ用の画像、後述するブログサムネイル用の画像と、何種類も画像を作るのも手間ですよね。
その全てを１つで賄えるアイキャッチ画像を作ろう、というのが今回の趣旨です。
僕のブログの書き方
手前味噌ながら、僕がブログ記事のテーマを決めてから、完成させるまでのざっくりした流れを紹介します。
せっかくなので、前回の記事「【燻製レシピ】切れてるチーズで作る！ペッパースモークチーズの作り方」のときのやつで。
これは「燻製作りをもっと広めたい！」という願いを込めて（笑）作ったものなので、写真撮影も自分で行いました。
ただ燻製作りという作業の都合上、途中で止めるわけにもいかないので、いったん燻製作りを完成させてからブログの作成を行いました。
全体の手順としては、
- 写真で紹介したいポイントを想定する
- 燻製を作りつつ写真を撮る（燻製作りはここで終了）
- ブログ用に写真をリサイズ、加工する
- 文章を書く
- アイキャッチ用の画像を作る
という流れになります。
今回紹介するのは５番目の「アイキャッチ画像を作る」の部分ですね。
そもそもアイキャッチ画像って何？
たぶんこの記事に辿り着く人はブログを書かれている方だと思うので説明不要かもしれませんが・・・
アイキャッチ画像というのはざっくり言うと「ブログ記事の表紙となる画像」です。
ブログ本体の表紙はヘッダー画像だと思うのですが、記事の表紙はアイキャッチ画像ですね。
ブログ記事一覧ページの小さなサムネイル画像にも同じ画像を使われることが多いので「アイキャッチ画像＝サムネイル画像」と捉えて良いかもしれません。使っているブログやブログテーマによって異なりますが、記事の先頭にドドンと大きく表示される場合もあります。
また、FacebookやTwitterでシェアされたときや、はてブされて新着エントリーなどに表示される画像も、このアイキャッチ画像となります。
つまり、ブログ記事が読まれる前に読者へアピールするため画像、それがアイキャッチ画像！！
アイキャッチ画像を設定している場合
例えば「良い記事があったからフェイスブックでシェアしたい！」と思ってリンクを貼り付けた場合、正しくアイキャッチ画像を設定していると、こんな感じに表示されます。
画像がバッチリ表示されて目につく！
素敵！！
付き合って！！！
アイキャッチ画像を設定していない場合
ところが、アイキャッチ画像を設定していない場合だと・・・
こんな感じで、記事内の画像を勝手に引っ張ってきて表示しちゃいます。これはしょんぼり。
はてなブックマークだとこんな感じで、
画像による訴求ができなくなります。これはこれで目立つし本文も読めて良いのですが。
こうやって比べると、アイキャッチ画像が重要な感じがしてきましたね！
Facebookでシェアされた時を想定する
まず、Facebookでブログ記事がシェアされた場合を想定します。
なぜFacebookを一番最初に想定するかというと、Facebook用の画像が一番大きいサイズなんですね。
ブログのサムネイルなんかはブログシステムが勝手に縮小とか切り抜きとかしてくれるので、大は小を兼ねるでFacebook用の画像サイズで作成します。
Facebookに表示される画像サイズ
Facebookに目立つように表示されるためには、横1200px＊縦630pxの画像が必要となります。
こんな感じで、横長の画像となります。
結構大きいですが、昨今のデジカメやスマホで撮影する写真ならば問題ないサイズです。
ただ、このように写真だけペロンと貼っただけでは、ブログ記事の内容がわかりづらいですよね。
ブログ記事のタイトルを入れよう
ですので、この画像にブログ記事タイトルを入れることで、ひと目で内容を把握できるようします。
こんな感じにすると記事の内容もわかりやすくなりますね。
だけど、ちょっと待って下さい！！
Facebook用としてはこれで良いのですが、ブログのサムネイル用としてはちょっと問題があるのです。
ブログのサムネイルサイズも想定する
Facebook用としては上のように横長の画像で良いのですが、ブログのサムネイル画像ってほとんどが正方形なんですよね。
上の横長画像もアイキャッチ用に指定した場合、ブログシステムが正方形にトリミング（画像を切り抜くこと）してしまいます。
つまり、こんな画像になります。
切れてるのはお前だろ！っていう。
これじゃちょっと精神的によろしくありません。
サムネイルでよくある画像サイズ
ブログのサムネイル画像は正方形に切り抜かれてしまうため、それを想定したアイキャッチ画像を作ることになります。
具体的には、入れた文字が切れないように中心に寄せる、ということです。
ついでに燻製ということで煙っぽいイメージにしてみました（笑）
この画像がブログのサムネイルサイズになると、
こうなります！
実際の表示だとこんな感じですね。
これで、ひとつの画像で「Facebook用の画像」「ブログのサムネイル画像」に対応することが出来ました。
まとめ
このように、ひとつの画像で「Facebook用の画像」「ブログサムネイルの画像」に対応するには以下の点に注意して作成します。
- 画像サイズは1200px＊630px（最低でも600＊315px、縦横比率が大事）
- 正方形にトリミングされることを想定して文字を入れる
この２点を抑えておけば、素敵なアイキャッチ画像を作ることができます！！
画像チェックにはこのサイトが便利！
今回はアイキャッチ画像の作成方法を紹介させていただきましたが、実際にFacebookでどのように表示されるか確認したい場合は「OGP画像シミュレータ」というサイトが便利です。
作った画像をドラッグ＆ドロップするだけで、Facebookでの表示イメージや正方形での表示イメージがシミュレーションできるので、納得のいくまで調整しましょう。
また、なんかの拍子にFacebookにリンク貼っても画像が出なくなっちゃった！という方はこちらのサイトを参考に。
オシャレなアイ・キャッチ画像の作り方、教えます
コメント