150を超える、ブログ・アフィリエイト・SEO・ノウハウを随時公開

WordPressブログのアイキャッチ画像の作り方【Canvaの手順】

悩んでいる人
「ブログに設定するアイキャッチ画像ってどうやって作るの?設定の仕方も知りたい。」

 

こんな悩みにお答えします。

 

この記事では、WordPressブログのアイキャッチ画像の作り方について、実際に作成中の画像を交えながら解説します。

 

 本記事の内容でわかること

  • ブログでアイキャッチ画像が重要な理由
  • アイキャッチ画像を作るときのコツ
  • アイキャッチ画像の作り方から設定まで
  • アイキャッチ画像を作るのに役立つツール
  • SNS用のアイキャッチサイズと確認方法

 

正直、アイキャッチ画像は読まれるブログを作る上でも大切な要素です。

 

アイキャッチって作成してみると分かるのですが「毎回この作業をやるとか面倒」とか思うんですよね。

 

とはいえ、適当に選んだ画像を設定しても記事自体が台無しになってしまいます。

 

むしろ、記事を書くだけでも大変なので、アイキャッチにまで手が回らない気持ちはよくわかります。しかし、何度も言いますがアイキャッチは重要です。

 

それは、検索で上位記事のほとんどがアイキャッチにこだわっていることからもよく分かります。

 

この記事を最後まで読むと、読まれやすいブログに近づくためのアイキャッチ作りができるようになりますよ。ぜひ参考にしてみてください。

 

※ 当ブログでは「会社員の収入に依存せず、個人で稼ぐ力をブログで身につける」をテーマに、ブログ運営やアフィリエイト、SEOに関するノウハウを、200を超えるコンテンツで無料公開しています。ぜひお役に立てれば幸いです。

 

それでは、さっそく見ていきましょう。

 

\当サイトも使っているWPテーマ『THE THOR』/

THE THOR公式ページ

 

目次

ブログでアイキャッチ画像が重要な理由

ブログでアイキャッチ画像が重要な理由
ブログでアイキャッチ画像が重要な理由

 

はじめに、ブログのアイキャッチがどれほど重要なのか、その理由を解説していきます。

 

 アイキャッチが重要な理由

  1. SNSで拡散されやすい
  2. アイキャッチに読者が引き込まれる
  3. アイキャッチによってトップページがおしゃれになる

 

必要性を理解しなければ、良いアイキャッチは作れませんので、ここでしっかりと理解していきましょう。

 

理由①:SNSで拡散されやすい

 

アイキャッチは、SNSで拡散されやすいというメリットがあります。というのも、アイキャッチを設定していると視覚的にも良いからです。

 

例えば、Twitterでブログの紹介を行うと以下のように表示されます。

 

 

こんな感じで、インパクトがあって目立ちますよね。視覚的にも良いのでシェアにも繋がりやすくなります。

 

さらに、SNSで拡散されるとブログが読まれる確率が上がります。

 

理由②:アイキャッチに読者が引き込まれる

 

アイキャッチは、読者が最初に目にするものです。そのため、デザインが素敵であればユーザーも思わず記事をクリックしてしまうのです。

 

あなたも経験ないでしょうか?おしゃれなパッケージの商品をついつい買ってしまった経験。

 

同じことをブログのアイキャッチでも行えます。そのため、PVを増やしたいならアイキャッチ作りにも力を入れましょう。

 

理由③:アイキャッチによってトップページがおしゃれになる

 

アイキャッチは、ブログ一覧に表示される要素のひとつです。なので、トップページのデザインがおしゃれになります。

 

デザインがイマイチなブログは、記事を読まれる前に読者から離脱されてしまいます。そのため、おしゃれなトップページにはメリットがあるのです。

 

例えば、以下のようなブログは注意です。

 

  • デザインがダサい
  • 色がない
  • アイキャッチが設定されていない

 

ユーザーから記事を読んでもらうためには、アイキャッチも重要な役割だということを覚えておきましょう。

 

