• HOME
  • デザイン
  • アイキャッチ画像を設定しよう。意味や作り方、ツールを解説

アイキャッチ画像を設定しよう。意味や作り方、ツールを解説

インターネットが私たちにとって身近な存在になるにつれ注目されるポイントも増えてきました。その一つが『アイキャッチ画像』です。アイキャッチ画像とは、どのような画像なのでしょうか?意味や作り方について紹介していきます。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/デザイン組織を経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

アイキャッチ画像の基礎知識

スマートフォンの普及により、私たちにとってインターネットが日常的なツールの一つとなりました。そんな中、Webを使ったいろいろな媒体で注目されているのが『アイキャッチ画像』です。

アイキャッチ画像とは、どのような画像を指しているのでしょうか?まずは、その基礎知識についてまとめていきます。

アイキャッチ画像とは

アイキャッチ画像とは、Web上に投稿された『記事のタイトルや、内容にあった画像』のことを指しています。近年、インターネット上で情報を発信しているサイトが増加していて、それらの記事を象徴的に目立たせているのがアイキャッチ画像です。

一つのサイトで記事を読んでいるとき、左右の端に別の記事に関する画像が並んでいるのを見たことがある人も多いでしょう。

同じような役割を果たす画像に『サムネイル画像』というものもあります。役割や特徴は同じですが、アイキャッチ画像が縮小されたものをサムネイル画像と呼んでいます。

アイキャッチは和製英語

日本では、アイキャッチ画像という名前で知られていますが、アイキャッチという単語は『eye catch』と英語で表せるものの、表現としては成り立たない『和製英語』です。

そのため、アイキャッチ画像というワードを英語で表現したい際は、その特徴を踏まえて『an eye-catching image』や『featured image(注目の写真)』と表現するとよいでしょう。

