ブログのアイキャッチ画像についての記事です。
- アイキャッチ画像って何？
- アイキャッチ画像って必要？
- アイキャッチ画像の作り方
この辺の知識を身につける事が出来ますよ～
アイキャッチ画像の重要性
キーワド検索して辿り着いたページの記事一覧を見た時に、画像が無くってもったいないなぁって感じのブログにたまに出くわしませんか。
NO IMAGEって書かれている記事が先頭にあるのってちょっと残念ですね～。
そうですね。記事の内容を充実させても、記事の顔とも言える画像の設定を忘れてしまうと、見てもらえないこともあって、せっかく良い記事を書いても機会損失につながり超もったいないですね。
自分のブログのページがこんな状態になったら残念ですよね。そうならないようにアイキャッチ画像の設定方法について解説しています。
記事の内容の次に大事なアイキャッチ画像
アイキャッチ画像は記事の顔とも言える重要な役割を担っています。その画像を見るだけでその記事に書かれていることがざっくりと想像できるようなアイキャッチ画像を作ることで集客を増やす事が出来ると考えられるほど重要な要素です。
だけど、記事の内容を書くことに必死で、書き終わった後にアイキャッチ画像の設定をつい忘れてしまう事ってあると思います。
そんな時ようのアイキャッチ画像をあらかじめ用意しておくことで「NO IMAGE」という表示になることを回避する事が出来ます。
ここでは、記事内のアイキャッチ画像の設定方法と、記事内のアイキャッチ画像の設定を忘れたとき用の設定をご紹介します。COCOONのテーマを使用しているユーザ向けの手順となります。
アイキャッチ画像の登録手順
今回の記事では、２つのアイキャッチ画像の登録手順をご紹介しています。
- 記事のアイキャッチ画像を忘れたとき用の設定
- 記事内のアイキャッチ画像の登録手順
記事のアイキャッチ画像を忘れたとき用の設定
基本は、各記事の内容に合った画像を用意して記事の中にアイキャッチ画像を設定します。設定手順は後述しますが、ここでは、記事中のアイキャッチ画像を設定し忘れても「NO IMAGE」という残念な表示にならない為の設定です。
まずは、Cocoonの設定に移り、画像タブを選択します。アイキャッチ画像の登録を忘れた場合に変わりの画像を利用する方法は２つあります。それぞれについて説明します。
本文中の最初の画像をアイキャッチ画像として設定する
画像タブの設定を下にスクロールすると、「アイキャッチの自動設定」という項目があります。こちらをチェックすると、記事の中で使用した最初の画像をアイキャッチ画像として使用します。
こちらの設定は、記事の中の画像なので記事の内容に近い画像が使われるという効果が見込めますが、記事内に画像を使っていない場合は、「NO IMAGE」の表示となってしまいます。
アイキャッチ画像登録を忘れたとき用の画像設定
こちらの設定は、記事内の画像は使用せずに、アイキャッチ画像の登録を忘れた記事全てに同じ画像を表示させる設定です。
Cocoon設定の「画像」タブの一番下に「NO IMAGE設定」項目があります。そこで、イメージ画像を選択します。
あらかじめ用意していた画像をPCから選択します。
選択したら、メディアライブラリにアップロードされるので、「画像の選択」ボタンをクリックします。これで、記事の一覧で、アイキャッチ画像を設定していない記事にもアイキャッチ画像が表示されます。
こちらの設定は、アイキャッチ画像を設定していないブログすべてに同じ画像が表示されるので、「NO IMAGE」より見た目は悪くありませんが、同じ画像が続くので、手を抜いている印象を与えかねません。
2つの設定を行うことで、できるだけユニークなアイキャッチ画像を使用するようにしましょう。
記事内のアイキャッチ画像の登録手順
アイキャッチ画像の設定を忘れた時の対応を説明しましたが、できるのであれば、全ての記事にその内容に合ったアイキャッチ画像を登録したいですよね。
ここからは、記事の中でのアイキャッチ画像の登録手順になります。
WordPressの投稿メニューの「新規追加」ボタンをクリックします。
投稿画面の設定メニューの「投稿」タブを下にスクロールすると、アイキャッチ画像項目がありますので、ここで画像を選択することで登録できます。設定メニューが表示されていない場合は、歯車ボタンをクリックして表示させます。
記事に合ったアイキャッチ画像を探す
記事に合ったアイキャッチ画像の検索するときに使用するサイトです。有料素材もありますが、ブログで使用する画像であれば、フリー素材でも十分きれいな画像を見つける事が出来ます。
有料素材
| pixta | 画像・動画の素材サイト |
| adobe stock | クリエイティブ制作に最適なストック素材 |
| Shutterstock | あなた向けのインスピレーションを毎週お届け |
| imagenavi | 「すっきり」「ほのぼの」など、感覚的キーワードからも検索 |
無料素材
| イラストAC | イラストACはイラストが無料！商用利用もOK！ |
| いらすとや | たぶん日本一有名なフリー素材サイト |
| pixabay | 高品質なフリー画像素材 |
| シルエットデザイン | 影絵の素材に特化した素材置き場 |
| freepik | ベクター画像、PSDフイル、写真素材をすべての人に |
| istockphoto | リアルでストーリー性のある写真や映像、イラスト素材 |
画像タイプを統一する
色々な画像サイトを見ていると、使いたくなる画像がいくつも表示されます。写真だけではなく、イラストやファンタジックにCGで作成された画像など様々です。都度気に入った画像を探しますが、一つのブログで統一感を見せる為に、画像のタイプは一つに絞ることをおススメします。
記事によって、イラストだったり、写真だったりいろいろな画像を使っていると、ブログとしての統一感が無くみずらいかもしれないですね。
ブログの内容に合わせて画像タイプを選んでそのタイプを使い続けると、ブログに統一感が出てきて、信頼性の高いブログという印象を与えるので、おススメですね。
アイキャッチ画像の編集ツール
画像を購入または無料で入手したものをそのままアイキャッチ画像として登録してもよいのですが、サイズや、フレーム（写真の額みたいなデザイン）、画像内にテキストの挿入など簡単な編集を行うことで、オリジナリティが出てきます。
プロ仕様の画像編集ツールを購入する必要はなく、簡単な加工であれば、「PhotoScape X」というフリーソフトが非常に高機能で使いやすいのでおススメです。
PhotoScapeXのインストール
無料の画像編集ソフト「PhotoScape X」のインストールは非常に簡単です。Microsoft Storeからインストールが可能です。
Microsoft Storeが起動したら、右上の「検索🔎」に「PhotoScape X」と入力して検索すれば、すぐヒットします。こちらを選択してインストールすれば完了です。
最低限行うアイキャッチ画像の編集
使い方は、色々試してみるとフリーソフトとは思えない画像編集機能が用意されていますが、ここでは次の作業手順をご紹介します。
- 画像を開く
- 画像のサイズ変更
- 画像の切り抜き（トリミング）
- フレーム挿入
- 文字の入力
画像を開く
PhotoScapeには、ファイルメニューがありません。起動すると、黒いウィンドウが開き、左側にPCのフォルダ階層が表示され、右側の大きなスペースが画像を編集する画面となっています。
PhotoScapeには、ビューワーと写真の編集、写真のカットなどの機能があり、どの機能を使うかはウィンドウのメニューバーで指定します。
画像を開くには、まず、メニューバーで「写真編集」機能を選択します。続いて、右側のスペースの中央にある「開く」から画像ファイルを選択するか、画像ファイルをドラッグアンドドロップでPhotoScapeに移動させることで開く事が出来ます。
下記画像は、ドラッグアンドドロップをしています。
サイズ変更
サイズが大きすぎると、アイキャッチ画像としてきれいに表示されず、カットされて表示されてしまいます。私は、1280×720ピクセルでアイキャッチ画像を作成しています。その為のサイズの変更ですが、まずは、横幅を1280ピクセルになるように画像の縮尺を変更します。
「編集」メニューで、「サイズ変更」をクリックすると、サイズ変更画面が表示されます。ここで、幅をプルダウンで1280ピクセルを選択して、適用ボタンをクリックします。ここでは、幅と高さの比率は変えずに幅だけを変更して、高さは幅に合わせて自動的に変更されるのでそのまま適用します。
高さが変わらない場合は、下の「縦横比を固定」のチェックがはずれているのでチェックを入れてから再度サイズ変更を行ってください。
画像の切り抜き
サイズ変更で幅を1280ピクセルに変更したら次は高さを720ピクセルに変更します。こちらは、縮尺を変えるのではなく、高さをカットするイメージです。
まずは、切り抜きメニューをクリックして、画像を切り取るモードに変更します。
続いて、切り抜きサイズを指定します。❶カスタムをクリックすると、サイズを入力する画面が表示されるので、下枠のサイズの❷高さを720ピクセルに修正します。幅は画像サイズの変更で修正した1280ピクセルになっていると思いますので、そのまま変更せずに、OKボタンをクリックします。
すると、画像の中に切り抜きを行うサイズの枠(今回は、1280×720ピクセルの破線枠)が表示されるので、❸枠を上下に移動して、カットして残すスペースを決定させます。残すイメージ部分が決まったら、❹切り抜きボタンをクリックして確定します。
やり直したい場合は、右下に「復帰」、「取り消し」というメニューがあるので、選択することで、一つ前の状態やオープン直後の状態に戻す事が出来ます。
フレーム設定
画像の外枠をきれいに装飾することで、無造作にダウンロードした画像ではなく、作品としてのアイキャッチ画像として整います。フレームメニューを選択すると、様々なフレームが選べるので、好きなフレームを選択して適用をクリックして確定させてください。
文字の挿入
アイキャッチ画像にインパクトを残したい場合は、画像にタイトルなどのメッセージを表示させる事が出来ます。
挿入メニューをクリックすると、「テキスト」の挿入が出来るメニューが表示されますので、クリックして、❶文章を入力します。文章は、編集画面の中央に表示されるので、❷フォントやサイズ、色などを変更して、見やすいデザインになるように編集します。
文字装飾は様々な機能があるのでいろいろ試してみてください。機能にPROとあるのは有料なのでそれ以外の装飾で気に入ったものを使用してみてください。
テキストの挿入は、「テキスト」メニューをクリックした時点で適用されるので、入力した文章や装飾を変えた後に、「適用」というボタンはありません。実施した編集が終わったらそれで確定です。右上の×を押すとテキストの編集は終了になります。
また、挿入したテキストを削除する場合は、画面に表示されている文字列の右上の×をクリックすることで削除可能です。
画像がカラフルだと、見た目奇麗だけど、文字が読みずらくなるからあまり色は多くないイメージ画像を選択した方が良いです。
アイキャッチ画像は記事の顔なので華やかな方がいいんじゃないですか？
テキストを入れなくてもブログの内容がわかるような画像であれば良いですが、そうではない場合は、テキストを入れることになるので、重要なのはテキストと記事に合った画像がきれいに表示されることです。
カラフルな画像と文字の挿入をどうしても使いたい場合は、画像の上に長方形の図形を配置して、白色で塗りつぶして、不透明度を50%くらいにします。その上に文字を表示させることで文章が画像のカラーに邪魔されずに読む事が出来ます。
テキストのメニューのアウトラインの機能を使って、文字の外回りに別の色の装飾をつけることで、文字を際立たせることもできます。
まとめ
今回はアイキャッチ画像の必要性と設定方法についてご紹介しました。アイキャッチ画像は記事を読む前に読者の目に触れるものですので、記事の中でも重要なデータとなります。
しかし、記事に合った画像を探してもなかなか見つけられない事が多いので、あまり時間を掛けてこだわり過ぎることなく、ほどほどに良い画像を用いるようにすることをおススメします。