ブログのノウハウ

ブログのアイキャッチ画像の作り方【おすすめの設定と画質を上げる手順】

こんにちは、yuji(@yuji_invest)です。
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。

ブログのアイキャッチ画像を設定しようと思います。
デザインにこだわっているので、作り方とおすすめの設定を教えてください。

以上のような、ブログのアイキャッチ画像についての質問にお答えします。

この記事の内容
・アイキャッチ画像の作り方
・きれいなアイキャッチ画像を表示する方法

PV画像

当ブログはコツコツ更新した結果、アクセス数が大幅に伸びました。またアフィリエイト収益も増えており、現在は月70万ほどを稼いでいます。

本記事では、アイキャッチ画像の作り方やおすすめの設定について解説しました。

アイキャッチ画像はブログ記事の「顔」の役割で、

・SNSからの流入が増える
・ブログ内で関連記事が読まれやすくなる

など、印象を決める大切な要素となっています。

おしゃれなデザインは自分で簡単に作成可能なので、是非挑戦してみてくださいね!

※おすすめのフリー素材サイトは以下を参考にしてみてください。
》ブログに使えるおすすめ無料画像・フリー素材サイト11選

ブログでアイキャッチ画像が大切な理由

アイキャッチ画像は必要?

アイキャッチ画像は必要です。その理由はシンプルで、記事へのアクセスが増えるからです。

ブログ記事は読者に読んでもらって初めて価値が生まれます。そのためにも、まずは何としてでも読者に『記事』までたどり着いてもらうための工夫が必要だと感じています。

そこで記事の顔でもあるアイキャッチ画像を上手に活用できれば、記事の情報や印象を読者に正しく伝えることができ、興味を持ってもらうことで記事へのアクセスを期待できます。

以下では、アイキャッチ画像で記事へのアクセスが増える理由を3つ解説します。ポイントは以下の通りです。

アイキャッチ画像で記事へのアクセスが増える理由。
①記事の内容が一目でわかる。
②SNSシェアに効果的。
③ブログ内での回遊が増える。

1つずつ解説します。

①記事の内容が一目でわかる。

アイキャッチ画像の存在価値は、記事の内容が一目でわかることにあります。

ブログ記事の主な要素は「文字」ですが、タイトルと概要の短いスペースだけで記事の内容を伝えるために、様々な工夫がされていることが多いと感じています。

それに対しアイキャッチ画像では、イラストや図を利用することで情報を視覚的に1枚の画像にまとめることができます。

「パっと見て記事にどんなことが書かれているか、ある程度予想できる。」というのがアイキャッチ画像の持つ大きな強みなので、タイトルの文字をサポートする形で、記事へのアクセスを増やしてくれる印象です。

②SNSシェアに効果的。

記事タイトルや概要部分の補助的な役割をするアイキャッチ画像ですが、ブログ記事をSNSでシェアする際には『アイキャッチ画像』が前面に表示されます。たとえば以下の通り。

こちらの画像はブログ記事をFacebookでシェアしたときの実際の様子です。このように、SNSでの投稿画面のほとんどをアイキャッチ画像が占めることになります。

SNSからの記事へのアクセスは、現在欠かすことができない大きな流入経路です。

なので、アイキャッチ画像で記事を際立たせることができるかどうかで大幅にアクセス数が変わってくると思います。

③ブログ内での回遊が増える。

ブログの評価を上げるには、読者が滞在している時間を長くする必要があります。

そこで重要な役割をするのが「関連記事」です。読者が記事を読み終わったときに、次の記事へと移動してくれることがブログ評価への追い風になります。

ページ内での関連記事リンクにはアイキャッチ画像が表示されています。

このように、関連記事内のアイキャッチ画像はタイトル文字よりも目立ちやすいことがわかります。

アイキャッチ画像は小さく表示されることがほとんどですが、デザインを工夫すれば限られたスペースで情報を伝えられます。

なのでアイキャッチ画像は、関連記事への誘導に効果的で、読者の滞在時間を長くしてくれる印象です。

「次に、アイキャッチ画像のデザインのコツを紹介します。」

アイキャッチ画像のデザインのコツを4つ紹介します。

ブログ運営者向けに、アイキャッチ画像のデザインのコツを以下にまとめます。

アイキャッチ画像のデザインのコツ
①ロゴやアイコンを利用する。
②キーワードを重点的に使う。
③色は2~3色までにおさえる。
④必ずスマホでチェックする。

このように、一目でわかる見やすさを重視しています。詳細を以下にまとめます。

①ロゴやアイコンを利用する。

繰り返しになりますが、一目でイメージが湧くための効果的な方法として、ロゴやアイコンを利用すると効果的です。

ロゴなし

画像からわかるように、見慣れたロゴやアイコンを取り入れた方が、記事の内容が伝わりやすくなります。

ロゴは以下のページから利用することができます。どちらのページもクレジット表記の必要のないフリー素材サイトです。

SVG PORN
ICOON MONO

②キーワードを重点的に使う。

