『このバナーのココの文字、強調して』
ディレクターやクライアントからこう指示されたら、
Webデザイナーの皆さんならどうデザインしますか？
動画以外では、基本的に画像＋テキストで情報を伝えるWebサイト。
魅力的な情報でないと、読んではもらえません。
文字を強調して大切な文節だけ目立たせて読み手の興味を引くとともに、
デザインのクオリティを上げることにもなります。
当記事ではWebで使える文字の強調デザインの手法を12通り
実際のバナー応用例と合わせてご紹介致します。
ベースのデザインはこちら。文字情報が多いのでどこに注目すべきか悩みそうです。
目次
01.太字にする
基本中の基本、強調したい文字を太字にします。
サンプルのバナーでは、キャンペーン名とポイント額、『ポイントプレゼント！』を太字にしました。
文字のウエイトを変えるだけでメリハリがついて、ポイントがプレゼントされるというキャンペーン内容が目に入ります。
02.色を変える
基本の2つ目。強調したい文字を目立つ色に変更します。
キャンペーンタイトル、プレゼントされるポイント額のカラーをメインカラーのブルーに変更しました。
これでもまだポイント額の主張が弱い気がします。
また、左右の余白もバナーデザインにしてはもったいないですね。
03.フォントサイズを大きくする
基本の3つ目。
重要な単語のみフォントサイズを大きくします。
文中に多用すると逆に読みにくくなるので、見出し・バナー画像などで使いましょう。
ポイント額のフォントサイズを思い切って大きくして、
その他のフォントを調整して余白を埋めています。
ポイント額の『1,200』がインパクトのあるデザインになりました。
また、キャンペーン期間の日付も一番伝えたい情報の月・日だけ目立たせるため、
『2022』を小さくしています。
04.ハイライト表示
背景色とフォントのカラーを反転して強調します。
コントラストを意識しないと可読性に欠けるので注意が必要です。
『新規会員登録キャンペーン』の文字をハイライト表示にしました。
同系色でぼやけていたバナータイトルも、白とブルーのコントラストがはっきりして見えるようになりました。
05.マーカー表示
マーカーは蛍光ペンのイメージでデザインします。
マーカー色が濃すぎてテキストが読めなくなったりしないように注意します。
蛍光色のイエローで『プレゼント』を強調してみました。
ハイライトと違い主張しすぎず、良いアクセントでデザインも締まって見えます。
06.ドロップシャドウ
文字に影をつけます。立体感が生まれてデザインのクオリティも上がりますが、
使いすぎると野暮ったいデザインになるので、注意が必要です。
ポイント額の『1,200』にドロップシャドウを入れて立体感を出し、より強調させることができました。
バナーデザインに合わせるためフラットなグレーのシャドウにしてみました。
07.境界線・光彩
背景がごちゃごちゃしているデザインや、背景に文字と同系色の部分があるときなどは、
境界線・光彩を用いて強調しましょう。
写真の上の『SummerCampaign』の文字に光彩（外側）を入れ、可読性を上げました。
ポイント額の『1,200』のデザインバリエーションとして
アクセントカラーのイエローを使ってみましたが、
白い背景に蛍光イエローでは可読性が低いので、ブルーの境界線を引きました。
08.括弧
「」『』【】〈〉などのカッコで囲います。
括弧の前後の文字間や位置など調整して使いましょう。
『キャンペーン期間』をもう少し目立たせたかったので[ ]で囲ってみました。
左右に余白ができてしまったので、背景に薄く色を入れて[ ]のエリアを分かりやすくしています。
09.文字上のドット記号
文字の上にそれぞれ点を打つことで単語を強調します。
この点は傍点（ぼうてん）と呼ばれています。
シンプルで使いやすいですが、やはり文中にたくさん使うのはNGです。
『ポイント』の上に傍点をつけて、強調してみました。
アクセントカラーはイエローでしたが、点にすると見えないほどの薄い蛍光色なので、
ここでは2つ目のアクセントカラーのピンクを使用しています。
カラー数が増えると扱いにくくなるので、少しだけポイント的に使いましょう。
10.集中線を追加する
漫画っぽく、カジュアルなイメージで強調された文字になります。
バナータイトルのバリエーションとして、明るくカジュアルなイメージで集中線のデザインを使用しました。
11.ふきだしにする
集中線と同じく、カジュアルな文字に。
ふきだしの尻尾の方向も大事な情報です。
バナータイトルのバリエーション2つ目として使用しました。
キャンペーンでポイントがもらえるという情報を、吹き出しで強調することができています。
12.ボックス
1文字ずつ分解して四角い箱に入れるイメージのデザイン手法です。
ボックスと文字、文字同士のバランスをとるのが難しいので、
うまく使いこなせるようになりましょう！
バナータイトルのバリエーション3つ目として作成。
デザインのクオリティもアップして見えます。
まとめ
文字の強調デザインでよく使う12の例＋バナー応用例をまとめてみました。
上記で挙げた例は基本的なデザインテクニックですが、
頭に入れておくと悩む時間がなくなり作業スピードがアップします。
できればクライアントやディレクターに指示される前に
この程度の文字装飾はサイトのイメージに沿って取り入れておくのがベストです。
ただ、あまりテクニックを詰め込みすぎると、
強調された文字だらけになり意味がなくなりますので、ほどほどにしてくださいね。
また、文字の装飾は読みやすさが最重要ですので忘れずに。
