WordPress アイキャッチ画像とは アイキャッチの設定方法

WordPress

WordPressアイキャッチ画像とは・アイキャッチの設定方法

本記事では、WordPressのアイキャッチ画像について説明していきます。

読者の方に記事を読んでもらうための大事な要素の一つで、世間一般で言う「サムネイル画像」の役割を果たします(※)。

(※)WordPressでは、世間一般でいう「サムネイル画像」とは異なる意味で、150px*150pxの小さい画像と「サムネイル」を言う用語で用いています。WordPressにおいてはアイキャッチ画像と、150px*150pxのサムネイルは別物ですので注意しましょう。

ご自身でブログ運営などをしている方は是非お役立てください。

この記事でわかること

  • WordPressのアイキャッチ画像について
  • WordPressのアイキャッチ画像の設定方法
  • アイキャッチ画像を作成する際に利用したいツール・フリー素材サイト

WordPressのアイキャッチ画像とは

アイキャッチ画像とは、Eye(読者の目)をCatch(惹きつける)させるための画像のことで、世間一般でいう「サムネイル画像」のことです。

WordPressにおいては、ブログ記事一覧のサムネイルとしてアイキャッチ画像が使われたり、TwitterやFacebookなどのSNSでシェアしたときのサムネイル画像として使われます。

(※)WordPressでは、世間一般でいう「サムネイル画像」とは異なる意味で、150px150pxの小さい画像と「サムネイル」を言う用語で用いています。
WordPressにおいてはアイキャッチ画像と、画像サイズ150px150pxのサムネイルは別物ですので、混同しないように注意しましょう

WordPressサムネイルの意味

 

下記の画像は、当サイト(WEBST8のブログ)トップページの画面キャプチャになります。

トップページには様々な記事がありますが、各々ユニークなアイキャッチ画像が設定されているため、サイトに訪れた読者の方が今1番欲しい情報がパッと見てわかるようになっています。

https://webst8.com/blog/

アイキャッチを設定することによって、記事をクリックして読まなくても「大体はこんな内容が書かれているんだな」と把握できるため、見た目がいいだけではなく、読者の方にも親切な記事になります。

WordPressのアイキャッチ画像の設定方法

wordpressのアイキャッチ画像の設定方法

それでは早速、WordPressでアイキャッチを設定する方法を紹介していきます。

アイキャッチ画像の設定方法

投稿または固定ページの編集画面を開きます。右メニューからアイキャッチ画像という項目をクリックします。

アイキャッチ画像を設定

旧エディターの場合

旧エディタークラシックエディターを利用の場合は下記の編集画面からアイキャチ画像を設定できます。

アイキャッチ画像を設定

アイキャッチ画像として設定したい任意の画像を選択して「アイキャッチ画像を設定」ボタンをクリックします。

アイキャッチ画像を選択

ブロックエディターの場合は、上記手順後に、記事を公開することでアイキャッチ画像の表示が確認できます。

設定項目が表示されない場合

アイキャッチ画像が表示されない場合は、表示項目でアイキャッチ画像が非表示になっている場合があります。編集画面右上のオプションをクリックします。

右メニューの設定をクリックします。

パネル>アイキャッチ画像のチェックが外れていたらチェックを入れておきましょう。

アイキャッチ画像が表示されない場合の多くは、上記の「アイキャッチ画像」が選択されていない時に起こるので、もし表示されなかった場合は今一度チェックしてみましょう。

アイキャッチ画像はSNSでシェアした時のOGP画像に設定される

多くのWordPress環境では、設定したアイキャッチ画像はLINE・Twitter・Facebook等のSNSでシェアした時のOGP画像として設定されます(テーマや設定によっては異なる場合もあります)。

(関連記事)【OGPとは】OGPの基本と使い方や設定方法を解説

「各SNSでシェアされた時のOGP画像表示の確認がしたい」とお考えの方は、簡単にOGP画像表示の確認できる無料サービスラッコツールズを使ってみましょう。

ラッコツールズ(OGP確認)
https://rakko.tools/tools/9/

使い方は簡単で、OGP画像表示の確認をしたいサイトのURLを入力するだけで、以下のようにFacebook・Twitter・はてなブックマーク・LINEのOGP画像表示を確認することができます。

SNS OGPシュミレーション
https://rakko.tools/tools/9/

 

