【アイキャッチ添削028】kanekoblogうちまな|権威性を保ちながら目立たせる

なんだかお久しぶりな投稿となりました、アイキャッチ添削。今回で28回目となります!

最近、ついにイラストレーターを1年分購入致しました。ロゴ作成や文字挿入をしたいな~というのが理由ですが、比較記事なんかも書いていきたいですね!

…っと関係ない話をしてしまいました。

さて、今回アイキャッチ添削にご応募いただいたのは…もともとは小学校の先生をされていて、今は子供の学習教材に関する情報を発信されている、shufukanekoさんです!

よろしくおねがいします。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

こちらこそ、よろしくお願い致します!

元、先生ということもあって少し緊張気味にはじまりましたが、最後までぜひおたのしみください。

目次

shufukanekoさんの作品

作者   …shufukanekoさん
掲載記事 …【2021保存版】幼児通信教育教材|人気のおすすめ11社を徹底比較!
掲載サイト…kanekoblogうちまな
shufukaneko さんは小学校の元先生で、子育て中に「お金」と「時間」を大切にできる情報を発信されています。

掲載サイト・記事・アイキャッチは掲載した時点でのものです。現在は変更されている可能性があります。

お悩み

どんぐり
どんぐり

どんなお悩みがありますか?

視認性を高くしようと思ってデザインしましたが、イマイチなんです。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

ふむふむ。凄くよくできていますね!サイトイメージにピッタリのアイキャッチです!でも。ちょっとしたポイントを気を付けるともっとよくなりますね!

オシャレかつ、思わず目を引くデザインを教えていただけたらと思います!

shufukanekoさん
shufukanekoさん
今回のミッション

オシャレかつ目を引くデザインにする!

添削開始

どんぐり
どんぐり

まず第一印象を…。

どきどき。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

教育関係という事もあって、サイトイメージととてもあっていて良い出来ですね!

よかった!

shufukanekoさん
shufukanekoさん
  • サイトイメージにあったアイキャッチする事はとても大切!

背景の色について

どんぐり
どんぐり

背景をモノクロにしておられるのは、テキストを目立たせる為ですか?

バックの画像は、雰囲気を伝えたいだけだったので、白黒にしてみました。あとは視認性を高めるのが目的です。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

バックをモノクロにする事で、テキストボックスのカラーが良く目立つようになりますので、とてもよいと思います。シックで格好よくなりますしね!

  • モノクロ写真を使う事でテキストが目立つ。
  • モノクロはシックなイメージで格好よく仕上がる。

使用フォントについて

どんぐり
どんぐり

明朝のフォントを使用している理由はありますか?

それまで作っていたアイキャッチがゴシックを使った、ごちゃごちゃしたデザインが多かったので、スッキリしたデザインにしてみたくて明朝を採用しました!

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

基本的に私は慣れてない方にはゴシックをおすすめしています。なぜかというと、視認しやすいという事とデザインのしやすいからです!

やっぱりゴシックがいいのかな…。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

でも教育系のサイトという事もありますので、権威性が求められるので明朝を使うという選択肢は正解ですね!

  • 権威性が求められる記事やサイトには明朝がフィットする!

フォントの色について

どんぐり
どんぐり

視認性を上げる為にフォントの色や影などで工夫されていますね!

おっしゃるとおり、影をつけたところ・フォントカラーです!

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

工夫されているのは凄く良いですが、メインキーワードの方が色が薄くなっているので、ちょっと目立ちにくくなっています!

そうか!

shufukanekoさん
shufukanekoさん
  • キーワードに優先順位をつけ、優先順位が高いキーワードを目立たせるように配色しよう!

テキストの長さについて

どんぐり
どんぐり

左上の吹き出しをつけた理由は、テキストが長くなりすぎたからではないですか?

文が長くなったというのが、最大の理由です。エスパーみたいですね(汗)。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

私は基本的にはキーワードを絞った箇条書きをおすすめしています!

箇条書きにした参考例

見やすいですね!

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

しかし、教育系という事ですので、多少文になっている方が権威性がでます。

よかった!

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

ですので、吹き出しを使ってキーワードを分けるのはアリ!です。

  • 教育系など権威性が必要なサイトや記事の場合は、文章の方が説得力がある。
  • ただし、本当に長文にしてしまうと読まれなくなるので、要らない文字はできるだけ省く事!

総合的な添削結果

どんぐり
どんぐり

細かいところばかりですが、こういう所を気を付けるとまとまりやすいです!

添削完了!

どんぐり
どんぐり

では今までの注意点に気を付けて修正した画像をみてみましょう!

お願いします!

shufukanekoさん
shufukanekoさん

今回は透過のテキストボックスだった為、お子様の写真が変わっています。

今回のポイント
  • 使用カラーが「モノクロ」と「ライトブルー」のみだったので「アクセントカラー」としてイエローを追加
  • こどもの顔が見えるように、テキストボックスを少し下に移動
  • メインキーワードを一番大きく、真っ黒文字で目立つように
  • サブキーワードを簡略化
  • サブキーワードの中でも「5」と「徹底比較」を強調する
  • テキストボックス内の上下余白が均一になるようにテキストを配置

うわーめちゃおしゃれやないすか!! やっぱバランスの良さって大事ですね〜♪

shufukanekoさん
shufukanekoさん

ふちどり文字

どんぐり
どんぐり

Canvaは標準ではふちどり文字が無いんですが、それっぽく作る事ができます!

Canvaでふちどり文字っぽくする方法
  1. テキストをクリック
  2. 上部の「エフェクト」をクリック
  3. 左側の「スタイル」の中から「スプライス」を選択
  4. 「オフセット」のスライドバーを一番左にして「0」に
  5. 左側ウインドウの「カラー」で文字の中の色を選定
  6. テキストカラーでふちどりの色を選定
  7. 「エフェクト」に戻り、左側ウインドウの「太さ」のスライドバーでふちどりの太さを調整
  8. 完成!

細かいcanvaの操作方法まで、かなりありがたいです!

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

ふちどり文字は使い勝手がいいので、覚えておいてくださいね!

添削を終えて

どんぐり
どんぐり

実際のところ、shufukanekoさんのレベルが高いので、そのままでもいいくらいでした!

めちゃめちゃ分かりやすいです!!

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

ふちどり文字だけでなくて、ネオンエフェクトだったり、視認性のよくなる方法がありますので試してみてくださいね!

ネオンでの装飾は全く頭になかったです。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

試しにネオンエフェクトでバナーを作ってみました!

黄色も目を引いて思わず注目できますね!!目からウロコでした。

shufukanekoさん
shufukanekoさん
どんぐり
どんぐり

ブログデザインラボでは、#ブログデザイン部の部員を大募集中です!

目次
閉じる