ブログ・SNS

【アイキャッチ画像の作り方】簡単・時短で統一感を出す方法

統一感あるアイキャッチの作り方

ブログを書いているみなさんー!

記事を書き終わって、更新する前。
ブログのアイキャッチ画像のことでこんな悩みはありませんか?

  • アイキャッチ画像の効率いい作り方がわからない
  • 同じようなデザインになってしまう
  • 一覧で見たときに色やテイストがバラバラ
  • ぶっちゃけアイキャッチ画像って必要なの?

 

アイキャッチ画像とは、ブログ記事のトップに設定される画像のこと。
その名の通り「目を惹きつけて」あなたのブログへ誘導してくれる大切な役割があります。

この記事では、当ブログでアイキャッチ画像を作るときに心がけている「統一感のあるアイキャッチ画像を作る方法」をお伝えしていきます。

マリエ
マリエ
今回は、オンラインサロン「さよみみ部屋」
メンバーの方のみにお伝えした内容を編集して
特別にお届けします!

 

こんな方にオススメ
  • 手間をかけないアイキャッチ画像の作り方が知りたい
  • デザインに毎回悩みたくない
  • 見る人を飽きさせたくない
  • また訪問したくなるようなきれいなブログにしたい
  • 自分のブログらしさを出せるアイキャッチ画像にしたい

この記事では、無料で使用できるデザインツール「Canva」を使ってアイキャッチの作り方を説明していきます。
オンラインやアプリで手軽に利用できるのでオススメです。

まだ使用したことのない方は、ぜひ登録して使ってみてくださいね。

アイキャッチ画像にお悩みの方はこちらもどうぞ!

アイキャッチ制作・料金
アイキャッチ制作・サービス料金表「マリエノート」では、アイキャッチ画像を中心としたデザインやサービスのご依頼を承っております。 このページでは、現在受付中のメニュ...

アイキャッチ画像の作り方を工夫すれば、SEO効果も!?

ブログで一番大切なのは、もちろん書かれている内容です。
ですが、どんなに有益な記事を書いても読まれなければ意味がありません。

そこで役に立ってくれるのがアイキャッチ画像です!
優れたアイキャッチ画像にはこんな効果が期待できます。

  • SNSや画像検索からの流入が増える
  • 直帰率が下がる
  • 滞在時間の増加

マリエ
マリエ
つまり、アイキャッチ画像にはSEO効果もあるということですね!?

SNSや検索からの流入が増える

twitterでは、URLを投稿すると自動的にアイキャッチ画像が表示されます。

たくさんのツイートの中で埋もれないためにも、ぱっと目につくアイキャッチ画像がかなり重要です。

例えば、twitterではアイキャッチ画像のあるなしでこんなに印象が違います。

アイキャッチ画像がない場合

アイキャッチ画像がある場合

ちなみにtwitterで表示される画像(twitterカード)には、「小さめ」と「大きめ」の2パターンがあります。

目にとまりやすい「大きめ」のスタイルがおすすめです。
各ワードプレステーマのマニュアル等で設定を確認してみてください。

JINの場合はこちら
OGP設定(SNSに関する設定)について
(JIN マニュアル)

また、検索で調べものをしていて、なかなか思った情報が見当たらないとき。
画像検索から、目的に合うサイトを見つけた経験はありませんか?

画像検索からアイキャッチ画像を見て「自分の知りたい情報があるかも」とブログを訪れてくれる人がいるかもしれません。

マリエ
マリエ
そんなときも、一目で内容のわかる魅力的なアイキャッチ画像が有利です。

直帰率が下がる・滞在時間が増える

検索からブログを訪問したときに表示されるもの検索からブログを開いた人が、最初に見る画面はこんな感じ。

 

検索からブログにたどりついたとき、読者が一番最初に目にするもの。
それがアイキャッチ画像です。

画像を見て「自分の知りたい情報が得られそうだ」と思えばこのまま読み進めてもらえます。
一方、そうでない場合は離脱につながってしまいます。

必ず伝えたい内容に合ったアイキャッチ画像を用意しましょう。

そして、目的の記事を読んだあとも、関連記事や人気記事を読んでくれる可能性があります。