ちなみに、アイキャッチが「No Image」とかNG(論外)です。

 

おしゃれなブログの作り方は「おしゃれなブログデザインの作り方【初心者でもできる20のコツ】」でも詳しく解説していますので、参考にしてみてください。

 

アイキャッチ画像を作るときのコツ6つ

アイキャッチ画像を作るときのコツ6つ
アイキャッチ画像を作るときのコツ6つ

 

アイキャッチ画像の作り方を説明する前に、アイキャッチ画像を作るときのコツをご紹介します。

 

 アイキャッチ画像を作るコツ6つ

  1. 記事の内容がひと目で分かる
  2. 文字を目立たせる
  3. 写真の質にこだわる
  4. 記事の内容に合った画像にする
  5. フォントにこだわる
  6. テンプレートを使いまわす

 

画像を交えながら説明しますので、アイキャッチを作る前に必ずチェックしてください。

 

コツ①:記事の内容がひと目で分かる

 

アイキャッチを作る場合、ひと目で記事の内容が分かるものが良いです。ひと目である程度の内容が分かれば、ユーザーも自分の悩みを解決できるかどうかを判断して読むことができます。

 

例えば、今回のテーマ「アイキャッチ画像の作り方」ならば、本記事のTOPのようなアイキャッチは記事のテーマが想像しやすいことが分かります。記事に必要な要素や文字を入れるのがおすすめです。

 

コツ②:文字を目立たせる

 

アイキャッチの文字は、目立つように工夫しましょう。

 

例えば、以下のアイキャッチではどちらの文字が見やすいと思いますか?

 

アイキャッチ(背景色なし)
アイキャッチ(背景色あり)

 

中には左側のほうが良いという方もいるかもしれませんが、おそらく右側のほうが見やすいのではないでしょうか。どちらも同じフォントを使っていますが、背景色が変わるだけで視覚的に文字の見やすさが変わります。

 

文字の背景に色を入れるだけで、ずいぶん見やすくなりましたよね。

 

なお、写真を利用する場合は、シンプルな写真を選んだ方が文字が乗せやすいので、文字をどこに入れるのか考えた上で写真を選びましょう。色合いが複雑な写真は、文字を乗せても一部が見えづらくなってしまいます。

 

それでも、複雑な写真を使いたい場合は、背景を暗くさせて文字を太くしたり、文字の縁取りをするなど工夫をしましょう。

 

コツ③:写真の質にこだわる

 

アイキャッチに使用する写真は、質にこだわるようにしましょう。クオリティが高い写真だと文字を入れるだけで、それっぽいアイキャッチになります。

 

例えば、SNSにまつわる画像なら、以下のどちらをアイキャッチにしますか?

 

アイキャッチに向いていない画像
アイキャッチに向いている画像

 

上記の画像はどちらもSNSにまつわる画像を選択したつもりですが、右側のほうがSNSをより視覚的に表していますし、クオリティも高く、美しい写真のためアイキャッチには右の画像を選択します。

 

なお、写真はできる限り、美しいものを選ぶことで印象がガラッと変わります。

 

ちなみに、美しい写真ならUnsplashがおすすめです。当ブログでもかなり利用しています。

 

コツ④:記事の内容に合った画像にする

 

アイキャッチは、もちろん記事の内容にマッチした画像を選択するか、オリジナルの画像を作る必要があります。

 

今回は、NGな例を1つご紹介しておきます。

 

例えば「1人キャンプの過ごし方」というテーマで、以下のようなアイキャッチを作成したとします。

 

記事と画像がマッチしないアイキャッチ
記事と画像がマッチしないアイキャッチ

 

上記は、1人キャンプがテーマなのに、関係のないライブコンサートの写真を使っていますね。今回のテーマが「1人キャンプの過ごし方」なら、森やキャンプ風景の画像が好ましいはず。

 

アイキャッチにおすすめのフリー画像・素材は「ブログにおすすめのフリー素材・画像サイト15選まとめ【商用利用可】」にてまとめてご紹介しています。

 

コツ⑤:フォントにこだわる

 

アイキャッチにクオリティを求めるなら、フォントにこだわりましょう。

 

アイキャッチは、デザイン全体の後に文字があればフォントのほうに目がいくはずです。

 

ここでは、具体例を用いて解説していきます。以下の画像がフォントにこだわったものです。

 

 

上記の画像は入力内容は同じものの、雰囲気がガラッと変わりますよね。

 

コツ⑥:テンプレートを使いまわす

 

記事の内容に合わせて、毎回テンプレートを探したりするのは大変なので、よく使うテンプレートを決めておきましょう。

 

当ブログでは、オリジナルのテンプレートを1つ作成して、毎回タイトルとアイコンを変えて使いまわしています。

 

毎回違うテンプレートを使用している人もいますが、毎回同じテンプレートを使用することで、

 

  • 毎回新しいテンプレートを作成する手間が省ける
  • 毎回3分程度でアイキャッチが完成する
  • 投稿一覧のアイキャッチデザインが統一される

 

などといったメリットもあるのでおすすめです。

 

アイキャッチ画像の作り方【Canvaで作る手順】

アイキャッチ画像の作り方【Canva】
アイキャッチ画像の作り方【Canva】

 

それでは、アイキャッチ画像の作り方を解説していきます。

 

今回は、当ブログがよく利用している「Canva」を使った方法です。このソフトはダウンロードをしなくてもオンライン上で操作可能です。

 

また、初心者でも直感的に操作できる画像作成ツールとして多くのブロガーが利用しています。

 

画像編集をしたことがない人でも、慣れてしまえば3分程度で作れるのでおすすめ。

 

また、ブログのアイキャッチに限らず、

 

  • 見出し下画像
  • ブログ内のバナー画像
  • (アイキャッチ画像)

 

などをCanvaでは簡単に作ることができます。

 

それでは、さっそくCanvaを使ってアイキャッチを作ってみましょう。(今回はPC版です)

 

手順①:Canvaに登録・ダウンロード

 

Canvaを使用する際は、簡単な登録を済ませておきましょう。もちろん、無料です。

 

→ パソコンの場合は、以下のボタンから直接Canvaにアクセスします。

 

 

→ スマホの場合は、以下のボタンからアプリをインストールします。

 

Download on the App Store

Google Play で手に入れよう

 

アクセス、またはインストールが終わったら、次はアカウント登録をしていきます。

 

Canvaのアカウント登録には、

 

  • Googleで登録
  • Facebookで登録
  • メールアドレスで登録

 

の3種類の登録方法があります。

 

アカウント登録は3種類
アカウント登録は3種類

 

・「Googleで登録」や「Facebookで登録」の場合は、各種パスワードを入力するだけで登録完了します。

 

・「メールアドレスで登録」する場合は、名前、メールアドレス、パスワードの3つを入力して登録完了します。

 

すると、以下のようなホーム画面が表示されるようになります。

 

ホーム画面
ホーム画面

 

手順②:Canvaにログイン

 

改めてログインする場合は、トップページ右上の「ログイン」をクリックします。

 

「ログイン」をクリック
「ログイン」をクリック

 

先ほど登録した方法からログインしてください。

 

登録した方法からログイン
登録した方法からログイン

 

右上に「デザインを作成」と表示されていればログイン完了です。

 

ログイン完了
ログイン完了

 

手順③:テンプレートを選択

 

続いて、デザインを作成するために「デザインを作成」をクリックします。

 

「デザインを作成」をクリック
「デザインを作成」をクリック

 

下部の「カスタムサイズ」をクリックします。

 

「カスタムサイズ」をクリック
「カスタムサイズ」をクリック

 

アイキャッチ画像のサイズを入力し「新しいデザインを作成」をクリックします。

当ブログは横768px、縦432pxなのでその通りに入力しました。

 

「新しいデザインを作成」をクリック
「新しいデザインを作成」をクリック

 

