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

みなさんはブログのアイキャッチはどう作っていますか?

前回は知識編ということで、アイキャッチを作る上でのテクニックを簡単に説明しましたが、今回は実践編になります。

実践編では私がアイキャッチを作る工程と気を付けいていることを簡単に紹介していきます。

前回の知識編を見ていない方はコチラから。

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

タイトルのキーワードからイメージを選定

まずはブログの「タイトル」にある「キーワード」からイメージ画像を選びます。

例えば以前のブログのタイトルであれば下記のような感じ

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

  • 初心者 … 人
  • ブログ … ブログ
  • アイキャッチ … 絵 / 写真 / 目
  • 作り方 … ペン / 筆 / パレット
  • 知識 … 本 / 大学帽 / 鉛筆

イメージはあなたの想像でかまいません。

次にイメージを元に画像を選んでいきます。

私は下記サイトを多く利用しています。

ICOOON MONO

FLAT ICON DESIGN


POINT
アイコンは下記違いがあるので、
「 縁のあるアイコン 」
「 縁のないアイコン 」
同じ雰囲気のモノを選ぶとまとまるのでオススメです。

構成と配色

伝えたい内容でイメージを絞る

イメージをDLしたら次に組み合わせを考えていきす。

前回の知識編でも記載しましたが、イラストの場合は構成要素は少ないほうが良いので、更に選別していきましょう。

前回は「アイキャッチの作り方」を伝えたかったので「絵」「筆とパレット」を選択しました。

イメージを配色

イメージが揃ったら配色をしていきます。
※モノクロのままでも可

この時に縁の有無で構成もかわるので、構成を少し考えながらやると良いと思います。

縁の有無について

  • 縁あり
    境界がはっきりするので、イメージが重なるとごちゃつくが、単体でも存在感がでる

  • 縁なし
    境界がない分、単体のインパクトは薄いが、まとまったフラットな仕上げになる

配置・構成(文字入)を考える

次に配置を考えていきます。

イメージ同士を組み合わせて1つのイメージにして配置するもよし、1つ1つを配置するもよし、構成と配置については前回の知識編を参考にしてみてください。

POINT
配置したら、離れて見てみましょう。

離れて見ることで、全体のバランスを確認します。
また「自分の伝えたい内容が表現できているかな?」という視点も持っておくと良いでしょう。

前回のアイキャッチの場合、絵を書いている用にしか見えなかったので、「文字」を入れて補足させました。

サイズの確認

最後にサイズの確認をしましょう。
※サイトのテーマにもよる違いはあるかもしれません。

アイキャッチが表示される場所は、記事のトップトップページの記事一覧かと思います。

記事のトップは画像全体が表示されますが、トップページの記事一覧ではアイキャッチの一部しか表示されません。

表示サイズが違うのがわかりますでしょうか?

記事一覧で見切れてしまうと、見栄えが悪いので、記事一覧での表示サイズを加味してサイズを調整しましょう。

記事一覧の表示サイズの確認方法

Chromeで「 F12 」のキーを押すと上記画像のような開発者用の表示に変わります。
画像の上部にある①のボタンを押すことで、HPの要素の情報を表示できるようになるので、画像一覧にカーソルをあわせると画像のサイズが表示されます。(②)

ご自身のサイトの表示サイズに合わせて調整をしてみてください。

作成ツール

最後にアイキャッチの作成ツールを4つご紹介します。

Photoshop

有料:980円/月(フォトプラン)
(7日間無料体験あり)

Adobe社が提供しており「写真」や画像編集では一番有名なソフトです。

DLページへ

Illustrator

有料:2,480円/月(単体プラン)
(7日間無料体験あり)

Adobe社が提供しており、「ロゴ」「アイコン」などのベクター画像の作成では一番有名なソフトになります。

DLページへ

InkScape

無料

オープンソースで開発されている無料の画像編集ソフトになります。Illustraと同じベクター画像の作成が行えます。

DLページへ

Canva

基本無料 / 有料プラン:約1,400円
(30日間無料体験あり)

PC、タブレット、スマホでグラフィック作品を作成できるWEBサービスになります。テンプレートや素材もCanva内で探すことができます(有料プランに変更で利用可能素材の数アップ)自身で素材を上げることも可能。

DLページへ


今回は実践編ということで、実際のアイキャッチの作成工程を紹介しましたが、いかがだったでしょうか?

アイキャッチってこう作ればいいんだというのが、少しでもわかったり、参考になったのであれば幸いです。

ツールにおいても、まずは無料のものから試して自分にあったモノを探してみるのもいいと思います。

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