マリエ
マリエ
サイトの回遊率が上がり、滞在時間が長くなるようなアイキャッチ画像を増やしていきたいですね。

 

アイキャッチ画像とSEO効果についてもっと知りたい方は、こちらのブログもおすすめです。

それでは次から、アイキャッチ画像の作り方を説明していきます!

 

統一感のあるアイキャッチ画像の作り方

時間をかけずに統一感のあるアイキャッチ画像を作るには、「自分の中でルールを決めておく」ということが大切です。

ルールを決めておくべきものはこの3つ。

  1. フォント
  2. テンプレート

順に説明していきたいと思います。

1.ブログに合ったフォントを決めよう

アイキャッチ画像に適したフォントは、サムネイル等で縮小されたときにも見やすい、やや太めのフォントです。

自分のブログの雰囲気に合ったフォントを決めておきましょう。
私はこの3種類を決めておいて定番にしています。

  1. メインタイトル用フォント(大きめの文字)
  2. サブタイトル用フォント(小さめの文字)
  3. 英数字用フォント

マリエ
マリエ
Canvaではおしゃれなフォントが
無料で使用できますよ
このブログでの例
当ブログで使用しているフォント

例えば、このブログで使用しているフォントはこんな感じです。

  1. Rounded M+ Heavy (メインタイトル用フォント)
  2. Rounded M+ Black(サブタイトル用フォント)
  3. Chonburi(英数字用フォント)

Canvaで使える、アイキャッチ画像にオススメのフォントも紹介しておきます!
ブログのジャンルやテイストによって参考にしてみてくださいね。

かわいい系ブログに
アイキャッチにおすすめの柔らかいフォント・優しいフォント

女性らしい柔らかさと優しさのある丸ゴシック系。
ママブログや女性むけブログにおすすめです。

  • Rounded Mシリーズ
  • にくまる
  • 源柔ゴシック
  • コーポレート・ロゴ丸 など

 

おしゃれなブログに
アイキャッチにおすすめのキレイなフォント・繊細なフォント

美容系ブログなどにオススメの都会的な洗練されたイメージのフォント。
ちょっと線が細いので、色や配置に工夫してみてくださいね。

  • 源暎ラテミン
  • ロゴたいぷゴシック
  • しねきゃぷしょん
  • あおぞら明朝 など

 

元気なブログに
アイキャッチにおすすめの元気なフォント・ポップなフォント

元気でポップなフォントは親しみやすい雰囲気づくりにピッタリ。
特徴的なフォントが続くと疲れるので、サブタイトルには読みやすいフォントを組み合わせて。

  • けいふぉんと
  • じゆうちょうフォント
  • ニコモジ など

 

かっこいい系ブログに
アイキャッチにおすすめの真面目なかっこいいフォント

かっちりとした雰囲気を出してくれるゴシック系。
太いゴシックは力強いイメージ。シンプルにするなら細めのゴシックも◎

  • Saurce Han Sans JPシリーズ
  • Noto Sans シリーズ
  • コーポレート・ロゴ
  • M+シリーズ

 

番外編・こんなフォントはいやだ
アイキャッチに適さないフォント

アイキャッチ画像にオススメしたくないフォントもあります。
エクセルやパワーポイントなどを使用して作っている方はご注意!

  • 創英角ポップ体
    親しみやすいフォントですが、一気に公民館のイベント感が出ます。
    そして謎のレインボーと謎の影は本当に避けて。全力で逃げて。
  • MSゴシック など
    何の変哲もない、一時期前のWindows標準のゴシック体。
    長い文章を読むには良いですが、デザインには不向きなフォントです。

マリエ
マリエ
自分のブログに合ったフォントを考えてみてくださいね!

2.よく使う色を決めて「ブランドキット」に設定しよう

フォントの次に決めてほしいのが、「よく使う色」です。

アイキャッチに取り入れる色を決めておくことで

  • デザインの違うアイキャッチ画像どうしでも色味の統一感が出る
  • ブログに合うアイキャッチ画像が作りやすくなる

などのメリットがあります。