左メニュー「テンプレート」の検索欄にキーワードを入力します。そのとき、カラーも選択できるので、イメージが決まっていれば選択するとフィルタ代わりになりますよ。

今回は「ブログ」と入力しました。

 

キーワードを入力
キーワードを入力

 

気に入ったテンプレートがあれば、テンプレート右上のメニューを選択して「いいねに追加」をクリックします。

 

いいねしたものは後からまとめて確認できるので、気に入ったらクリックして追加していきましょう。

 

「いいねに追加」をクリック
「いいねに追加」をクリック

 

※ いいねはホーム画面から「すべてのフォルダー」を選択して「いいね」をクリックすると、いいねしたテンプレート一覧を見ることができます。

 

「いいね」をクリック
「いいね」をクリック

 

気に入ったテンプレートを選択すると、右側に自動的に表示されるので、テンプレートの設定は完了です。

 

テンプレートの設定完了
テンプレートの設定完了

 

手順④:文字を変更

 

テンプレートの選択が完了したら、文字を変更していきましょう。

 

テンプレート内の変更したい文字をダブルクリックして選択し、文字を変更します。

 

下記のように青色で文字が選択されている状態であれば正しく選択できてますよ。

 

文字をダブルクリック
文字をダブルクリック

 

それで、選択枠の左右をクリックしながらマウスを移動させると、文字の幅も調整できます。

 

選択枠をクリックしながらマウスを移動
選択枠をクリックしながらマウスを移動

 

文字の幅が調整できたら、テンプレート外の空白部分をクリックし、文字の選択を解除します。

 

文字の選択を解除
文字の選択を解除

 

次に文字を移動させるために、文字をクリックしながらマウスを移動します。

 

 

もしも、デフォルトのテンプレートでいらない文字があれば、クリックして削除しましょう。

 

いらない文字を削除
いらない文字を削除

 

同時にいらない画像やアイコンもクリックして削除しましょう。

 

いらない画像やアイコンも削除
いらない画像やアイコンも削除

 

他にも、文字色を変える場合は、下記のようにカラーを選択することも可能です。

 

文字色を変える
文字色を変える

 

または「エフェクト」機能で形式を変えることも可能です。

 

「エフェクト」機能
「エフェクト」機能

 

ここまでやれば、アイキャッチ画像の作成は完了です。

 

アイキャッチ画像の作成は完了
アイキャッチ画像の作成は完了

 

手順⑤:フォントを変更

 

フォントを変更したい場合は、文字を選択し、フォント名をクリックすると、フォント一覧が出てくるので好みのフォントをクリックします。

 

フォントをクリック
フォントをクリック

 

以下のように、フォントが変われば完了です。

 

完了
完了

 

手順⑥:文字を装飾

 

他にも文字を装飾したい場合は、文字を選択して、上側にある装飾ボタンから編集します。

 

▽下記は装飾ボタンの説明です▽

 

装飾ボタンの説明
装飾ボタンの説明

 

手順⑦:画像を追加

 

外部から画像を追加する場合は、左側メニュー「アップロード」を選択し「メディアをアップロード」をクリックします。

 

「メディアをアップロード」をクリック
「メディアをアップロード」をクリック

 

アップロードする項目の中から「デバイス」をクリックし、追加したい画像を選択します。

 

「デバイス」をクリック
「デバイス」をクリック

 

左側にアップロードされた画像が並ぶので、クリックすると画像が右側に表示されます。

 

画像が表示
画像が表示

 

画像のサイズや位置の調整ができたら完了です。

 

サイズや位置の調整
サイズや位置の調整

 

手順⑧:素材を追加

 

新たに素材を追加したい場合は、左側メニュー「素材」を選択し、検索欄から求めている素材を検索します。

 

左側に表示された素材をクリックすると素材が右側に表示されます。

 

素材をクリック
素材をクリック

 

お好みで画像を削除したり、サイズや位置を調整したら完了です。

 

サイズや位置を調整
サイズや位置を調整

 

手順⑨:アイキャッチを保存

 