WordPressアイキャッチサイズは何pxで作れば良いか?

WordPressアイキャッチサイズは何pxで作れば良いか?

 アイキャッチ画像のサイズですが、割とテーマやサイトによってばらつきがあり「必ずこのサイズでないといけない」といったものはありません。

ネット上を調べてみると、基本的にSNSにシェアしたときに端が切れにくいと言う理由から、無難なサイズは「1200px * 縦630px (1.91 : 1)」という意見が多いです。

【2019年5月時点での推奨画像】
一番目立たせたい物が真ん中に配置されている
1200*630(比率 1:0.525)
PNG画像
推奨理由には各SNSでの「画像の表示比率」・SNS側で行われる「画像の圧縮処理」が関係しています。 【画像の表示比率】
Facebook:1:0.522
Twitter(large):PC版 1:0.502、スマホ版 1:0.524
はてなブックマーク:PC版 1:0.68、スマホ版 1:0.75

OGP確認 | ラッコツール

ですので、よくわからないという方はとりあえず「1200px * 630px」でアイキャッチ画像を作っておけば無難でしょう。

ただし、割とテーマやサイトによって、サイズや比率にはバラつきがあります。アスペクト比16:9のサイズ(横幅1200pxの場合は縦675px)がおすすめされているテーマもあります。

JINではアップロードしてもらった画像を、16:9の比率になるよう自動トリミングするようになっています。そのため横幅が760px以上の画像をいれてもらえると綺麗に入ります(縦は自動で切り取られます。)

アイキャッチ画像はどのくらいの大きさが最適? | JIN MANUAL

ちなみに当サイトでは、横幅1200px * 縦742px (黄金比 1 : 1.618)でアイキャッチ画像サイズを作成しています。

高解像度端末も考慮して画像の綺麗さと容量のバランスを考慮すれば、横幅1200pxはくらいで、テキストがある場合はある程度画像の中央よりに配置すると、比較的どのSNS・表示方式でも綺麗に写ることが多いのではないかと思います。

アスペクト比の例
アスペクト比計算ツール

アイキャッチ画像の作り方・おすすめツールCanva

画像のサイズ加工・テキストなどの装飾におすすめなのがデザインツール「Canva(キャンバ)」です。

デザイン作成ツール Canva

Canvaは、どこにいても、どんなデザインでも作成できるツールです。ドラッグ&ドロップで作成できるツールと、カスタマイズ可能なテンプレートで、世界 179 ヵ国で 10 million (1000万)のユーザーが 400 million (4億)を超えるデザインを作ってきました。 現在は 100 を超える言語で提供しており、パソコンやモバイル端末でもご利用いただけます。インターネットさえ繋がれば、誰もがCanvaをご利用いただけます。 Canva公式サイトより引用

アイキャッチ素材はご自身の持つ写真画像のほかに、後述のフリー素材を利用することもできます。

素材サイトの画像をそのまま利用サイズだけ加工してアイキャッチ画像にすることもできますが、当サイト(WEBST8のブログ)のように、画像素材+テキストを設定したりすることで、よりユニーク・わかりやすいアイキャッチ画像を作成することができます。

Canvaは、Webからできるデザイン作成ツールです。PCやスマホから画像をアップロードして、複数の画像を組み合わせたり、画像をトリミングしたり、文字や図形を入れて画像を加工することができます。

Canva
https://www.canva.com/ja_jp/

Canvaは基本的には無料で使えますが、Canva Proという月額1,500円の有料プランもあり、無料プランと比較して利用できる素材やフォントが増えたり、データ容量の拡張などが可能になります。

デザインの知識がない方でも、Canvaで用意されている素材やテンプレートを利用する事で、簡単におしゃれな画像を作成することができ、アイキャッチ画像だけでなく各SNSで投稿する用の画像、バナーやチラシの画像作成まで幅広く使う事ができます。

また、Canvaはツールをインストールする必要がなく、ブラウザ上で利用できるためPCだけでなくスマートフォンからも操作することもできます。
 

■【Canva】Web上のデザイン作成ツールCanvaの使い方・その1(動画解説版)
 
イラストレータやフォトショップなど専門向きソフトがなくても、素人でも簡単に始められるサービスなのでありがたいですね。

Canvaの詳しい使い方については「デザイン作成ツール Canva(キャンバ)の使い方」からご確認ください。

フリーで使える素材サイト

ここからは、WordPressのアイキャッチ画像で使えるフリー素材サイトをいくつかご紹介します。

記載のフリー素材サイトの利用規約・ライセンス情報は2021年12月時点のものです。利用する際は改めて、フリー素材サイトの利用規約・ライセンス情報をしっかり確認するようにしましょう。

PIXABAY(ピクサベイ)

画像素材サイト pixabay

PIXABAYは、会員登録不要で利用できる海外の画像素材サイトです。美しくて綺麗な写真が多い一方、日本人モデルや日本系の素材を探すのには不向きです。

ビジュアル重視の美しい素材が多いので壮大・綺麗・神秘的・グローバルなコンテンツに向いています。反面、日本人の日常・ビジネスシーンなどの画像はあまりないので不向きです。

Pixabayとは? Pixabayは著作権のない画像や動画を共有する、活気のあるクリエイティブコミュニティです。すべてのコンテンツはクリエイティブコモンズCC0の下で公開されています。これにより、たとえ商業目的であっても、許可を求めたりアーティストに信用を与えることなく安全に使用できます。

会員登録不要
クレジット表記不要
商用利用可能

写真AC(Photo AC)

画像素材サイト photo-ac

写真ACは、日本の巨大写真素材サイトです。利用には無料の会員登録が必要ですが、人物・風景・パターン画像などなんでも揃っているオススメの日本の画像素材サイトです。

日本人モデルや日本の風景をはじめ色々な素材がある 日本のビジネスシーンでも役立つ素材が多いのでホームページやブログの素材として重宝できます。

なお、無料版は制限がいくつかありますので、本格的に使う方は有料のプレミアムプランもおすすめです
 

写真ACは無料で写真素材をダウンロードOK!、さらに商用利用OK!* 写真ACの写真素材は、フリーダウンロードできます。メールアドレスとパスワードを写真ACへ登録するだけで、すぐに写真素材のダウンロードができます。 人物、ビジネス、生き物、花・植物、食べ物・飲み物など、様々な写真素材が無料でダウンロード可能です。商用利用もOKなので、チラシやポスター、WEBサイトなどの広告、ポストカードや年賀状などにもご利用いただけます。クレジット表記や許可も必要ありません。

会員登録必要
クレジット表記不要
商用利用可能

unDrow

unDrow
https://undraw.co/illustrations

IT・Webサービス系の記事を作る際のアイキャッチ画像に利用できそうなイメージが多く、お好きなカラーコードで画像を選択でき、svg, png形式に対応しているおしゃれなフリー素材サービスです。

会員登録不要
クレジット表記不要
商用利用可能

manypixels

manypixels
https://www.manypixels.co/gallery

様々なジャンルで利用できそうなおしゃれなデザインが特徴で、5つのタイプでジャンルが分かれている為、その節々にあったピッタリの画像が見つかるでしょう。

会員登録不要
クレジット表記不要
商用利用可能

storyset

storyset
https://storyset.com/

特徴的なデザインが目に留まるおしゃれな素材サイトですが、利用する際にはstorysetのクレジット表記が必要になりますので、利用する際はしっかりライセンス情報に目を通すようにしましょう。

会員登録不要
クレジット表記必要
商用利用可能

このほかにも、有料・無料含めて色々な素材サイトがあります。詳しくは【おすすめ素材サイト総まとめ】ホームページで使えるフリー・有料素材25選をご参照ください。

 

まとめ

この記事では、アイキャッチ画像とは何か?をはじめ、WordPressのアイキャッチ画像の設定方法やおすすめのサイズ、フリー素材サイト、画像作成ツールまで紹介しました。

画像作成ツールは、初心者の方におすすめのCanvaを紹介しました。

さらに本格的なデザインを必要とするにはPhotoshopやFigmaなどの本格的なデザインツールなどを使ってみても良いでしょう。

なおこのほかにもWordPressの基本的な使い方全般を「【2020年度版 WordPress使い方総まとめ】ワードプレスの使い方を徹底解説」にまとめました。WordPressの使い方をしっかり覚えたい方はあわせてご参考ください。

今回は以上になります。最後までご覧いただきありがとうございました。
 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress