本記事のもくじ
アイキャッチ画像を作らないと、ブログのアクセスは増えませんよ。
この記事で紹介する「アイキャッチ画像の作り方」を実践すると、デザイン初心者でも、魅力的でキャッチなーなアイキャッチ画像を作れます。実際に僕のサイトを見てもわかるよう、統一感ある洗礼されたアイキャッチ画像が美しいです。
そこで本記事では、人気デザインツール「Canva」を使ったアイキャッチ画像の作り方を解説します。
この記事を読むと、アイキャッチ画像の作り方や思わずクリックしてしまうコツ、WordPressでの設定方法をマルっと理解できます。
アイキャッチ画像を作るなら「Canva」一択です。無料で使えて、直感的な操作だから、デザイン素人でもサクッとアイキャッチ画像を作れますよ。
＼WordPressブログの始め方／
WordPressブログを始めるなら、僕も愛用する「エックスサーバー」一択ですよ。
- 初期費用が無料
- ドメイン2つまで永久無料
- 国内シェア&サーバー速度No.1【hostadvice.com（2024年）】
たったの月額ワンコインで始められます。10分でブログデビューしましょう！
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
【執筆者】
【ミヤビ：当サイトの編集長】
- ブログ歴３年
- ブログ収益７ケタ達成
- ブロガー/デジタルノマド
アイキャッチ画像とは？
アイキャッチ画像とは、読んで字の如く、、、ユーザーの視線（アイ）を引きつける（キャッチする）画像のこと。
一般的に、記事タイトルの下に表示されまして、トップページや記事カード、SNSで記事を貼り付けたときなどに表示される、いわば「表紙」となる画像です。
ブログのアイキャッチ画像には、下記の2種類があります。
種類①：フリー素材
まず、フリー素材だけを用いたアイキャッチ画像が挙げられます。
アイキャッチ画像：フリー素材
このように、フリー素材サイトからダウンロードした画像を使えば完成です。
ダウンロードした画像をそのまま使うため、誰でもカンタンに作れます。
画像をピックアップする以外、手間ヒマがかかりません。とはいえ、フリー素材を使う場合、競合サイトと被りやすくなる点が、たまにキズです。
種類②：オリジナル画像
また、オリジナルのアイキャッチ画像を自作するパターンもあります。
アイキャッチ画像：オリジナル画像
たとえば上記のとおり、フリー素材やアイコン、テキスト、配色、フォントなどを考慮しつつ、視認性の高い魅力的なアイキャッチ画像を作れると効果的です。
画像だけのアイキャッチより、記事内容をわかりやすく伝えられるメリットがあります。若干メンドいですが、独自性を発揮できる分、差別化できます。
テキストが多すぎて、何を伝えたいのかがわからなくなっては本末転倒です。
ブログにアイキャッチ画像が必要な理由3つ
ブログでアイキャッチ画像を作るべき理由は、下記のとおりです。
理由①：統一感が生まれる
アイキャッチ画像は、ブログの印象を大きく左右します。そのため、統一性あるアイキャッチ画像で、ブログ記事の"コレクション"を映えさせましょう。
当サイトのアイキャッチ画像
当サイトでは、アイソメトリックなアイキャッチ画像で統一性を出してます。
日本人は「統一性」を好む傾向にあります。ブログの「表紙」となるアイキャッチ画像のデザインを揃えた方が、なんだかんだで日本人好みだと思います。
画像テイスト、フォントカラー、サイズなどを揃えれば、ブログ全体に統制がとれて、見栄えもよくなりますね。
理由②：クリック率が高まる
魅力的なアイキャッチ画像は、それだけで記事がクリックされやすくなります。
- 検索結果に表示される
- 記事内で表示される
- SNSでも拡散表示される
アイキャッチ画像は「検索結果 + 記事内 + SNS」で表示されまして、果たす役割は大きいです。
設定してないと「No Image」「空白」などと表示されまして、ユーザーは「なんだか怪しいな...」と思いますよね。つまり、クリック率が下がるかもしれません。
ユーザーを惹きつける魅力的なアイキャッチ画像を作ることで、クリック率の向上につながります。こーいった小さな努力の積み上げが、ブログでは重要です。
理由③：アクセス数が増える
統一感あるアイキャッチ画像は、クリック率がUPし、アクセスも増えやすくなります。
実際に、検索上位の記事を見てみると、タイトル横に「小さなアイキャッチ画像」が表示されたりします。ユーザーの行動心理も、振り返ってみましょう。
- まず、タイトルを見る
- 次に、メタディスクリプションを見る
- そして、アイキャッチ画像を見る
ユーザーは上記の要素を眺めつつ「ふむふむ...クリックしてみるか...ポチっ」という行動をとります。
とはいえ注意点ですが、魅力的なアイキャッチ画像を作ったとて、アクセスUPするロジックではありませんよ。
読者に役立つ記事を作った結果、平均滞在時間などが評価され、検索上位を獲得でき、アクセスが増える...という仕組みです。
とはいえ、手を抜いてはいけません！
ブログ用アイキャッチ画像を作るコツ7つ
アイキャッチ画像を作る際の「コツ」を解説しますね。
- コツ①：インパクトある画像
- コツ②：高画質な画像を使う
- コツ③：ロゴやアイコンを使う
- コツ④：キャッチなーテキスト
- コツ⑤：配色を考慮する
- コツ⑥：フォントを揃える
- コツ⑦：スマホでも確認する
コツ①：インパクトある画像
パッと見て、何の記事が書かれてるかをイメージしやすいキャッチなー画像にすること。
「会社 つらい 辞めたい」をイメージさせるアイキャッチ画像
たとえば「会社 つらい 辞めたい」という記事なら「絶望したサラリーマン」だとイメージしやすいですよね？
こーいった検索ユーザーの心理と重なる画像をチョイスすることで「ちょっと気になるな...読んでみるか！ポチっ...」と、行動 =「クリック」を促せるワケです。
NGなアイキャッチ画像
とはいえ、記事テーマとブレブレで関係のない画像だと、何の記事かをイメージしにくいですよね？
たとえば「会社 つらい 辞めたい」という記事に対して「ネコ」の画像を選んでも、ユーザーにとって「？」です。
必ず、アイキャッチ画像で記事内容を連想できる画像をチョイスしましょう。
読者に誤解を与えない、わかりやすくてインパクトある画像を選ぶことが重要です。
コツ②：高画質な画像を使う
アイキャッチ画像には、高画質でデザイン性の高い画像を選びましょう。
ぼやけた不明瞭な画像よりも、高画質の写真はユーザーの関心を引きます。また、鮮明な画像は検索結果のサムネイルで目立つため、ユーザー トラフィックを得やすくなります。引用元：Google検索セントラル｜Google 画像検索SEOベストプラクティス
- ぼやけた粗い画像
- 残酷で不快な画像
- 記事と関係ない画像
こーいった画像を使用すると、SEOの観点からもマイナスです。
鮮明でキャッチーな画像は、それだけでクリック率が高まりますよ。
あえて「素人感」を演出せよ
なお例外として、特定の商品を紹介する記事では、あえて「下手な写真」を使い「素人感」を演出すると効果的ですよ。
個人ブログでは、ちょっとダサい写真が、むしろ「信頼感」に生まれ変わるんです！
たとえば、購入した「ゲーミングチェア」の紹介記事を書くなら、フリー素材を使うのではなく、生活感ある「ありのまま」の姿をスマホで撮った写真を使いましょう。
もし、フリー素材を使ってしまうと、ユーザーが「本当に使ってるの？」と不信に思いますよね...
アイキャッチ画像に、あなたが愛用してる"生の商品"を採用しましょう。ユーザーに信頼感を与え、購入率もグーンと高まりますよ。
コツ③：ロゴやアイコンを使う
ロゴやアイコンは「アクセント」になるため、おすすめです。
- その①：FLAT ICON DESIGN
- その②：ICOOON MONO
- その③：Icon-rainbow
- その④：flaticon
あくまでも「ワンポイント」です。使いすぎると、ゴチャゴチャした印象を与えてしまいます。
多くても「3つ」くらいまで。
入れすぎ「厳禁」です。
コツ④：キャッチーなテキスト
テキストを入れるなら、短くてキャッチーなフレーズにすること。その際「SEOキーワード」を必ず入れましょう。
たとえば、先ほどのアイキャッチ画像を振り返ってみますね。
アイキャッチ画像の作成例：「ブログ 月1万円 稼ぎ方」
このように「ブログで月1万を稼ぐ記事か」と一目でわかりやすいですよね？
とはいえ、ユーザーを釣ってはいけません。クリックされても「うわっ...ダマサされた。求めてた情報がないんじゃん...」と思われたら、二度と帰って来ませんので。
過激な訴求にならぬよう、ユーザーの心をサクッと掴みとり、本文へサラりと誘導しましょう。
長文NG
アイキャッチ画像で、長文テキストを書いてはいけません。誰も、細かい画像なんて見ませんよ。
YouTubeのサムネも同じでして、文字数は限りなく少ないですよね？
キーワードを散りばめつつ、インパクトある訴求でサクッと締めることが大切です。
コツ⑤：配色を考慮する
アイキャッチ画像では「配色」の概念も大切です。
- ブログのテーマカラーに合ってるか？
- カラーは「2〜3色」以内か？
- ユーザーの目に優しいカラーか？
- カラーデザインを統一してるか？
テキストが見にくかったり、デザインがチグハグしてると、サイトの雰囲気が崩れます。
オシャレな配色パターンを見つけるには「Color Hunt」が参考になります。素人でも、失敗しない色使いを実践できるため、重宝すること間違いなしです。
コツ⑥：フォントを揃える
フォント（テキストのデザイン）にもこだわりましょう。フォントが違うだけで、アイキャッチ画像の印象は「ガラリ」と変わります。
- ブログテーマや記事の雰囲気に合わせる
- 全アイキャッチ画像でフォントを統一させる
- フォントは「日本語・英語」の2種類を用意
日本語フォントはコレ、英語フォントはコレ、、、といった具合に、必ずフォントは厳選して揃えましょう。
一つのデザインに、いくつもフォントがあると、これまたチグハグして、気持ち悪い印象を与えてしまいます。
ワンポイントアドバイス
テキストやフォントを目立たせたい場合、テキストに「背景」をつけるとイケイケになりますよ。
Canva｜テキストに背景をつける
「素材」>「線と図形」>「正方形」をピックアップし、お好みのカラーやサイズに調節することで、背景を作れます。
このように背景を作ることで、テキストを目立たせることができ、視認性やデザイン性がワンランクUPします。
コツ⑦：スマホでも確認する
ブログ記事が多く見られるデバイスは「スマホ」です。そのため、スマホでも肉崩れしてないかも確認しましょう。
- 余白にゆとりはあるか？
- テキストが大きく目立つか？
- 画像とテキストが同色でないか？
- スマホでも画像がぼやけてないか？
上記を意識しつつ、パソコンだけでなく、タブレット端末やスマホに最適化したアイキャッチ画像を作れると、ユーザーファーストですね。
各デバイスごとによるアイキャッチ画像の確認
また、使用してるテーマの設定によって、アイキャッチ画像のサイズが異なります。あなたのブログに最適化したアイキャッチ画像を作りましょう。
ブログ用アイキャッチ画像の作り方【5ステップ】
アイキャッチ画像は「Canva」を使えばカンタンですよ。たとえ、デザインセンスがないにせよ、豊富なテンプレートも用意されており、心配ご無用です。
- 手順①：Canvaに登録する
- 手順②：サイズを決める
- 手順③：素材をアップロードする
- 手順④：編集する
- 手順⑤：画像をダウンロードする
手順①：Canvaに登録する
まず、Canva公式サイトにアクセスし「無料で登録する」をクリックします。
Canva
すると、ログイン＆登録画面に移動するので、下記のアカウント情報をCanvaと連携させましょう。
Canva登録
- メールアドレス
- Apple
- Microsoft
個人的には「Google」がおすすめでして、3秒で終わります。
手順②：サイズを決める
続いて、アイキャッチ画像のサイズを決めましょう。ログイン後、画面右上の「カスタムサイズ」に進んでください。
Canva｜アイキャッチ画像のサイズを決める
おすすめなサイズとは？
結論「700px × 400px」ほどのサイズ感がちょうど良いと思います。
- 700px 394px →「16：9」
- 700px 467px →「3：2」
- 700px 525px →「4：3」
このように「アスペクト比」を意識してみてください。
PCとスマホの両方で解像度が崩れにくい、もっともバランスのとれた画質に仕上がります。確認するには「アスペクト比計算ツール」が便利です。
閲覧デバイスの7割は「スマートフォン」です。画像をPCのサイズ感で作ると、画像サイズが大きいため、無駄にページ速度が重たくなってしまいます。
スマホを意識したサイズ感で、PCでも崩れないサイズ設定が重要です。
なお、アイキャッチ画像は「横長」ですよ！
手順③：素材をアップロードする
アイキャッチ画像に必要な素材をアップロードします。素材ファイルを「ドラッグ&ドロップ」するだけなので、カンタンです。
- 画像
- ロゴ
- イラスト
それに、Canva内には「7,500万点」を誇る素材も用意されてます。
フリー素材やCanva素材も活用しつつ、アイキャッチ画像に必要な素材を集めましょう。
探し方がわからない方は【22選】おしゃれブログに大変身！フリー素材・無料画像おすすめサイト【用途別に紹介】から、あなたにピッタリな素材を探してみてください。
手順④：編集する
素材をアップロードできたら、アイキャッチ画像を編集します。たとえば、下記のアイキャッチ画像を例に解説しますね。
Canva｜アイキャッチ画像の作り方①
- ①：背景（#F5DA90）
- ②：背景（お金の画像←透過10%）
- ③：フリー素材（傾き10°）
- ④：サブテキスト
- ⑤：タイトルテキスト
- ⑥：フリー素材
- ⑦：背景（透過50%）
- ⑧：テキスト
上記アイキャッチ画像は、8つの要素から構成されており、Canva内で完結します。
Canvaなら、むずかしい知識は必要ありません。誰でも直感的にサクサク操作できます。
Canva｜アイキャッチ画像の作り方②
基本的には、タイトル、背景画像、アイコン、カラー、フォントサイズ、フォントスタイル、影や配置、透過レベルなどを調節すればOK。
何はともあれ、Canvaにたくさん触れて、使い方に慣れることが近道です。そして、ある程度「テンプレ化」させておくと、時短でラクですね。
テンプレートを活用せよ
デザインが苦手な方は、豊富な「テンプレート」から作ってみることをおすすめします。
Canva｜テンプレート
デザインテンプレートを活用すれば、すでに型が決まってるため、テキストや素材をちょこっと変えるだけで、アイキャッチ画像が完成します。
テンプレートから作成したアイキャッチ画像
上記は、テンプレから「5分」で作ったアイキャッチ画像です。
0からデザインを作る必要がないため、限りなく失敗しません。センスのない方は、ぜひテンプレを活用してみましょう！
YouTubeのサムネ制作にも使えます！
手順⑤：画像をダウンロードする
アイキャッチ画像が完成後、画像ファイルをダウンロードしましょう。
Canva｜アイキャッチ画像のダウンロード
画面右上の「共有」>「ダウンロード」をクリックし、ファイルの種類は「PNG」を選択したら「ダウンロード」しましょう。
なお、Canva有料プランを申し込めば、透過背景やファイルを圧縮することも可能ですよ。
アイキャッチ画像の設定方法3つ
それでは、作成したアイキャッチ画像をWordPressブログに挿入していきましょう。
- その①：WordPressへのアップロード方法
- その②：WordPressテーマでの設定方法
- その③：アイキャッチ画像の圧縮方法
アイキャッチ画像は、WordPressにアップロードするだけなので、とてもカンタンですよ。
その①：WordPressでのアップロード方法
ダウンロードした画像をWordPressにアップロードします。
WordPressにアイキャッチ画像を挿入する
WordPressの記事作成画面の右横「アイキャッチ画像」>「アイキャッチ画像を設定」より、ファイルを「ドラッグ&ドロップ」or「ファイルを選択」します。
すると、自動的にアイキャッチ画像として挿入されまして、これにて完了です。
その②：WordPressテーマでの設定方法
WordPressにデザインテンプレートである「テーマ」をインストールすると、アイキャッチ画像のキメ細かい設定を行えます。
たとえば、WPテーマで人気な「AFFINGER」では、下記のような設定が可能です。
AFFINGER：アイキャッチ画像の設定
- アイキャッチ画像の表示を全ての記事で有効化する←全記事でアイキャッチ画像が表示される
- アイキャッチのキャプションをクレジットとして写真上に表示する←キャプション（説明）が表示される
- アイキャッチ画像をタイトル下表示に変更する（何もしない or ワイド化 or ポラロイド風）
当サイトでは、記事内ではアイキャッチ画像を「非表示」に、記事一覧やカード型リンクでは「表示」されるよう設定してます。
こーすると、ページの表示速度がグーンとUPするため、SEO対策としても有効です。
設定方法は、各テーマによって異なります。その他、人気WordPressテーマは【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】にまとめました。
-
-
【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】
続きを見る
その③：アイキャッチ画像の圧縮方法
WordPressプラグイン「EWWW Image Optimizer」をインストールすると、さらに便利ですよ。
アップロードした画像は自動的に圧縮&リサイズされます。さらに、WebP化の設定もお済みであれば、拡張子を「JPG・PNG→WebP」に自動変換してくれます。
高圧縮で画質も崩れにくく、画像SEO対策として優秀なプラグインです。詳しくは【神】EWWW Image Optimizerの設定&使い方ガイド【画像のWebP化方法】をどうぞ。
その他、おすすめプラグインは【9選】WordPressブログおすすめ無料プラグイン【不要プラグイン5選】をお読みください。
ブログ用アイキャッチ画像でよくある質問5つ
アイキャッチ画像で、ブログを差別化しよう
本記事では、ブログ記事の表紙となる「アイキャッチ画像の作り方」を解説しました。
アイキャッチ画像を丁寧に作り込むことで、いろんなメリットがあります。
たかがアイキャッチ画像、されどアイキャッチ画像ですが、ブログの第一印象が決まる大切な要素です。
人を見た目で判断してはいけません...とよく言いますが、実際、人は見た目で判断されます。
ブログも同じでして、ファーストインプレッションで、読むかどうかが決まります。決して手を抜かず、丁寧に作りましょう。
繰り返しですが、ブログ用アイキャッチ画像を作るなら「Canva」一択です。もはや、使ってない人は存在しないですので、お手隙の際にどうぞ。
出だしが肝心
すみません、、、さいごに、大切な一言を。
それは「ブログが読まれるかは『書き出し（リード文）』で決まる」という事実です。
ユーザーの目的 =「悩みを解決すること」でして、決して「アイキャッチ画像」ではありません。
魅力的なリード文を提示することで、初めて本文が読まれます。詳しくは【重要】ブログリード文（書き出し）で心を掴め！誰でもマネできる書き方テンプレートをどうぞ。
WordPressブログの始め方
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
最後までお付き合いありがとうございました。僕のTwitter（@ImperialMiyavi）もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます！
