【ブログ】アイキャッチ画像、デザイン添削実例【2例】

てちこ

こんにちわー!てちこです。

ブロガーの方と話すと、
アイキャッチのデザインで悩んでいるとよく聞きます。

今回は実際に2例添削させていただく機会があったので、

こんなところに気をつけたらいいよー!

を実例を見ながら解説していきます。

【アイキャッチだけで時間がたくさん取られる現象】

から少しでも解放されればと思います。

てちこ

それでは早速みていこうっ

目次

【1例目】雑記ブログのアイキャッチ添削

まずはたじまるさん(@tazimama)のアイキャッチ添削です。

〇【料理の持ち寄り】に関する記事だとすぐで分かる写真
ネガティブなイメージの記事だと分かる色使い

がとてもいいところだと思います!


私がアイキャッチのデザインをする時に気を付けるところは4点あって

  • ジャンルがぱっと見で分かるか
  • テキストがぱっと見で入ってくるか(量、色)
  • 強調したいところが強調されているか
  • 目を引く素材を使える余地があるか

です!

てちこ

それではひとつずつ解説していきます。

こうなった!

まずは、添削後のアイキャッチを見てみましょう。

【 ジャンルがぱっと見で分かるか
ですが、

もともとバッチリだったため、スルーです!笑
似た画像さっと探して次にいきましょう!

(元の画像のが持ち寄りっぽくていいですよね><笑)



【テキストがぱっと見で入ってくるか(量、色)】
まずテキストの量ですが、
2行あるとぱっと見では読めないため、短くしたいです。

アイキャッチの文章だけで、
記事の内容を伝える必要はないです。

タイトルもありますしね!

「何がかいてあるのかな?」
「私の読みたい記事かな?」


1秒で回答するテキストを考えたいです!笑
(せっかちすぎますか・・?笑)

今回は
【ママ友と持ち寄りする時にトラブルが起こりやすい?】
から
【(お食事会)持ち寄りで起こるトラブル】
としました。

カテゴリーや、補足するような情報は、

吹き出しに入れたり
\こんなあしらいに入れたり/

工夫してメインタイトルから追い出せば、短くできますよっ


そして、メインタイトルのですが、
もう少し見やすくできそうです。

  • 背景の画像をもっと薄く
  • 文字の後ろの白い四角をもっと濃く

してみましょう。
文字が見やすくなります。

フチだけの文字はかっこよく使うのが難しいため、特にこだわりがなければ非推奨です。


【 強調したいところが強調されているか

今回、強調したいところは
トラブル
というところですね。

持ち寄りお食事会をした時に起こる、
トラブル
の記事ですもんね。

ここを強調しましょう。

強調の方法は様々あって

  • 目立つ色にする
  • 大きくする
  • あしらいをつける

などです。

今回は

トラブルの文字を
大きくして、
点のあしらいをつけました。


目を引く素材を使える余地があるか
最後の項目です。

イラストや、写真などの素材の威力は強力です!

使えそうなところがあればどんどんつかっていきましょう。

今回は、
【トラブル】
という単語から
【警戒線】
のシマシマを連想して使ってみました。

目を引きますよね。笑

てちこ

そんなこんなで完成です!

もう一度ビフォーアフターです。

たじまるさんのブログはコチラ!

【2例目】特化ブログのアイキャッチ添削

2例目はゆうさん(@NLe3w)のアイキャッチ添削です。

〇ブログのメインビジュアルにも使われている、
 右上の【B】がとてもかっこいいです。
〇メインタイトルの読みやすい配色。

がとてもいいです!

今回もさっき挙げた4点

  • ジャンルがぱっと見で分かるか
  • テキストがぱっと見で入ってくるか(量、色)
  • 強調したいところが強調されているか
  • 目を引く素材を使える余地があるか

の順番で見ていきましょう!

こうなった

さっそく添削後のアイキャッチを見てみましょう。

【 ジャンルがぱっと見で分かるか

ココは、背景画像を何にするか
だいたい解決できます。

ゆうさんのブログは
投資・暗号資産に特化したブログで、
添削後背景のような画像を、他のアイキャッチで使っていたため、
雰囲気を合わせる形で、似た画像を背景に選びました。

この背景画像なら、
投資・暗号資産関係かな。
と分かりますね。

【テキストがぱっと見で入ってくるか(量、色)】
まずテキストの量ですが、

長すぎることはなく素晴らしいのですが、
メインタイトルとサブタイトルの大きさが同じなため、
どちらが主役か分かりにくいです。

また、

このように、
カテゴリーでメインタイトルが隠れてしまっているのが惜しいです><

この記事はIOSTという、まだマイナーな暗号資産について
詳しく解説する!
という記事でした。

なので、メインタイトルは
【IOST 徹底解説】
だけにして、

その中でもあなたの知りたい
【特徴・将来性・活用事例】
はちゃんと書いてあるよ
という情報をサブタイトルにしました。

また解説記事を読みたい暗号資産についてまだ詳しくない読者は
カタカナでフリガナがあったほうが分かりやすいと思い、入れました。

イーサリアム!
といえば
聞いたことある―^^

となりますが、

ETH!
と言われると
ん?
ってなりますので。(わ・・私だけかしら。笑)

伝わることが何より大事!!


メインタイトルのですが、

暗号資産の
知的なイメージ

背景の青以外に色をあまり足したくない
という考えからシルバーを選びました。

また【徹底解説】の金のフチは
徹底解説という単語の持つ
特別感というか、強いイメージ

同じ金属仲間の、シルバーと合わせて違和感なさそう

という理由から選びました。

文字をシルバーのグラデーションで作って、
フチに同じグラデーションを違う方向からかけると
より金属っぽくなるよ!


【 強調したいところが強調されているか
メインタイトル真ん中にドーンなので、
十分強調されています。


目を引く素材を使える余地があるか
IOSTの公式ロゴはかっこよく、
素材として使いたい気持ちはありましたが、
公式ロゴも著作権の関係から好きに使っていいというものではありません。
今回は我慢。

右下に、ゆうさんのブログのメインビジュアルの画像を、
背景になじませる形で入れています。

Google画像検索でアイキャッチで出てきた時や
ピンタレストで出てきた時に

ゆうさんのブログのだー

と分かったらいいな
という気持ちです。笑

金属みのあるメインタイトルなので、
相性のいいピカー!!とする光の素材を2か所使っています。

実際にサイトで使われているところも確認します。

カテゴリーを表すピンクの部分。
タイトルにかぶらないように表示されていますね!

てちこ

そんなこんなで完成です!

もう一度ビフォーアフターです。

ゆうさんのブログはコチラ!

お疲れ様でした!

前回ブログのアイキャッチ画像について書いた

↑の記事では、
ブログでアイキャッチ画像を作るまでの
構想の部分に焦点を当てた記事でした。

ですが今回は、
実際のデザインの部分について解説してみました。

もし参考になれば嬉しいです。


私は、ブログの記事を書き終わってから
アイキャッチ画像をつくるのですが、

記事でほぼ力を使い切るため、
アイキャッチ画像の時にはでがらしのようになっています。笑

皆さんも大変ですよね><

アイキャッチの画像デザインも受け付けておりますので、

問い合わせか、TwitterのDMからお気軽にどうぞ!

また、デザインの基本を知っているだけでも、
考え方の道しるべができます。

まずは、下記記事で紹介している一冊だけ読めば、
基本はバッチリなので、デザインに興味ある人は是非読んでみてください!


ここまで読んでいただき、ありがとうございましたー!

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

わたし、Twitterやってるよ!
  • URL Copied!
目次
閉じる