文章でごちゃごちゃしがちなバナーをすっきり作る方法
ご覧頂きありがとうございます。
フリーでWEBデザイナーやってるあいこです。
今回はこういったお悩みを解決するnoteになってます。
・バナーの文字が多いと言われる
・画像がごちゃごちゃした感じになる
・上手く文章をまとめられない
バナー等を作り始めたばかりのデザイナーさんあるあるですね。
私も当初は上司から言われ続けていました(;^ω^)
皆さん1度は通る道だと思うので、
・文章を上手くまとめてバナーをすっきり見易く。
・且つ、伝えたい事は的確に伝える
バナーの作り方をお伝えしていこうかと思います。
※完全に私流ですw
普通こういうのって有料noteで出すもんなんですかね?(;^ω^)
いやなんかもう、値段の付け方とかよくわからないので無料ですww
なので、安心して最後までご覧くださいm(__)m
それではスタート!!
だいたいバナーの依頼が来るときってこういう「話し言葉」的な文章で来ますよね?
この文章をそのまま書いてたら、そりゃバナーがごちゃごちゃします。
ここからいかに要点を絞っていくかがキモです!!
先ほどの話し言葉的文章から、めぼしいキーワードを抜き出します。
・・・・結構ありますね!!!(;´Д`)
例題を作った自分を少し恨みました・・・笑
キーワードはなるべく単語で抜き出しましょう!
その方が後々使い易いです。
次に先ほど抜き出したキーワードを、
その画像やバナーで言いたい事、ターゲットなど重要度順に並べます。
今回の例では、
「保育士歴10年のベテランが両親に子供との遊び方を伝える」
っていうのが超簡単な要約なので、
■保育士歴10年(=プロが教える)
■遊び方・接し方(主な発信内容)
が一番伝えたいこととして最重要キーワードに設定しました。
ターゲット:悩んでるママとパパ
具体例:お世話・手遊び・絵本の読み聞かせ
って感じですね。
具体例については、バナー内で詳細を入れるとごちゃごちゃの元になります。
どうしても入れたい場合は【補足】的な立ち位置で入れましょう。
バナーがごちゃごちゃする人の原因は実はココだったりします。
先ほど重要度を決めたキーワードを、その重要度が同じもの同士で文章にします。
この例文では上が最重要文章、下が補足の文章になります。
当初の依頼文から、かなりスッキリしましたよね!(*'ω'*)
でも、依頼内容や大切な事はしっかり盛り込まれてます。
ここまで作れたらあとはもう一息(^^♪
先ほど組み立てた文章を、重要度順に装飾を変えてみます。
画像にも書いてますが、
・文字サイズや太さ
・フォント
・色
などで分けるといいと思います(*'ω'*)
最重要キーワード単語だけは特別扱いして、
色とサイズを更に目立たせると尚良し。
最重要キーワードはトコトン特別扱いしましょう(*'ω'*)
先ほどの文章を画像内で配置してみました。
重要度の低いキーワードは文章だと使いにくかったので単語に戻しましたw
どうでしょう?
だいぶまとまってきたと思います!
ここまで来たらあとは楽しい装飾です(*'▽')
全体のバランスを整えたり、
寂しいな~と感じた場所に挿絵を入れたり。
もし、似顔絵とか絶対入れないといけない画像がある場合は、
文字を配置する前に画像を入れます。
※この場合、文章よりも画像の方が重要度が高いからです。
重要度の高い物から順に特別扱いします!
それでは最後に仕上がりを確認してみましょう!
(劇的ビフォーアフターのBGMをかけながら~)
なんということでしょう!
あの長くてごちゃごちゃしていた文章がこんなにスッキリ(*'▽')!!!
この例題は文章が長過ぎたので、
これでも多少は文字が多い印象がありますが…まぁそこはお許しをw
バナーを作る上で一番大切なのは、
「最重要キーワードを特別扱いする」
これに尽きますw
なので、元の文章から最重要キーワードを抜き出すところから勝負は始まっています!
実際にバナーを見てもらったらわかると思いますが、
「太字・色が変わってる文字」
ここを読むだけで、何についてのバナーで誰が何を発信するのかがわかるようになっています。
ほらね?
バナーって一瞬勝負の画像だと思うので、
「最短距離で読者に内容を伝える」
この事に注力をした方が、読まれやすい・クリックされやすいなどCVRのUPに繋がります!
ですので、そこも意識するようにしましょう。
以上が私のバナーの作り方です(*'▽')
参考になったら嬉しいです!
もし、このnoteが参考になったよー
ためになったよーーと少しでも思って頂けたら、
SNS等で紹介して頂けると今後の励みになります(´ω`)
早速沢山の方から嬉しい感想が届いてます(*´▽`*)
※嬉しすぎたので一部掲載しますw
あわわわわ…
嬉しいお言葉の数々、ありがとうございます!!!
今後も皆さんに有益な情報をどんどん配信していきます(*'▽')
【Twitter】
https://twitter.com/aiko_webdesign
この記事が気に入ったらサポートをしてみませんか?