お客さまと直接会って話すことが叶わないWebサイトにとって、文字は商品やサービスの良さを伝えるために大切な要素。また、「美しく読みやすい」文字組みをデザインするためには、フォント・文字サイズ・太さ（ウエイト）・行間隔（行間）・文字間隔（字間・カーニング）など、文字同士のバランスを取ることが求められます。この文字組みの技法は “タイポグラフィ” と呼ばれ、適切なタイポグラフィを用いてデザインすることが、良いコミュニケーションを取るためにとても重要なのです。
シリーズ「フォントでコミュニケーションする方法」では、デザイナーがフォントに対して日々感じていることを対談形式でご紹介。今回も3名の女性Webデザイナーの皆さまに、タイポグラフィについて考えていることをざっくばらんに語っていただきました。
フォントは決まった！ さて、次はどうしよう？
ほとんどのWebサイトには、読ませるための「テキスト（文字）」が存在します。例えば、商品やサービスの説明、クチコミ、プロフィール、Q＆A、お店や会社の概要etc. 数えだすとキリがありませんよね。つまり、テキストはWebサイトにおいて多くの面積を占めることになり、タイポグラフィを適当にしてしまうと、デザインも適当な印象になってしまいがち。そうならないように、デザイナーは何を意識しているのでしょうか。
■時代によって、Webサイトに求められるタイポグラフィは変化する？
— みなさんは、Webサイトの文字部分のデザインをするとき、どのようなことを意識しているんですか？
デザイナーA：デザイナーは誰でもそうだと思いますけれど、まずは「美しくて読みやすい」ことですよね。
デザイナーB：かつてはファーストビュー（Webサイトで最初に表示される画面領域のこと）に、言いたいメッセージを全部収めて欲しい！ というオーダーが多かったんです。ただ、ディスプレイの限られたエリアに必要な文字要素を収めようと思ったら、字間や行間を詰めたデザインにする必要があったりで。でも、詰めすぎると読みにくいし、正直、読む気が起こらないというか…。最近は比較的そのようなオーダーも減ってきて、読みやすい文字組みができてうれしいです。
デザイナーC：モバイル環境への対応や、レスポンシブデザインが普及していくことで、どんな端末でも「スクロールさせること」がネガティブ要因ではなくなってきていますしね。
デザイナーA：あと、行長（1行あたりの文字数）も意識しています。長くて1行40文字くらいがいいと思っているんですけれど、最近はディスプレイが大きくなってきているから、多少は文字数越えても大丈夫かなって。
— なるほど、その時代で多くの人が使っている端末に適したタイポグラフィがあるんですね。
■タイポグラフィで余白をデザインしたい
— ちなみに字間や行間って、広い方が文字組みはキレイに見えますか？
デザイナーB：一概にそうとも言えないんですけれど、“読ませる文字”をアプリケーションにお任せで流し込むと「若干読みづらいかな？」という印象を受けることがあって、私は少し広めに取ることが多いです。
デザイナーC：広げすぎると、それはそれで何だかパラパラして一定量以上の文章を読ませるのには向かないから、そのバランスが難しいですね。“見せる文字”、例えばキャッチコピーやブランドコンセプトのような短文は行間が広いのがハマるんですけれど。
デザイナーA：詩的な文章は行間広めなほうが雰囲気でますよね。あと、“読ませる文字”でも、写真につけるキャプションは行間広めでもしっくりきます。文字を“読ませたい”のか、それとも“見せたい”のか。そこをきちんと理解してタイポグラフィを考えると、「美しくて読みやすい」文字がデザインできるんだと思います。
デザイナーB：あと、行間って一般的に150％から170％くらいが読みやすいとされているんですけれど、最近はクライアントさんによっては200％くらい取ることもあります。
— 例えば、どんなクライアントさんですか？
デザイナーB：手作り感があったり、素材にこだわっていたり、女性向けだったり。柔らかい印象のクライアントさんですね。いいデザインって、行間や余白の使い方が上手いんだと思います。
■私たちがこだわる、タイポグラフィのあれこれ
— 他にタイポグラフィでこだわっていることって、ありますか？
デザイナーA：個人の好みが出てくるんですけれど、私は、カタカナは詰めた方がキレイだと思っていて。細かい話をすると、小さい「ッ」や「イ」「ト」を見ると詰めたくてウズウズします。あと、例えばWebサイトで「Q&A」のコーナーを作る時、「Q」のヒゲ部分（スワッシュ）は細くてシュッ！ と伸びているほうがキレイだと思うので、Q&Aの部分だけヒゲの立派な（笑）別のフォントを選んだりします。
デザイナーB：当たり前のことかもしれませんが、見出しと本文とでヒエラルキーを意識します。見出しは「見出しらしく」フォントサイズを上げてウエイトを太らせ、必要であれば色も変える。ジャンプ率が高いと元気な印象を受けるし、低いと知的で上品な雰囲気が出ると思っています。でも、低すぎると見出しっぽく見えないから、バランスが難しいですね。
デザイナーC：私は、文字に長体（文字を縦長に変形させる）をかけると文字組みがスタイリッシュになるし、限られたスペースにたくさんの文字を流し込めておトク？ なので、よく使います。あらかじめ長体のかかったコンデンス書体もありますし、WebフォントならCSSで自由に長体がかけられるので、デザインの可能性が広がりますね～。
— どのフォントを選ぶかに加え、全体の並び方のバランスを取ることも重要なんですね。これから私も、もっと意識して文字組みを見るようにします。深くて面白い世界ですね…。
（次回へ続く）
