ブログのアイキャッチ画像の作り方【ツールやデザインのコツ】

ブログを始めると記事を書く際にアイキャッチ画像が必要なことに気づきます。

記事にアイキャッチ画像を添付できるテーマが非常に多いためです。

ただ、私のように、デザインが全くできない人も多いはず。ぶっちゃけ、画像作れって言われても「つくれませんけども?」って言いたくなりますよね。

画像を見つけることだって大変ですし、加工となるとさらに大変です。そもそも加工用のソフトを手に入れるところから始めなければなりません。

そういったノンデザイナーな人でも「それなりに」見栄えのいいアイキャッチを作る方法を紹介します。

このページの内容(目次)

ブログのアイキャッチ画像の作成方法

はじめにアイキャッチ画像の作成方法を紹介します。

具体的なツールや、画像の仕様的な部分です。

アイキャッチ画像のサイズは1200×630で作ればOK

OGP画像を別途設定しない場合1200×630
OGP画像を別途設定する場合800×450(16:9)
800×494(黄金比)
800×533(3:2)
800×565(白銀比)
800×600(4:3)
800×800(スクエア)

OGP画像とは、SNS(Twitterなど)で共有されたときに表示される画像のことです。多くのWPテーマでは共通になっています。

アイキャッチ画像は「記事の顔」となります。

ブログはもちろん、ブログでも記事の顔です。

サイズを決める時はブログ外で共有されたときにおかしな表示にならないようにしておきましょう。

OGP画像を別途決める場合はブログの中央カラムのサイズに合わせて決めればOKです。詳しくはブログの画像のサイズの決め方をご覧ください。

なんだかよくわからない、という方は1200×630で作っておけばOKです。

ファイル形式はPNGまたはJPGで作成する

ブログ用の画像のファイル形式は様々ですが、アイキャッチ画像はPNGまたはJPGで作りましょう。

どっちで作ればいいの?と迷ったらJPGにしておくといいです。

もう少し正確に言うなら、「ファイルサイズが小さくなる方」を選びましょう。

  • 写真を使った場合→ JPG
  • 写真は使ってない場合 → PNG

毎回両方作るのは手間がかかるので、上記のように覚えておけばOK。どちらか片方に統一してしまってもファイルサイズの差はそこまで大きくなりません(当サイトの場合は大体PNGです)。

画像のサイズと形式が決まったら作成ツールの選択に入ります。今回はノンデザイナ向けに2つのツールを紹介します。

Canvaのテンプレートを使うのが最も手軽

Canva

アイキャッチやバナー作成と言えばコレ!と言えるのがを使う方法です。

Canvaにはテンプレートが用意されており、あらかじめレイアウトや最低限のデザインが行われたものが揃っているため、要素を入れ替えるだけでアイキャッチ画像が完成します。

STEP
Canvaにログインし、新規デザインを作成する
新規作成

<デザイン作成>→ <カスタムサイズ>→1200×630を入力→<新しいデザインを作成>ボタンを押します。

STEP
テンプレートを選びます
テンプレートを選ぶ

新規作成後は、左側の「テンプレート」欄が開いた状態になります。この中から気に入ったデザイン・レイアウトを選択します。

文字の部分は、後で直接画面上で書き換えることができます。

STEP
テンプレートを選んだら文字部分を書き換えます
テンプレートを選んで書き換えるだけ

テンプレートを選択すると、中央の編集エリアに表示されるので、マウスでポイントすると、編集できるようになります。

文字の部分はまとまり毎単位で打ち換えることができます。フォントも変更可能です。

STEP
ダウンロードする
ダウンロード

出来上がったら右上にあるダウンロードボタンをクリックしてローカルPCに保存してお使いください。

は直感的なインターフェースでほとんど説明不要で手軽に作成できます。

  • レイアウトの決定
  • 画像の選定
  • フォントの選択・調整
  • 配色の設定

を済ませたテンプレートを利用できる上、このテンプレートは非常に多くの数があるので(1000個以上あるんじゃないでしょうか)、困ることも少ないでしょう。

また、テンプレートは全て内容を差し替えることもできるので、別途持っている手持ち画像に差し替えたり、フォントを文字の内容に合わせたものに変えたりすることもできます。

PowerPointで作成する方法

