なんだかお久しぶりな投稿となりました、アイキャッチ添削。今回で28回目となります！
最近、ついにイラストレーターを1年分購入致しました。ロゴ作成や文字挿入をしたいな～というのが理由ですが、比較記事なんかも書いていきたいですね！
…っと関係ない話をしてしまいました。
さて、今回アイキャッチ添削にご応募いただいたのは…もともとは小学校の先生をされていて、今は子供の学習教材に関する情報を発信されている、shufukanekoさんです！
よろしくおねがいします。
こちらこそ、よろしくお願い致します！
元、先生ということもあって少し緊張気味にはじまりましたが、最後までぜひおたのしみください。
shufukanekoさんの作品
作者 …shufukanekoさん
掲載記事 …【2021保存版】幼児通信教育教材｜人気のおすすめ11社を徹底比較！
掲載サイト…kanekoblogうちまな
shufukaneko さんは小学校の元先生で、子育て中に「お金」と「時間」を大切にできる情報を発信されています。
お悩み
どんなお悩みがありますか？
視認性を高くしようと思ってデザインしましたが、イマイチなんです。
ふむふむ。凄くよくできていますね！サイトイメージにピッタリのアイキャッチです！でも。ちょっとしたポイントを気を付けるともっとよくなりますね！
オシャレかつ、思わず目を引くデザインを教えていただけたらと思います！
オシャレかつ目を引くデザインにする！
添削開始
まず第一印象を…。
どきどき。
教育関係という事もあって、サイトイメージととてもあっていて良い出来ですね！
よかった！
- サイトイメージにあったアイキャッチする事はとても大切！
背景の色について
背景をモノクロにしておられるのは、テキストを目立たせる為ですか？
バックの画像は、雰囲気を伝えたいだけだったので、白黒にしてみました。あとは視認性を高めるのが目的です。
バックをモノクロにする事で、テキストボックスのカラーが良く目立つようになりますので、とてもよいと思います。シックで格好よくなりますしね！
- モノクロ写真を使う事でテキストが目立つ。
- モノクロはシックなイメージで格好よく仕上がる。
使用フォントについて
明朝のフォントを使用している理由はありますか？
それまで作っていたアイキャッチがゴシックを使った、ごちゃごちゃしたデザインが多かったので、スッキリしたデザインにしてみたくて明朝を採用しました！
基本的に私は慣れてない方にはゴシックをおすすめしています。なぜかというと、視認しやすいという事とデザインのしやすいからです！
やっぱりゴシックがいいのかな…。
でも教育系のサイトという事もありますので、権威性が求められるので明朝を使うという選択肢は正解ですね！
- 権威性が求められる記事やサイトには明朝がフィットする！
フォントの色について
視認性を上げる為にフォントの色や影などで工夫されていますね！
おっしゃるとおり、影をつけたところ・フォントカラーです！
工夫されているのは凄く良いですが、メインキーワードの方が色が薄くなっているので、ちょっと目立ちにくくなっています！
そうか！
- キーワードに優先順位をつけ、優先順位が高いキーワードを目立たせるように配色しよう！
テキストの長さについて
左上の吹き出しをつけた理由は、テキストが長くなりすぎたからではないですか？
文が長くなったというのが、最大の理由です。エスパーみたいですね(汗)。
私は基本的にはキーワードを絞った箇条書きをおすすめしています！
見やすいですね！
しかし、教育系という事ですので、多少文になっている方が権威性がでます。
よかった！
ですので、吹き出しを使ってキーワードを分けるのはアリ！です。
- 教育系など権威性が必要なサイトや記事の場合は、文章の方が説得力がある。
- ただし、本当に長文にしてしまうと読まれなくなるので、要らない文字はできるだけ省く事！
総合的な添削結果
細かいところばかりですが、こういう所を気を付けるとまとまりやすいです！
添削完了！
では今までの注意点に気を付けて修正した画像をみてみましょう！
お願いします！
- 使用カラーが「モノクロ」と「ライトブルー」のみだったので「アクセントカラー」としてイエローを追加
- こどもの顔が見えるように、テキストボックスを少し下に移動
- メインキーワードを一番大きく、真っ黒文字で目立つように
- サブキーワードを簡略化
- サブキーワードの中でも「５」と「徹底比較」を強調する
- テキストボックス内の上下余白が均一になるようにテキストを配置
うわーめちゃおしゃれやないすか！！ やっぱバランスの良さって大事ですね〜♪
ふちどり文字
Canvaは標準ではふちどり文字が無いんですが、それっぽく作る事ができます！
- テキストをクリック
- 上部の「エフェクト」をクリック
- 左側の「スタイル」の中から「スプライス」を選択
- 「オフセット」のスライドバーを一番左にして「０」に
- 左側ウインドウの「カラー」で文字の中の色を選定
- テキストカラーでふちどりの色を選定
- 「エフェクト」に戻り、左側ウインドウの「太さ」のスライドバーでふちどりの太さを調整
- 完成！
細かいcanvaの操作方法まで、かなりありがたいです！
ふちどり文字は使い勝手がいいので、覚えておいてくださいね！
添削を終えて
実際のところ、shufukanekoさんのレベルが高いので、そのままでもいいくらいでした！
めちゃめちゃ分かりやすいです！！
ふちどり文字だけでなくて、ネオンエフェクトだったり、視認性のよくなる方法がありますので試してみてくださいね！
ネオンでの装飾は全く頭になかったです。
試しにネオンエフェクトでバナーを作ってみました！
黄色も目を引いて思わず注目できますね！！目からウロコでした。
ブログデザインラボでは、#ブログデザイン部の部員を大募集中です！