よく使う色として、決めておくと便利なのがこちらの色です。

  • 文字色
  • メインカラー(ブログでよく使う色)
  • アクセントカラー(ブログでアクセントとして使う色)
  • 背景色

 

文字色の選び方

アイキャッチ画像に使う文字の色は、淡い背景に対して読みやすい
黒・ダークグレー・紺色・こげ茶などがオススメ。

黒は重たい印象を与えるので、真っ黒よりは少しグレーがかっているほうがマイルドな印象になります。

メインカラー・アクセントカラーの選び方

ブログで使っている色をアイキャッチ画像にも取り入れると、ブログ全体がまとまります。
ブログでどんな色を使っているかは、WordPressの管理画面から確認しましょう。

JINの場合は外観→カスタマイズ→カラー設定から確認できます。

ブログで使用している色の調べ方WordPressの管理画面

マリエ
マリエ
ブログに合いそうな色を新たに選んでもOK!
難しければブログとおそろいの色で。

アイキャッチ画像で使いたい色が決まったら、Canvaの「ブランドキット」という機能を使うと便利です。
Web版Canvaから使用できる機能です)

「ブランドキット」は、ロゴ・フォント・カラーパレットなどが保存できる有料機能ですが、3色までなら無料で使用できます。

ブランドキットの設定の仕方
Canvaブランドキットの説明

このようにブランドカラー3色を設定しておきます。
そうすると、作業画面のカラーパレットに常にこの3色が表示されます。

 

Canvaでブランドカラーの表示

ブランドカラーがすぐに取り出せるので便利!

デザインの違うアイキャッチ画像でも、共通の色を使用することで統一感が出やすくなりますよ。

マリエ
マリエ
意外と知られていない便利機能。
ブログに合う色が見つかったら
「ブランドキット」使ってみてね!

3.よく使うテンプレートを決めよう

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

実は、このブログで使用しているテンプレートはたった5種ほど。
配置を変えたりするアレンジだけで使いまわしています。

テンプレート使いまわし例
Canvaテンプレートのアレンジ例
  • ①丸い半透明にタイトルを乗せる
    →丸の位置や角度を変えてアレンジ
  • ②長方形の半透明にタイトルを入れる
    →長方形の位置や色を変えてアレンジ
  • ③画面を区切ってタイトルを入れる
    →区切る位置を変えてアレンジ
Canvaテンプレートのアレンジ例2
  • ④写真の余白に文字を入れる
    →写真と文字の位置を変えてアレンジ
  • ⑤プレゼンテーションテンプレートを使う
    →数種のパターンから、用途に合わせてアレンジ

毎回違うテンプレートを使用している方や、毎回同じテンプレートを使用している方もいると思いますが、「数種類のテンプレートを使いまわす」ことには、こんなメリットがあります。

テンプレート使いまわしのメリット
  • 毎回新しいテンプレートを選ぶ手間と時間が省ける
  • 毎回全く同じではないので飽きにくい
  • 雰囲気の似たテンプレートを繰り返すことで
    ブログのテイストや統一感が出てくる

でも、いきなり使い勝手のいいテンプレートを選ぶのは難しそう…?

そんなときは、Canvaの「プレゼンテーション用テンプレート」を使うのがオススメです!(上の表の⑤のパターン)

次は、プレゼンテーション用テンプレートを使ったアイキャッチ画像の作り方を具体的に説明していきます。

アイキャッチ画像の作り方を実際に説明します

プレゼンテーション用テンプレートは、その名のとおりプレゼン資料などを作るためのテンプレートです。

テーマに沿ってコーディネートされたデザインがセットになっているので、初心者でも簡単に統一感を出すことができます。

自分のブログに合ったテンプレートを見つけて、アイキャッチ画像にアレンジしてみましょう。

プレゼンテーション用テンプレートでアイキャッチ画像を作ろう

サイズを指定しよう
Canvaでカスタムサイズを指定

Canvaのホーム画面から、右上の「カスタムサイズ」を選択します。
自分のブログに合うアイキャッチ画像のサイズを指定。

「新しいデザインを作成」ボタンを押します。

JINの場合は横760px:縦428pxが最適です。

