【2021年】Amazonアソシエイト審査に一発合格の方法を徹底解説!

【3パターン覚えるだけ】Canvaブログアイキャッチ画像の作り方

ブログのアイキャッチ画像にCanva、正直それほど使ってませんでした。

ただ、ちょっとしたコツを覚えるだけで、「物凄く使えること」に気づいたのでご紹介します。

ウキワさん

Canvaとは、ネット上で簡単に使える無料の「デザイン作成ツール」ね

3パターン覚えるだけで、Canvaでアイキャッチ画像がスイスイ作れるようになります!(パソコン・Windowsでの方法)

■この記事の対象者

  • しっくりくるアイキャッチ画像がどうにも作れない
  • Adobeのフォトショップやイラストレーターで挫折した
  • 今さらデザインの勉強まで手がまわらない
  • ロゴやバナー、サムネイルも作れる基本操作を知りたい

超絶テクを凝縮してます。

Canva Pro必要ない?有料版の口コミ評判と比較すべき3サービス

【Amazonアソシエイト】ネットで月5万の完全マニュアル

目次

アイキャッチ画像作成3つの注意点

アイキャッチ画像作成の前に、注意していただきたい点が3つほど。

  • サムネイル表示での見え方
  • 画像サイズ
  • フリー画像の規約

ちょっと説明します。

サムネイル表示での見え方

アイキャッチ画像は言うまでもなく、ブログ記事の「顔」です。

アイキャッチ画像の見本
アイキャッチ画像の例

※全ての画像はクリックで拡大できます(戻す➜画像以外をクリック)

と同時に、ブログのトップページや記事内で「サムネイル」としての役目も果たします。

サムネイル:概要を伝える縮小画像

■ブログトップページでのサムネイル表示

ブログトップページでのサムネイル表示イメージ

■記事内でのサムネイル表示

記事内でのサムネイル表示イメージ
ウキワさん

アイキャッチ画像がサムネイル表示される場合、その見た目も意識して作った方がいいよね

サムネイル内に「カテゴリー」などが表示される場合、構図にも気をつけてください。

サムネイル表示にカテゴリーが表示されたイメージ

アイキャッチ画像作成、サムネイル表示での見た目を意識するとこうなります。

  • 文字:少ない文字数、かつ大きめ
  • カラー:3~4色でシンプルに
  • 構図:サムネイル内にカテゴリー名などが表示される場合、文字や写真がかぶらないよう配置
ウキワさん

アイキャッチ画像がSNSでも使われるなら、「そこでの見栄え」も確認しておくといいよね

画像サイズ

アイキャッチ画像のサイズも重要です。

縦横比を意識しないと、バランスを欠いたものが出来上がります。

縦長になったアイキャッチ画像イメージ

また、サイズが大きすぎると容量も大きくなり、表示スピートの遅延につながりかねません。

アイキャッチ画像のおすすめサイズは、

横1200ピクセル×縦630ピクセル

これまで「cocoon」や「SWELL」「Astra」といったテーマで、アイキャッチ画像を作成してきましたが、このサイズでドンピシャでした。

Twitterでもきれいに表示されます。

Canvaではアイキャッチ画像を作るとき、あらかじめ画像サイズを指定できるのでご心配なく。

Canvaの画像サイズ指定

フリー画像の規約

Canvaをおすすめする理由の一つに、テンプレートや素材(イラスト・画像など)が豐富な点にあります。

Canvaのテンプレート

ただし、王冠マークの素材は有料版でしか使えないので注意してください。

Canvaのイラスト

上記はすべて有料イラスト(カーソルを合わせると王冠マークが現れます)

ウキワさん

Canvaの素材に、別サービスの素材( イラスト・画像など )を組み合わせると、他とかぶることが少なくなるのでおすすめ

フリー素材を使うときは、特に以下の点に注意してください。

  • 商用利用できるか?:アフィリエイト行為は「商用利用」とみなされることも
  • 画像を加工・編集できるか?:可能な場合でも細かい指示があることも