アイキャッチが最終的に完成して保存する場合は、右上の「ダウンロード」をクリックし「ファイルの種類」を設定したら、下部の「ダウンロード」をクリックして完了です。

ファイルの種類は「PNG」か「JPG」のどちらかにしておけばOKです。

 

「ダウンロード」をクリック
「ダウンロード」をクリック

 

なお、編集が終わったテンプレートは自動で保存されます。

 

ホーム画面の「すべてのデザイン」から作成・編集したテンプレートを見ることができます。

 

テンプレートは自動保存
テンプレートは自動保存

 

PCで使い慣れてきたら、スマホアプリでも試してみてください。慣れるとどんな場所でも作業ができるようになるので、幅が広がりますよ。

 

WordPressブログでアイキャッチ画像の設定方法

 

次に、先ほど作ったアイキャッチ画像を実際にWordPressブログで設定する方法をご紹介します。

 

まず、投稿画面の右側メニューから「アイキャッチ画像」をクリックし「アイキャッチ画像を設定」をクリックします。

 

「アイキャッチ画像を設定」をクリック
「アイキャッチ画像を設定」をクリック

 

左上の「ファイルをアップロード」を選択し「ファイルを選択」からアイキャッチ画像をアップロードします。

 

アイキャッチ画像をアップロード
アイキャッチ画像をアップロード

 

アップロードされたアイキャッチを選択して、右下の「アイキャッチ画像を設定」をクリックします。

 

「アイキャッチ画像を設定」をクリック
「アイキャッチ画像を設定」をクリック

 

アイキャッチ画像が設定されていることを確認し、下書き保存や更新などをクリックして保存すれば完了です。

 

完了
完了

 

これで、アイキャッチの作り方から設定までが完了しましたね。お疲れ様でした!

 

アイキャッチ画像を作るのに役立つツール

 

ここでは、Canva以外にもアイキャッチを作る際に役立つツールをご紹介していきます。

 

 アイキャッチ作成に役立つツール

  1. Pixlr Editor
  2. Photoshop
  3. Illustrator
  4. Keynote
  5. Googleスライド
  6. PowerPoint

 

その①:Pixlr Editor

Pixlr Editor
Pixlr Editor

 

Pixlr Editor(ピクセラエディター)は、無料で使用することができるツールです。

 

無料ツールではありますが、できることが比較的多いことがメリットです。画像を明るくする機能が付いています。

 

>> Pixlr Editorを使ってみる

 

その②:Photoshop

Photoshop
Photoshop

 

Photoshop(フォトショップ)は、Adobeが作っているツールです。

 

有償ソフトであるものの、写真をアーティスティックに加工したり、手描きのイラストを取り入れたりなど、できることの幅が広いことが特徴です。

 

ただ、操作が少々難しいというデメリットがあります。そのため、慣れるまでは練習が必要です。

 

>> Photoshopを使ってみる

 

その③:Illustrator

Illustrator
Illustrator

 

IllustratorもPhotoshopと同じくAdobe製品でして、ロゴやレイアウト作成に向いているソフトです。

 

こちらも有償ソフトですが、クオリティの高いアイキャッチを作りたいならおすすめです。

 

ただ、専門性の高いツールなので、操作が少々難しいため、慣れるまで練習が必要です。

 

>> Illustratorを使ってみる

 

その④:Keynote

Keynote
Keynote

 

Keynote(キーノート)は、Macに元々入っているソフトです。

 

Mac版のPowerPointという認識でOK。windowsでは使用できません。

 

さらにApple Pencilを使えば、手書き風のアイキャッチも作れます。

 

>> Keynoteを使ってみる

 

その⑤:Googleスライド

Googleスライド
Googleスライド

 

Googleスライドは、無料のプレゼン用ソフトです。

 

使用するためにGoogleアカウントの登録が必要です。Web上で編集・保存ができ、パソコン・スマホからもログイン可能。

 

図解を作成する際に使用する人が多い気がします。

 

その⑥:PowerPoint

PowerPoint
PowerPoint

 