『attention』という単語を活用すると、『The image to get the reader`s attention(読者の注意を引きつける画像)』というように、さらに丁寧に表すことも可能です。

アイキャッチ画像の重要性

サイト上で閲覧者の注目を集めるために使われているアイキャッチ画像ですが、具体的にどのような効果を発揮するのでしょうか?

アイキャッチ画像にはいくつかの役割があり、それぞれが、インターネットの特性を踏まえた上での効果を発揮します。アイキャッチ画像を付ける重要性について探っていきましょう。

クリック率が上がる

アイキャッチ画像が重要視される理由の一つに『記事へのクリック率が上がる』という特徴が挙げられます。その要因は、画像をつけることによって記事へ飛べるページが目立つからだといえます。

ネット上には、莫大な情報が集まっています。そんな中から人々の注目を集めるためには、目で見て分かりやすい魅力的なパッケージが必要です。

一目見ただけでは分かりづらい内容に関して、記事をイメージしやすくし、閲覧者を誘導するための役割をアイキャッチ画像が担っています。

滞在時間が上がりやすい

一つのサイト内でいろいろな記事を閲覧してもらえるということは、そのぶん『サイトへの滞在時間が長くなる』といえるでしょう。

サイト上で一つの記事を読んでもらえたとしても、ほかの記事に飛んでもらえなければ、1度読まれただけでほかのサイトへ移ってしまいます。

アイキャッチ画像を設定していれば、一つの記事を読んでいる最中に、サイト内にある別の記事を読んでもらえる可能性が上がります。サイトの滞在時間が長くなれば、それだけ趣旨や目的が伝わりやすくなるため、リピーターがつく可能性もあります。

SNSでシェアされやすい

近年、ビジネスにおいても重要な役割を果たしているのがSNSです。TwitterやFacebookなどが挙げられますが、アイキャッチ画像をつけておくと、このようなSNSで拡散されやすくなるという魅力もあります。

SNSの集客力は非常に高く、質の高い記事だと一気に拡散されて多くの人に見てもらえる可能性もあります。文章やタイトルだけだと、内容が分かりづらくアクセスにつながりにくいですが、アイキャッチ画像があると手軽にクリックしてもらえる確率が上がるのです。

SNSごとに適切なサイズ

アイキャッチ画像に関する基本知識や重要性についてまとめてきましたが、SNS上で画像がシェアされる際、適切なサイズ感を知っておくと便利です。

SNSには、OGPというアイキャッチ画像を正しく表示するための設定があります。TwitterやFacebookなど、拡散力の強いSNSごとにサイズの詳細をチェックしていきましょう。

Facebookは 1.91:1

『Facebook』の場合、アイキャッチ画像の適正サイズは『1.91:1』となる『横1200px×縦630px』のサイズが推奨されています。

この数値はパソコンサイズなので、スマートフォンで表示する際は『横470px×縦246px』に縮小された状態で表示されるようになっています。

画像のサイズが、最低でも『横600px×縦315px』は必要で、それ以下のサイズだと画像自体が小さく表示されてしまうので注意が必要です。

Twitterは2:1

『Twitter』の場合、パソコンで推奨されているサイズは『2:1』となる『横1024px×縦512px』です。スマートフォンで採用されるサイズ形状は、Facebookとあまり変わらない『横450px×縦253px』となっています。

Facebookと異なるのは、Twitterの場合だと、小さめの正方形か大きめの長方形の2タイプから画像の形状を選べる点です。また、Facebookと同様に縦の比率が高くなると、上下の部分がカットされることがあります。

はてなブックマークは 1.43:1

SNSとは少し異なりますが、媒体に『はてなブックマーク』というものがあります。これは、オンライン上にブックマークを保存・公開できるソーシャルブックマークです。

はてなブックマークで記事が取り上げられたときは、パソコン版の比率が『1.43:1』の『横400px×縦280px』で表示されます。これに対し、スマートフォンの比率は『縦198px×横139px』です。

はてなブックマークでTwitterやFacebookと大きく異なる点は、画像が大きすぎたときのカットのされ方です。Twitterなどが上下からカットされたのに対し、はてなブックマークでは『右側から』カットされてしまいます。

つまり、サイズが大きくなってしまうとアンバランスな見た目に仕上がってしまうため、適切なサイズを用意する必要があります。

目を引く画像の作り方

閲覧者を増やすために活用するアイキャッチ画像ですが、目を引く画像を作るためには、知っておきたいポイントがいくつかあります。

より集客効果のある画像を作成するには、どのようなポイントを押さえればよいのでしょうか?コツをおさえて、効果を発揮しやすいアイキャッチ画像を作りましょう。

画像にタイトルや見出しを入れる

アイキャッチ画像を作る上で必ず入れておきたい要素が『タイトルや見出し』です。ユーザーが画像を見たときに、記事の内容をイメージしやすくするためにも必須のポイントといえるでしょう。

特に、スマートフォンユーザーを考慮したときには、これらの要素の重要性が増します。

ユーザーの目に止まるポイントは『タイトル・見出し・画像・強調された文字』だとされているため、これらのポイントを押さえることで、本文まで読んでもらえるよう考慮することが大切です。

シンプルできれいな画像を使う

アイキャッチ画像の役割からもわかるように、重要なのは『見ただけで気になる画像』を作成することです。そのため『シンプルできれいな画像を使う』というのも大切なポイントとなります。

例えば、一見しただけでは何が写っているのかわかりづらい画像や、ごちゃごちゃしているものは適していないといえるでしょう。

シンプルで内容をイメージしやすく、かつ写真が美しいだけで、読む前からコンテンツに対する印象がよくなります。

画像の編集や加工の技術も必要になるため、できるだけ自分にあったソフトを活用し、一目見ただけで惹きつけられる画像を作ることに気を使いましょう。

目的を考える

アイキャッチ画像を付け加える『目的を考える』というのも、作成時の手法の一つです。

紹介してきたようなポイントも、アイキャッチ画像の役割を踏まえたものでしたが、記事を投稿するサイトによっても画像に求められるものが変わります。

企業の運営している情報サイトの場合だと、ある程度自由度に限界があるケースもあります。閲覧者に与えたい企業イメージにそぐわないように画像を選択することが求められるでしょう。

個人のブログなどでアイキャッチ画像を使いたい場合は、自由度の高い選択ができます。あくまで個人のブログであるため、自分の作り出したいイメージに合わせてアイキャッチ画像にもこだわってみると効果が得られます。

WordPressでアイキャッチ画像を設定する方法

インターネット上でのビジネスが盛んになるにつれ、ホームページの重要性が高まっています。近年、多くのユーザーから使われているホームページ作成ツールが『WordPress』です。

WordPressを使うと、専門的なプログラミング用語を知らなくてもサイトが作れるため、個人だけでなく、企業からも利用されています。

WordPressでもアイキャッチ画像を設定できるのですが、どのようにすればよいのでしょうか?その方法について見ていきましょう。

投稿画面から設定する

WordPressにおけるアイキャッチ画像の設定は、『投稿画面』から行います。

WordPress上の投稿画面を開くと、右上に『表示オプション』というボタンがあります。そこをクリックすると複数のオプションリストが表示されます。その中からアイキャッチ画像を選択すると、投稿画面の右側にアイキャッチ画像のエリアが表示されます。

このエリア内にある『アイキャッチ画像を設定』というボタンをクリックすると、画像のアップロード画面が表れます。ファイルを選択して画像をアップロードすれば、サイト上にも設定が反映されます。

Featured Image Generatorで簡単に作る

アイキャッチ画像の作成は非常に重要な要素ですが、そのぶん時間がかかってします。ですが、『Featured Image Generator』というツールを使うと、WordPress上で簡単にアイキャッチ画像を作ることができます。

Featured Image Generatorを端末にインストールすると、Unsplashというフリー写真素材サイトから画像を検索ができるようになります。利用するためには、無料のAPIキーを所得する必要があります。

無料で利用できるにも関わらず、Unsplashには約55万枚の画像が用意されています。豊富な画像から記事に適したものを選べるため、インストールしておくと便利なプラグインです。

Featured Image Generator (アイキャッチ画像ジェネレーター) -WordPress プラグイン| WordPress.org

Auto Post Thumbnailで記事内の画像を使う

記事内に添付した画像をそのまま自動でアイキャッチ画像として設定してくれるのが『Auto Post Thumbnail』です。このツールをインストールすると、記事の先頭で使用されている画像が自動的にアイキャッチ画像に登録されるようになります。

そのほかにも、複数の記事のアイキャッチ画像を一括で設定できる機能もあります。画像が指定されていない記事も表示されるため、貼り忘れを防止したいときにとても有効なツールです。

Auto Post Thumbnail-WordPress plugin|WordPress.org

アイキャッチ画像作成に使えるツール

集客率に大きく関係してくるアイキャッチ画像は、できればこだわって作成したいものです。そんなときに役立つのが『画像作成ツール』です。

編集や加工のみならず、テキストの設定も同時に行えるツールもあるため、一つあると画像で表現できる内容の幅が広がります。有名なツールから使用感に定評があるものなど、いくつか紹介していきます。

PhotoshopやIllustratorといった有料ツール

写真の編集や加工ができるツールとして有名なものに『Photoshop』や『Illustrator』があります。

Photoshopでは、写真をおしゃれに加工したり、手書きのイラストを画像に挿入したりできます。画像編集を仕事にしているプロも活用しているツールなので、表現の幅は広いと言えます。

Photoshopに比べるとロゴの作成やレイアウトに長けているため、アイキャッチ画像の作成には向いているといえるでしょう。

これらのソフトは、どれもアイキャッチ画像作成以外で活躍できる機能を備えています。そのため有料になってしまうので、自分のニーズに合わせて選びましょう。

Adobe Photoshopの購入 | 最高の写真、画像、デザイン編集ソフト

Adobe Illustratorの購入 | ベクターグラフィックデザインソフトウェア

Web上で画像編集ができるCanva

Web上で画像編集を行えるのが『Canva』です。オーストラリア発で近年、日本語にも対応し始めた新しい画像編集ツールです。

Canvaでは、画像の加工に加えて、文字入れやイラストの作成をまとめて行うことができます。初心者でも簡単に扱えることに加え、無料で利用できるというのも魅力的です。

グラフィックデザインを無料で簡単作成

感覚的に使える編集ソフトPhotoScape

感覚的な操作感に定評がある編集ソフトが『PhotoScape』です。PhotoScapeは、パソコンにインストールして利用するタイプで、Canvaと同様に無料で使えます。

テキストを画像に入力する作業も簡単で、文字のサイズや色、アウトラインや位置などを自由にカスタマイズできます。フレームをつけたり、簡単な編集をしたりすることもできるため、アイキャッチ画像を簡単に作成したい人にはぴったりのツールです。

Photoscape X for Mac (Mac) - ダウンロード

おすすめのフリー素材サイト

アイキャッチ画像の元となる画像を選ぶとき、どんな画像を選べばよいかわからなくなることも多いでしょう。そんなときに役立つのがフリー素材サイトです。

それぞれのサイトごとに集められている画像に特徴があるので、自分の表現したい内容に合わせてサイトを使い分けましょう。

汎用性の高い画像が多い写真AC

汎用性が高い画像が集めっているのが『写真AC』です。このサイトでは、無料の会員登録を行うだけで、サイト内のすべての写真が使えるようになります。

商用利用も可能で、リンクやクレジットの表記も不要なため、多くのユーザーがこのサイトから写真を選んでいます。

写真素材なら「写真AC」無料(フリー)ダウンロードOK

高画質でおしゃれな画像Pixabay

『Pixabay』には、高画質でおしゃれな画像が集まっています。写真のクォリティーが高いため、おしゃれなイメージのアイキャッチ画像を作成したいときに便利です。著作権フリーかつ無料で使用できるのもうれしいポイントです。

写真のほかにもイラストやクリップアートなどがあるため、豊富なジャンルから気に入った画像が使えます。

魅力的なフリー画像 - Pixabay

登録なしで使えるぱくたそ

登録なしで写真を使用できるのが『ぱたくそ』です。写真や人物、風景やオブジェなど、画像のジャンルは幅広く、どれも高画質なことで人気を集めています。

しかし、人気であるがゆえにほかのユーザーと写真が被ってしまうケースも稀にあるのも特徴です。

無料の写真素材はフリー素材のぱくたそ

\本業では経験できない新しい環境/開発スタイルを経験するなら「0ffers」!/

Offersの詳細はこちら

まとめ

アイキャッチ画像は、Webを使ったビジネスにおいて非常に重要な要素となっています。多くのユーザーからアクセスを集めることが重要になるインターネットにおいて、アイキャッチ画像を有効活用することは必須です。

紹介してきたようなポイントを押さえつつ、自分のイメージにぴったりの画像を作成して多くの人から見てもらえるようにしましょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/デザイン組織を経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

【Unity&バックエンド採用】Offersコンシェルジュを活用し、VPoE業務に集中できた恩恵とは

幼児や小学生の家庭学習の必要性が求められている今、企業や団体がICTを活用した学習コンテンツの開発に注目している。ファンタムスティックは子ども用の学習アプリやデジタル教育コンテンツの開発に強みを...

転職前提の複業オファーで、2ヶ月後に正社員へ!未来のCTOを採用した注目スタートアップの採用術

スニーカー市場は熱狂的なファンも多く、一次流通・二次流通ともに毎年拡大を続けている。そのような市場の中、スニダンことスニーカーダンク(SNKRDUNK)は市場の拡大を追い風に成長し続けてきたが、...

『実践TypeScript』の著者・吉井健文が考えるTypeScriptの魅力と可能性

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことをマニ...

ヤフーが実践するギグワーク活用がこれからの新しい採用手法に!?リモート環境で求められる人材とはーこれからの「強い組織の作り方」CEOセッションー

新型コロナウイルスで、働き方改革やデジタル・トランスフォーメーションの流れが急激に加速し、採用・育成・マネジメントの状況は大きく変化しています。 株式会社overflow、株式会社zenkig...

デザイン

お金

採用・組織

グルメ