検索順位チェックならNobilista詳しくはこちらの記事へ

【#02 アイキャッチ講座】くすみカラーで優しいテンプレート

当ページのリンクには広告が含まれています。

アイキャッチアドバイス企画の2人目は
ちいさん」です。

ちい

よろしくお願いします。
楽しみです!

ちいさんが運営しているブログ
Sta Mama Blog(スタママブログ)」では、子育て・生活・お金のことなど、ちいさんの経験をもとに発信されています。

うたまる

実体験をもとに書かれているってすごく参考になりますよね!

それでは、アイキャッチの添削をしていきましょう!

【この記事の著者】 うたまる
  • フリーランスブロガー
  • ブログとHP制作で収益6桁達成
  • 色彩に15年以上関わってます
  • アイキャッチの作成が好き
  •  Twitterはこちら
うたまるです

当ブログではCanvaで画像を作成しています。

Canva(キャンバ)は無料で利用できる優秀な画像編集ツールです。

有料版にアップデートすると、豊富な素材や画像サイズの変更、背景の透過など、編集の効率が格段に上がります。

\30日間無料でお試し/

30日以内に解約すれば追加課金なし

アイキャッチの作り方については、こちらの記事に詳しくまとめています。

目次

ちいさんのアイキャッチの改善点の確認

今回アドバイスするアイキャッチはこちらの画像です。

うたまる

印象としては、商品の写真や商品ロゴが入っているからわかりやすい!だけど、ちょっと文字が多いかな〜と感じました。

ちい

実はタイトルをそのまま書き出してて、
収まらないなぁってときがかなりありました。

うたまる

そうなんですね。
あとは、余白があるともっと伝えたいことが強調されますよ。

ちい

余白のバランスが大事なんですね!

うたまる

そうそう、余白があるだけでもかなり改善されると思います!

ちいさんのアイキャッチの改善点

ちいさんのアイキャッチ改善点は2つあります。

  1. 文字数を減らす
  2. 余白を作る
うたまる

次は、ちいさんのお悩みを聞いていきましょう!

ちいさんのアイキャッチ|お悩みカウンセリング

うたまる

アイキャッチを作るときに、どんなところで悩んでいますか?

ちい

文字と写真のバランスとか、色合いにいつも悩んでしまいます。

うたまる

さっき言ってた文字数が収まらないっていうところですね。
色合いはどんな感じが好みなんですか?

ちい

色で言えば、くすみカラーとか使いたいです!

うたまる

くすみ系のカラーかわいいですもんね!
他にはどんな雰囲気のアイキャッチを作りたいとかはありますか?

ちい

できれば似たようなパターンで作って、トップページに統一感が出るようにしたいですね。

うたまる

ちいさんのブログのトップページを見ると、カテゴリー別にテーマカラーがあったので、デザインは同じ雰囲気で色違いのテンプレを作ると統一感が出せますね!

ちい

あっ確かにそれ良さそう!

テンプレートの作成についてはこちらの記事も参考にしてください。

ちいさんのアイキャッチ|改善案

ちいさんにお話を聞いた内容をまとめると、

  1. 文字と写真のバランスを良くしたい
  2. くすみカラーを使いたい
  3. テンプレートを作りたい

以上の悩みや要望がありました。

現在のアイキャッチの改善点として、

  1. 文字数を減らす
  2. 余白を作る

これらを踏まえてアイキャッチを考えていきましょう。

文字と写真のバランスを良くしたい|6:4のバランスで配置を意識する

アイキャッチの場合は、細かく文字を読んでもらえません。

ですので、アイキャッチの方向性を決めておく方がおすすめです。

  • 写真を目立たせる
  • 文字を目立たせる
うたまる

どちらを優先するのかを考えて配置やバランスを決めていきましょう。

ちい

なるほど!
両方しっかり目立つように作ってました!

うたまる

定番のバランスで言えば6:4の比率がおすすめですよ!

ちい

あまり意識したことがなかったです!

うたまる

より目立たせたい内容を6の比率の方に入れるとOKです。

6:4のバランスを利用したアイキャッチの作成については、こちらの記事も参考にしてください。

余白を意識する

余白がないと詰まった印象になってしまいます。

うたまる

例えば、ちいさんのアイキャッチを見てみると、文字と文字の間が詰まっていたり、画像の端まで文字が入っていますよね?

ちい

確かに!
言われてみれば隙間がないですね。

うたまる

余白や隙間を作るってすごく大切なことなので、覚えておいてくださいね。

余白の大切さについては、こちらの記事も参考になります。

アイキャッチの作成案

ちいさんの希望する内容と、改善点を考えてアイキャッチを作成してみました。

うたまる

こんな感じはどうですか?

アイキャッチ作成案

\クリックで切り替えられます/

ちい

イメージまで作ってくれたんですね!
めちゃくちゃかわいくて好みです!

うたまる

良かったです!くすみカラーをベースに、カテゴリー別に色分けしやすいように作ってみました。

ちい

余白があるとすごく読みやすいですね!
文字のサイズってどのくらいがいいんですか?

うたまる

文字のサイズはデザインによって変わるけど、強調したい文字は60以上を意識して作ってますよ。

ちい

なるほどー!すごく参考になりました!
頑張って作ってみます!

うたまる

わからなれけばまた聞いてくださいね!

アイキャッチ添削後のちいさんのアイキャッチ

ちい

今回のアドバイスを参考に作ってみたんですけど、うたまるさんのデザインに引っ張られてしまいます…笑

ちいさん作のアイキャッチ

うたまる

僕が作ったのよりかわいくないですか?
強いて言うなら1枚目の画像の「に!」を少し左に寄せると良いですよ。

ちい

さっそく修正してみます!
ただ、このデザインってうたまるさんのパクリっぽいからやめた方がいいのかなぁって思ってるんですけど…

うたまる

いえいえ、ぜひ使ってください!

ちい

ありがとうございます!
なんだかやる気出てきました!

以上でちいさんのアイキャッチ添削は終了しました。

今回の添削ポイント
  • 6:4のバランスで分ける
  • 文字のサイズを調整
  • 余白を作る
  • くすみカラーで柔らかさを出す
  • テンプレートの作成
うたまる

上記を意識して作成してみてください!

当ブログではCanvaで画像を作成しています。

Canva(キャンバ)は無料で利用できる優秀な画像編集ツールです。

有料版にアップデートすると、豊富な素材や画像サイズの変更、背景の透過など、編集の効率が格段に上がります。

\30日間無料でお試し/

30日以内に解約すれば追加課金なし

ブログに関する悩みは、ブログ仲間と一緒に解決するのが最適です。

みんなでレベルアップできるコミュニティ「BLOCO -ブロコ-」を運営しています。

気になる方はBLOCOについてのページを読んでみてくださいね!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次