PowerPoint(パワーポイント)は、Microsoftが提案しているプレゼン向けのソフトです。

 

資料作成などに用いられることが多い。文字・図形・表などを配置して、スライドを作成できるのが特徴です。

 

PowerPointは通常有料ですが、Web版 Officeだと無料で利用可能です。

 

SNS用のアイキャッチサイズと確認方法

 

SNSでブログがシェアされたときは、アイキャッチも反映されますが、SNSによって表示されるアイキャッチサイズは異なります。

 

特にTwitterの小さい画像の場合は、アイキャッチ内の文字が見切れる可能性があるので注意が必要です。

 

せっかくこだわって作ったアイキャッチが、しっかり反映されていないのはもったいないです。文字が見切れることで、何の記事なのかも伝えられなければ、本末転倒。

 

そのため、各SNSのアイキャッチサイズは把握しておきましょう。

 

SNSサイズ
Twitter
  • (大きい画像)縦600px×横314px
  • (小さい画像)縦144px×横144px
Facebook
  • 縦374px×横195px
LINE
  • 縦630px×横630px

 

とはいえ、画像のサイズを確認するのは面倒なので、以下のツールを使用しましょう。

 

>> アイキャッチサイズのおすすめツール

 

このツールを使用することで、アイキャッチ画像がどんなサイズでどう表示されるのかを確認できます。

 

下記のような、SNSをまとめてチェックできるため、とても便利。

 

  • Twitter
  • Facebook
  • はてなブックマーク

 

ぜひ、活用していきましょう。

 

「Canva」に関するよくある質問

「Canva」に関するよくある質問
「Canva」に関するよくある質問

 

最後に、今回ご紹介した画像作成ツール「Canva」に関するよくある質問にお答えします。

 

Q1:無料版と有料版どっちがいい?

Q2:PC版とスマホ版どっちがいい?

 

Q1:無料版と有料版どっちがいい?

 

無料版と有料版とではどっちがいいですか?
有料版のほうが素材の制限がなく、効率的に作業が進みますが、無料版でも十分クオリティの高い画像が作れます。

 

こちらに関しては、人それぞれお好みでどうぞ。

 

 

Q2:PC版とスマホ版どっちがいい?

 

PC版とスマホ版とではどっちがいいですか?
正直、どちらでもお好きな方で!

 

人それぞれの環境によって使い分けるのがベストだと思います。

 

まとめ:ブログのアイキャッチはCanvaで作成しよう!

ブログのアイキャッチはCanvaで作成しよう
ブログのアイキャッチはCanvaで作成しよう

 

今回は、WordPressブログのアイキャッチ画像の作り方について画像を交えながら解説してきました。

 

アイキャッチの作り方は人それぞれですが、少しでもこの記事が参考にされば幸いです。

 

また、最後にいろんな端末から見え方を確認するのもいいでしょう。せっかくのアイキャッチが端末によっては文字が小さかったケースなどよくあります。

 

特にSNSなど、モバイル端末から利用する人も多いと思いますので、自分の環境だけでなく、見る人の環境を想像して確認して見るといいでしょう。

 

アイキャッチ自体にはメリットが多いので、ぜひCanvaなどを使用して試してみてください。

 

今回は以上です。

 

ブログを始めたい方へ

当ブログでは、副業でブログを始めた方ブログ初心者に分かりやすく丁寧にブログ運営に関する有益な情報やノウハウ、問題の解決策をご紹介しています。

  • ブログをこれから始める人は、以下の記事をぜひご覧ください。

» 超初心者向けブログの始め方【完全ロードマップ】

  • また、初心者向けに10分でできるWordPressブログの立ち上げ方法もご紹介しています。

»【超簡単】たった10分で出来るWordPress(ワードプレス)の始め方

ぜひ、この機会にブログ開設をご検討してみてくださいね。

 

というわけで、

今回は「WordPressブログのアイキャッチ画像の作り方【Canvaの手順】」をまとめてみました。

最後まで記事を読んでいただき、ありがとうございます。