「Canva×いらすとや」でアイキャッチ画像を作ろう!

この記事はInsurtechラボの2024年3月のアドベントカレンダーの26日目の記事になります。

はじめに

こんにちは、みっつんです。

皆さん、情報発信してますか?

情報発信の手段の1つとしてブログがあります。
私がブログを書くときは、いつも最初にアイキャッチ画像を作って、そこから記事を書いていくのですが、画像作成にかなり時間がかかって心理的負担が大きいです。

そんななか、最近、Canvaにいらすとやのイラストが搭載された記事を見たので、今回はこの機能を使って「さくっと」アイキャッチ画像を作っていきたいと思います。

【いらすとや x Canva】かわいいフリーイラスト素材でデザイン編集

https://www.canva.com/ja_jp/features/irasutoya/

Canvaとは

Canvaは無料のデザイン編集ツールです。
周りのメンバーを見ると、皆、Canvaを使っており、話を聞くとAIで生成した画像にCanvaでテキスト装飾したり、Canvaの無料のテンプレートをカスタマイズしてアイキャッチ画像を作成しているようでした。

ブログのアイキャッチ画像を作成するにはとても良いツールだと思っているので、ぜひ触ってみてください。

アイキャッチ画像作成

それでは、実際に「Canva×いらすとや」を使ってアイキャッチ画像を作っていきたいと思います。

構図

春をイメージしたアイキャッチ画像を作成します。
構図はこんな感じで、桜の木とジョギングする男子と女子と、背景は青空を表した青と白のグラデーションで。

アイキャッチ画像の構図

無地キャンバスの作成(1200×630px)

まずは、Canvaにログインします。
(ユーザ登録は他のサービスと同じなので、登録手順は飛ばします。)

続いて 1200×630px の無地キャンバスを作るため、次の操作を行います。

  • 画面右上の「デザインを作成」を押下し、検索ワードに「はてな」を入力し、Enterを押す。
  • 「はてなブログ アイキャッチ画像 1200×630px」をクリックする。
Canvaホーム画面

1200×630pxの無地キャンバスができました。

無地キャンバス作成

他のデザインと識別するため、デザインに名前をつけます。
画面上の「名前未定義のデザイン」をクリックして、「アイキャッチ画像の作り方」などの名前を入力します。
※アイキャッチ画像作成が終わり、画像のダウンロードを行うと、この名前でファイル「アイキャッチ画像の作り方.png」が作成されます。

これで、デザイン作成の準備ができました。ここからデザイン作成を行っていきます。

デザインの名前設定

デザイン作成

背景設定

背景に上から下に、青から白のグラデーションの背景を設定していきます。

  • 無地のキャンバスをクリックします。
  • 画面中央上の配置の横のカラフルなアイコンをクリックします。
  • 文章で使用中のカラーをクリックします。
背景設定1
  • 「グラデーション」タブをクリックします。
  • スタイルより上から下のグラデーションをクリックします。
背景設定2

いまは上から下に、白からグレーにグラデーションがかかっているので、青から白になるように、白を青色、グレーを白に変更します。

  • グラデーションカラーの2色をそれぞれクリックしてカラーパレットより色を設定します。

これで、背景が設定できました。

背景設定3

いらすとやのイラスト配置

次に、素材メニューより、背景の上に、イラストやのイラストを配置していきます。
しかし、Canvaの素材は山ほどあるので、いらすとやの画像のみでフィルタをかけてイラスト検索できるように設定します。

  • 画面左のメニューより「素材」をクリックします。
  • 検索ボックスに「@irasutoya」を入力しEnterを押します。
いらすとやでフィルタ

いらすとやで素材をフィルタしたものを固定化し、いらすとやの素材の中で検索するようにします。

  • いらすとやの画像どれでもよいので、マウスオーバーし3点リーダ「…」を表示させます。
  • 3点リーダ「…」をクリックして、作成者のブランド「いらすとや」をクリックします。
いらすとやのフィルタ固定

いらすとやでフィルタが固定できました。
続いて、検索ボックスに「さくら」を入力しEnterを押し、さくらのイラストを検索します。

「さくら」でいらすとや検索

「さくら」で検索した素材をクリックまたはドラッグ&ドロップでデザインに乗せていきます。

「さくら」素材の配置

次に「ジョギング」で検索した素材をクリックまたはドラッグ&ドロップでデザインに乗せていきます。
これで、イラスト配置は終わりました。

「ジョギング」素材の配置

ブログタイトルの設定

次に、ブログタイトル『「Canva×いらすとや」でアイキャッチ画像を作ろう!』を設定していきます。

  • 検索ボックスの上にある「←」をクリックして「いらすとや」のフィルタ固定化を解除します。
「いらすとや」のフィルタ固定化解除

検索ボックスのバツボタンをクリックして「@irasutoya」のフィルタを解除します。

「いらすとや」のフィルタ解除

図形より四角をクリックし、デザインに四角(タイトル背景)を乗せます。

四角の追加

四角(タイトル背景)の位置とサイズを変え、色を黒にします。

テキストの背景設定

右上「透明度」メニューより、タイトル背景の透明度を設定します。

タイトル背景の透明度を設定

画面左の「テキスト」メニューー「テキストボックスを追加」をクリックしてブログのタイトル要素を追加します。

タイトル追加

「段落テキスト」の文字をブログタイトルの『「Canva×いらすとや」でアイキャッチ画像を作ろう!』に変更、フォントサイズを変更し、文字の色を黒から白に変更します。

文字サイズ・文字色の設定

「InsurTech Lab.」ロゴ設定

ラボのブログサイトよりロゴをコピーし、作成した画像に貼り付けます。

ロゴ画像のコピー

Canvaにロゴを「Ctrl+v」で貼り付けて、アイキャッチ画像の完成です。

アイキャッチ画像の完成画面

画像のダウンロード

画面右上の「共有」ボタンをクリックし、「ダウンロード」をクリックします。

ダウンロード画面1

ダウンロードボタンをクリックで、ダウンロードフォルダに、デザインの名前+「.png」でファイルが作成されます。

ダウンロード画面2

まとめ

 Canvaでは、これまでも「いらすとや」のサイトで検索した画像をコピー&ペーストで張り付けることができました。
しかし、その操作にはブラウザのタブを行ったり来たりしなければなりませんでした。

 今回の機能拡張で、Canva内でいらすとやのイラストが素材検索から選択できるようになったため、かなりシームレスにイラストの連携ができ、簡単にアイキャッチ画像が作成できるようになったと感じました。


 アイキャッチ画像を作るとき、この記事が、皆さんの一助になるとうれしいです。