ブログの書き方

ブログのアイキャッチ画像の作り方!最適なサイズやデザインのコツ!

ブログアイキャッチ画像の作り方!最適なサイズやデザインのコツ!

この記事で解決できる悩み

本記事の信頼性

当ブログでは「お金・時間・場所に自由を」をコンセプトに、ブログの始め方やノウハウを発信します。僕のプロフィールはこちら

ブログアクセスを増やすためには、アイキャッチ画像が超重要です。

なぜなら、アイキャッチ画像が魅力的だと、読者は「記事が有益か」「必要な情報があるか」をひと目で判断できるからですね。

しかし、ブログは記事を書くだけでも大変な作業なので、適当な画像をアイキャッチに設定している方も多いのではないでしょうか。

そこで、今回はアイキャッチの作り方や最適な画像サイズ、デザインのコツを解説します。

慣れれば5分程度で作れるようになるので、本記事を読めばおしゃれでユーザーから愛されるブログを作れますよ!

うーご

それでは本題に入ります。

そもそも、アイキャッチ画像とは?

そもそも、アイキャッチ画像とは?

アイキャッチ画像とは、その名の通りユーザーの目(アイ)を引きつける(キャッチ)画像です。

ブログにおいて、アイキャッチ画像は下記のように記事の先頭や、トップページに表示されます。

うーご

要するに、ユーザーの目にもっとも触れる画像ってことですね!

ブログにおいてアイキャッチ画像が重要な理由5つ

ブログにおいてアイキャッチ画像が重要な理由5つ

ブログのアイキャッチ画像が重要な理由は、主に5つあります。

アイキャッチ画像が重要な理由

  • クリック率がアップするから
  • ブログ内を回遊してもらえるから
  • 読者を本文に誘導できるから
  • SNSで読まれやすくなるから
  • ブログ全体がおしゃれになるから

上記を目標にすることで、より最適なアイキャッチ画像を作れるようになりますよ!

①クリック率がアップするから

アイキャッチ画像は、検索上のクリック率を上げるために効果的です。

従来まで、Googleの検索結果には「記事タイトル+メタディスクリプション」しか表示されていませんでした。

しかし、最近では下記のようにアイキャッチ画像が検索結果に表示されるように。

Google検索結果に表示されるアイキャッチ画像

これにより、記事タイトル・メタディスクリプションに加えて、「アイキャッチ画像」で記事内容をアピールできるようになったわけですね。

うーご

実際、アイキャッチ画像を最適化したことで、記事タイトルのクリック率が10%上がった事例もありますよ!

②ブログ内を回遊してもらえるから

魅力的なアイキャッチ画像を設定することで、読者にブログ内を回遊するよう促せます。

具体例を挙げると、ほとんどのブロガーは、記事の終わりに「関連記事」という他記事をおすすめするコーナーを用意しています。

関連記事

「おもしろそう!」と思う記事があれば、読者はクリックしてページ移動してくれます。そして、アイキャッチ画像は、「おもしろそう」なのか判断する重要ポイントになっているんですよね。

魅力的なアイキャッチ画像は読者に働きかける力が強いため、結果的に回遊率をアップさせられるわけです。

③読者を本文に誘導できるから

アイキャッチ画像は、記事を訪れたユーザーが最初に目にする画像なので、記事有益性を伝えるのにもってこいです。

ひと目で記事が有益だと分かれば、ユーザーは思わず本文へ読み進めてしまうでしょう。

本文を読まずに記事を離れてしまうユーザーはかなり多いので、そんなユーザーを減らせる点は大きなメリットだといえます。

④SNSで読まれやすくなるから

アイキャッチ画像が魅力的だと、SNSで記事が読まれやすくなります。

たとえば、Twitterでアイキャッチ画像を設定した記事を公開すると、下記のように表示されます。

Twitter

上記のとおり、アイキャッチはかなりインパクトがあるので、画像がおしゃれだと記事に興味を持ってくれるユーザーが増加します。

そのまま記事をクリックしたり、拡散してくれたら、ブログアクセスを増やすことができますね。

⑤ブログ全体がおしゃれになるから

アイキャッチ画像を最適化することで、ブログ全体をおしゃれにすることが可能です。

たとえば、当ブログでは似た雰囲気のアイキャッチ画像を使用することで、下記のように統一感が出るよう意識しています。

逆に、アイキャッチ画像の見た目が悪かったり、統一感がないと、せっかくブログを訪れてくれたユーザーもいろいろな記事を読みたいとは思えないんですよね。

ちなみに、ブログデザインはWordPressテーマで9割決まるので、『ブログ初心者向け!おすすめ無料&有料WordPressテーマ11選!』でおしゃれなテーマをまとめました。

あわせて読みたい
ブログ初心者向け!おすすめ無料&有料WordPressテーマ11選!
ブログ初心者向け!おすすめ無料&有料WordPressテーマ11選!

