クリエイター:コーディング備忘録ブログ

WEBデザイン

バナーをデザインする時の文字ポイント

バナーは限られた領域の中で、文字と画像によって伝えなければなりません。
そして、ユーザーにクリックされるためには、伝えたい相手に伝えたい情報を一目で伝えなくてはなりません。

1.目立たせたい文字の優先順位を決める

まず、バナーに掲載したい文字を全て配置してみましょう。

その次に、この中でどの情報を一番伝えたいか、どの情報がユーザーにとってメリットのある情報なのかを考え、目立たせたい文字の優先順位を決めます

2.文字の大きさを決める

先ほど決めた優先順位をもとに、視覚的に優先順位の違いがわかるよう文字の大きさを変えて強弱をつけていきます。

3.文字の位置を揃える

人の視線は左から右に移動するので、文章を読ませることを目的としたコンテンツを作成する場合は左揃えることが私見です。
背景画像と文字だけで構成するバナーを作成する際には、「中央揃え」がおすすめです。
中央揃えは全体がシンメトリー(左右対称)になるので安定感が生まれ、デザインとしての一体感を出しやすくなります。

4.文字に装飾を付ける

文字の大きさを変えてだけでは、まだ単調な印象です。
文字要素によって文字の後ろに背景色を敷く、上下に線を引くだけでも要素間にメリハリが生まれます。

背景を敷いた文字や、白抜きにした文字は他に比べて目に留まりやすくなるので、全体の構成に合わせて文字の大きさを再調整します。
ここで色を付けると配色とレイアウトの両方で悩んでしまい、余計に時間がかかってしまう場合もあるのでモノクロのまま進めていきます。

5.フォントを変える

フォントはデザインの印象を決める大事な要素です。
選ぶフォントによってユーザーに与わる印象が変わってくるので、どういったユーザー層に訴えたいのか、どのような印象を与えたいのかによって使いわける必要があります。

6.文字の大きさを揃える

同じ文字サイズで設定してもひらがな、カタカナ、漢字、英語で大きさが違って見える場合があります。

7.文字に対比を付ける

先ほどの一体感を出す作業とは対照的に、文字の大きさを不揃いにすることによって内容を強調することが出来ます。

8.字間と行間を調整する

字間とは文字の左右の空間で、行間とは文章の行と行との間のことです。
どちらも伝わりやすさに影響することなので、要素ごとにまとまりが感じられるように設定することが大事です。

9.色をつける

色はデザイン全体の印象を決める大事な要素です。
バナーのリンク先のページの色に合わせる、伝えたい内容のテーマやイメージに合った色を選ぶなどでメインの色を決めます。

10.遊び心を加える

デザインがまとまったところで、より魅力的になるよう少し手を加えてる。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP