【初心者向け】ブログのアイキャッチの作り方(知識編)

みなさまはブログを見る時に何でもって、そのリンクを押していると思いますか?

無意識だとは思いますが、「タイトル」「アイキャッチ」で選別しているのではないでしょうか?

今回はその中でも「アイキャッチ」について、僕なりの作り方(気を付けているところ)をご紹介したいと思います。

アイキャッチの種類とテクニック

アイキャッチにも2種類のパターンがあります。
自分のブログの雰囲気に合わせて使い分けましょう。

  • 写真 : きれい、クール
  • イラスト : 可愛い、親しみやすさ

※組み合わせる方法もありますが、ごちゃっとするので、オススメはしません。

写真を使う

写真を使う場合は、シンプルに「写真」「文字」の構成だけでおしゃれに見えます。
私は写真を使うパターンをあまり使いませんが、参考程度によく使われるテクニックを記載しておきます。

背景を暗くする

背景を暗くして、文字を浮き出させる手法になります。せっかくの写真が活きない場合もあるので、文字でインパクトを出したい時には良いかもしれません。

文字の縁をはっきりさせる

文字がぼやけて視認性が悪い場合は、文字に縁取りを行うとはっきりします。
縁に使う色は薄い色よりは、明るい色または濃い色にしましょう。

文字の後ろを塗りつぶす

コチラも縁取りと同じように視認性が悪い場合に文字の周りを塗ることで読みやすくなります。縁取りよりも面積を使い、写真が活きない可能性があるので、写真の見せたい部分から外した位置に文字をおきましょう。

イラストを使う

イラストを使う場合は、やりすぎるとチープになってしまいがちなので、構成要素は少なくしたほうが良いです。多くてもイラストは3つまでに絞りましょう。

イラストだけで表現

一番シンプルなのは、イラストだけで表現する方法です。記事のことを1言で表した、イラストを配置しましょう。最初は寂しいかもしれませんが、蛇足になりかねないので、我慢しましょう。

イラストと文字で表現

イラストだけでは流石に表現しきれない場合は、文字を入れてイラストの補助をしてもOKです。(補助の場合は文字は控えめにしましょう。)または「無料」などの強調したい文字があった場合も入れても良いです。(強調したいので、イラストより目立ってもOK。)

レイアウトと配色(イラスト)

レイアウトについて

次に見せるのは私がよく使うレイアウトのパターンになります。構成要素の数で配置を分けています。

次に文字の配置になります。構成要素は1つの場合で作っていますが、位置は基本は上か下にしか配置しません。文字を被せるとゴチャつくことが多いためオススメしません。どうしても配置がない場合または、文字を目立たせたい場合に使いましょう。

配色について(文字色)

配色について抑えるべきポイントは文字色です。

文字色は背景の同系色または、反対色を選ぶと全体的にまとまりがでます

同系色は同じ系統で濃さが違う色をさします。反対色は差し色とも呼ばれ、色相環の反対に位置する色をさします。

ちなみに色相環はこんなやつです。


今回は、アイキャッチを作る上でのテクニック的なところを中心に説明しましたが、いかがだったでしょうか?

この知識を踏まえ、次の記事では具体的な作成についてご紹介するつもりです。
そちらも楽しみにしていただけると嬉しいです。

それでは、また次の記事でお会いしましょう。