はじめに
ブログやオウンドメディアの記事に華やかさを彩る効果や、記事の内容をぱっと見で理解してもらったり、とプラス要素に働くことの多いアイキャッチ画像
今回は無料で綺麗なアイキャッチ画像を作成できるツール「Canva」を使ったアイキャッチ画像の作り方をステップ式で解説していきます。
この記事の通りに進めていただければ、サクッと下記のようなアイキャッチ画像を作れるようになります。慣れれば、作成にかかる時間は3〜5分
![wordpressアイキャッチ画像の作り方](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto00.png)
アイキャッチ画像とは?に関する基本的な情報は下記の記事にまとめてありますので参考にしてください。
この記事を執筆・監修する人
浅賀 理生(あさか まさお)
株式会社インスパイアデザイン代表/ディレクター
Web制作に携わって15年以上
主にWordPressを用いて、お客様のWebサイト制作のプロジェクトを進めている立場から、記事を執筆していきます。
Canvaに登録する
まずはCanvaのサイトにアクセスし、登録をしてください。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto01-1024x491.png)
アイキャッチ画像を作る12のステップ
登録後、ログインすると下記のような画面が表示されますので、右上の「デザインを作成」ボタンを押してください。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto02-1024x420.png)
Canvaでは様々なクリエイティブを作成することができ、あらかじめテンプレートなども豊富にありますが、逆に迷ってしまい時間がかかってしまうことも多いため、今回はテンプレートなどを使用せずにアイキャッチ画像を作成していきます。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto03-2.png)
私の場合、アイキャッチに使用するサイズは、少し大きめの幅900px、高さ600px(画像比率3:2)に設定しています。あまり大きな画像ですと、その分サイトが重くなるため、気になる方はテーマのコンテンツ幅に合わせた画像サイズを指定してください。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto04.png)
画面が編集画面に切り替わりますので、アップロードよりアイキャッチ画像となる画像をアップロードしてください。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto05-2-1024x568.png)
今回の課題としている画像のデータを下記よりダウンロードできるようにしましたので、テスト的にお使いください。
今回作成しようとしているアイキャッチ画像画像だけよりも記事のタイトルなどを表示させたほうがユーザービリティが高くなるため、テキストを追加していきます。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto07-2-1024x519.png)
テキストを任意のものに変更しましょう。今回は「WordPress アイキャッチ画像の作り方」にしています。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto08-1024x685.png)
文字を読みやすくするため、文字の背景に白の四角を追加する 背景ように設置した四角のサイズを大きくし(今回は幅800pxにしました)、文字のサイズも四角に収まるように調整(今回はサイズを42に調整)
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto12-1024x684.png)
アイキャッチ画像に限らずデザインなどは一手間加えることで、見栄えがよくなりクオリティが高まります。今回は非常に簡単に行える「透明度」を使い、背景の四角を75%透過にし、後の画像を何となく見せることで少し垢抜けた印象にすることを狙いました。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto13-2-1024x730.png)
文字色が黒だと強すぎる印象だったので、同色系で濃い色を選択し柔らかい印象に
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto14-2-1024x547.png)
もう一手間加えるために、影付きにし、カラーを白に変更。文字が引き立つよう、文字の周りに白の影を入れました。
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto16-2-1024x565.png)
![](https://inspire-design.net/blog/wp-content/uploads/2023/02/wordpress-eyecatch-howto00.png)
お疲れ様でした!
さいごに
いかがでしたでしょうか?
かなり簡単にアイキャッチ画像をデザインすることができたかと思います。
アイキャッチ画像を作る方法は他にもありますが、「Canva」は無料(機能制限あり)で利用できますし、クラウド上で画像の作成・デザインが可能な上、あらゆるメディアに対応したテンプレートなども豊富ですので、今回紹介していきました。
ブログやオウンドメディアでは、アイキャッチ画像がしっかり作り込まれているか否かで、第一印象も変わりますし、何よりユーザーにとって見やすく理解してもらいやすいため、少しだけ手間がかかりますが、設置するようにしましょう。