アイキャッチ画像の大きさはどれくらいが最適?
(JIN マニュアル)

プレゼンテーションを検索

Canvaのプレゼンテーションテンプレート
デザイン作成画面でテンプレートを選択し、「プレゼンテーション」と検索します。

マウスを置くと「1/10」とか「1/25」のように、ページ数が表示されるのが、プレゼンテーションテンプレートの特徴。

クリックすると一覧を見ることができます。

テンプレートを選ぶ
Canvaのプレゼンテーションテンプレート例

今回はこんなテンプレートを選んでみました。
アイキャッチ画像に適したテンプレートを選ぶときのポイントはこちら。

  • 写真が大きく表示できるもの
  • なるべくシンプルなもの
  • バリエーション豊富なもの
    (全体写真用・複数写真用など)

写真の差し替え、色の変更も可能。
有料のテンプレートも、Canvaマークのついた画像を差し替えれば無料で使用できます。

写真や文字を入れ替える
Canvaでアイキャッチの作り方

写真を入れ替えて、タイトルを入れたところです。
もともとプレゼンテーション用のテンプレートなので、アイキャッチ画像に適した文字の大きさに変更します。

(※どんなパターンのテンプレートでもいけるよ!という例で、今回は2種のアイキャッチ画像を同時に作っています)

フォント・色をブログに合わせる
Canvaでアイキャッチの作り方

ここで、最初に決めたフォントと、ブランドキットに登録した色に変更しました。
これでブログに合うテイストのアイキャッチ画像の完成です。

ダウンロードする
Canvaでアイキャッチのダウンロード方法

ダウンロードは、右上の下矢印のアイコンからできます。

ファイルの種類は「PNG」がオススメ。
「すべてのページ」を選択するとzipファイルでまとめてダウンロード。
指定したページを1枚だけダウンロードすることもできます。

マリエ
マリエ
こんな感じで、プレゼンテーション用テンプレートを使えば、お揃いのアイキャッチ画像を作ることができます!

 アイキャッチ画像の作り方で覚えておくと便利

新しくアイキャッチ画像を作るときに時短にするには、「コピー」して作ること!

ホーム画面から、前回作ったアイキャッチ画像の作成画面を開き、
「ページをコピー」または「新しいページを追加」で、ページを増やします。

最近作ったアイキャッチ画像からコピペできるので、

「あれ、前回何のフォント使ったっけ…」
「文字の大きさ、どれくらいだっけ…」
と、ならなくてすみます!

マリエ
マリエ
アレンジして作るときも
別のテンプレートを使うときも
コピーから作ると便利です。
※Canvaの動作が重くなる場合があるので、
1つのファイルに10ページ程度までがオススメです。

アイキャッチ画像の作り方が難しい!というときは

統一感あるアイキャッチ画像の作り方、いかがでしたか?
twitterでも、アイキャッチ画像の話題やCanvaの使い方についてツイートしています。

ぜひフォローしてくださいね

大川マリエ(@marie_okawa )

「やっぱり自分では作るのは難しい」
「自分のブログに合ったアイキャッチ画像がわからないという方」へ!

アイキャッチ画像にまつわるサービスを、ご用意しています。

  • [ターゲットに届く]アイキャッチ画像製作
  • [読みたくなる]有料ノート用アイキャッチ画像製作
  • [あなたのブログ専用]オリジナルアイキャッチテンプレート
  • [こうすれば良くなる]アイキャッチ&ブログデザインアドバイス
  • [丸ごとおまかせ!]ブログトータルコーディネート など

サンプルや料金などくわしくはこちらのページをご覧ください。
お問合せ・ご質問等も受け付けております!

アイキャッチ制作・料金
アイキャッチ制作・サービス料金表「マリエノート」では、アイキャッチ画像を中心としたデザインやサービスのご依頼を承っております。 このページでは、現在受付中のメニュ...
ABOUT ME
大川 マリエ
大川 マリエ
2歳と4歳の男の子の母です。 元ミュージカル俳優。出産後は在宅での広報の仕事を経て、独立してフリーランスになりました。 子育てと趣味(観劇とハンドメイド)の話題などをお届けしていきます。 詳しく見る