
今回はブログ記事でも重要なパーツの”アイキャッチ画像”について詳しく説明していきたいと思います。アイキャッチ画像の重要な役割や、無料で魅力的なアイキャッチ画像を作る方法も紹介します。
ブログのPVアップや滞在時間アップに繋がるので、ぜひ最後までご覧ください!
本記事でわかること(目次)
そもそもアイキャッチ画像って?
アイキャッチ画像は、ブログ記事の冒頭やトップページに表示されるサムネイル画像のことです。
僕のブログだと、下記画像の黄色い枠の部分がアイキャッチ画像です。
アイキャッチ画像には、言葉の通り、"見ている人の目を引きつける"という役割があります。
アイキャッチ画像ひとつで、ブログや記事の第一印象が変わるので、とても重要なポイントになると思っています。人は見た目が9割という言葉がありますが、人と同じで、ブログや記事の第一印象はめっちゃ大事です。
記事タイトルだけではあまり目を引きませんが、魅力的なアイキャッチ画像を作成することによって、それが訪問者の目にとまります。
その結果、記事が読まれるということに繋がります。
画像が記事に伴わない適当な写真なら、

と思われてしまうかもしれません。
しかし、アイキャッチ画像もしっかり丁寧に作り込まれていれば、

という印象を抱かれるかもしれません。(というか絶対心のどこかで思われます。)
だから、記事を読むかor読まないかの鍵を握るといっても過言ではありません。なので、アイキャッチ画像はしっかり作ることをオススメします!
アイキャッチ画像の大切な役割とは?
僕は、アイキャッチ画像の役割は、ブログを読んでもらう1つの仕掛けだと思っています。魅力的なアイキャッチだとクリック率があがります。
その上でアイキャッチ画像を見たときに、「読んでみたいかも!」と思ってもらうことが大切です。今はスマホでブログを見ている人が圧倒的に多いです。スマホはワンタップでスクロールが簡単にできます。
その時に、タイトルとアイキャッチ画像でいかにアピールして、一瞬惹きつけられるかがポイントだと思います。そしてこの記事を「読んでみたい!」と思ってもらうこと。
アイキャッチ画像の大切なポイント
それでは、具体的にどんなアイキャッチ画像を作っていけば良いのか説明していきますね。
ブログや記事内容にあった魅力的な写真素材を使う
写真1つでイメージが変わるので、基本的にあなたのブログとブログ記事にあったイメージの写真を選ぶことが大切です。(何かの意図があるなら別ですが)
人は写真から様々な情報を読み取ります。
例えば、こちらの画像。
明らかに、落ち込んでる様子や何か悩んでいるな〜というのが伺えますよね?
続いてこちら。
これは絶対喜んでますよね?明らかに幸せそう。
というように、人は写真1枚から得られる情報を読み取ります。なので、読者にどういう印象を抱いてもらいたいか?をしっかり考える必要があります。その上で記事の内容にあったイメージを選択しましょう。
例えば、ダイエットや筋トレの食事制限について話した記事でパソコンの画像をアイキャッチに使用するとか。
明らかに違和感を感じると思います。
人は違和感を感じると離脱する可能性は高くなるので、気をつけましょう。この場合は、食事制限の記事内容にあったイメージ画像を使いましょう。
こういうのとかですね。
どうしてもあんまりイメージが沸かない!って場合は、イメージのキーワードを使ってGoogleで画像検索することをおすすめします!
そうするとGoogleがキーワードにあった画像をいくつも出してくれるので、そこからヒントを貰いましょう。(Google先生ホント優秀です!)
写真素材ですが、無料で利用できるサイトがあります。僕が使っているサイトを紹介しておきます!
海外の30サイト以上から検索をすることができるので、比較もしやすいと思います。日本語でキーワードを入れると画像がたくさん出てきます!
※検索窓に文字を打つと、「商用利用可の無料写真素材のみ」というチェックボックスが表示されるので、チェックが入っている事を確認しましょう。
キャッチコピーを入れて魅力を伝える
アイキャッチが写真のみだと、他のブログとの差別化も難しいですし伝わりづらいです。そこで、キャッチコピーを写真に入れることによって、オリジナリティも出ますし、読者の心を掴むことが可能です。
どのような言葉を入れるのが良いかというと、記事内容がわかる言葉がオススメです。訪問者が画像をひと目見た時に、「あっ、こういう内容がこの記事で説明されてるんだなーと」と思えるように。
記事タイトルや本文の見出しを少しアレンジして、アイキャッチに利用するのが良いと思います。この時に思わず見たくなる気になるワードや、インパクトのあるワードを入れるのがオススメです。
例
2.心をギュッと掴むブログアイキャッチ画像を初心者が3分で作る秘訣
この2つを比べると、2番の方が魅力的じゃないでしょうか?
フォントが与える印象も意識する
フォントでも印象は変わります。なので、文字を入れる時はフォントの種類もしっかり意識して選びましょう。
フォントはたくさん種類がありますが、代表的な明朝体とゴシック体の2つを紹介しますね。
確かに、明朝体は優雅な感じでゴシック体は力強い印象がありますよねー!
アイコンやイラストでオリジナリティを出す
さらにオリジナリティを出したい場合は、アイコンやイラストを使ってもいいと思います!
1枚のアイキャッチにアイコンやイラストを使いすぎるとごちゃごちゃして、わかりにくいです。なので、これもイメージにあったアイコンを1個だけ使うなどしてシンプルにしましょう。
この辺りはあなたのセンスもあるかと思います!(笑)
でも、ごちゃごちゃせずに、僕はシンプルイズベストだと思ってます。シンプルだとあまりセンスもいらないので!笑
SNSでの表示もしっかり意識する
自分でTwitterやFacebookに投稿する際に、アイキャッチ画像があったほうが目につくしクリック率もあがります。
さらに、シェアされた時にもアイキャッチ画像は表示されるのですごく重要です。
Twitterは基本的に文字が多いSNSですが、インパクトあるアイキャッチ画像が流れることによって間違いなく目立つでしょう。
TwitterやFacebookでシェアされる際にうまく表示されているかどうかは、サルワカさんの「アイキャッチ画像サイズチェッカー」で確認できます!(めちゃ便利です!)
確認して、端が途切れていたりしたら修正しましょう!