フリー素材を提供する各サイトの「利用規約」で、詳細を確認できます。

photoACの利用規約
参照:photoAC
photoACの「加工や商用利用OK」の文言
参照:photoAC

以上、アイキャッチ画像を作成するとき、

  • サムネイル表示での見え方
  • 画像サイズ
  • フリー画像の利用規約

に注意してください。

Canvaでのアイキャッチ画像作成パターンは大きく3つ!

Canvaでブログのアイキャッチ画像を作るとき、3パターン覚えておくと便利です。

  1. 「フレーム」を使う
  2. 「図形」を使う
  3. 「Canva以外のイラストや画像」を使う

この3パターンさえ覚えてしまえば、あとは合せ技でどんどんアイキャッチ画像が作れるようになります。

ウキワさん

ロゴやバナー・サムネイル作成も本質となるスキルは同じね

こちらをご覧ください。( 3パターンの見本)

①「フレーム」を使ったアイキャッチ画像(作業時間:約2分)

■四角のフレームを使った例

Canvaの四角フレームを使ったアイキャッチ画像

■ 円のフレームを使った例

Canvaの円フレームを使ったアイキャッチ画像

フレーム:写真を特定の形に切り抜く機能

②「図形」を使ったアイキャッチ画像 (作業時間:約2分30秒)

■円を使った例

Canvaの円図形を使ったアイキャッチ画像

■四角を使った例

Canvaの四角形を使ったアイキャッチ画像 

図形:背景にアクセントを付けられる素材

③「Canva以外のイラストや画像」を使ったアイキャッチ画像(作業時間:約4分30秒)

■フリーイラストを使用した例

フリーイラストを使ったCanvaでのアイキャッチ画像

使用したイラストの引用元:ソコスト

Canva以外のイラストや画像:よりオリジナル性の高いアイキャッチ画像を作成できる

どれだけ良いコンテンツであっても、見てもらえなければ無いに等しい

ウキワさん

この言葉、ホント耳が痛いよね…

そうは言っても「アイキャッチ画像にそこまで時間をかけられない」、そんなとき上記3パターンを覚えるのが近道です。

3種の神器 | Canvaでのアイキャッチ画像作成

アイキャッチ画像作成、Canvaだけでも十分です。

ただし他にも、アイキャッチ画像のクオリティーを飛躍させる「3つのツール」が存在します。

  • ColorPick Eyedropper :画面の中の気になる色を一瞬で判別できるChrome拡張機能
  • Coolors:基準とする色に合った配色をすぐに探せるwebツール
  • remove.bg:一瞬で画像背景を除去できるwebツール

いずれも操作が超簡単です。

アイキャッチ画像作成にとどまらず、ブログ運営でこの3ツールは必須です。

使い方を解説するので、この機会に取り入れてみてください。

ColorPick Eyedropper

お使いのブラウザが「Google Chrome」なら、5秒で使えるようになります。

たとえばこんなとき、

画面中の特定の色

①ColorPick Eyedropper(カラーピックアイドロッパー)のアイコンをクリックし、②現れた✙マークをその箇所に合わせてクリックするだけ。

ColorPick Eyedropper(カラーピックアイドロッパー)のアイコン

すぐに「#3092AB」というカラーコードだと判明。

» ColorPick Eyedropper

ウキワさん

「これ何色?」ってとき、けっこうあるよね

ColorPick Eyedropperの詳しい使い方はこちら

Coolors

たとえば、先ほどの「#3092AB」というカラーをもとに、専門的に間違いない配色を知りたいときに役立つのがCoolors(クーラー)。

» Coolors
「ジェネレーターを起動してください」から

まずは基準となる色のカラーコードを入力。

Coolors(クラー)のカラーパレットイメージ

鍵マークをクリックしてロックをかける。

Coolors(クラー)のカラーパレットの一色をロックしたイメージ

あとはポンポンポンポン「スペースキー」を押して、次々と表示される色の中から、お気に入りをロックしていくだけ。

Coolors(クラー)のカラーパレットを選ぶイメージ

