WordPress関連コラム  2020.9.17

ワードプレスのアイキャッチの役割とは?最適なサイズや設定方法を解説!

「ワードプレスのアイキャッチって設定しないといけないの?」とお悩みですね。

アイキャッチとは、読み手の目を引いて記事へ誘導するための画像です。

視覚的に「読んでみたい」と訴えるために、非常に大切な役割を担っています。

今回は、アイキャッチの役割や設定方法を詳しく解説!

どんなアイキャッチが読み手を引きつけるのかも説明しているので、参考にして下さい。

集客できるアイキャッチを設定し、サイトの読者を増やしましょう。

ワードプレスのアイキャッチ画像とは?


ワードプレスで記事を書くとき、「アイキャッチ画像」の設定ができます。

アイキャッチ画像とは、文字通りユーザーの目を引くための画像のことです。

サイトの記事一覧に表示したり、SNSで拡散するときに使われます。

弊社でも、サイトのトップページには各コラムの最新記事がアイキャッチ画像と一緒に表示するように設定しています。

スマートアレックのトップページ

アイキャッチの役割は、以下の3つです。

  • ユーザーに記事の内容を分かりやすく伝える
  • SNSでの集客力を強める
  • 内部リンクに誘導できる

役割について理解することで、どんな画像をアイキャッチに設定すべきかが見えてくるはずです。

順番に確認していきましょう。

役割1.ユーザーに記事の内容を分かりやすく伝える

ユーザーに記事の内容を分かりやすく伝えることができます。

もし、アイキャッチ画像がなければタイトルの文字だけがずらっと並んでいるだけになってしまい、ユーザーはどの記事を読むべきか分からなくなってしまうのです。

しかし、画像が一緒に並んでいるとどんな記事なのか視覚的に想像させることができます。

パソコンやスマホには情報が溢れかえっているため、ユーザーは文字で内容を確認するよりも先に視覚的に確認できる画像を先に見ています。

そのため一目見ただけで「面白そう!」「興味がありそうな内容だ!」と思わせなければなりません。

「こんな記事を書いていますよ」と画像で知らせることで、クリック率が上昇します。

逆に、記事と全く関係のない画像を設定するのは絶対NG!

なぜなら、画像を見て「面白そう」と判断したユーザーが記事を読み始めると「思っていた記事と違った」と読むことを辞めてしまうからです。

そのため、アイキャッチ画像は記事の内容を想像させるものを選びましょう。

役割2.SNSでの集客力を強める

FacebookやTwitter、Google+などのSNSで記事を拡散したとき、アイキャッチによって集客力を強めることができます。

というのも、SNSで記事をシェアするときにアイキャッチ画像が表示されるからです。

SNS上には、無数の記事が投稿されています。

タイトルと概要だけだと、あまりユーザーの興味を引くことはできません。

しかし、画像を設置しておくことで他の記事と差別化させることが可能です。

画像を設置しておくことで「読んでみようかな」と思わせられるのです。

より、拡散されるためにもアイキャッチ画像は欠かせない存在となっています。

役割3.内部リンクに誘導できる

アイキャッチを設定しておくことで、内部リンクに誘導できる可能性が高まります。

なぜなら、コンテンツ内で他の記事の紹介をする時にアイキャッチを表示できるからです。

アイキャッチ画像やタイトルを見たユーザーは「これも面白そう!」とクリックをしてくれるかもしれません。

おすすめ記事や閲覧ランキングを掲載する時にタイトルとアイキャッチ画像でユーザーを引きつけるのです。

内部リンクでサイト内の記事を複数読んでもらうことに成功すれば、そのユーザーはサイトのファンになってくれるでしょう。

つまり、定期的にサイトへ訪問してくれるようになるのです。

このように、アイキャッチ画像はユーザーの興味を他の記事に向ける役割を持っています。

簡単!ワードプレスのアイキャッチ画像の設定方法

ここまではワードプレスのアイキャッチ画像の役割について確認しました。

役割を理解すると、「ちゃんとアイキャッチ画像を設定しなきゃ!」と思ったはずです。

すぐに設定できるよう手順を解説しているので、順番に確認していきましょう。

まずは、アイキャッチ画像を設定したい記事の編集画面を開けます。

右下に「アイキャッチ画像を設定」というボタンがあるため、クリックしましょう。

アイキャッチ設定画面

メディアライブラリの画像がずらっと表示されるので、設定したい画像を選択しましょう。

そのまま「アイキャッチ画像を設定」をクリックすれば設定完了です。

もし、「アイキャッチ画像を設定」の表示がない場合は、ワードプレスの設定を変更する必要があります。

この場合、編集画面の右上にある「表示オプション」のタブを開きましょう。

表示オプション

「アイキャッチ画像」にチェックを入れ、もう一度「表示オプション」をクリックします。

そうするとアイキャッチ画像を設定する項目が出てくるので、確認しましょう。

アイキャッチ画像を設定するときに意識すべき5つのポイント


ここまでアイキャッチ画像の重要性や設定方法について解説しました。

しかし、「どんな画像を設定すれば良いの?」と悩む人もいるでしょう。

結論から言うと、アイキャッチ画像はユーザーの興味を引くものでなければなりません

というのも、クリック率を決める大きな要素だからです。

ここからは、アイキャッチ画像を設定する時に意識すべきポイントを確認していきましょう。

  • 目を引くアイキャッチ画像を作成する
  • 記事に関係のある画像を採用する
  • 著作権を守る
  • Alt設定をして画像の説明をする
  • 最適な画像サイズに設定する

5つのポイントを守れば、ルール範囲内で目の引くアイキャッチ画像に設定できます。

順番に確認していきましょう。