本業をお持ちの方で、日常的によくパワーポイントで資料を作成したりする方も多いと思います。

そういった方であれば、パワポを使ってアイキャッチ画像を作ってしまいましょう。パワポはスライドを画像にエクスポートできますので、慣れたツールを使うのが一番です。

作成にあたり、テンプレートファイルを用意しておくと便利です。

下記で設定するか、こちらからサンプルをダウンロードしてください。

STEP
新しいプレゼンテーションを作成し、サイズ設定をする
スライドサイズの変更

最初にスライドのサイズを変更します。<デザイン>タブ→<ユーザー設定のスライドサイズ>を選択します。

サイズ変更の設定を入力

サイズ設定の変更を入力します。幅のところに「1200px」、高さのところに「630px」と入力してください。フォーカスが変わると自動的に単位がcmに変換されますがそのまま<OK>を押します。

既にある要素を拡大するか聞かれますので<最大化>ボタンを押します(どちらのボタンを押しても構いません)。

STEP
不要なスライドマスタを削除する
スライドマスタを削除する

スライドを追加した際に、デフォルトで入力欄がついたスライドが追加されますが、入力欄は不要なので完全に白紙の状態でスライドが追加されるようにする設定をしておきます。

不要なスライドマスタを削除
この状態になっていたらOK

アイキャッチ画像を作る場合は、このファイルを複製して編集後下記のようにエクスポートをすれば画像としてスライドを保存できます。

画像にエクスポートする方法

作り終わったものは必ずTinyPNGなどで圧縮

作った画像は必ず圧縮しておく

作成し終わった画像はTinyPNGなどで必ず圧縮しておきましょう。ファイルの内容によりますが、50%以下になることが多いため、大幅に通信量を削減することができます。

多くのWordPressテーマではアイキャッチ画像は一覧に並ぶため、一覧の表示速度がかなり早くなります。

アイキャッチ画像の作成内容を決め方【4つの戦略から選ぶ】

アイキャッチ画像の作り方を解説しました。ここからは実際に作る内容について解説します。

アイキャッチ画像はユーザーが見た時に何を認識させるかで作る内容が変わってきます。

戦略1:回遊性を高める

戦略1_回遊を促す
作成内容記事タイトル(の要約)
効果記事一覧部分で何の記事があるのか素早く認識させ、回遊を高める
ブログ形態テーマブログ(複数の特化テーマがある)・雑記ブログでおすすめ

アイキャッチで伝える内容を「記事タイトル」に絞る方法です。

大半のブログはこの方法が取られています。

アーカイブや関連記事のように、記事が列挙されるところで、画像内のタイトル文字だけ「見る」ことで素早く記事の存在を認識させることができ、次に見たい記事に移動しやすくするものです。「読む」から「見る」に変換する役割を持たせます。

戦略2:直帰を回避する

戦略2:直帰を回避する
作成内容記事タイトル+内容の箇条書き
効果ランディングページの内容を素早く認識させ、直帰を回避する
ブログ形態特化ブログでおすすめ

記事タイトルと、記事の内容について短いテキストで箇条書きするようなアイキャッチ画像を作成する方法です。

検索から特化ブログに流入する際に使われるキーワードには商標名が含まれていたり、かなり具体的な検索意図を持ったワードになりがちです。

当然それに対応する記事の内容もかなり具体性が高い内容になってくるので、出来るだけ早いタイミングで記事の内容を伝え、読むかどうかの判断を促すのが目的です。

作成に当たってはポイントが2点あります。

  • 箇条書き部分は「読んだ方がいいかな」と思える内容や、「気になるな」と思わせる内容にして直帰を防げるようにしましょう
  • 文字数が多くなる傾向があるので、フォントの種類や大きさを工夫したり、余白を上手に取るなどして読みやすさを意識して作りましょう。

戦略3:同一カテゴリ内を巡回しやすくする

戦略3:同じカテゴリであることがわかるようにする
作成内容同じカテゴリで、色やレイアウトで見た目に統一性を持たせる
効果興味のある記事がどれなのか一瞬で判断できるようにする
ブログ形態どのブログ形態でもOK

アイキャッチ画像を使って、同じカテゴリであることを一瞬でわからせる方法です。

例えばAというカテゴリは背景色を青系、Bというカテゴリは背景色をグリーン系にするなど、背景色や枠をつけて同一カテゴリ感を出す方法です。