アイキャッチ画像内のテキストは、キーワード重視にすることで記事の内容が伝わりやすくなります。

基本的に細かい内容はタイトルで書くので、アイキャッチ画像には単語のみを載せればOKです。例えば以下の通り。

キーワードで伝える

文章で伝える

2枚の画像からわかるように、アイキャッチ画像内にはテキストが少ない方がシンプルで見やすい印象です。

言いたいことをすべて書いてしまうと見にくくなるので、思い切ってキーワードのみに絞るのがおすすめ。

③色は2~3色までにおさえる。

アイキャッチ画像に使用する色はできるだけ少なくい方がいいと感じています。

3色のみ

カラフル

2枚の画像からわかるように、色味が多すぎない方がこちらの「見てほしい情報」を絞ることができます。

また、テキスト色をロゴに合わせることで全体のバランスも良くなると思います。

④必ずスマホでチェックする。

PCだけでなくスマホからもブログ記事が読まれることを想定して、アイキャッチを作成したあとは必ずスマホでチェックします。

こちらはスマホ表示の例です。アイキャッチ画像内のテキストの大きさの目安は、小さくしすぎず見出しと同じくらいがいいと思います。

またSNSでシェアするときには、両端が見切れてしまうなど思ったように表示されないことがあります。気になる場合はデザインをなるべく中央に寄せておくと無難です。

以上の4つがアイキャッチ画像デザインのコツです。

繰り返しになりますが、アイキャッチ画像の存在意義はあくまで「記事の内容が一目でわかるシンプルさ」です。

なので、記事に誘導するためにむやみに大げさな表現をしたり、誤解を招くような過激な演出をする必要はないと思います。

Canvaでブログのアイキャッチ画像を作る方法

canvaを使う理由は5つあります

僕がcanvaを使う理由は以下の5つです。

canvaを使うべき理由
①無料で使える
②直感的に操作できる
③テンプレートが優秀
④フレームが各SNSに対応している
⑤クラウドで編集可能

以下で少しだけ解説します。

▶無料で使える
画像編集初心者なら、無料版だけで十分です。

▶直感的に操作できる
canvaにはシンプルなサイトデザインになっていて、初見でも直感的にデザインを始められます。

▶テンプレートが優秀
すでに完成しているデザインから文字や背景画像をすり替えるだけなので、サクサク作業が進みます。もちろんこのテンプレートも無料です。

▶フレームが各SNSに対応している
各SNSの投稿用や、ポスター、フライヤーなどの用途別に最適化されたフレームが用意されています。

▶クラウドで編集可能
canvaのサービスはすべてネット上で使うので、編集した画像はクラウドで自動保存されていきます。複数の端末やスマートフォンからでも編集作業が可能です。

canvaでデザインを作成する方法

Canvaにとうろくしたら、早速アイキャッチ画像を編集しましょう。

デザインの完成形はこちらの画像です。

このレベルのシンプルなデザインなら、初心者でも5分程度でできます。

ホーム画面の「デザインを作成」から、デザイン用途と画像サイズを選択します。
今回はFacebookカバー(820×312px)を選択しました。

デザインタイプを選ぶと編集画面に移ります。
左端にメニューがあり、テンプレートや素材、テキストの入力などを選ぶことができます。

まずは左端のメニューから「背景」を選びます。
「無料」の表示が出るものを利用することができます。

背景では、上部のカラーパッドから無地カラーを選ぶこともできます。
今回はここからHTMLカラーで薄いグレーを設定しました。

背景を設定できたら、canvaのロゴを乗せます。
アイキャッチのメインとして、真ん中に大きめにしておきます。

画像やアイコン素材は、画面上にドラッグするだけでアップロードできます。

左端のメニューから「テキスト」を選びます。
メニュー上の「見出し」や「本文」をクリックするとテキストボックスが表示されます。

上のメニューから、テキストのフォント・サイズ・色などを選びます。
一般的な機能が揃っており、見慣れたスタイルなので難なく利用できると思います。

これでデザインは完成です。

完成したデザインは、クラウド上に保存されています。
画面右上の「ダウンロード」をクリックすると詳細が表示されるので、ファイルの種類を選択してダウンロードしてください。

ダウンロードが始まります。

これでダウンロードが完了です。

シンプルなアイキャッチ画像を作ることが出来ました。

その他の便利な画像編集ソフトや、ブログに使えるフリー素材サイトは以下で紹介しています。
》ブログにおすすめの無料画像サイト11選

アイキャッチ画像の画質を改善する方法3つ

ここからは、アイキャッチ画像の画質設定を解説します。

画質設定
①画像をRetinaディスプレイ対応にする
②WordPressのメディア設定を変更する
③functions.phpに書き込む

詳細を1つずつまとめます。

①画像をRetinaディスプレイ対応にする

WordPressテーマを利用中の方は「Retinaディスプレイ対応」に設定することで、画質を改善できます。

※以下Cocoonの設定画面です。

1.「Cocoon設定」から「画像」へ進みます。

