見出し画像

文章でごちゃごちゃしがちなバナーをすっきり作る方法

ご覧頂きありがとうございます。
フリーで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

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

113

あいこ/時給5000円WEBデザイナー

現役WEBデザイナー👩 10年目|未経験からプロを目指すデザイナーの味方🔰|プロになる為のマインド・お仕事/就活のコツ・Howto情報を発信💡|YouTube⇒http://urx2.nu/Osj9

WEB

5つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。