同じカテゴリに所属する複数のページが見られやすいブログテーマだと特に有効です。

戦略4:読み疲れを緩和する

作成内容記事に関係のありそうなイメージ画像のみ(テキストを入れない)
効果サイト全体の統一感を高める・飽きさせないようにする

最後にアイキャッチ画像に文字を入れず、イメージ画像のみにしておく方法です。

ブログ記事で使う画像には、主に解説に使う画像と、読み疲れを回避する画像があります。このうち、読み疲れを緩和するための画像は記事に関連性のあるイメージ画像を用い、文字を入れないようにしますが、アイキャッチ画像でもこの方法を取るスタイルです。

記事の一覧にはそれなりの数のブログ記事が並びます。タイトルの文字だけでも結構な「読書量」になってしまうため、読み疲れは発生します。

見て爽やかに感じる・美しいと感じる画像を選んでイメージ画像のみにすることで、記事タイトルの読み疲れを緩和し、より多くの記事タイトルを見てもらうことで離脱を防いで回遊を促進するのが狙いです。

ただし、この方法を取るには、以下の要件を満たさないといけません。

  • 単体画像で美しいと感じれる画像を選択し続けること(有料画像サービスの契約必須)
  • アイキャッチ画像で記事を読みたくさせることが難しいため、記事タイトルの付け方がかなり秀逸である必要がある
  • 記事内容にあった画像を選択しないといけなくなる

画像の加工時間は削減できるのですが、画像の選択に逆に時間をとられることになります。

個人的にはこの方法はデザインの素人がするには難易度が高いと思っています。

アイキャッチ画像を作る際のコツ

作り方→作成内容の決め方を解説してきました。

最後に、作るにあたって気を付けるべきポイントやコツをドーンと14個紹介します。

記事の内容にあった画像を選ぶ

記事の内容に会った画像をアップする

アイキャッチ画像は記事の顔です。

記事の内容に全く関係のないアイキャッチ画像を選ぶと「単に画像を入れただけ」の状態になってしまいます。

アイキャッチにテキスト装飾だけでなく画像も使う場合は記事の内容に会ったものを使うようにしましょう。

メインの画像は文字を入れやすいものを選ぶ

文字を入れやすい画像を選ぶ

文字を入れることができる余白のあいた画像はアイキャッチ用として使いやすいです。

余白のない画像を使うと、テキストの可読性が減るので、選んだ時点で文字を入れるスペースのある画像があるものをできるだけ選ぶと良いでしょう。

フォントの印象をつかむ

フォントの印象で雰囲気が変わる

フォントはデザインにおいて重要な要素の一つです。フォント選び一つで与える印象もかわってくるので、ターゲットや記事に内容を意識しながら選ぶようにしましょう。

助詞を小さくすると重要箇所を強調できる

助詞のサイズを下げると強調される

アイキャッチ画像に含めるテキストが「文章的」になることは少なくありません。

文章的であればあるほど、重要箇所の強調度は下がります。

この時、「助詞」の文字サイズを1~3段階下げると、重要箇所が浮き彫りになり、重要なところが伝わりやすくなります。

文字は2色か3色にすると強調力が上がる

色を変えると集中度が増す

アイキャッチ画像で使う文字の色数は標準的には2色まで、多くて3色までにしておくと「散らかった感」「どこが重要かわかりにくい感」が少なくなります。

3色の文字色を使うときは反対色にするとつぶし合わない

3色の文字色を使う場合

文字色を3色使う場合は、反対色(補色)を使うと相互につぶし合わずに引き立て合うようになります。

文字レイアウトは等間隔・揃えを機械でする(手でしてはダメ)

「揃え」は手でせず機械で

複数の文字を使う際は、先頭や中心をきちんとそろえるようにしましょう。

これを目視でやると確実にズレてしまうので、整列ツールを使ってピッチリ合わせるようにしておくだけで美しさが変わります。

余白の取り方一つで可読性が変わる

余白の使い方で印象が大きく変わる

強調したいからといって何でも大きくしてしまうのは素人にありがちな失敗です。

余白は余韻のような効果を生むことがあるので、ガツンと大きく主張するだけでなく、スッと引くことで逆に注意力が上がる効果も狙ってみてください(少し高等なテクニックですね)。

