ブログのアイキャッチ画像の作り方がよくわかりません。そもそも画像を作る方法も知らないです。
読まれる記事を作るにはアイキャッチがとても大切と聞きました。作成する際のコツを教えて！
こんな疑問にお答えします。
ブログ記事を作る作業の中でも、アイキャッチ画像は作成が難しく、面倒なのでついつい後回しにしたり適当に作ったりしてしまいがち。
しかしアイキャッチ画像は、ブログ記事の顔となる重要な要素。画像加工をやったことがない人のために、フリーのツールを使って作る方法を解説します。
テンプレートをベースに簡単に作成することができるのでだれでも簡単に短時間でおしゃれなアイキャッチ画像を作れます。
画面を開いてすぐに目に飛び込んでくる画像が美しく、キャッチコピーの内容が魅力的だと直帰率も下がり、ブログ記事を完読してもらえる確立が飛躍的に上がります。
- Canvaを使ったアイキャッチ画像の作成方法
- WordPressブログでアイキャッチ画像を設定する方法
- アイキャッチ画像をおしゃれに作成するコツ
- アイキャッチ画像の必要性・重要性をおさらい
ブログ記事に不可欠なアイキャッチ画像とは？
アイキャッチ画像とは、目（アイ）を惹きつける（キャッチする）画像のことです。サムネイル画像とも言います。
ブログのアイキャッチ画像の役割として、以下のような役割があります。
| 表示箇所 | 役割 |
|---|---|
| 記事の冒頭 | 記事を読む気にさせる |
| 記事の一覧 | 一覧ページを見やすくする |
| ブログカード | 関連性がある記事であることを伝える |
| SNS | クリックして記事に移動する気にさせる |
| 検索結果画面 | 検索結果画面でクリック率を上げる |
品質の高いアイキャッチ画像とは、「この記事は面白そうだ」「読んでみたい」と思わせることができるものです。
ブログにアイキャッチ画像が必要な理由
ブログにアイキャッチ画像を設定すると、以下のような効果が出ます。これが、アイキャッチ画像が必要な理由です。
直帰率が下がるから
ブログ記事にアクセスした際にユーザーがすることは、そのページを読むかどうかの判断です。
- 見たかったページであることを確認する
- 読みたいと思えるデザインか確認する
- 記事が本気で書かれたものか確認する
上記のような確認→判断をユーザーは一瞬で行います。
例えば全画面広告が表示されると間違ったところをクリックしたのかと勘違いして戻るボタンを押した経験はないでしょうか？あるいは、アクセスした先にアイキャッチ画像がなく、タイトルも小さい文字で読みづらいと感じて検索結果に戻ったり、アイキャッチ画像の出来があまりにひどくて本気で書かれていないと思って戻るボタンを押す、といった経験があるかもしれません。
アイキャッチ画像を設定することで、このページがユーザーがアクセスした記事が確かに見たかったページであることを伝えると同時に、読みやすいページデザインであり、本気で書かれた手抜き記事ではないことを一気に伝えることができます。
ブログ内を回遊しやすくなるから
記事の一覧ページや関連記事のリンクがテキストのみになっていると、文字の密集度が高まり、読みづらく感じてしまうはずです。
アイキャッチ画像と記事タイトルがセットで表示されることで、適度なスペースと「目の保養」ができるのでユーザーはお目当ての記事を見つけやすくなります。
アイキャッチ画像が入ることで、魅力的な記事の存在をユーザーに伝えやすくなって回遊率が高まります。
ブログ全体がオシャレになるから
アイキャッチ画像は、
- 表示される際の面積が大きい
- 表示される頻度が高い
ため、ブログ全体のデザインを決定づける要素になります。
従って、アイキャッチ画像がオシャレだと、ブログ全体がオシャレに見えます。
SNSからのアクセスを増やせるから
SNSで記事のURLを共有されると、OGP画像やTwitterカードが表示されます。
この時設定される画像は、SEOプラグインで個別に指定しない限り、アイキャッチ画像が兼用されます。
SNSで共有されると、アイキャッチ画像とタイトル文字がセットで表示されるため、クリックしてページへアクセスするかどうかの判断に使われます。
SNS内で共有されたURLがクリックされるかどうかはアイキャッチ画像の出来次第と言っても過言ではありません。
検索結果に表示されることがあるから
Googleの検索結果画面は日々進化をし続けており、アイキャッチ画像が検索結果画面に表示されることが増えています。
ただし、必ずしもアイキャッチ画像が表示されるわけではないのと、検索ワードによって表示される画像が変わるので100%アイキャッチ画像が表示されるとは限りません。
それでも、アイキャッチ画像が表示されると他の検索結果と比べてかなり目立つので、クリック率がアップします。
間接的にSEO効果が出る
- 検索結果画面でのクリック率アップ
- SNSからの訪問数アップ
- 直帰率の低下
- 回遊率・訪問時間のアップ
これらはSEOでの順位を決めるシグナルの一つと考えられており、直接的ではないにせよ、SEO効果が得られます。
アイキャッチ画像があることで、SEOでの順位がアップする可能性が高まります。
Canvaを使ったアイキャッチ画像の作り方
おしゃれなアイキャッチ画像の作成方法は、Canvaを使って作成するのが最も簡単です。
手順を要約すると、テンプレートを選んで、テンプレート内に書かれた文字を書き換える、これだけなので非常に簡単です。
まずは1枚画像を作ってみるところから始めましょう。簡単に短時間で作成できることがわかるので驚かれるはずです。
Canvaに登録・ログインする
Canvaは登録が必要です。
Googleアカウントなどを通してログインするだけで登録完了となり、ログインできる状態になります。
ログインできたら早速作成していきます。＜デザインを作成＞を押して新規に作成します。
アイキャッチ画像は、1200×630で作成すると、SNS用のOGP画像を兼ねることができます。
リョウジもし、運営されているブログでアイキャッチ画像のサイズが既に決まっているのでしたらそのサイズを入力ください。
テンプレートを選択
Canvaは膨大なテンプレート数があり、その中から気に入ったデザインのものを選択し、そこから編集可能なテキストや画像を変更していくスタイルです。
デザインを選択すると、中央にデザインが表示されます。各デザインのパーツは編集可能な状態になっていて、ダブルクリックを押すと編集可能です。
文字を編集・変更する
編集エリア内の見出し部分のテキストを修正していきます。
文字数が違うと、サイズオーバーになったりスカスカになったりするので、文字サイズを微調整するなどしてください。
こだわる場合は文字の他のイラスト部分も修正可能です。大きさや場所の配置はもちろん、画像そのものを入れ替えることも可能です。
画像を保存し、圧縮する
画像の編集が終わったら、ダウンロードして保存します。
右上のダウンロードボタンを押すと、画像形態を聞かれます。ファイル形式はPNGを選択しておけばOKです。保存ボタンを押して保存します。
Canvaは画像を圧縮する機能がないため、ダウンロードした画像を圧縮します。
圧縮を行う方法は何でも構いませんが、ここでは最も手軽なTinyPingを使った圧縮方法を解説します。
ここまででアイキャッチ画像の作成自体は完了です。簡単ですね。
リョウジ試しに私が作った際は、所要時間は約10分ほどでした。一番時間がかかったのはテンプレートを選ぶところでした。
≫ Canvaでアイキャッチ画像を作成する
WordPressブログでアイキャッチ画像を設定する方法
WordPressブログでは、アイキャッチ画像を標準機能として設定できるようになっています。
アイキャッチ画像の作成が完了したら、アップロードしていきましょう。
アイキャッチ画像は本文中でアップロードをするわけではありません。専用のアップロード場所からアップします。
アイキャッチ画像を簡単におしゃれに作成する5つのコツ
アイキャッチ画像を手早く作成する方法（Canvaで作成）をお伝えしてきました。
Canvaで作るなら美しくレイアウトされたものを編集するだけなので、文字数や改行位置を気を付けるだけでOKです。
別のツールでゼロから作る場合や、素材集から画像をピックアップして自分で作る場合のポイントを解説します。
綺麗で、内容に関係のある画像を選ぶ
Canvaでアイキャッチ画像を作成する際には、最初にテンプレートを選択しました。
テンプレートを選ぶ際には、次の点に注意しましょう。
- 十分な品質の美しい写真・イラストが使用されている
- 記事本文と関係のある画像を選択する（単に綺麗というだけで選ばない）
写真やイラストを使う時は、パッと見で美しいと思える写真を使いたいものです。次の画像はどうでしょう。
ある種、「いい味出でてる」のかもしれませんが、パッと見綺麗だとは思えないですよね。もう少し美観の良い画像を選びたいものです。
また、内容が合致していない画像を選ぶと意味がわからなくなります。
なんで筋肉隆々のマッチョ画像を選んだんだ、ってなるはずです。
これは極端な例ですが、「え、何で？」とつっこみたくなるテンプレートのチョイスは避けましょう。
Canvaのテンプレートはどれも美しいですが、特に内容とのミスマッチには注意が必要です。
ありがちなパターンとして、コーヒーショップ向けのテンプレートで「コーヒー」が全面に出ているものを「オフィスワーク」や「くつろぎ」のつもりで使ったのに、やっぱり「コーヒー感」が強すぎる、など。
文字を目立たせる工夫をする
アイキャッチ画像には、記事タイトルを入れることが多いですが、文字を入れる際には、可読性をしっかり確保するようにしましょう。
背景がゴチャっとした画像を使う場合は、背景に帯を引いたり白場を確保するなどして文字が読めなくなるのを避けましょう。
文字のサイズは内容が伝わるサイズにする
アイキャッチ画像のデザインで、文字が目立つようにするべき、とお伝えしましたが、文字情報を伝えようとするあまり、極端に文字を大きくしたりしないように注意しましょう。
文字のサイズは、大きすぎると背景が無意味になり、小さすぎると主役が背景に変わるので文字内容があまり伝わらなくなります。
ちょうどいいサイズにし、「文字の内容を伝えるのに背景も役立っている状態」を目指しましょう。
ワンポイントの装飾を加えて動きを見せる
ワンポイントの画像を加えることで、
- 緊張感を緩和する
- 逆に引き締める
- 「ここがポイント」とか「注意マーク」のようなものを添えて注意深く読むことを促す
- 単調になるのを防ぐ
- 何か物足りない感じになるのを防ぐ
といった効果を得られます。
アイキャッチ画像を作るその他のツール
Canvaと近いことができるツールは他にも多くあります。
Canva以外のオンライン画像エディタ
- Adobe Creative Cloud Express
- fotor（フォター）
- Pixlr X（ピクセラ）
- VistaCreate
- easil（イーシル）
- snappa（スナッパ）
特にAdobe Creative Cloud Express・fotor・VistaCreateはCanvaと比べても遜色ない使い勝手です。
どのサービスも、無料版と、有料のプレミアムサービス版を用意している関係で、高品質なものは有料版であることが多くなります。
気に入ったものが見つからなかったときに、別のサービスでも探せる状態にしておくと良いでしょう。
実はパワーポイント（スライド系ツール）でも作成可能
- Googleスライド
- Microsoft PowerPoint
- keynote
といったスライド（プレゼンテーション）作成ソフトも保存形式で画像形式を選択すればアイキャッチ画像を作成することができます。
グラフィック系のソフトよりも軽量で、ローカルにもファイルを保存できる安心感や企画書や提案書などで使い慣れた操作感があるので非デザイナ職の方ならフリー素材を背景に設定し、ちょこっと文字を修正すれば十分使えます。
リョウジ実は当サイトはほとんどの画像をパワポで作成しています。
デザイナならPhotoshop
本職がデザイナの方や、デザインツールを使い慣れている方ならPhotoshopやIllustratorがやはり最強です。
ブログのアイキャッチ画像の作成なら印刷することはないのでPhotoshopを購入しておけば良いです（使い慣れた方を使えばOKです）。
公式サイトで通常版を購入すると月々6500円以上かかりますが、商用利用可能なアカデミック版を購入すれば初年度月々2000円ほど、2年目以降も3000円ほどで購入できます。
ちょっとした画像加工に便利なPhotoshop Elements【買い切り】
トーンカーブが無かったりぼかしの種類は少ないですが、Photoshopの簡易版であるPhotoshop Elementsは買い切りで1.5万円程度なので安上がりです。
リョウジ私は仕事でPhotoshopを使用していて使い慣れていますが、多少の操作性の違いはあれど、普段使用しているほとんどの機能は使えるのでPhotoshop Elementsで十分でした。
ブログのアイキャッチ画像の作り方についてのよくある質問
アイキャッチ画像のサイズはどのくらいにするのが良い？
ブログのアイキャッチ画像のサイズは1200×630pxで作成しましょう。
- SNSでシェアされた際に綺麗に表示されるサイズだから
- Googleは幅1200px以上の画像を作成することを推奨しているから
- OGP画像とアイキャッチ画像を2つ作るのは手間だから
ファイルサイズは200KB以内程度で作っておけばOKです。また、ファイル形式はPNG形式にしておくことをお勧めします。
SNSでシェアされた画像は、そのまま使われずに圧縮処理がかけられることが多く、JPG画像だと劣化してしまうことがあるためです。
アイキャッチ画像にタイトル文字は入れるべき？
アイキャッチ画像の作成パターンは以下の4パターンが多いです。
- Canvaなど作成ソフトを使って作り込み、タイトル文字も入れる
- イラストやキャラクターをゼロから作り、タイトルも入れる
- 有料（無料）素材を背景にしてタイトル文字を入れる
- 有料（無料）素材を無加工でそのまま使う（タイトルは入れない）
ブログのアイキャッチ画像にタイトルを入れないという選択肢もアリです。
というのも、アイキャッチ画像は基本的にページタイトルとセットで使われることがほとんどですので、必ずしもテキストの補足を必要としないためです。
ただし、Googleの検索結果などで表示される際にタイトルが含まれていないとクリックされにくくなる可能性もあるので入れておく方が無難です。
アイキャッチ画像とOGP画像は共通でいいですか？
基本的にアイキャッチ画像とOGP画像は共通で構いません。
SNSで共有した際に表示されるOGP画像は、OGPタグを使って指定します。
WordPressテーマやSEOプラグインによって、OGPタグを出力できるできない・アイキャッチ画像と別で設定する・しないの扱いが分かれます。
統一感を出すためのコツは？
- 使用する画像素材を同じ作成者のものを使う
- 使用するフォントを同じにする
- 背景色など配色を共通にする
- 自作のキャラクターを必ず入れる（複数の表情を作る）
- レイアウトを統一する
- カテゴリ毎・商標毎に同じレイアウトにしたりロゴを入れる
といった方法で統一感を出すことができます。
有料版を使うメリットは？
アイキャッチに使用するツールや素材は有料版が用意されていることが多いです。
ツールの場合
- 選べるテンプレートの種類が一気に増える
- 挿入できる素材の量が一気に増える
- 加工用のツールの種類が増える
素材集の場合
- 有料素材は検索性が高い
- 同一の作家による統一感を作りやすい
- 見つかる素材の数が圧倒的に多い
有料版を利用すると、手間を省くことができたり、選べるテンプレートが増えるので選択肢が広がります。
最初は無料で使い始めて、魅力的なサービス・ツールと思ったら課金すると作業効率が一気に上がります。
まとめ：アイキャッチ画像を最適化して直帰を減らそう
アイキャッチ画像を設定することで、アクセス数が増加することもありますが、メインの役割はやはり本文に読者を誘導する・直帰を減らすことです。
直帰率を下げることは、アクセス数を増やすのと同じ効果が生まれます。どんなに多くの人を集めても、大半の人がすぐに去って行っては成果は出ません。
むしろ少ないアクセスでも直帰せずに、記事が読まれる方が成果につながりやすいです。
アイキャッチ画像を工夫して、直帰を減らしていきましょう。
尚、直帰を減らす方法として、他にリード文を改善する方法もあります。