と思っている方もいるかもしれないので、これからアイキャッチ画像の具体的な作り方を開設します!
Canvaに無料登録してアイキャッチ画像を作ってみよう
Canvaは、無料で使えるデザインツールで画像に文字を入れたり加工する際に非常に便利です。
テンプレートが用意されていて、初心者でも簡単にクオリティの高い画像作成が可能です!スマホでも使えるのはさらに便利ですね。
使ってみるとわかるので、早速登録しましょう!
Canvaを使ってみる
無料登録が終わったら、実際にcanvaで画像を作ってみましょう!今回は、こんな感じのアイキャッチ画像を作ります。
めっちゃ簡単に作れるので、始めていきましょう。
それでは、まずCanvaのホーム画面にアクセスします。
「デザインを作成」をクリックし「カスタムサイズ」を選択します。
幅と高さの入力欄が出てくるので、幅768:高さ432を入力します。これは僕が使っているテーマの横幅サイズなのですが、ほとんどのテーマが横幅は700前後です。
WordPressが自動的にサイズ調整をしてくれるので、多少大きい分は問題有りません。
入力後「デザインを作成」をクリック。すると画像作成を行う画面に変わります。
画像をアップロードする
今回使いたい写真をダウンロードして、それをアップロードしていきます。「画像をアップロード」を選択し、写真を選びましょう。
アップロードした画像を選択すると、白のキャンパスに画像を挿入されます。
最初のままだと少し小さいので、画像の縁を引っ張ってキャンパスいっぱいに広げます。
テキストを追加
左のメニューから「テキスト」を選択し、「見出しを追加」をクリックします。
小見出しを追加、本文を追加でも問題有りません。
テキストを入力し、好みのフォントや、サイズ、色に変更しましょう。
これで完成でもいいのですが、少し文字が見づらいかもしれないので、ひと手間加えます。
素材を入れる
メニューから「グラフィック」を選択し、図形の正方形を選びます。
高さはテキストサイズより少し大きめにして、幅は横まで広げます。
文字が見えなくなってしまったので、次は背面にします。上部メニューの「配置」を選択し、「背面へ」をクリック。
カラー変更を行う
上部メニューのカラーを選択すると、左側にデフォルトカラーが表示されます。
そこから好きな色を選択し変更しましょう。
透明度を変える
上部メニューの正方形のマークを選択すると、透明度を変えるゲージが出てきます。
今回は30ぐらいにしてみました!
こんな感じで仕上がります!文字を黒にして背景を白っぽくしても印象が変わるので、色々試してみてください!
他にも色々とアレンジができます
グラフィックにたくさん素材があるので色々アレンジができます!
イラストを追加してみたり、線を引いてみたりとか色々試してみてください!
パターンを色々と試してみたい場合は、ページをコピーして作成すると既存のデザインを崩さずに作れます!
画像が完成したらダウンロードする
上部メニューの「↓」を選択し、、「ファイルの種類」を選択しましょう。
イラストやロゴはPNGをおすすめしますが、写真を保存すると容量が大きくなるので、写真が使われている画像はJPEGにしましょう。
複数ページがある場合は、ページを選択しダウンロードをクリック。
以上で画像作成とダウンロードは完了です!
ダウンロードした画像を圧縮する
ブログ記事を重くしない為にPNGでダウンロードした画像は、圧縮しましょう!
サイズが大きい程読み込みに時間がかかります。ページの表示速度はSEOにも影響するので、圧縮しておきましょう。
オンラインイメージ最適化ツールを使えば簡単に圧縮できます!今回のアイキャッチ画像も圧縮することによって、7割サイズが小さくなりました!
主役は記事本文
いくらアイキャッチ画像のクオリティが高くても、記事本文のクオリティが低ければ本末転倒です。
コース料理も、前菜のクオリティが高いのに最後のメインの肉料理が微妙・・・って最悪じゃないですか?笑
記事本文がメインであり、アイキャッチ画像はサブです。表紙だけが一流で、中身が全くおもしろくない本みたいにならないように気をつけましょう!
期待を裏切ると信頼がなくなります。信頼がないとブログでお金を稼ぐことはできません。
なので、記事本文を質の高い内容にした上で、さらにクオリティの高いアイキャッチ画像を作成し回遊率やPV、そして信頼も上げていきましょう。
まとめ
ブログのアイキャッチ画像についての説明は以上です。
ブログのSEOでは、タイトルや記事本文が凄く大切ですが、ブログにきてもらってからはアイキャッチ画像があることによって回遊率やPVは上がります。
その結果、読者の滞在時間も上がりSEOが強くなると思います。
記事本文もアイキャッチ画像も、しっかり丁寧に作ることがブログの繁栄に繋がると思うので、良いものを作っていきましょう!