アイキャッチアドバイス企画の2人目は
「ちいさん」です。
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
よろしくお願いします。
楽しみです!
ちいさんが運営しているブログ
「Sta Mama Blog(スタママブログ)」では、子育て・生活・お金のことなど、ちいさんの経験をもとに発信されています。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
実体験をもとに書かれているってすごく参考になりますよね!
それでは、アイキャッチの添削をしていきましょう!
アイキャッチの作り方については、こちらの記事に詳しくまとめています。
![](https://bbd-hack.com/wp-content/uploads/2022/12/B.B-Design-Hack-アイキャッチ-47-300x158.jpg)
ちいさんのアイキャッチの改善点の確認
今回アドバイスするアイキャッチはこちらの画像です。
![](https://bbd-hack.com/wp-content/uploads/2022/09/B.B-Design-hack-アイキャッチ-5.png)
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
印象としては、商品の写真や商品ロゴが入っているからわかりやすい!だけど、ちょっと文字が多いかな〜と感じました。
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
実はタイトルをそのまま書き出してて、
収まらないなぁってときがかなりありました。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
そうなんですね。
あとは、余白があるともっと伝えたいことが強調されますよ。
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
余白のバランスが大事なんですね!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
そうそう、余白があるだけでもかなり改善されると思います!
ちいさんのアイキャッチの改善点
ちいさんのアイキャッチ改善点は2つあります。
- 文字数を減らす
- 余白を作る
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
次は、ちいさんのお悩みを聞いていきましょう!
ちいさんのアイキャッチ|お悩みカウンセリング
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
アイキャッチを作るときに、どんなところで悩んでいますか?
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
文字と写真のバランスとか、色合いにいつも悩んでしまいます。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
さっき言ってた文字数が収まらないっていうところですね。
色合いはどんな感じが好みなんですか?
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
色で言えば、くすみカラーとか使いたいです!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
くすみ系のカラーかわいいですもんね!
他にはどんな雰囲気のアイキャッチを作りたいとかはありますか?
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
できれば似たようなパターンで作って、トップページに統一感が出るようにしたいですね。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
ちいさんのブログのトップページを見ると、カテゴリー別にテーマカラーがあったので、デザインは同じ雰囲気で色違いのテンプレを作ると統一感が出せますね!
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
あっ確かにそれ良さそう!
テンプレートの作成についてはこちらの記事も参考にしてください。
ちいさんのアイキャッチ|改善案
ちいさんにお話を聞いた内容をまとめると、
- 文字と写真のバランスを良くしたい
- くすみカラーを使いたい
- テンプレートを作りたい
以上の悩みや要望がありました。
現在のアイキャッチの改善点として、
- 文字数を減らす
- 余白を作る
これらを踏まえてアイキャッチを考えていきましょう。
文字と写真のバランスを良くしたい|6:4のバランスで配置を意識する
アイキャッチの場合は、細かく文字を読んでもらえません。
ですので、アイキャッチの方向性を決めておく方がおすすめです。
- 写真を目立たせる
- 文字を目立たせる
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
どちらを優先するのかを考えて配置やバランスを決めていきましょう。
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
なるほど!
両方しっかり目立つように作ってました!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
定番のバランスで言えば6:4の比率がおすすめですよ!
![](https://bbd-hack.com/wp-content/uploads/2022/09/B.B-Design-hack-アイキャッチ-6-1-1024x538.png)
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
あまり意識したことがなかったです!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
より目立たせたい内容を6の比率の方に入れるとOKです。
6:4のバランスを利用したアイキャッチの作成については、こちらの記事も参考にしてください。
余白を意識する
余白がないと詰まった印象になってしまいます。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
例えば、ちいさんのアイキャッチを見てみると、文字と文字の間が詰まっていたり、画像の端まで文字が入っていますよね?
![](https://bbd-hack.com/wp-content/uploads/2022/09/B.B-Design-hack-アイキャッチ-5.png)
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
確かに!
言われてみれば隙間がないですね。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
余白や隙間を作るってすごく大切なことなので、覚えておいてくださいね。
余白の大切さについては、こちらの記事も参考になります。
アイキャッチの作成案
ちいさんの希望する内容と、改善点を考えてアイキャッチを作成してみました。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
こんな感じはどうですか?
アイキャッチ作成案
\クリックで切り替えられます/
![](https://bbd-hack.com/wp-content/uploads/2022/09/B.B-Design-hack-アイキャッチ-5.png)
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
イメージまで作ってくれたんですね!
めちゃくちゃかわいくて好みです!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
良かったです!くすみカラーをベースに、カテゴリー別に色分けしやすいように作ってみました。
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
余白があるとすごく読みやすいですね!
文字のサイズってどのくらいがいいんですか?
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
文字のサイズはデザインによって変わるけど、強調したい文字は60以上を意識して作ってますよ。
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
なるほどー!すごく参考になりました!
頑張って作ってみます!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
わからなれけばまた聞いてくださいね!
アイキャッチ添削後のちいさんのアイキャッチ
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
今回のアドバイスを参考に作ってみたんですけど、うたまるさんのデザインに引っ張られてしまいます…笑
ちいさん作のアイキャッチ
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_2632-1024x576.jpg)
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
僕が作ったのよりかわいくないですか?
強いて言うなら1枚目の画像の「に!」を少し左に寄せると良いですよ。
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
さっそく修正してみます!
ただ、このデザインってうたまるさんのパクリっぽいからやめた方がいいのかなぁって思ってるんですけど…
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
いえいえ、ぜひ使ってください!
![](https://bbd-hack.com/wp-content/uploads/2022/09/IMG_CC3D85175925-1.jpeg)
ありがとうございます!
なんだかやる気出てきました!
以上でちいさんのアイキャッチ添削は終了しました。
- 6:4のバランスで分ける
- 文字のサイズを調整
- 余白を作る
- くすみカラーで柔らかさを出す
- テンプレートの作成
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
上記を意識して作成してみてください!
ブログに関する悩みは、ブログ仲間と一緒に解決するのが最適です。
みんなでレベルアップできるコミュニティ「BLOCO -ブロコ-」を運営しています。
気になる方はBLOCOについてのページを読んでみてくださいね!
![](https://bbd-hack.com/wp-content/uploads/2022/09/B.B-Design-hack-アイキャッチ-7-300x158.png)
コメント