アイキャッチアドバイス企画の7人目は「えりさん」です。
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
おしゃれな感じのアイキャッチにしたいです。
えりさんが運営しているブログ「erieponの雑記ブログ」では、猫・オートバイ・写真・生活に関することを発信されています。
![](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/10/IMG_B437C8D8C6B2-1.jpeg)
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
ちょっとシンプルすぎるかなといった印象ですね。もう少し記事の内容が伝わるといいですね。
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
確かに情報量が少ないですね。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
アイキャッチでは、伝えたいことが短時間で伝わるように工夫が必要なんですよ。
あと、色味がもう少し欲しいかなと思います。
えりさんのアイキャッチの改善点
文字入れの基本的な考え方を知ると、シンプルで伝わりやすいアイキャッチが作れます。
- 1番伝えたいことを書く(キーワードや商品名)
- 記事を読むと得られるメリット
- ❶の補足(追加で伝えたいことや説明)
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
今までスゴく適当に作ってきていたので参考になります!!
えりさんのアイキャッチ|お悩みカウンセリング
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
アイキャッチを作るとき悩むところはありますか?
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
画像と文字のバランスや
フォントの種類で悩みます。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
なるほど。
文章の内容は先ほどお伝えしてので、フォントについては後ほど解説していきますね。
どんな雰囲気のアイキャッチにしたいとかはありますか?
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
今のアイキャッチがシンプルなので、垢抜けたおしゃれな感じにしたいです。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
わかりました。
では、文字のバランスがよく見えるように、シンプルだけど華やかさが出るようなアイキャッチにしていきましょう。
えりさんのアイキャッチ|改善案
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_B437C8D8C6B2-1.jpeg)
えりさんに聞いたことをまとめると、
- 画像と文字のバランスをよくしたい
- フォントの選び方を知りたい
- おしゃれで垢抜けた感じにしたい
といった要望と、
- 記事内容がわかりやすい文章にする
- 色味が少ない
といった改善点がありました。
アイキャッチのフォントの選び方|基本は2つでOK!
フォントはすごく種類が多いので迷ってしまいますよね。
アイキャッチで使用するフォントは、基本的には2種類のフォントのみを使ってください。
- ゴシック体
- 明朝体
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
えっ、たったの2つでいんですか?
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
基本は2種類で大丈夫です。
特殊なものも使いますが、使いすぎるとまとまりのないアイキャッチになるので注意してください。
おすすめの基本フォント|ゴシック体&明朝体
うたまるがよく使用する、おすすめのフォントを紹介しておきます。
- 「Source Han Sans JP」
- 「UDモトヤシーダ」
- 「Source Han Serif JP」
- 「UDモトヤ明朝」
それぞれのフォントには、太さ・文字の幅などの違うパターンがありますが、用途やバランスに応じて使い分けています。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
手書き風のフォントの場合は「うずらフォント」をよく使っています。
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
今度から使ってみます!
フォントについては、こちらの記事で詳しく解説しています。
![](https://bbd-hack.com/wp-content/uploads/2022/12/B.B-Design-Hack-アイキャッチ-48-300x158.jpg)
アイキャッチの作成案
今回作成したアイキャッチがこちらです。
アイキャッチの作成案
\クリックで切り替えられます/
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_B437C8D8C6B2-1.jpeg)
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
今回は元々の画像がなかったので、ペットボトルの代わりに水の画像で代用しました。
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
おしゃれだし、文字が強調されてわかりやすくなりましたね!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
強調したい文字は太字のフォントを使っています。
数字のところの文字色を「青色」の反対色である「オレンジ色」にすることで目立つようにしてみました。
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
なるほど、それで強調された感じがするんですね。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
それから、文字の頭や終わりを揃えることでまとまりが良くなるので意識してみてください。今回は微調整していないので少しずれていますが、赤い線で揃えるイメージです。
![](https://bbd-hack.com/wp-content/uploads/2022/10/FF947F14-722B-4FF8-93DE-C239F6F84E23.jpg)
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
確かに揃ってるとキレイに見えますね!
意識してやってみます!
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
ちょっとうたまるさんのサンプルとアドバイスを参考にアイキャッチ作ってみます!!
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
頑張ってください!なにかあれば質問してくださいね!
アイキャッチ添削後のえりさんのアイキャッチ
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
さっそく作ってみました!
いかがでしょうか?
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_183772397978-1.jpeg)
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
そうそう!こんなイメージです!
この画像で言えば「・」はなくても良いかなと思います。
3つ内容が並んでいればおすすめポイントだとわかるので、3つの理由は省いてもOKです。そのかわりにその理由があるからどういいの?みたいなところが伝わるといいかなって感じです!
![](https://bbd-hack.com/wp-content/uploads/2022/10/IMG_BE7DEF5913D5-1.jpeg)
なるほど!! わかりました! ありがとうございます! これでちょっと垢抜けられそうです。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
普段目にする物にも勉強になるデザインがいっぱいあるので参考にするといいですよ!いつでも相談してくださいね!
最後に、今回作成したアイキャッチに1つだけちょっとしたこだわりがあるのわかりますか?
![](https://bbd-hack.com/wp-content/uploads/2022/10/FF947F14-722B-4FF8-93DE-C239F6F84E23.png)
多分無くても問題ない部分ですが、見比べると立体感が変わるんです。
![](https://bbd-hack.com/wp-content/uploads/2022/08/4-1-150x150.png)
正解は「3の下の影」でした。
ブログに関する悩みは、ブログ仲間と一緒に解決するのが最適です。
みんなでレベルアップできるコミュニティ「BLOCO -ブロコ-」を運営しています。
気になる方はBLOCOについてのページを読んでみてくださいね!
![](https://bbd-hack.com/wp-content/uploads/2022/09/B.B-Design-hack-アイキャッチ-7-300x158.png)
コメント