また、当ブログ使用しているAFFINGERは、おしゃれ&稼ぐ機能が豊富なので、詳しくは下記記事を参考にしてみてください。

あわせて読みたい
【2年使った】AFFINGER6を豪華特典付きレビュー!評判・購入方法も解説
【3年使った】AFFINGER6を徹底レビュー!豪華特典付き購入方法も解説

【Canva】ブログアイキャッチ画像の作り方5ステップ

【Canva】ブログアイキャッチ画像の作り方5ステップ

それでは、ブログのアイキャッチ画像の作り方を見ていきましょう。

アイキャッチ画像の作り方

  • Canvaにログインする
  • Canvaの編集画面を開く
  • 【作り方①】テンプレートを使う
  • 【作り方②】用意した画像を使う
  • ダウンロードする

本記事のアイキャッチを例に解説するので、参考にしてみてくださいね。

※今回は、Canvaという無料デザイン作成ツールを使用します。

Canvaにログインする

まず、Canva公式サイトに移動します。

画面右上にある「ログイン」を押してください。

Canvaにログインする1

すると、ログイン&登録画面に移動します。

  • Google
  • Facebook
  • Apple
  • メールアドレス

上記の4つのいずれかを選択して、Canvaと連携させましょう。

Canvaにログインする2

以上でCanvaへのログインは完了です。

Canvaの編集画面を開く

ログインしたら、画面右上の「デザインを作成」→「カスタムサイズ」の順で進んでください。

Canvaの編集画面を開く1

アイキャッチ画像のサイズが指定できるので、好みのサイズを入力して「新しいデザインを作成」をクリックしましょう。

Canvaの編集画面を開く2

ここからは、

の2パターンを解説するので、気になる方法に進んでくださいね。

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

結論、横幅1,200px以上がおすすめです。

なぜなら、Googleが発表しているSEO上級者向けドキュメントでは、画像幅1,200px以上を推奨しているからですね。

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

ちなみに、当ブログではトップページに表示されるアイキャッチ画像を3:2で設定しているため、1200px × 800pxのサイズで統一しています。

うーご

Twitterで表示されるアイキャッチ画像は1.9:1なので、1200px × 630pxにするのもアリですね!

【作り方①】テンプレートを使う

Canvaに用意されたテンプレートを使用する場合、まずは画面左側から好みのテンプレートを探してみましょう。

気になったテンプレートをクリックすると、右側の編集ゾーンに表示されます。

【作り方①】テンプレートを使う1

テンプレートの文字をダブルクリックすると、好きなテキストに編集できます。

【作り方①】テンプレートを使う2

試しに「アイキャッチ画像」と入力してみましたが、個人的には少し読みにくいなと…

【作り方①】テンプレートを使う3

こんなときは、さらにテキストに編集を加えます。

Canvaでは下記のようなテキスト編集機能が豊富なので、好みの見た目になるようカスタマイズしてください。

【作り方①】テンプレートを使う4

今回はフォントを変更しましたが、それだけでかなり見やすくなりましたね。

【作り方①】テンプレートを使う5

以上、Canvaのテンプレートを活用した、アイキャッチ画像の作り方でした。

【作り方②】用意した画像を使う

Canvaでは、事前に用意した画像を自由にカスタマイズできます。

うーご

本記事のアイキャッチ画像は、こちらで紹介する方法で作成しました!

まずは、PCフォルダからCanvaへ、編集したい画像をドラッグ&ドロップしてください。

【作り方②】用意した画像を使う1

すると、下記のように画像が読み込まれるので、画像の縁をドラッグして、最初に設定したサイズに合わせましょう。

【作り方②】用意した画像を使う2

次に、テキストを入力します。

画面左側で「テキスト」を選択後、好みのテキストをクリックしましょう。

【作り方②】用意した画像を使う3

今回は、自分でテキストを編集したかったので「見出しを追加」をクリックしましたが、テンプレートから選べば、あらかじめ用意されたフォント・サイズのテキストを利用できます。

必要なテキストを配置したら、下記機能で自在にテキストを編集してください。

【作り方②】用意した画像を使う4

以上、アイキャッチ画像が完成しました!

最後に、作成したアイキャッチ画像をPCフォルダにダウンロードします。

ダウンロードする

画面右上の「ダウンロード」をクリック後、ファイルの種類を選択して「ダウンロード」を押してください。

※ファイルの種類は「JPG」「PNG」のどちらかを選べばOKです。

ダウンロードする1

すると、10秒ほどで下記画面が表示され、ダウンロードが完了します。

ダウンロードする2

以上、ブログアイキャッチ画像の作り方です。

うーご

お疲れ様でした!

