初心者でも簡単!サイトの見栄えがよくなるアイキャッチ画像の作成!

WordPress

こんにちは、富男です。

ブログのデザインというか見た目がそのままなのもアレなので、
テーマをインストールしてみました。

正直、どのテーマが良いとかも全然わからなかったので、
ググってみておすすめされていた「Cocoon」というテーマを入れてみました。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

様々な機能を持つCocoonですが、今回はまず、アイキャッチ画像を設定してみました。
Cocoonでは、プラグインなども使わずにアイキャッチ画像を簡単に設定することができます。

アイキャッチ画像とは?

アイキャッチ画像は、その名の通り ユーザーの目(アイ)を引きつける(キャッチ)するための画像で、記事のタイトルや内容に合ったアイキャッチ画像をつけることで、 ユーザーの興味を引き、記事が読まれやすくなる効果があるとのこと。

ブログの記事冒頭や記事一覧ページに配置されている、
1番目を引く画像だと思うので、積極的に設定していきたいですね。

アイキャッチ画像とサムネイル画像の違いは?

アイキャッチ画像とサムネイル画像の違いはなんでしょうか。
アイキャッチ画像は先ほどご説明した通り、ユーザの目を引くような画像を記事の横に配置し、文字だけの記事に比べ、どんな記事か内容を分かりやすくする効果があります。
以下のような画面がアイキャッチ画像です。

サムネイル画像は、直訳すると「親指(thumb)の爪(nail)」という意味ですが、
サイズが縮小された画像のことをいいます。基本的にはアイキャッチ画像を縮小して、サイドバーの新着記事などに利用されているのがサムネイル画像です。

サムネイル画像は基本的に小さい画像なので、記事の補足程度に考えてください。

それでは実際にアイキャッチ画像を作っていきます。

事前準備①「Canva」のアカウント登録

アイキャッチ画像の作り方ですが、画像編集ツールがあれば基本的になんでも作成できます。
PhotoshopだったりAdobe Illustrator、GIMPあたりのツールであれば、アイキャッチ画像はすぐ作れると思いますが、ツールになれるまで大変です。
今回は初心者でも簡単に使える画像編集ツール「Canva」を使って画面を作ってみます。

Canva自体は、アカウント登録が必要ですが、無料で使うことができます。
以下のURLよりアカウント登録をしましょう。

Professional designs on the go - Canva

Canvaのアカウント登録が出来たら、次はアイキャッチ画像に設定する画像を探します。

事前準備② お気に入りの画像を見つけよう!

画像はなんでも使ってよい訳ではないので、
著作権を侵害しない画像を使用しましょう。

ちなみに私は以下のフリー画像をお借りしています。
無料で画像をダウンロードでき、センスのよい画像がたくさんあるのでおすすめです!

Pixabay

Stunning Free Images · Pixabay
Discover the best source for free images and videos. Free for commercial use ✓ No attribution required ✓

Gratisography

Gratisography - Free High-Resolution Photos
Hundreds of free high-resolution pictures you can use on your personal and commercial projects, free of copyright restrictions. New photos added every week!

Kaboompics

Free stock photos - Kaboompics
Find the best free stock images. Download all images and use them in your projects.

FreeJPG

▷ Free Images - FreeJPG [2019]
Free stock photos for commercial use. No attribution required. high quality images ✅

Canvaでアイキャッチ画像を作ってみよう!

事前準備が終わったら実際にアイキャッチ画像を作っていきましょう!

ブラウザよりCanvaを開いてください。
まず、作成する画像のサイズを決めます。今回は「Blogバナー」で作成したいと思います。

Canvaに画像をアップロード

次に、見つけた画像をCanvaにアップロードしていきます。
左側にある「アップロード」から画像をアップロードしてください。
「素材」にも多くの画像があるので、自分でアップロードした画像ではなく、そちらから画像を選択してもよいですね。

Canvaで画像に文字を挿入

画像のアップロードができたら、今度はその画像に文字をいれていきます。
「テキスト」を選択して、テキストボックス追加してください。
記事のタイトルともいえる部分なので、一目見てわかるような文言を入れたいですね。

最後に画像とテキストのバランスを考えて、微調整します。
今回、文字がはっきり見えるように、後ろに白の素材を挿入してみました。

作成中画面

画像が完成したら、さっそくWordPressから記事にアイキャッチ画像を設定していきましょう!

アイキャッチ画像をWordPressに設定してみよう!

WordPressテーマのCocoonを使用していると、
以下画像の通り記事投稿のページから簡単にアイキャッチ画像を設定できます。

さすが高機能なCocoonですね。簡単にアイキャッチ画像が設定できました。
記事一覧と、この記事の上部にも表示されていますね。

まとめ

サイトのアイキャッチ画像はどんな記事か一目でわかるようになるので、読者のクリック率を上げるひとつの要因になっています。
どんな記事か一目でわかるような魅力的なアイキャッチ画像をデザインしてみましょう。
それではまた!

トップへ戻る