【Canvaの使い方】ブログアイキャッチ画像の作り方→画像編集の基礎とコツを抑えよう

更新日:

 

アイキャッチ画像って、みんなどうやって作ってるの?

 

ブログ画像の載せ方で色々とモヤモヤしています・・

 

この記事は、そんな方に向けて「アイキャッチ画像の作り方」をまとめた記事です。

 

✔️この記事の内容

  • アイキャッチ画像の作り方
  • 画像編集の基礎知識集
  • 収益化のためにおさえておきたい3つのコツ

 

初めての方でも、かなりいい感じに仕上げられる方法論をまとめました。

画像をうまく駆使して、早い段階で収益化できるブログに育てましょう!

 

月間5万PVブロガーのAI(あい)です。

🔗統計では、ブログで「月間5万円以上」稼げている人は全体の「8.7%」未満です。

遠回りした私は2年かけてそのレベルに到達。

ノウハウがわかるとあっさり達成できます。

そんな🔗庶民向けのノウハウを公開中!

 

undraw_Finance

 

アイキャッチ画像の作り方を初心者でも分かりやすく解説

アイキャッチの画像は、やり方さえ知っていればとても簡単に作れます。

 

作り方は以下の3ステップだけ。

 

✔️アイキャッチ画像の作り方

  1. Canvaを用意する
  2. 画像を用意する
  3. テキストを入れる

 

順に説明しますね。

 

【ステップ1】画像編集ソフトを用意する

まずは無料版の「Canva」を用意しましょう。

 

Canva無料版の特徴は、

 

✔️Canvaの特徴

  • Web上でサクサク使える
  • 直感だけで編集が可能
  • 高品質テンプレートがたくさん

 

と、初心者にやさしいのが注目点。

テンプレートは42万点。

200万近くの画像、1,000種類以上のフォントが用意されています。

 

canvaのイメージ画像1

canvaのイメージ画像2

 

👉「Canva」7500万点の素材が無料

使い方を詳しく後述しますね。

 

【ステップ2】素材となる画像を用意する

ステップ2は、イラストや写真など、記事のテーマにそった背景画像を用意します。

 

背景画像の選び方のポイントは、

 

✔️背景画像のポイント

  • 記事の内容に関連付ける
  • ブログ全体と統一感を持たせる
  • 印象に残りやすい

 

いずれも、クリック率を高めるための重要な基準。

画像選択は時間をかけて慎重に行うのがおすすめです。

 

👉無料の画像サイトをまとめた記事はこちら

 

【ステップ3】内容を表すテキストを入れる

ステップ3では、画像に表示させるテキストを考えます。

 

「文章」で表現するのではなく、「1単語」もしくは「1フレーズ」で表現するのがポイント。

 

 【30分未満が最多】「ブログに費やす時間は一日にどれくらいですか?」のアンケート結果 のアイキャッチ画像  「総額●円!」ブログ始めたら「何に」「いくら」必要?実際にかかる費用を実例で公開します!のアイキャッチ画像

 

このように、「究極の要約」で記事の内容を「瞬時に」伝えましょう。

 

※ここは、実は収益化に大きく影響する重要ポイント!後半でコツを詳しく深掘りしますね。

 

undraw_building_websites

 

Canvaの使い方

それでは、実際のCanvaの画面を見ながら解説していきます。

 

「Canva」のトップ画面

Canvaのトップ画面の左側メニューから、

  1. テンプレート
  2. マーケティング
  3. ロゴ

と進んで、以下の画面に遷移します。

 

「Canva」の使い方図解その1

「テンプレート」▶「マーケティング」▶「ロゴ」

 

ここからスタート。

膨大な量の「ロゴ」のテンプレートが選択可能です。

 

【ステップ1】編集画面を表示

好みのテンプレを選択したら、以下の編集画面に遷移します。

 

「Canva」の使い方図解その2

ロゴ編集画面

 

この「編集画面」で自分好みのカスタマイズを行います。

 

【ステップ2】テキストを編集

各種のメニューを使って、表示したいテキストをデザインします。

 

「Canva」の使い方図解その3

テキストの編集

 

この段階で、もうデザインは終了です。

 

【ステップ3】ダウンロード

右上の「共有」ボタンをクリックすればファイルをダウンロードできます。

 

「Canva」の使い方図解その4

ダウンロード

 

ファイル形式を「PNG」にするか「JPEG」にするかは、重要ポイントです。

この後、詳しく説明しますね。

 

アイキャッチ画像の完成

これでアイキャッチ画像が完成しました。

 

「Canva」の使い方図解その5

 

わずか3ステップ。

2〜3分で終了です。

 

考えるひよこの画像221030以上がCanvaを使ったアイキャッチ画像の作り方です。作るだけなら簡単ですね。

次は「収益化」との関係を説明します。

 

収益化のポイント

ここからは、収益化に向けて一歩踏み込んだポイントを紹介していきます。

 

収益化でおさえておきたいコツがこちらです。

 

✔️収益化のポイント

画像作成時のコツ

テキスト挿入のコツ

アクセス増のコツ

 

詳しく見ていきましょう。

 

画像作成時のコツ

まず、画像の「サイズ」や「ファイル形式」の基本をおさえておく必要があります。

 

基本は3つあります。

 

✔️サイズとファイル形式の基本

ページのサイズは「1.6mb以下」

画像のサイズは「50kb〜70kb」

ファイル形式は「JPG」か「PNG」

 

「JPG」と「PNG」の違いも解説しますね。

 

ページのサイズは「1.6mb以下」

Googleが推奨する「1サイト」あたりのページサイズは「1.6mb以下」です。

🔗Google Develpers

 

これよりサイズが大きくなると、検索順位の下落に影響します。

 

理由は、サイトの読み込み速度が遅くなるからですね。

 

早い読み込み速度は「神である

とまで公言しているのがGoogle先生。

 

実際、

3秒以内にサイトが表示されないと32%がサイト離脱する

という🔗データまで出しています(5秒かかると90%が離脱)。

 

ページサイズの平均値は「2.3mb」

ところが、一般的にWeb上の記事の平均サイズは、実は「2.3mb」。

 

ページサイズについては、皆さん意外と意識が薄いのかもしれません。

 

ということは、

 

ページサイズを意識するだけで、検索順位を上げる手助けになり得ます。

 

「ハッ」とした人は、今すぐ「Gt Mtrix」などを使って、自分のサイトのサイズを診断しておきましょう。

 

🔗Gt Metrix

🔗PageSpeed Insightsも定番です。

 

そしてページサイズに大きく影響するのが、まさに画像のサイズ。

画像の操り方は、ブログ運営の基本です。

 

画像のサイズは「50kb〜70kb」

画像ファイルのサイズは、1ファイル「50kb〜70kb」が最も適切です。

 

そして、1記事あたりの画像は10枚以下におさえましょう。

 

そうすると「1.6mb以下」のサイト、という基準が現実的なものになります。

※1mb=1,000kb

※最後におすすめの画像圧縮方法を紹介します。

 

ちなみに「写真」はファイルサイズが大きくなりがちです。

一方「イラスト」は容量が軽いのが一般的。

 

上位表示の個人ブロガーは、写真よりもイラストを使っているケースが多いですね。

 

理由はもちろん、

早い読み込み速度は『神である』

への対策です。

 

画像選びの裏技

さらに裏ワザがあります。

 

それが、

「フラットデザイン」のイラストなら、1枚「10kb」レベル

 

フラットデザインなら、容量を気にすることなく画像を使い倒せます。

 

※画像素材サイトで検索する時に「検索ワード」+「フラットデザイン」とすれば見つけられますよ。

 

ファイル形式は「JPGかPNG」

みなさんお馴染みの「JPG」や「PNG」ファイル。

この二つは定番なので、使用頻度が高く、汎用性も高いので、

 

ブログでは「JPG」か「PNG」を優先的に使用しましょう。

 

SNSやYou Tubeなどに埋め込んだ時なども、「JPG」か「PNG」なら問題なく表示されます。

 

ただし、両者の違いを適切に理解しつつ進める必要があります。

 

「JPG」と「PNG」の違い

「JPG」と「PNG」は、用途によって使い分けるのがおすすめです。

その時におさえておきたい主な特徴は次のとおり。

 

✔️「JPG」

  • 主に「写真画像」に適している
  • 保存を繰り返すと画質が劣化
  • ファイル圧縮に適している

 

✔️「PNG」

  • 主に「イラスト」に適している
  • 背景が塗りつぶしにならない
  • 基本的に「JPG」より高品質

 

考えるひよこの画像221030➜こちらはJPEGの画像

考えるヒヨコjpeg221030➜PNGは塗りつぶしにならない

 

初心者なら、

  • 写真は「JPG」
  • イラストは「PNG」

 

と覚えておけば問題ないでしょう。

 

以上が画像の作成時に知っておきたいコツです。

 

undraw_Blogging

 

続いて、テキスト挿入時のコツを見ていきましょう。

 

テキスト挿入時のコツ

次は、画像にテキストを入れるときの重要なコツを紹介します。

 

✔️テキスト挿入時のコツ

  • 際立つフォントスタイルに
  • 際立つフォントカラーに
  • 色相環を揃える(やや上級編)

 

  • 大きいフォントサイズで、
  • 背景色と同化しないように、
  • 最大3色、できれば2色で、

このように工夫するとよいでしょう。

 

本気で差別化を求めるなら、「色相」を整えることがおすすめです。

カラーコーディネートにはロジックがあり、全体の印象が一気にプロ仕様になります。

 

✔️HSLのロジック

 

hsl(190, 80%, 50%,)
hsl(220, 80%, 50%,)
hsl(250, 80%, 50%,)
hsl(280, 80%, 50%,)

 

色相「h」の数値だけを変えたケースです。トーンに統一感が生まれます。

 

✔️HSLのロジック

 

hsl(190, 80%, 50%,)
hsl(190, 60%, 50%,)
hsl(190, 40%, 50%,)
hsl(190, 20%, 50%,)

 

彩度「s」の数値だけを変化させるとこのようになります。同じく、統一感が維持されます。

 

✔️HSLのロジック

 

hsl(190, 80%, 50%,)
hsl(190, 80%, 60%,)
hsl(190, 80%, 70%,)
hsl(190, 80%, 80%,)

 

明度「L」の数値だけを変化させたらこんな感じ。グラデーションの仕組みです。

 

割と簡単なので、関心があれば是非トライしてみましょう。

 

👉RGBやHSLを理解しよう【カラーコーデ】

👉手軽に配色パターンSchemeColor

 

undraw_Finance

続いて、アクセス増につながるコツです。

 

アクセス増につなげるコツ

アクセス増を視野に入れた場合、以下の3点を押さえてデザインするのがポイントです。

 

一覧表示をイメージ

キーワードを表現

スマホでイメージ

 

一覧表示の状況をイメージ

トップブロガーさんのアイキャッチ画像は、あたかもビュッフェテーブルのように陳列されています。

「どれからクリックしようか」と、それぞれが「浮き出るように」存在をアピールしてきます。

このように、アイキャッチは個別にデザインするのではなく、一覧表示された時の光景をイメージしながら作成しましょう。

 

キーワードを端的に表現

一覧表示された時は、アイキャッチと共に記事タイトルも隣接して表示されます。

ここでのポイントは、ユーザーは、まずはアイキャッチを「流し見」するという点。

 

「流し見」される中で、

  • 記事タイトルを「究極に要約」し、
  • 読者の求める情報」をひきつけ、
  • 隣の記事タイトルに視点を橋渡し

 

アイキャッチがうまく機能すると、1人の訪問者に複数の記事を読んでもらえます。

 

結果、PV増につながりますよ。

 

PCとスマホ両方でイメージ

PCでブログを作成している人でも、スマホ表示をターゲットに作成しましょう。

 

ブログ訪問者の7割以上はスマホです。

 

GoogleAnalyticsのデバイスカテゴリ

GoogleAnalytics

 

アクセス増のためにも、アイキャッチはスマホ表示に7割の比重を置くのがスタンダードです。

 

スマホ表示はChromeの「検証機能」を使えば、PC上でも簡単に確認できますよ。

 

WordPressビギナーにも役立つ検証機能の使い方のスマホ表示の仕方の最終説明画像

 

👉PC上でスマホ表示する方法

 

考えるひよこの画像221030ところで、アイキャッチって必ず必要なんでしょうか?

 

アイキャッチを作成する目的

ブログは、アイキャッチがなくても投稿できますね。

とはいえ、アイキャッチを作成するかしないかで何が違ってくるのかを理解しておきましょう。

 

アイキャッチを作成する目的がこちらです。

 

✔️アイキャッチの目的

内部回遊率を上げる

検索意図に答える

滞在時間を長くする

ブランディングする

画像検索される

 

どれも重要です。

 

「内部回遊率」を上げる

アイキャッチで、他の関連記事を魅力的に見せることができると、

 

「あれも気になる、これも気になる」

 

と思ってもらえる効果を生み出せます。

 

1回の訪問で複数の記事をクリックしてもらって、記事の内部回遊率が高まれば、

 

「読者の満足度が高いブログ」とGoogleに高評価されます(=検索順位が上がります)。

 

アイキャッチ次第で、検索エンジンで上位表示を狙えるので、結果、収益増につながります。

 

「検索意図」に応える

ユーザーが検索するときには「検索意図」が存在します。

 

ところがその「検索意図」に、単体の記事で一発ストライクに応えるのは一筋縄ではいかないものです。

 

そこで、

アイキャッチで、目を引く「他の記事をアピール」しておけば、他の記事で検索意図に応えることができます。

 

ここが不十分だと、

再検索➜他人のブログに移動、

となってしまいます。

 

「滞在時間」が長くなる

  • 内部回遊率を上げる
  • 他の記事で検索意図を満たす

トップブロガーは、この好循環で、結果、ブログ読者の「滞在時間」を獲得しています。

 

「長い滞在時間」は、質の高いブログとして、検索順位が上がります。

 

このように、目を引くアイキャッチは、SEO的にも重要なコンテンツとして位置付けられます。

 

ICON SEO 01※「SEO」=検索エンジンで上位表示を狙うための手法のこと

 

「ブランディング」できる

統一感があるアイキャッチが定着すると、ブログを「絵的に」覚えてもらうことができます。

ここは、いわゆるブランディング対策ですね。

アイキャッチによって、ブログのアイデンティティを確立することができます。

 

「画像検索」でインデックス

アイキャッチは「画像検索」でインデックスされることがあります。

画像による検索表示で、思わぬ上位表示なんてことも結構あります。

初心者は是非おさえておきたいポイントです。

 

画像検索の対応としては、

 

画像の「代替テキスト」と「画像タイトル属性」にキーワードを入れておくことが必須です。

 

WordPressなら👇ここのことですね。

 

WordPress代替えテキストの図解

 

さらに、アイキャッチは「Pintarest」で拡散できる可能性もありますね。

 

以上がアイキャッチを作成する目的です。

重要なので、もう一度ポイントを挙げておきますね。

 

✔️アイキャッチの目的

内部回遊率を上げる

検索意図に答える

滞在時間を長くする

ブランディングする

画像検索される

 

undraw_Design_team

 

最後に、アイキャッチ画像に使えるその他のメジャーなソフトを紹介します。

 

無料でおすすめの画像圧縮ソフト

👑「compressor」

一番のおすすめは「compressor」です。

 

✔️「compressor」の特徴

  • 登録不要でWeb上で圧縮
  • 高品質のまま圧縮
  • 究極にシンプルな操作感

 

リニューアルされて、今では圧倒的に「使える」画像圧縮ツールになりました。

おせじ抜きで、高品質のまま画像サイズを小さくしてくれます。

 

🔗compressor

 

👑「Squoosh」

二つ目は、Google推奨の「Squoosh」

 

「Squoosh」の特徴は、

 

Googleが提供

 

この1点に尽きます。

 

どんな高品質なツールでも得られない

「Googleブランドのお墨付き」

その「信頼性」が「Squoosh」を使う最大のメリットです。

 

🔗Squoosh

 

無料でおすすめ画像編集ソフト

この記事で紹介したCanvaを含め、その他の鉄板の画像編集ソフトを紹介します。

 

✔️おすすめ無料画像編集ソフト

  • 「Canva」
  • 「FotoJet」
  • 「Photoscape X」

 

👑「Canva」

この記事で一押しの無料ソフトです。

テンプレートの量が膨大で、合計200万点以上の画像、1,000種類以上のフォントが圧倒的。

無料ソフトのデメリットは、他のブロガーと同じ画像でカブる可能性があることです。

ですが、Canvaはテンプレの量が膨大なので、そのリスクも極少なのが、さらにおすすめな点です。

 

👉「Canva」7500万点の素材が無料

👑「FotoJet」

「FotoJet」も超メジャー級の無料ツールです。

Canvaにない特徴は、登録不要な点。

アカウント登録という心理的な警戒心なく使える点が魅力です。

全体的におしゃれ路線。

クールな雰囲気を求める方はFotoJetはおすすめです。

 

🔗FotoJet

 

👑「Photoscape X」

「Photoscape X」はPCにインストールして使用するタイプです。

ネット環境に左右されない点は、人によっては選択の決定打になるでしょう。

 

🔗Photoscape-X

 

無料でおすすめの画像素材サイト

画像の仕入先はたくさんありますが、ここでは、無料でおすすめのサイトを紹介します。

 

👑「SVG PORN」

「SVG PORN」は、ロゴの無料専門サイトです。

ロゴなのに、商用利用可能なフリーサイト。

 

