簡単にアイキャッチ画像って作れないかな？
アイは目です。キャッチは捕まえる、興味を引くなどの意味があります。つまり、アイキャッチ画像とはユーザの目を引くための画像です。
このページでは前半部ではアイキャッチ画像とSEOと作り方の注意点、後半部では具体的なアイキャッチ画像の作り方について解説しています。
センスに自信がない人でも5分程度でらくらく作れる、見栄えもそこそこいいアイキャッチ画像を作って行きますよ！どうぞ最後までお付き合いくださいね。
アイキャッチ画像はSEOに直接は関係しない
私はアイキャッチ画像は直接にはSEOに関係ないと思っています。
SEOは検索順位を上位にする対策です。SEOについては「【SEOの極意】検索上位になる本質のSEO対策３選」をご覧ください。
私のブログではアイキャッチ画像があるなしについては、クリックされるかどうかは関係ない数値となっています。
また、アイキャッチ画像の上手い下手は個人の感覚なので数値にはかれないと思います。今後AIの知能が深まって、アイキャッチ画像が記事の内容と一致しているかどうは判断してくると思います。
ただ、アイキャッチ画像の質と記事内容の質のどちらが重要かは、記事の質なのでアイキャッチ画像は直接は影響しないんじゃないかなと思います。
アイキャッチ画像はお店のポップと同じ
「アイキャッチ画像はSEOに直接関係はない」と言っても、ユーザーの心理には影響します。
本屋で店員オススメのポップで本を手にしたことはありませんか？美味しそうな商品説明をみて試しに買ってみたことはありませんか？商品が好評であれば次からも購入しますが、イマイチだったらそれで終わりです。
それがそのままブログの記事でも当てはまります。アイキャッチ画像があることで興味がでてクリックする、リード文を読んだら知りたい情報がありそうだったので記事を最後まで読む。リード文でイマイチだったらそれで終わり。アイキャッチ画像もお店のポップと同じです。
検索サイトよりもSNSに効果がある
そうはいっても、特にSNSではアイキャッチ画像は必要です。TwitterなどSNSでは記事リンクを共有するとアイキャッチ画像とタイトルの両方が表示されるようになっています。
私のツイートです。まずはアイキャッチ画像がない場合です。
次はアイキャッチ画像ありのツイートです。
2つのツイートでアイキャッチ画像ありかなしの記事どちらかを選択することになったら、9割の人がアイキャッチ画像ありの記事を選ぶでしょう。それはアイキャッチ画像で記事のよしあしを無意識に判断しているからです。
それはユーザーは視覚から情報を得ているので文字よりも画像の方が認識が早いからです。
- アイキャッチ画像なし・・・有益な記事ではないと判断される
- アイキャッチ画像あり・・・クリックするかしないかの選択肢に入る
- センスの良いアイキャッチ画像・・・有益な情報があると記事への期待が大きい
アイキャッチ画像は記事の内容をあらわし、センスが良ければ良いほど記事への期待は大きくなると考えられます。（センスの良さの定義は難しいけど）
ポイントを抑えた適切なアイキャッチ画像を作る
とはいえ、センスのよいアイキャッチ画像よりもブログ内容に集中したいですよね。アイキャッチ画像はあくまでもアイキャッチなので、割り切って作りましょう。
ただしポイントがあります。（私が気をつけていること）
- アイキャッチ画像の比率は16：9
- アイキャッチ画像の大きさは1024×576または956×538ピクセル
- アイキャッチ画像の容量は100KBくらい
比率は1：1．91と言う方が多いですが、スマホで写真を撮って編集する場合16：9がちょうど良いし汎用性があると思うので16：9にしています。
アイキャッチ画像の画質が悪いと逆効果なので横幅1000ピクセルくらいはほしいなと思っています。
あまり画質を優先して容量が重くなるとサイト表示が遅くなりSEO評価が落ちるかもしれません。アイキャッチ画像は他の画像と同じく適切な容量を目指しましょう。私は目安を100KBとしていますが、ちょうどよい画質だと思っています。
アイキャッチ画像で注意すること
アイキャッチ画像を作る上で注意してほしいことがあります。それはアイキャッチ画像が表示される場所で大きさが変わることです。
- 8分の1サイズくらいのサムネイルになる
- SNSでは中心部で正方形にトリミングされる
そのため、画像や主張したいことはアイキャッチ画像の中心部へ寄せ、完成前には縮小表示してどんなふうに見えるかを確認してくださいね。
それでは次からは作り方です。
レベル1のアイキャッチ画像の作り方
背景なしのアイキャッチ画像をつくります。見本はうえのような画像です。「え？こんなんでいいの？」と思いましたか？心配ありませんよ、有名ブロガーのきぐちさんの「副業クエスト100」もドラクエ風のシンプルなアイキャッチ画像を使っています。
このアイキャッチ画像は先に書いた「Photoshop Elementsで境界線（輪郭線）を引く方法」の応用編です。
1．新規作成で1024×576ピクセルで白紙をつくります。または、最後に16：9でカットしてもいいと思います。
2．塗りつぶしツールで背景をベタぬります。
カラーはどれを選べかいいか悩む場合は、Webセーフカラーにチェックをいれて選ぶ範囲を狭めます。そして、赤で四角く囲ったあたりに入るカラーを選べば、落ち着いた雰囲気になりますよ。
3．枠線を引きます。今回は太さの違う2重線をひきます。まずは以前に書いた境界線の引き方を参考にし、枠線を引きます。
4．選択範囲を残したままの状態で、「選択範囲」メニューの中から「選択範囲を変更」「選択範囲の拡張」を選びます。選択範囲の拡張量をお好みの数値（私は10～20ピクセル）を入れます。
その後、外側にできた選択範囲に境界線をお好みの太さでひきます。今回は3～4ピクセル太くしました。Elementsなので、角が丸くなるのは多めにみてください。しょうがない設定です。
5．文字を入力して選択ツールで整列させれば、出来上がりです。
写真を使ったアイキャッチ画像の作り方
次は写真を使ったアイキャッチ画像の作り方です。
画像はOｰDANさんからダウンロードします。アイキャッチ画像に関係したキーワードで画像を探しましょう。「メニュー」で検索しました。写真を探すキーワードは、本文キーワードより外れたところで探します。
この写真にした理由はピザの立て看板が目を引くなと思ったからです。アイキャッチ画像は「ユーザーの目を引く画像」なので、「目を引くもの」を探しました。
1．写真をダウンロードしたらElementsで開きます。画像比率が16：9でないようなら、先にトリミングします。
2．レイヤーを重ね、黒でべた塗りします。不透明度を50％くらいにします。
3．文字を入力します。あとは文字のアレンジや線を引いたりして整えます。以上で、上のようなアイキャッチ画像ができました。これまでで大体5分でできあがりました。
アレンジでいつものアイキャッチ画像の印象を変えよう
だんだん作り方がマンネリ化するとアイキャッチ画像作りも面倒になります。そんな時は少しのアレンジで印象が変わる簡単な方法を紹介します。
簡単にできるアレンジを使って、アイキャッチ画像をアレンジしました。使ったのは文字の位置の変更と文字を四角で囲みました。
どうでしょう？雰囲気かわりましたよね。四角く囲むと印象がぐっとかわるのでオススメですよ。
簡単に作るからアイキャッチ画像つくりは楽しい
今までアイキャッチ画像の作り方を解説してきました。
アイキャッチ画像とは商品のポップみたいなもので、直接はSEOに関与しないけどもユーザーのクリックしようかなという心理には大きく影響を及ぼします。
だからといって、アイキャッチ画像にこだわりすぎたらキリがありません。アイキャッチ画像はアイキャッチと割り切って、ちゃちゃっと作りましょう。簡単に作ろうかなと思うからこそ、アイキャッチ画像の作りは楽しいモノです。
今回アイキャッチ画像はPhotoshop Elementsで作りました。他にも作成出来るソフトやサービスはあります。このくらいのレベルのアイキャッチ画像ならばElementsで十分な機能を備えています。
もしあなたがElementsにしようか通常のPhotoshopにしようかずっと悩んでいるくらいならElementsを試してみてくださいね。Elementsの感想はこちらです。
もしどうしてもアイキャッチ画像を自分で作るなんてムリ！と思う方や「ここの記事は大事な収益記事だからどうしてもセンスのいいアイキャッチ画像がほしい」時は気軽にプロに頼んでみるのも一つの手ですよ。ココナラ
は手頃な価格から利用できますよ。
登録は無料で300円クーポン券が貰えるので、さっそくためしてみてはいかがでしょうか？