※スマホの場合は「生成」ボタン

このときURLをメモしておくと、作成したカラーパレットをいつでも呼び出せます。

Coolors(クラー)のカラーパレット作成時に表示されるURL

デザイン作成で素人臭が出やすい大きな原因の一つが配色(色の組み合わせ)。

「Coolors」を使うと、専門家に配色をアドバイスしてもらえるようなもの。

先ほどの配色によるアイキャッチ画像がこちら。

■「#3092AB」から配色したアイキャッチ画像

Coolors(クラー)のカラーパレット配色で作成したアイキャッチ画像

Coolors、一度使い始めるともう手放せません。(もちろん無料です)

» Coolors
「ジェネレーターを起動してください」から

Coolors の詳しい使い方はこちら

remove.bg

写真(イラスト)の背景を除去できると、使い勝手が広がります。

» remove.bg

以下を見比べてください。

背景の除去前

Canvaに背景付きの写真をアップロードしたイメージ

背景の除去後

Canvaに背景無しの写真をアップロードしたイメージ

ねっ、楽勝でしょ?

実のところCanvaの有料版には、背景の切り抜き機能が備わっています。

ウキワさん

よく「この機能押し」で、有料版がすすめられていたりするよね

ただし、

無料ツール「remove.bg」があるので、「背景切り抜き」だけのためにCanva有料版を使う必要はありません

» remove.bg

remove.bg の詳しい使い方はこちら

しかしながら、Canva Pro(有料版)の素材数(イラスト・アイコン・画像・テンプレ)の多さは、ちょっと捨てがたいですね。

Canva Proの有料素材

上記はすべて有料版のみで使えるイラスト。

以前使っていた他の有料素材はCanva Proの「3倍くらいの料金」かつ「月10点まで」とかだったので、とりあえずCanva Proを試してみることにしました。

ご興味があればこちら

» 有料素材が使い放題「Canva Pro」30日無料お試し
ウキワさん

上記3ツールも駆使して、アイキャッチ画像のクオリティーを爆上げしてちょうだい!

Canvaアイキャッチ画像の作り方3パターン【パソコン・Windows】

パソコン(Windows)でのCanvaアイキャッチ画像作成を3パターンでお伝えします。

「フレーム」を使ったアイキャッチ画像の作り方

Canvaの「フレーム」を使ったアイキャッチ画像

「フレーム」は、「素材」➜「フレーム」から挿入。

Canvaで「素材」➜「フレーム」

「すべて表示」で全表示されます。

Canvaで全ての素材が表示

もしくはテンプレートにも、「フレーム」が入ったものが多数あります。

フレームの挿入されたCanvaテンプレート
フレームの挿入されたCanvaテンプレート2

詳しい操作手順について、動画が早いのでそちらで。

【フレームを使ったアイキャッチ画像の作り方】

■見どころ

  • アイキャッチ画像サイズの指定
  • フレームの操作方法
  • ColorPick Eyedropper(画面の中の色判別)の使い方
  • 線の効果的な使い方

Canvaでのアイキャッチ画像作成、「フレーム」を上手く使いこなしてください。

「図形」を使ったアイキャッチ画像の作り方

Canvaの「図形」を使ったアイキャッチ画像

「図形」は、「素材」➜「線と図形」から挿入。

Canvaで「素材」➜「線と図形」

「すべて表示」で全表示されます。

Canvaの図形が全て表示

背景の模様なども図形で作成可能です。

図形が挿入されたCanvaテンプレート

詳しい操作手順は動画をご覧ください。

【図形を使ったアイキャッチ画像の作り方】

■見どころ

  • 図形の種類は?
  • 図形の操作方法
  • 透明度の調整
  • 素材のロック
  • 重なり順の変更方法

Canvaでのアイキャッチ画像作成、「図形」も上手く使いこなしてください。

「Canva以外のイラストや画像」を使ったアイキャッチ画像の作り方

「Canva以外のイラストや画像」を使ったアイキャッチ画像

