近年パララックスエフェクトや動画を組み込んだ動きのあるコンテンツを用いるケースが増えておりますが、
「伝える」という観点において考慮すべきは「文字の可読性」です。
デザイン性に富んだページが増える中、今一度webデザインにおける文字の組み方に注力してみましょう。
■ツメの甘さが招く誤解
webデザインでは、テキストで書かれた文字と見出し画像などに書かれた文字が存在します。
例えばテキストの場合は文字間の調整が難しいですが、
見出し画像などはベタ組みよりもきちんと文字詰めをすることで格段に見栄えがよくなります。
しかし文字の扱いに対しては、
意識するデザイナーとそこまで意識しないデザイナーで二極化しています。
そもそも文字詰めをすることは、デザイン的な美しさはさもありなん、
しかしながら最も重要なことは「読み手への配慮」です。
ぱっと見た印象ですと文字のベタ組みでも十分可読性はあります。
しかしプロが見ればそれは一目瞭然であり、消費者へのコピー通達力に差が出ます。
一生懸命細部にまでこだわったデザインも、
文字組みがされていないツメの甘さが垣間見えた途端、大味になってしまいます。
だからこそ、文字組みをしっかり行っていると
全体のデザインに溶け込み美しさを生み出し、消費者の認知向上、滞在時間の確保、クリック誘導につながります。
■強調したい部分と文字組みの相関性
漢字はベタ組みでもさほど問題はないですが、
ひらがなやカタカナは文字ごとに間隔の取り方が大きく違うため必ず調整を行いましょう。
特にひらがなの「し」やカタカナの「ト」などは、ベタ組みのままだと左側が無駄に空いています。
また、句読点やかぎかっこなども前後に間隔が大きく空くため、
周りに配置した文字に考慮しつつ適度に詰めて、より美しく読みやすい流れを作りましょう。
更に、特に強調したい部分には文字組みにプラスしてもう一工夫加えましょう。
例えばECデザインでよく登場する金額表示も
「500円」という文字をベタで組むと「500」よりも「円」が大きくバランスが悪くなる可能性があります。
そこで強調したい「500」の文字サイズを大きくし、
更に「円」のサイズを半分から3分の2程度に調整することで、数字の部分が強調され訴求力が高まります。
これは割引の際に用いる「○○％OFF」なども同様です。
また、「～は」や「～に」等の助詞も一回り小さくすることで文字にリズムと抑揚が生まれます。
これらの一連の流れは、文字自体を使ったタイポグラフィに通じるものがあります。
文字詰めは追求していくと時に深みにはまることもありますが、
そんな時は「読み手への配慮」を意識しながら進めましょう。
そうすることで読み手に伝わる最善の文字間隔が掴めます。
文字組みの手法については
カーニング、字送り、文字詰めといったキーワードで検索すると
いろいろ出てきますので記事を読みながら実践してみるとスキルアップにもなります。
バランスのよい文字組みでデザインにインパクトを与えましょう！
ネットショップの運営で人材不足・ノウハウ不足でお困りの方は「EC運営代行サービス」をご検討ください。
人材はいるけどノウハウ不足でお困りの方は「ECコンサルティングサービス」をご検討ください。
