ホームページを魅せる!【第2回】

ホーム > ワンポイント講座 > ホームページを魅せる!【第2回】

「おつ!」と目を引くタイトルとは? 〜フォントサイズでメリハリをつける

今回はフォントサイズをテーマに取り上げます。

まずは、下の例をご覧ください。 ネットショップには欠かせないセール企画のタイトルの一例です。
 
 
白抜き文字やエンボス(浮彫り)加工など、文字の装飾を駆使して「PRしたい!」という必死さが伝わってくるタイトルですが、文字装飾を多様している割には効果が半減しています。 その原因は、どの文言もほとんど同じフォントサイズを使用していて、全体のメリハリが効いていないからです。
 
セールの期間を強調したい、割引率も強調したい、安さも強調したい、という具合にあれもこれも全部強調したいと肩に力が入る気持ちもわかるのですが、前回の「色」と同様で「フォントサイズ」も意識することで、より効果的に目を引くタイトルを作成することができます。
 
 

ステップ1:情報に優先順位をつける

どんなに優秀な営業マンでも、同時に複数の特長を説明することはできないものです。 「この商品の魅力は、まず第一に北欧風のおしゃれなデザインで・・・、次に従来品よりも1割ほど価格を抑えていて・・」という具合に順序立ててセールストークを展開しながら、お客様にすべての特長を伝えようとします。

どんなに優秀な営業マンでも、同時に複数の特長を説明することはできないものです。 「この商品の魅力は、まず第一に北欧風のおしゃれなデザインで・・・、次に従来品よりも1割ほど価格を抑えていて・・」という具合に順序立ててセールストークを展開しながら、お客様にすべての特長を伝えようとします。

ステップ2:フォントサイズにメリハリをつける

情報の優先順位が決まったら、その優先順位に合わせてフォントサイズに差をつけます。

この際、わずかな差ではなく思い切った差をつけることでメリハリが生まれ、優先順位を視覚的に伝えることができるようになります。

 

左の図よりも、右の図の方がメリハリが効いています。

以上のようなポイントに沿って改善した一例が下のタイトルです。 いかがでしょうか? 上から下、左から右に視線が自然と流れ、ステップ1で設計した優先順位に沿って情報が眼に入ってくることを実感して頂けると思います。

 

ステップ3:WebPilotで文字のフォントサイズを変更してみよう

最後に、WebPilotでフォントサイズを変更する方法をご紹介します。

WebPilotでフォントサイズを変更するには、変更したいテキストを選択し、ツールバーの「サイズ」からフォントサイズを選択するだけで完了です。

 

このページの先頭へ