使用するイラストは、フリー素材集の「ソコスト」からダウンロードしたものです。

» ソコスト

ソコストのトップページ

詳しい操作手順は動画をご覧ください。

【Canva以外のイラスト・画像を使ったアイキャッチ画像の作り方】

■見どころ

  • カラーパレットツール「COOLORS」の使い方
  • 背景除去ツール「remove bg」の使い方
  • 画像圧縮ツール「Tiny PNG」の使い方
  • 画像・イラストのアップロード方法
  • 作成したアイキャッチ画像のダウンロード方法
  • WordPressブログへのアイキャッチ画像の設定方法

「Canva以外のイラスト・画像」も上手に使いこなし、オリジナル性の高いアイキャッチ画像をCanvaで作成してみてください。

Canvaの保存方法:作成中のアイキャッチ画像はその都度「自動保存」されています(保存ボタンはありません)

Canvaおすすめフォント

「どのフォントを使うか」、けっこう迷うんですよね。

巷でよく使われているフォント、わたしのよく使うフォントをご紹介しておきます。

  • 源柔ゴシック
  • 鉄瓶ゴシック
  • ロゴたいぷゴシック
  • Rounded M+ 1p
  • けいふぉんと
  • M+
  • Noto Sans
  • コーポレート・ロゴ
  • コーポレート・ロゴ丸
  • やさしさアンチック
  • じゆうちょうフォント
  • チェックポイント
  • UDモトヤ明朝

フォント名をどこかにコピーしておくと、Canvaですぐに使えて便利です。

■字体の見本

Canvaのフォント見本1
Canvaのフォント見本2
Canvaのフォント見本3

上記フォントを使うと、そんなに外れないと思います。

入力した文字は装飾も可能です。(文字の枠を確定した状態➜エフェクト)

Canvaの文字装飾

「影付き」や「中抜き」などがあり、微調整もできます。

Canvaの文字スタイル

■影付き

Canvaの影付き装飾

■中抜き

Canvaの中抜き装飾
ウキワさん

お気に入りの装飾を一つ二つ見つけておくと便利だよね

Canvaの登録方法【無料】

念のためCanvaの登録方法も記載しておきます。(PCでの方法)

Canvaの登録はこちら

» Canva

1.「登録」をクリック

Canvaの登録

2.Googleアカウントをお持ちの場合は「Googleで登録」、普通に「メールアドレスで登録」も可能です。

Canvaでメールアドレス登録

3.「個人」で問題ありません。

Canvaで利用目的を選択

4.有料版をすすめられるので「後で」をクリック。

Canvaでの有料版をスルー

5.Canvaからのメールが欲しいなら「OK」、必要ないなら「後で」をクリック。

Canvaからのメールを受けるかどうか

アイキャッチ画像作成は「カスタムサイズ」から行えます。

Canvaでのアイキャッチ画像作成はカスタムサイズから

ブックマークに登録しておくと、すぐに使えて便利ですよ。

【Canvaブログアイキャッチ画像の作り方】まとめ

■この記事のポイント

  • アイキャッチ画像作成は「サムネイル」での見た目も意識
  • アイキャッチ画像のサイズは「横1200ピクセル×縦630ピクセル」がおすすめ
  • アイキャッチ画像作成で「ColorPick Eyedropper」「Coolors」「remove.bg」は3種の神器
  • Canvaの「フレーム」「図形」「Canva以外のイラストや画像」を使いこなすと、アイキャッチ画像作成がメキメキ上達

素敵なアイキャッチ画像は、ブログ全体のイメージアップにもつながります。

ウキワさん

どうせなら、アイキャッチ画像作成も楽しんでちょうだい!

ぜひあなたらしいアイキャッチ画像の数々で、印象的なブログに仕上げてください。

Canva Pro必要ない?有料版の口コミ評判と比較すべき3サービス

【裏技】AdobeStock有料素材40点を無料ゲットする方法~解約まで

ブログアフィリエイトに役立つおすすめ無料ツール厳選紹介【初心者】

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる