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

 

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

無料で作れる方法は?

 

この記事は、Canvaを使った「アイキャッチ画像の作り方」をまとめた記事です。

画像をうまく使うだけで「ゲームチェンジャーになれる」とまでGoogleは公言しています。

アイキャッチのツボを吸収して、収益化できるブログに育てましょう!

 

この記事の内容

  • アイキャッチ画像の作り方
  • 画像編集の基礎知識
  • 収益化できた3つのコツ

 

月間5万PVのあいです。ブログで「月間5万円以上」稼げている人は全体の「8.7%」未満。このブログは2年もかけてそのレベルに到達。ノウハウを知ったら、あっさり達成できました!あっさり達成できたノウハウを公開中!

 

undraw_Finance

 

Canvaの使い方を覚えればアイキャッチは完成

 

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

作り方の3ステップがこちらです。

 

アイキャッチ画像の作り方
  • Canvaを用意する
  • 画像を用意する
  • テキストを入れる

 

順に説明しますね。

 

【ステップ1】Canvaを用意する

 

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

Canva無料版の特徴がこちらです。

Canvaの特徴

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

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

テンプレートは42万点。

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

 

canvaのイメージ画像1
canvaのイメージ画像2

 

 

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

 

【ステップ2】アイキャッチにしたい画像を用意する

 

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

 

画像の入手・利用方法

 

ホームページで使う画像は専門サイトから入手します。

流れ的にはこんな感じです。

 

  • 利用規約をチェック
    画像をダウンロード
  • 加工OKなら
    適切なサイズに縮小
  • 加工OKに限る!
    文字入れなどで加工
  • 商用OKなら!
    Canvaにアップ

 

日々のブログ作業で、割とメインとなる位置付けです。

 

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

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

 

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

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

 

【ステップ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分で終了です。

 


 

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

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

 

Canvaを使った収益化のポイント

 

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

 

収益化のポイント

  • 画像作成時のコツ
  • テキスト挿入のコツ
  • アクセス増のコツ

 

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

 

Canvaでアイキャッチ画像作成時のコツ

 

まず画像の「サイズ」や「ファイル形式」の基本をおさえましょう。

基本は3つあります。

 

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

  • ページのサイズは「1.6mb以下」
  • 画像のサイズは「50kb〜70kb」
  • ファイル形式は「JPG」か「PNG」

 

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

  

適切なサイズは1.6mb

 

Googleが推奨する「1サイト」あたりの適切なサイズは1.6mb以内です。

「1.6mb」以上のサイトは読み込み速度が「遅い」サイト

そう判断されて、検索順位に影響します。

※上位表示されにくくなります

※引用;Google Develpers

 

画像1枚あたり50kb〜70kb

 

ところが、やや盲点なのか、平均的なウェブサイトの合計サイズは「2.3mb」。

Google推奨よりも「1.5倍」もサイズオーバーしているサイトが数多くあるのが実情です。

ということは、

 

yajirushi-shita_06

 

「画像ファイルサイズ」を適切に扱うだけでGoogle評価が高くなります。

※上位表示されやすくなります

※Googleは「早い読み込み速度は神である」とまで明言!

 

具体的には、

  • 1枚あたり50kb〜70kb
  • 1サイト5〜6枚以内

アイキャッチ画像のファイルサイズも、このあたりの基準がちょうどよいとされています。

※1mb=1,000kb

※サイトの容量を測るには「GTmetrix」が定番!早速測ってみては?

 

「写真」は「イラスト」に比べてファイル容量が大きい

 

アイキャッチ画像にはイラストを使う方がSEO的には効果的

 

※「SEO」=検索エンジンで上位表示を狙った色んなテクニックのこと

イラストにも色々あるので、押さえておきたいポイントもあります。

 

イラストは「フラットデザイン」がおすすめ

 

「フラットデザイン」とは、色数が少ないなど、軽容量を意識したイラストのことです。

フラットデザインだと「10kb」程度のものが結構あったりします。

※画像サイトなどで「検索ワード」+「flat」で探すと出てきたりしますよ!

 

ブログ画像ならJPEGとPNGの違いを理解しよう

 

みなさんお馴染みの「JPEG」と「PNG」。

現在でも主流の画像ファイル形式です。

でも、何がどう違うのか、モヤモヤしてませんか。

ひよこ 02wakewakaran 02

初心者なら、次のことを覚えておけば大丈夫です。

 

JPEG

  • 画像圧縮に向いている
  • 主に写真に適している
  • 保存を繰り返すと画質が劣化

PNG

  • JPEGよりも高品質
  • 主にイラストに適している
  • 背景が塗りつぶしにならない
考えるひよこの画像221030

こちらがJPEG

考えるヒヨコ221030

こちらはPNG

 

このように基本的には、

  • 写真はJPEG
  • イラストはPNG

と理解しておけばOKです。

 


 

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

 

undraw_Blogging

 

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

 

Canvaでテキスト挿入時のコツ

 

画像にテキストを入れるときのコツがこちらです。

 

テキスト挿入時のコツ

  • 際立つフォントスタイル
  • 大き目のフォントサイズ
  • 背景色と同化しないように

 

テキストカラリングのコツ

  • 際立つフォントカラーで
  • 最大3色、できれば2色
  • 色相環を揃える(やや上級編)

 

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

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

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

 

例えば「HSL」の場合がこちらです。

 

色相「H」の数値だけを変えたケース

 

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

 

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

 

彩度「S」の数値だけを変化させたケース

 

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

 

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

 

明度「L」の数値だけを変化させケース

 

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

 

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

 

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

 

undraw_Finance

 

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

 

アイキャッチ画像でアクセス増につなげるコツ

 

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

  • 一覧表示をイメージ
  • キーワードを表現
  • スマホでイメージ

 

アイキャッチ画像が一覧表示された状況をイメージ

 

トップブロガーさんのアイキャッチ画像は、「どれからクリックしようか」と、どれも「浮き出るように」存在をアピールしてきます。

このように、アイキャッチ画像は、

  • 個別にデザインするのではなく
  • 一覧表示の光景をイメージしながら作成しましょう。

 

キーワードを端的に表現

 

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

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

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

 

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

 

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

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

 

GoogleAnalyticsのデバイスカテゴリ
GoogleAnalytics

 

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

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

 

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

 

 


 

以上がアイキャッチと収益化の関係でした。

続いては、アイキャッチ画像について少し深掘りしてみます。

 

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

 

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

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

 

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

アイキャッチの目的

  • 内部回遊率を上げる
  • 検索意図に答える
  • 滞在時間を長くする
  • ブランディングする
  • 画像検索される

この辺りに敏感に反応できるようになってから、当ブログは割と稼げるようになりました。

 

「内部回遊率」を上げる

 

アイキャッチで、他の関連記事を魅力的に見せましょう。

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

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

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

 

「検索意図」に応える

 

ユーザーの「検索意図」に、単体の記事で一発で応えるのは一筋縄ではいかないものです。

そこで、アイキャッチで目を引く、

他の関連記事でも検索意図に応えることを意識します。

 

ここが不十分だと、ユーザーは、

再検索➜他人のブログに離脱

つまり、簡単に離脱される「満足度の低い記事」と検索エンジンに判断されてしまいます。

 

「滞在時間」が長くなる

  • 内部回遊率を上げる
  • サイト内の関連記事で検索意図を満たす

トップブロガーは、この好循環で、結果、読者の

長い「滞在時間」を獲得しています。

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

 

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

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

 

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

 

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

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

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

 

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

 

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

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

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

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

 

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

 

WordPress代替えテキストの図解

 

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

 


 

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

このあたりの重要性に敏感になれたら、中級者の領域に届いてくると思います。

 

アイキャッチの目的(復習)

  • 内部回遊率を上げる
  • 検索意図に答える
  • 滞在時間を長くする
  • ブランディングする
  • 画像検索される

 

 

undraw_Design_team

 

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

 

無料でおすすめアイキャッチ画像「圧縮」ソフト

 

「compressor」

 

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

 

「compressor」の特徴

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

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

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

 

「Squoosh」

 

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

「Squoosh」の特徴は、

Googleが提供

この1点に尽きます。

どんな高品質なツールでも得られない「Googleブランドのお墨付き」の「信頼性」が「Squoosh」を使う最大のメリットです。

 

無料でおすすめアイキャッチ画像「編集」ソフト

 

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

 

「Canva」

 

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

  • テンプレートの量が膨大
  • 合計200万点以上の画像
  • 1,000種類以上のフォント

何もかもが圧倒的!

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

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

 

「FotoJet」

 

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

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

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

全体的におしゃれ路線。

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

 

「Photoscape X」

 

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

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

 

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

 

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

 

「SVG PORN」

 

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

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

 

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

 

数多くのシーンで活用できます。

 

「ICOON MONO」

 

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

 

ICON BLOG 01
ICON SEO 01
ICON chart 01

 

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

 



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

 

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

 

アイキャッチ画像でおすすめの有料ソフト

 

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

具体的には、

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

 

といった感じ。

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

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

adobe-photoshopのロゴ画像

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

Adobe Photoshopは、

 

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

 

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

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

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

 

undraw_Exams

 

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

 

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

 

「ココナラ」

 

「ココナラ」に依頼すれば、個人でも手軽に画像作成をクリエイターに作成してもらえます。

 

「ココナラ」の特徴

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

 

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

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

 

「クラウドワークス」

 

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

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

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

 


 

以上です!

 

この記事と同じくらいのレベル感で、当ブログがアフィリエイトで稼げるようになった2年間のノウハウを公開中です!まずは月間5万円レベルを目指したい堅実派の人は必見です!

 

その他のおすすめの記事

 

この記事が参考になった方なら、以下で初心者に役立つ記事を公開しています!

 

ブログの始め方
ブログの始め方
副業としてのブログの始め方はこちら
ノウハウ
ノウハウ
なかなか稼げない人もこちら
ツール
ツール
「無料」にこだわってツール紹介しています!
WordPress
WordPress
ワードプレスで困ったらこちら

 

プロフィール

 

3年目に入った当ブログは月間5万PV。

Google analytics画像

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

Google AdSenseの分析

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

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

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

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

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

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

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

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