- デザイン
読みやすく、伝わる文字選びと文字組
ドコドアでは、サービスの向上・品質の均一化のため、ディレクション・デザイン・コーディングなどの役割に合わせて考えられた【ガイドライン】に基づいてWebサイトを制作しています。
今回のブログでは、その内容を一部抜粋した形でご紹介させていただきます。
文字の役割について
Webサイトをデザイン・レイアウトするとき、サイズ、書体、字間隔、行間隔、色など、どのように「文字」を構成するかで全体のイメージや情報の伝わりやすさが大きく変わります。
また、画像にするかテキストにするかなど、閲覧環境や表示特性に合わせたデータの準備も必要になります。まずは、文字と写真の違いについて理解しましょう。
写真や色・・・「信頼できる」「親しみやすい」などの雰囲気やイメージを伝えるための要素
文字・・・伝えたい内容（情報）を確実に、正確に表現することができる要素
イメージに合う書体の選択
書体の役割はとても重要です。間違えるとWebサイトのイメージを悪くしてしまいます。そのため、書体の印象を理解し、用途やコピーに応じた書体を使用することが大切になります。
また、使用する書体の種類が多すぎるとまとまりがなくなるため、デザインとして必要な場合以外は、基本的に2〜3種類程度に抑えましょう。
イメージに合った書体選びのNG例とOK例
【NG例】内容と書体のイメージが合っていない為、サイト全体の雰囲気が悪くなります。
【OK例】適切な書体を選ぶことで内容をしっかり理解できます。
読みやすい文字組み
続いて読みやすい文字組みにするためのサイズ、字間隔、行間隔についてご説明します。
役割に合わせた文字サイズ
人の視線は大きいものから小さいものへ移っていきます。
レイアウトを考えるときはこの認識の順番を考慮してサイズに変化をつけることで、自然に視線を誘導できます。文字をレイアウトする場合も、読んでほしい順番に合わせて文字のサイズを変えて構成することが、自然に視線を誘導するポイントになります。
【NG例】文字をメリハリなく並列の扱いでレイアウトしてしまうと、視線が定まらず全体がぼやけた印象になります。
【OK例】最初に目を引くための「キャッチコピー」、全体の内容をまとめた「リード」、内容を詳細に記述する「本文」、本文をパートごとに要約して冒頭に掲載する「見出し」など、役割に合わせて文字サイズに変化を出すことで、意図した順番で読ませることができるようになります。
演出したいイメージに合わせた字間
字間を調整することで、特定のイメージを演出することもできます。
あえて字間をかなり開けて文字をレイアウトすると、ゆったりとした余裕が生まれて上品なイメージになり、お互いの文字が接するほどに字間を狭めて構成すると、勢いがついて迫力のあるレイアウトになります。
ゆったりとした字間にすると余裕が生まれて上品なイメージになります。
お互いの文字が接するほどに字間を狭めて構成すると、勢いがついて迫力のあるイメージになります。
読みやすい行間と文字数
字間の調整による印象についてお話しましたが、文字を読みやすくするためもう一つ重要なのが行間です。
ユーザーに負荷なく、じっくりと読み込んでもらうためには行間も適切に設定することが大切です。
また、1行の文字数が多いと視線の移動距離が長くなり、短すぎると視線の改行移動が多くなりすぎてユーザーの負担になるため、集中力が持続するような文字数で1行に収めることが読みやすさに繋がります。
文章を読みやすくする罫線を使ったテクニック
条件によって文字サイズ、字間、行間の設定だけではうまく解決できない場合もあります。
そういった場合に使える【罫線】を使ったテクニックをご紹介いたします。
罫線を利用する
1本のラインが入っていることで、コンテンツ同士を明確に区切ることができコンテンツ同士が別の要素であることを表現できます。
1本の罫線では静的なイメージですが、2本、3本…と増やすことで、その間隔に合わせた「動き」が生まれます。複数の項目を並列にレイアウトするWebサイトのグローバルナビなどで利用すれば、安定したリズムから使いやすい印象を与えることができます。これにより、シンプルな構成でも整然とした美しさのある外観になります。
コントラストを強調する
特定のコンテンツを他の領域と差別化して強調したいときには、罫線を囲み枠として利用するのも良いです。囲み枠の太さを変えることで強弱を付けることもできますし、囲まれた領域の背景色を変えることで、レイアウト全体に変化が出て、視覚的なアクセントにもなります。
「読みやすさ」は「伝わりやすさ」
ここまで、読みやすく、伝わる文字の選びと文字組みについてご紹介しました。
情報を伝える為に文字は必要不可欠な要素です。普段我々が何気なく見ているWebサイト、雑誌、広告なども、基本的には今回ご説明したようなルールを元に作成されています。だからこそ「なるほど」と思えたり「いいな」と感じることができるのです。
そういった読みやすく伝わる文章を作る最初のステップとして、下記3点を意識してみてはいかがでしょうか。
- 文字の役割を理解する。
- どういった印象を与えたいかを考える。
- 適切な行間と文字幅を設定する。
最初は難しく感じる部分もあるかと思いますが、実際に考えながら作成してみると徐々に理解ができてくると思います。
ご自身で作成したWebサイトや資料などが「なんかパッとしない」と感じている方は、是非ご紹介した方法を活用し読みやすく、伝わる文章の作成にお役立ていただければと思います。