文字の埋没を回避する方法

文字の埋没を回避する方法

画像とテキストの両方を使う場合は文字の埋没(可読性)に気を付けてください。

  1. 背景画像をぼかす
  2. テキストに背景色を引いてぼかす
  3. テキストを縁取りする

といった方法があります。

ラインを使うだけで随分印象が変わる

ラインが入るだけでも印象が変わる

アイキャッチの中に1本線を入れるだけでも随分印象が変わるものです。

これは、「安定」や「調和」が画像内に生まれるためです。

四角く囲むとフォーカスされる

囲むとその部分がフォーカスされる

実線で単に四角く囲むだけで、その部分がフォーカスされます。周囲の状態に気を取られずそこに意識を集中させやすい効果を生めます。

ぼかしやグラデーションは下手に使わない方が良い

スマホの普及したあたりから、解像度の違いからそれまで主流であったリッチなデザインは避けられるようになり、シンプルなデザインのページが増えました。

ぼかしやグラデーションはリッチなデザインには不可欠な要素で、現在はバナーなどごく一部でしか使われなくなりました。これらは使い方を失敗すると、ぼやけた印象になったり逆にうるさくなったり、しかねないのでデザインに自信がない場合はあまり多用しないようにするのが吉です。

補足文字を少し入れるだけでもかなり変わる

補足文字を入れると強調できる

タイトルの文字は発信者の立場で作り、補足文字をユーザーの立場で作ると相互に補いあって読んでみたくなるアイキャッチ画像に仕上げることができます。

単色背景もいいけど、背景パターンを入れると「やった感」は出る

背景パターンを使うとやった感が出る

アイキャッチ画像はうまく作ると単色の背景色でも美しさを感じれる&統一感も感じれるようになります。

一方で、美しいと感じれるように作るには、配置が実は難しいのです。そういう時は少しデザインの入った背景画像を使うと、単色背景よりは「やった感」は出ます(笑)

カチリエイトではこの方法を多く使っています。

困ったら薄めの背景+黒か、濃いめ+白にすればそれなりに成り立つ

画像加工やデザインに自信がある人はそうそう多いわけではありません。

アイキャッチ画像の作成にあたって悩むことは本文以上に多いはずです。

デザインは引き算、と言われます。

あれこれ盛り込んでしまうくらいなら、バッサリ抜き去ってシンプルに薄めの背景色と黒テキスト、あるいは濃いめの背景色+白テキストにすると案外それなりに成り立つものです。

【最後に】デザインが苦手な方へ:ノンデザイナーはデザインで勝負しようとせず、役割を果たすことを目指そう

ところで、このサイトのアイキャッチ画像のデザインは美しいと感じましたか?

このサイトの画像はほぼ100%自分で作っているのですが、残念ながら画像が綺麗ですね、という感想をいただいたことは一度もありません(笑)

そんなお前がこの記事で何を偉そうに・・とお叱りを受けてしまうかもしれません。。

ですが、私はデザインに関しては一つだけ強い信念のようなものを持っています。

少なくともそれを伝えられるだけの経験はあると自信をもって答えられます。

それは「デザインは印象ではなく、果たすべき役割の達成度で評価すべき」です。

アイキャッチ画像でいうと、誰もがしたいのは「おしゃれなアイキャッチ画像を作りたい」「美しいデザインのアイキャッチ画像を作れるようになりたい」のはずです。

ただ、デザインに関して言えば「何を美しいと感じるか」は人それぞれです。

長らくウェブデザインの制作現場でディレクションをしてきた経験から、デザインで揉めだすと、決着がつかなくなる、ということが多々ありました。

ところが、「役割」を議論の中心に据え、デザインを評価すると驚くほど簡単に着地する機会が多かったのです。

パーツ単位で「良いデザイン」とは何か、を一つ定義するなら「役割を果たせるデザイン」だと答えます。

ですので「アイキャッチ画像の内容(パーツ)」を考える時も役割(このページでは戦略としましたが)を考え、それを達成できていれば良いアイキャッチ画像になっているはずです。

よいアイキャッチ画像=美しくあるべき、という固定観念を捨てて、役割を果たせていれば良い、テクニックはそのための手段に過ぎないと考えると自信をもって作っていくことができます。

このページの内容(目次)
閉じる