Googleマップのロゴ(SVG PORN)  WordPressのロゴ(SVG PORN)  Twitterのロゴ(SVG PORN)

 

数多くの場面で活用できます。

 

🔗SVG PORN

 

👑「ICOON MONO」

「ICOON MONO」は、親しみやすいアイコンばかり集めた無料サイトです。

 

ICON BLOG 01  ICON SEO 01  ICON chart 01

 

アイキャッチに使えることはもちろん、記事本文中でも使い所が多く、とても重宝できる素材サイトです。

 

🔗ICOON MONO

 

その他、アイソメトリック系やキャラクター系や女子系など、人気のフリー素材サイトを集めた記事はこちら

 

👉トップブロガーが使っている無料素材サイト

 

※アイソメトリックって、👇このテイストのイラストのことですね。

アイソメトリックのイメージ画像

 

おすすめ有料ソフト

クオリティが高過ぎることが、かえって初心者の壁になるのが有料ソフトのネックです。

 

具体的には、

 

  • プロ仕様=操作が複雑
  • 編集センスが問われる
  • ハイスペックPCが必要

 

といった感じ。

 

それでも、「壁が高いのは最初は誰でも同じ!」という上昇志向の方は、有料ソフトを使ってスキルを高めていくのもありです。

使いこなせれば他のブログとカブることもなくなり、差別化で優位に立てるでしょう。

adobe-photoshopのロゴ画像

プロのクリエイターに圧倒的な支持を得ているのが「Adobe Photoshop」ですね。

 

Adobe Photoshopは、

 

  • プロデザイナー向け
  • 超高度な編集が可能
  • 使い方の難易度が高い

 

といった感じですが、個人ブロガーでも本気度が高ければ使いこなせます。

表現の自由度が圧倒的なので、独自のセンスが存分に出せます。

契約プランが多種多様ですが、月額5,000円くらいから始められます。

 

undraw_Exams

 

クリエイターに依頼(有料)

最後に究極の画像作成方法を紹介します。

 

👑「ココナラ」

個人でも手軽に画像作成をクリエイターに依頼することができます。

 

✔️「ココナラ」の特徴

  • ネットで全て完結
  • サンプルが多い
  • 低コスト

 

似顔絵、オリジナルキャラクター、独自ブランドアイコンなどは、大体ここで作成しているブロガーが多いです。

3,000円くらいからプロに作ってもらえます。

 

👉ココナラ

 

👑「クラウドワークス」

「クラウドワークス」は、デザイナーさんとのマッチングサイトのようなものです。

「クラウドワークス」を通して画像編集の希望を募り、コンペの結果で発注する仕組み。

コスト的には10,000円くらいから可能です。

 

👉クラウドワークス

 

以上です!

この記事と同じくらいのレベル感で、私がアフィリエイトで稼げるようになった🔗2年間のノウハウを公開中です!

まずは月間5万円レベルを目指したい「慎重な」人なら、きっと参考になるはず!

👉【地味だけど5万円!】ブログアフィリエイトの始め方とコツを6つだけ公開

 

その他の、ノウハウ系の記事で、おすすめはこちら。

 

👉トップブロガーのライティング術を初心者向けノウハウに変換してみた

👉検索順位の調べ方をを無料ツールだけで紹介!

 

この記事の中で紹介したリンク先は以下の通り。

この記事で紹介したリンク

 

 

おさらいはこちら 👉

 

プロフィール

3年目に入った私のブログ成績は月間5万PV

Google analytics画像

このレベルだと「Googleアドセンス」なら1万円の収入です。

Google AdSenseの分析

そして「Amazon」「楽天」「Yahoo!」の商品レビュー記事で月2万円ほど。月間150件ほどの申込みが入ってそれくらいです。

あと、月「10〜20件」程度のアフィリエイトが発生して2〜5万円。単価が高いココが伸びれば、月50万とかいくんだと思います。

アフィリエイト収益発生の分析 ブログの月間収益クイックレポート

収益が出始めて半年ほど経ち、累計80万円ほどが口座に振り込まれています。

PCかスマホがあれば、最低限ここまではいけます。

リスクはゼロで「増える可能性しかない」アフィリエイトは気楽な副業に関心がある人におすすめ。

 

興味が出てきた人向けに「🔗堅実に稼ぐためのノウハウ」を公開中です!

 

※「全く」稼げなくて悩んでいる人も参考になると思います。

 







-Blog
-

Copyright© AI(あい) Blog , 2022 All Rights Reserved Powered by STINGER.