2.「全体画像設定」欄の「サムネイルをRetinaディスプレイ対応にする」にチェックを入れましょう。

3.「変更をまとめて保存」をクリックして完了です。

ブログを表示して更新ボタンを押すと、アイキャッチ画像がキレイに表示されていますよ。

②WordPressのメディア設定を変更する

サムネイルに利用される画像の設定サイズを上げることで、アイキャッチ画像の画質を改善できます。

WordPressでは以下のように、4種類の画像サイズが自動的に作成されます↓

WordPressの画像サイズ
・サムネイル…150×150
・中サイズ…300×300
・大サイズ…1024×1024
・フルサイズ

使うテーマによっては「サムネイル:150サイズ」にトリミングされた粗い画像がアイキャッチに適用されてしまいます。

つまり「150サイズ」の設定を変更することで、画質を上げることできます。

1.サムネイルサイズを変更するには「設定」から「メディア」を開いてください。

2.「メディア設定」の「画像サイズ」で、画像アップロードの際に生成される画像サイズ(大/中/サムネイル)を設定しましょう。

トリミング設定
・チェックを入れる→オリジナル画像から150サイズの正方形を切り取る
・チェックを外す
→オリジナル画像を150サイズに縮小する

③functions.phpに書き込む

テーマCocoonのPHPを書き換えて、アイキャッチ画像設定を変更する方法は以下の通りです。

1.「外観」から「テーマエディター」を開きます。

2.「Cocoon Child(子テーマ)」の「functions.php」を開き、以下のコードを貼り付けます。

縦型2列インデックス用のコード
function get_vertical_card_2_thumbnail_size(){
return ‘large’;
}

3.「ファイルを更新」をクリックして完了です。

以上で、アイキャッチ画像の画質を改善できました。

以上の設定後、アイキャッチ画像の画質が変わらない場合は、次の手順でアイキャッチ画像を再生成して下さい。

アイキャッチ画像の画質が変わらない場合

アイキャッチ画像の画質が改善されない場合は「Regenerate Thumbnails」を使ってサムネイルの再生成を行いましょう。

1.「プラグイン」→「新規追加」と進みます。

2.検索欄で「Regenerate Thumbnails」を検索します。

3.検索結果から「Regenerate Thumbnails」をインストール→有効化します。

4.有効化ができたら「ツール」から「Regenerate Thumbnails」を表示します。

5.「Regenerate Thumbnails For All…」をクリックします。

6.プロセスが開始するので、この画面のまま待機します。

7.15分ほどでプロセス完了です。

このようにアイキャッチ画像の設定変更後、旧アイキャッチ画像が保持されている場合は「Regenerate Thumbnails」でサムネイルを再生成すれば問題解決することが多いですよ。

まとめ:アイキャッチ画像で、ブログの価値を上げよう

この記事では、アイキャッチ画像の画質設定方法を3つ紹介しました。まとめると以下の通り。

画質設定
①画像のRetinaディスプレイ対応の設定方法。
②WordPressのメディア設定を変更する方法。
③functions.phpに書き込む方法。

また繰り返しになりますが、きれいなアイキャッチ画像には以下のような効果がある印象です。

きれいなアイキャッチ画像の効果。
・記事へのアクセスが増える。
・ブログ内での回遊が増える。
・関連記事に目が行きやすくなる。

このように、アイキャッチ画像をきれい表示することで、ブログ記事の第一印象はよくなりアクセスが増えやすくなります。

以下は、ブログ収入を伸ばしたい方へのおすすめ記事です。

ブログアクセス数を増やそう

PV画像

当ブログではSEOで検索上位を獲得した結果、1年ほどでアクセス数が大幅に伸びました。
アクセス数を増やす方法について以下の記事で解説したので、是非参考にしていただけたらと思います。
》ブログをアクセスアップするには?【初心者がやるべき対策は1つだけ】

SEOに強いブログ記事を書こう

Google検索で上位を獲れる記事を書くと、アクセスが増えブログ収入がアップします。
SEOに強い記事の書き方をまとめたので、テンプレを真似しつつ記事を書いてみてくださいね。
》【完全版】SEOに強いブログ記事の書き方テンプレート

ASP審査に合格しよう

Amazonアソシエイト・Googleアドセンス・各ASPの合格方法をまとめました。
参考にしつつ審査に挑戦してみてください◎
》【完全攻略】アフィリエイトASPの審査に合格するコツと記事数

セールスライティングで商品を売ろう

セールスライティングとは、文章で商品を売るテクニックのことです。
的確なセールスライティングで、アフィリエイトの成約率を高めていきましょう!
》【売れる文章術】セールスライティングの5つのコツ

アフィリエイト神ツールを使いこなそう

また、当ブログの現在の収益は月70万ほどとなっていますが、このようなブログ運営を支えてくれた「神ツール」を以下にて紹介しています。
》ブログアフィリエイトのおすすめツール15選

この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました!

》【保存版】ブログで月5万稼ぐまでのロードマップ
》【超基本】アフィリエイトの完全マップ

コメント

タイトルとURLをコピーしました