ちなみに、今回はCanvaの無料版で話を進めましたが、有料版は使えるテンプレート・素材が多かったり、ストレージ制限がないといったメリットがあります。

項目無料版有料版
料金(税込)無料年払い:12,000円
月払い;1,500円
テンプレート数25万点42万点
素材(写真・動画)数不明
(多数と表記)
7,500万点
背景透過×
ストレージ5GB100GB

基本的には無料版でOKですが、もし機能を拡張したいと感じた方は、有料版を検討しましょう。

>>Canva公式サイトはこちら

ブログアイキャッチ画像のデザインのコツ5つ

ブログアイキャッチ画像のデザインのコツ5つ

ブログのアイキャッチ画像をデザインするコツは、主に5つあります。

アイキャッチ画像の作り方

  • 画像クオリティにこだわる
  • ひと目で記事内容を伝える
  • 文字を目立たせる工夫をする
  • 記事内容に合った画像を使う
  • 画像全体の配色を意識する

それぞれ解説します。

①画像クオリティにこだわる

元々のクオリティが高い画像を使用すると、少し手を加えるだけでおしゃれなアイキャッチ画像を作れます。

たとえば、下記は全体的に色彩がなく、ぼんやりとしているため、テキストを入れてもまったくおしゃれになりません。

アイキャッチに向いていない画像

アイキャッチに向いている画像

対して、先ほどの画像に比べると、下記は色彩が豊かで、テキストを入れるだけでそれっぽく見えますよね。

アイキャッチに向いている画像

アイキャッチに向いている画像

アイキャッチ画像の質は、元画像のクオリティで大きく変わるので、力を入れて選びましょう。

ちなみに、アイキャッチ用の画像を探せるサイトは、記事後半の「ブログアイキャッチ画像におすすめのフリー素材サイト」で紹介していますよ。

②ひと目で記事内容を伝える

アイキャッチ画像は、記事内容をパッと伝えられるよう意識しましょう。

たとえば、「ブログで稼ぐ方法」に下記画像をアイキャッチにした場合、画像だけでは「お金に関する記事なのかな?」くらいの印象しか持たれません。

記事内容が伝わらない

アイキャッチで記事内容が伝わらない

しかし、少しだけ記事内容を説明するテキストを入れるだけで、「何について書かれているのか」「自分の悩みを解決できるのか」がひと目で分かります。

記事内容が伝わる

アイキャッチで記事内容が伝わる

アイキャッチ画像で記事内容を伝えられると、特にトップページや関連記事からのアクセスアップを狙えますよ!

③文字を目立たせる工夫をする

アイキャッチ画像は、できる限り目立たせる工夫をしましょう。これによって、よりユーザーを引きつける効果を高められます。

たとえば、下記のように画像色と文字色がほとんど変わらないと、同化して見にくいアイキャッチ画像になってしまいます。

文字が見にくいアイキャッチ

文字が見にくい

対して、たとえば文字の背景に帯を入れてみると、それだけで格段に見やすいアイキャッチ画像になりますよね。

文字が見やすいアイキャッチ

文字が目立つ

他にも、「文字を太くする」「縁を取る」などたくさんの手法があるので、色々と試しながら文字を見やすくする工夫をしましょう。

④記事内容に合った画像を使う

アイキャッチに使う画像は、記事内容とマッチしたものを選びましょう。

たとえば、「プログラミングスクール紹介記事」のアイキャッチ画像で犬の画像を使っていたら、少し違和感があると思いませんか?

記事と合わないアイキャッチ画像

アイキャッチ画像と内容が合っていない

対して、下記のような学校をイメージさせるような画像であれば、特に違和感を持つことなく本文へ進んでくれる人が多いハズです。

記事と合ったアイキャッチ画像

アイキャッチ画像と内容が合っている

ブログを読まれるためには、ユーザーの違和感を減らすことが重要なので、記事内容とマッチしたアイキャッチ画像を設定しましょう。

⑤画像全体の配色を意識する

おしゃれなアイキャッチ画像を作るためには、全体の配色を意識することが大切です。

たとえば、下記画像は緑色・赤色がメインで使用されているので、水色の帯を入れることにかなり違和感がありますよね。

配色が合わないアイキャッチ画像

画像全体の色がマッチしていない

しかし、下記のように同系色の帯を入れると、それだけで違和感のないアイキャッチ画像になります。

配色が合ったアイキャッチ画像

画像全体の色がマッチしている

どんな配色にしたらいいか分からない方は、Adobe社の提供する無料ツール「Adobe Color CC」を参考にするのがおすすめですよ。

うーご

以上、アイキャッチ画像のデザインのコツでした!

ブログアイキャッチ画像に関する注意点3つ

ブログアイキャッチ画像に関する注意点3つ

ブログのアイキャッチ画像について、注意点が3つあります。

アイキャッチ画像の作り方

  • Altタグを設定しよう
  • 画像容量を小さくしよう
  • 画像選び・作成は時短しよう

それぞれ解説します。

①Altタグを設定しよう

アイキャッチ画像をブログで使用するときは、Altタグ(代替テキスト)を設定しましょう。

Altタグとは、画像を説明するためのHTMLコードのこと。Googleにコンテンツ内容を伝えられたり、画像が読み込めないときに画像内容をユーザーに伝える役割を果たします。

WordPressでブログ運営をしている場合、メディアアップロード画面の「代替テキスト」という項目から設定可能です。

Altタグを設定方法

画像検索での上位表示にも効果的なので、ブログアクセスを増やすために設定してくださいね。

②画像容量を小さくしよう

アイキャッチ画像の容量が大きいと、サイトスピードが遅くなる原因になります。

そのため、アイキャッチ画像を作ったら、ブログに載せる前に圧縮しておきましょう。

先述の通り、アイキャッチ画像のサイズは横幅1,200pxがおすすめですが、同時に容量が200KB以下になるよう意識してください。

具体的なサイズ・容量の圧縮方法については、『【簡単】ブログに最適な画像サイズ・容量は?おすすめ圧縮方法も解説!』を参考にどうぞ。

③画像選び・作成は時短しよう

アイキャッチの画像選びや作成作業は、できる限り時短を目指しましょう。

なぜなら、ブログ運営において1番大切なのは、記事を書くことだからですね。

たしかに、アイキャッチ画像を最適化できると、ブログアクセスを増やす効果を得られます。

しかし、それはコンテンツの質が高いことが大前提。アイキャッチ画像だけが魅力的でも、記事を訪れたユーザーを満足させることはできません。

本記事で紹介したやり方は、慣れれば5分程度でアイキャッチ画像を作れるようになるので、ぜひ記事クオリティを高めることに集中してくださいね。

ブログアイキャッチ画像におすすめのフリー素材サイト

ブログアイキャッチ画像におすすめのフリー素材サイト

ここまで、ブログのアイキャッチ画像について解説してきましたが、「そもそも、アイキャッチにする画像はどこで探せばいいの?」といった悩みを抱えている方も多いでしょう。

そこで、最後にアイキャッチ画像を探すのにおすすめのフリー素材サイトを紹介します。

無料・有料サイトを特徴とセットでまとめたので、気になるサイトがあれば覗いてみてください。

【無料】フリー素材サイト10選

  • Pixabay:2,500万点を超える素材を完全無料で選べる!
  • Unsplash:高品質な実写素材でスタイリッシュなブログへ!
  • photoAC:写真・イラスト・動画・年賀状など幅広く選べる!
  • PAKUTASO:登録カメラマンのオリジナル画像が多い!
  • O-DAN:全38のフリー素材サイトを同時検索できる!
  • unDraw:カラー変更自由!おしゃれなイラストが多い!
  • いらすとや:使いやすい〜ニッチなイラストを利用できる!
  • GIRLY DROP:女の子による女の子のための可愛い素材サイト!
  • food.foto:食べ物特化!料理・食材・飲料を探すならここ!
  • HUMAN PICTGRAM2.0:非常口風の人物イラストが多い!

【有料】おすすめ素材サイト3選

  • Shutterstock:素材数は3億7000万!世界最大級のサイト!
  • freepik:コスパ最強!月1,200円で高品質素材を入手できる!
  • Adobe Stock:Adobeソフトと連携させるなら超おすすめ!

各フリー素材サイトについて詳しくは、下記の記事で詳しく解説しています。

あわせて読みたい
【無料】ブログにおすすめフリー素材&画像サイト13選【商用利用OK】
【無料】ブログにおすすめフリー素材&画像サイト13選【商用利用OK】
うーご

各サイトには「利用規約」があるので、必ずチェックしましょう!

まとめ:アイキャッチ画像を最適化してブログアクセスを増やそう

まとめ:アイキャッチ画像を最適化してブログアクセスを増やそう

この記事では、無料のデザイン作成ツール「Canva」を使用した、ブログのアイキャッチ画像の作り方を解説しました。

アイキャッチ画像の作り方

  • Canvaにログインする
  • Canvaの編集画面を開く
  • 【作り方①】テンプレートを使う
  • 【作り方②】用意した画像を使う
  • ダウンロードする

アイキャッチ画像は、ブログアクセスを増やすために絶大な効果を発揮します。

ブログ全体がおしゃれになると、自分自身がブログを継続するモチベーションにもなるので、ぜひ本記事を参考にくり返し練習しましょう。

アイキャッチ画像の作り方をマスターしたら、合わせて記事の書き方を勉強してみてください。

ブログ記事を書く流れやコツについては、『【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】』を参考にどうぞ。

あわせて読みたい
【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】
【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】

今回は以上です。

-ブログの書き方