ポイント1.目を引くアイキャッチ画像を作成する

目を引くアイキャッチ画像を作成し、クリック率をアップさせましょう。

以下の3つのことを意識するだけで、かなり目立つ画像を作ることができます。

  • 明るさにメリハリがある
  • 色にメリハリがある
  • 文字が読みやすい

順番に見ていきましょう。

①明るさにメリハリがある

人に注目してもらうためには、明るさのメリハリが必要です。

たとえば、暗い背景に暗いアイコンや文字を置くと見づらくなってしまいます。

「紫の上に目立ちそうな黄色のアイコンを使おう」としても、同じくらいの明るさであればメリハリがつきません。

他の画像と並んだ時に注目を集められないため、暗い色と明るい色を組み合わせて目立たせたいアイコンや文字に注目を集めましょう

②色にメリハリがある

明るさだけでなく、色にもメリハリを付けましょう。

たとえば、青の背景に紫のアイコンや文字を置いても、あまり視覚的に理解ができません。

基本的に、色は対照的な捕色同士の色を使うとメリハリがつきます

赤と緑、黄色と紫、オレンジと水色、ピンクと黄緑などが捕色関係です。

人の目を引くためには、捕色を意識した配色をしましょう。

③文字が読みやすい

文字を入れるのであれば、読みやすいフォントを使いましょう。

おすすめは、以下のフォントです。

  • M+
  • Rounded M+ 1p
  • コーポレート・ロゴ
  • コーポレート・ロゴ丸
  • ロゴたいぷゴシック

はっきりした文字の形なので、どんな人にも読みやすいと感じてもらえます。

基本的には、たくさんのフォントを使わないようにしましょう。

ごちゃごちゃして、情報を一目で判断することができなくなるからです。

すっきりまとまった画像に見えるように、同じフォントで統一しましょう。

強調したい文字があるなら、太さや大きさ、色を変えて目立たせればOKです。

以上の3つのことを意識すれば、注目を集めるアイキャッチ画像を作ることができます。

ポイント2.記事に関係のある画像を採用する

必ず、記事に関係のある画像を採用しましょう。

たとえば、転職についてのコンテンツであれば、面接やスーツなど就職活動を連想させるような画像を採用するのです。

そうすることで、直感的に「転職や就職に関することかな?」と感じさせることができます。

元々転職や就職について困っているユーザーであれば「とりあえず読んでみたい」と思わせることができるでしょう。

逆に、転職についてのコンテンツなのに、アイキャッチに旅行を想像させるような写真を採用したとします。

このとき、ユーザーは直感的に「旅行についての情報が知れる!」と感じてしまいます。

そのため、万が一クリックしたとしても「旅行のことが知れると思ったのに、転職のことが書かれている」とすぐに離脱してしまうでしょう。

ユーザーに与える印象とコンテンツ内容が一致するように意識してアイキャッチ画像を作る必要があります。

ポイント3.著作権を守る

アイキャッチ画像に限らず、サイトで使用する画像やイラストは著作権を守りましょう。

うっかりよく読んでいるブログやメディアから画像を使ってしまう人がいますが、その画像の著作権はサイト運営者にあります。

「知らなかった」では済まされないため、必ずフリー素材を使いましょう。

フリー素材の中でも商用利用を許されていないこともあるため、使用する前に利用規約を確認すべきです。

フリー素材を使う以上、著作権トラブルに巻き込まれる可能性は0と言い切ることはできません。

念のため、ダウンロードサイトのURL・日付・購入金額をメモしておきましょう。

ポイント4.Alt設定をして画像の説明をする

画像にAlt設定をしておくことで、SEO対策に繋がります。

Alt設定とは、画像を文字で説明することです。

Alt設定をしておけば、画像検索にヒットする可能性があります。

というのも、Alt設定で「この画像はどんな画像なのか」を説明しておけば、クローラーが巡回して画像を認識してくれるからです。

クローラーとはサイト上のあらゆるデータをデータベース化し、検索結果の順位を決めるプログラムのことを指します。

たとえば、「転職活動を成功させるコツ」など、対策キーワードをAlt設定にしておけば、画像検索でヒットするかもしれません。

文字しか出てこない通常の検索よりも、視覚的に訴えられるアイキャッチが出てくるとクリックしてもらえる可能性は高いです。

必ずAlt設定をするには、「メディアを追加」から設定したい画像を選び、右に出てくる「代替えテキスト」でAlt設定ができます。

ワードプレスのalt設定の方法

SEO対策に繋がるため、必ずAlt設定をしておきましょう。

ポイント5.最適な画像サイズに設定する

アイキャッチ画像は、横1200・縦630ピクセルのサイズがおすすめです。

なぜなら、縦と横の比率を1:1.9にしておくと自動で切り取られないからです。

せっかく目を引くアイキャッチを作っても勝手に文字やアイコンが切り取られてしまうと、ユーザーからは「見にくい画像」になってしまいます。

また、小さいサイズに設定してしまうと、画質が荒く表示されてしまう可能性もあります。

きれいに表示させるためにも、横1200・縦630ピクセルのサイズを守りましょう。

さらに、SNSにサイトのリンクを投稿するとサムネイルとしてアイキャッチが表示されます。

SNSや端末によっては真ん中部分が正方形に切り取られてしまう恐れがあります。

文字やアイコンはできるだけ真ん中に配置するよう注意しましょう。

まとめ

ワードプレスのアイキャッチは、読み手の目を引いて記事へ誘導する役割を持っています。

「読んでみたい!」と思わせるために、工夫をしてアイキャッチを作るべきです。

一目でどんなコンテンツかが想像できるようなアイキャッチを利用して、読者を増やしましょう。