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

【#10 アイキャッチ講座】写真の構図と色味が重要|テキストを読みやすくする方法

当ページのリンクには広告が含まれています。
アイキャッチ添削-ごんぼさん

アイキャッチアドバイス企画の10人目は
ごんぼさん」です。

ごんぼ

スタイリッシュなアイキャッチにしたいです!

ごんぼさんが運営するブログ「ごぼう茶生活」では、その名の通りごぼう茶に特化したブログです。

うたまる

私自身はごぼう茶を飲んだことがありませんが、そんな私にもわかりやすいような解説をされています。

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

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

目次

ごんぼさんアイキャッチの確認

今回は2つのアイキャッチを見させていただきました。

ごんぼさんのアイキャッチ①
ごんぼさんのアイキャッチ②
うたまる

まず①の画像の感想は、せっかくの商品が隠れているのがもったいないなと感じました。あと、商品の良さがわかるとさらに良くなると思いますよ。

ごんぼ

確かに文字に隠れてしまっていますね。商品の良さが伝わる内容を入れるんですね!

うたまる

商品レビューの場合は、写真を活かせる構図で写真を撮るのがおすすめですよ。

ごんぼ

写真の構図も意識しないとダメなんですね。

うたまる

②の画像は、背景のイラストと文字が重なって文字が読みにくく感じます。もっと言えば、ごぼう茶のことがわかりやすい画像があると理想的です。

ごんぼ

なるほど。やっぱり写真がある方が良さそうですね!

ごんぼさんのアイキャッチの改善点

今回は2つあるので少し多くなりますが、以下の4つを改善していきます。

  • 文字入れを考えた写真を選ぶ
  • パッと見て伝わる画像にする
  • 商品の良さがわかるフレーズを入れる
  • 文字はできる限り読みやすく入れる
ごんぼ

今まで商品の写真を一辺倒に載せて、文字を入れる方法しか思いつきませんでした。

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

ごんぼさんに詳しくお悩みを伺っていきます。

うたまる

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

ごんぼ

デザインの見栄えが悪いことと、デザインのアイデアが出てこないところで悩んでいます。

うたまる

デザインのアイデアは1番悩ましいところですもんね。
どんな雰囲気のアイキャッチにしたいとかはありますか?

ごんぼ

いかにも手作り感があるところをもう少しスタイリッシュに変えたいと思っています。

うたまる

なるほど!わかりました。写真の構図や、配置のバランスを整えるだけでもかなり印象は変わってきますよ。

ごんぼさんのアイキャッチ|改善案

ごんぼさんのアイキャッチ①
ごんぼさんのアイキャッチ②

ごんぼさんに伺ったお話をまとめると、

  • デザインの見栄えを良くしたい
  • スタイリッシュなデザインにしたい

とのお悩みと、

  • 文字入れを考えた写真を選ぶ
  • パッと見て伝わる画像にする
  • 商品の良さがわかるフレーズを入れる
  • 文字はできる限り読みやすく入れる

といった改善点がわかりました。

文字を入れやすい画像の構図|余白のある構図が使いやすい

余白のない画像を使用すると、文字入れが難しくなります。

見せたい商品など、写真がメインとなる場合には余白を意識して写真の構図を考えましょう。

例えば、今回のごんぼさんのアイキャッチで言うと、商品が文字で隠れてしまっています。

ごんぼさんのアイキャッチ①

本来であれば、文字で隠れているごぼう茶のパッケージは見えていた方が読者に伝わりやすいはずです。

こうした場合に考えることは、

  • 写真の構図にあらかじめ余白を作る
  • 文字の入れ方を変える

上記どちらかの方法があります。今回は、写真の構図を意識して考えてみましょう。

下の画像のように、左側に大きく余白のある画像であれば文字入れに悩むことはなくなりますし、文字で写真が隠れることもありません。

ごんぼ

これなら確かに文字が入れやすいですね!
文字を入れる前提で写真を選定することが大切なんですね。

うたまる

特に自分で撮影する場合は、好きなように構図が考えられるので簡単に余白のある画像が用意できますよね。

ごんぼ

そうですね!
意識してみたいと思います!

商品の良さがわかるフレーズを入れる

アイキャッチ画像を見れば、商品の良さや、記事を読むメリットが感じられるような文字を入れるようにしてください。

記事タイトルをそのまま使う人も多いですが、できればパッと見てわかりやすい内容の文字入れができると理想的です。

今回のごんぼさんのアイキャッチでは、何について書かれた記事なのかはわかりますが、メリットなどの情報は分かりません。

ごんぼさんのアイキャッチ①

画像で伝えるのか、文字で伝えるのかについてはそれぞれ違っていても良いので、読むメリットが伝わるアイキャッチを目指して作成してください。

  • 記事を読み終えたときのメリット
  • 記事を読みたくなるようなフレーズ
  • 商品のメリットなど
ごんぼ

ひと目でわかりやすく伝える…なかなか難しそうですね。

うたまる

難しいですよね。だけど、読者にとってわかりやすいものが理想的なアイキャッチなので頑張りましょうね!

文字はできる限り読みやすく入れる|背景色と文字色は同化させない

ごんぼさんのアイキャッチ②

こちらのアイキャッチの場合は、背景の赤いところは読みやすく感じますが、ゴールドの葉と黄色い文字が重なっているところは読みにくくなっています。

文字が読みにくい場合は、文字の色を変えるか文字にエフェクトをつけて読みやすくしましょう。

うたまる

背景色と文字色が、同じような色にならないように意識してください。

アイキャッチの作成案

今回は実際の商品の写真がないので、レイアウトの参考までにサンプル画像を作ってみました。

アイキャッチの作成案①

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

ごんぼさんのアイキャッチ①

アイキャッチの作成案②

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

ごんぼさんのアイキャッチ②
ごんぼ

わわわ!すごいカッコイイです!

うたまる

ありがとうございます!写真の余白を意識した画像を選ぶことと、写真で記事内容をイメージできるものを選んで作成してみました。

ごんぼ

全く思いつきませんでした!写真の探し方のコツは、ロイヤルフリーサイトから探す際にどんな画像を挿入するのかイメージ(写真の構成含む)してから、検索するのでしょうか?

うたまる

画像探すときは文字入れしやすいかを考えて選んでいますよ! どうしても文字を重ねたいときは、白い背景を入れて書くこともあります。

ごんぼ

なるほど!
ここまで細かくご教示いただき、本当にありがとうございます。

うたまる

いえ、こちらこそありがとうございました!またわからないことがあれば気軽に聞いてくださいね!

アイキャッチ添削-ごんぼさん

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

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

コメント

コメントする

目次