時短をかなえる!ブログのアイキャッチ画像の作り方【22枚の画像を使って解説】

ブログのデザイン
  • ブログのアイキャッチ画像を作るのがめんどくさい
  • 記事を書くのに時間がかかるからアイキャッチまで手間をかけたくない
  • あれこれデザインしたわりにダサイ…

そういった人に向けて時短をかなえるブログアイキャッチ画像の作り方を解説します。

これまでブログを100記事以上更新してきたので、アイキャッチ画像の作り方のコツもわかってきました。

「これからアイキャッチ画像もしっかり作ってブログの更新がんばるぞ!」と思っている方は、記事を読み終わるとまず何から始めればいいかわかりますよ。

時短をかなえる!ブログのアイキャッチ画像の作り方【22枚の画像を使って解説】

作り方の手順はこの通りです。

  1. 編集ソフトのテンプレートを利用する
  2. 配色を統一する
  3. イラスト素材を置く
  4. フォントと色を変更

ひとつずつみていきましょう。

1.編集ソフトのテンプレートを利用する

無料の編集ソフトのテンプレートを使います。

大して手を加えなくても最初からしっかりデザインされていて、文字を変えるだけでほぼOKだからです。

今回は初心者にも使いやすいCanvaを例に解説します。

※グーグルアカウントがあればログインするだけで使えます。

①画像サイズを決める

最適なサイズは使ってるワードプレスのテーマによって違います。

なるべく横1000ピクセル以上がおすすめです。
(1000×525、1200×630など)

②テンプレートを選ぶ

テンプレートの種類をざっくり2つに分けました。
どうしても使いたい画像がある!というわけでなければ、①画像なしをおすすめします。
毎回画像を変えるとブログの見た目に統一感がでづらいからです。

今回は①画像なしパターンを例にします。
左側にあるテンプレートタブから気に入ったテンプレートをクリックします。

選ぶ際の基準は

  • シンプルなデザイン
  • 色数が少ない(2~3色)
  • 中心に文字が書ける
  • イラスト素材を置く場所がある

こんな感じのテンプレートがいいと思います。

※上下左右に飾りのついたテンプレートの場合、アップした後に見切れてしまうことがあるので、少し拡大するか中心に寄せておきましょう。
(左クリックでドラッグできます)

2.配色を統一する

使うテンプレートが決まったら配色ルールどおりのカラーに変えます。
毎回決まった色にすればブログの見た目が統一されてキレイになります。

配色の決め方

配色パターンが掲載されているサイトを参考にします。
例えばデザインで有名なサルワカさんの配色ルールです。

選ぶ際のポイントはフォントに使える濃いめの色が1色入ってるパターンがいいですね。
今回はこの配色パターンを使います。
使う色は配色パターンのうち2~3色にとどめておきましょう。

カラ―ナンバー(先ほどの画像に記載の#Fから始まる番号)を入力して色を変更します。

いらない素材があれば左クリック→削除できます。

3.イラスト素材を置く

イラスト素材を配置するとクリエイティブな雰囲気がでるのでおすすめです。

例えばこの記事である「ブログのアイキャッチ画像の作り方」のアイキャッチの場合は、パソコンや作業中の人のイラストなんかいいと思います。
この辺はお好みですが。

イラスト素材のカラ―もさきほどの配色パターンに従って可能なかぎり変更します。

4.フォントと色を変更

テキストを入力します。
なるべくタイトルとは違った単語を入れるとクリック率が上がる傾向があります。

①フォントの種類

ここでも毎回使うフォントの種類を決めておきます。
決まったフォントを使えば毎回選ぶ手間が省けるからです。

基準は見やすい形のフォントです。
明朝体は細めであまりおすすめしません。

②フォントの色を選ぶ

さきほどの配色パターンから一番濃い色をテキストに使います。

ブラックを使うと強すぎるので少し薄めの色がいいですね。

  • グレー
  • 茶色

ポイント:テキストによってサイズやフォントの種類を変える

その方がバランスがよくなります。

アイキャッチ画像がダサくなる原因

自己流でアイキャッチ画像を作ると、こんな原因でダサくなることが多かったです。

  • 好きな色を使ってる
  • 文字のサイズが全部同じ
  • 使ってる画像の質が悪い

好きな色を使ってる

好きな色を適当に使うのはやめておきましょう。
配色ルールに従った方がずっとキレイです。

特に原色(赤や青)を適当に使っちゃうとダサいです。

配色ルールに従った方キレイですよね。

文字のサイズが全部同じ

テキストによって文字のサイズを変えてみましょう。
ずっとバランスが良くなります。

全部同じ大きさのフォントだとバランスが悪くてなんかダサイですよね。

使ってる画像の質が悪い

もし画像を使うのであれば高画質で「何の写真かはっきりわかるもの」を使いましょう。
なければフリー素材でキレイな画質の写真を使います。

●画質が悪い
●イマイチ何の写真かわからない

だと一気にダサくなりがちです。

これとかパッと見て何の記事なのかわからないですよね。

まとめ

手順のおさらいです。

  1. 編集ソフトのテンプレートを利用する
  2. 配色を統一する
  3. イラスト素材を置く
  4. フォントと色を変更

自己流よりまずはとにかくマネすることが大事です。
元々のテンプレートだったり、キレイなアイキャッチを使ってるサイトだったり。

とは言っても「作るのがめんどくさい」「簡単にオシャレな感じにしたい」という人がいましたら、私がデザインさせていただきます。

ココナラからお申し付けください。
ブログのオシャレなアイキャッチ/ヘッダーを作ります かわいい画像でクリック率を上げる!
こんな感じのデザインが得意です。

今回はここまでです。