Basic Design Note

キチンと伝えるための文字レイアウトの考え方

Categories|デザイン, 文字 tags| , ,
文字のレイアウト

文字の基礎をテーマにしたお話の4回目。今回は「文字や文章の配置(レイアウト)」についてです。「文字の読みやすさ」だけでなく、情報の「見やすさ」と「伝えやすさ」が中心の内容となります。

■レイアウトをする上で大切なこと

レイアウトとは「配置」であると、以前WEBサイトのレイアウトの記事でも書きましたね。

WEBサイト全体のレイアウトと、文字のレイアウトだと違いがあるようにも感じられますが、どちらも画面や紙面の「情報を目で見る(文字を読む)」ということに変わりありません。その為、文字のレイアウトに求められる目的も同じく「情報の閲覧がスムーズに行えること」と言えます。

■情報の閲覧をスムーズに行うためには?

では、この目的を果たすためには「どういった部分に気を配る必要があるか?」を知っておく必要がありますね。そこで気をつけたいポイントとしては以下の4つが挙げられます。

情報の閲覧をスムーズに行うため4つのポイント

文字や文章は目で見て、読むことで意味や内容を理解します。その為には情報を見せていく際の「効率や順序」を考えてレイアウトを作る必要があります。ここから先は、この4つのポイントを基にして具体的な「見せ方」を考えて行きましょう。

■主題を明確にするために。

文字情報の中でも、製品(商品)やサービスの名称、イベントのタイトル、興味を抱かせるためのキャッチコピーなどが「主題」として扱われます。

これらが見る人の目にとどまり、興味を持ってもらうことで、そこから先の「詳細情報」を見てもらえる可能性が高まります。そのためにも、主題となる情報は「明確にする」必要がある訳です。

[1.]主題の扱い方について

WEBサイト内や紙面の文字情報には主題以外にも、それらを補足するサブタイトル、簡潔に内容を説明するボディーコピー、イベントの会期情報など、いくつもの情報を同じ画面(紙面)で扱うことになります。

主題の扱い方について

上記のサンプルをパッと見てどれが主題なのかわかりますか?どの情報も見た目に差が無いので、一瞬見ただけではわかりにくいですね。

ここでの「主題を明確にする」ということは、視覚的に他の情報との「見た目の対比(コントラスト)」をつけ、最初に見せたい情報を「わかりやすくして注目を集める」と言うことになります。

[2.]視覚的なコントラストとは?

先の例の良くない部分は、どの文字も見た目(文字サイズや色)に「差がない」ところです。そこで、主題となる部分に「見た目の差」を与えてみます。

主題を他の要素よりも目立たせてみる。

主題(タイトル部分)の文字サイズを、他の文字情報よりも大きい文字サイズに変更して、他の部分と差をつけてみました。これだけでも最初の状態より主題部分が目立つようになりましたね。

見た目の対比(コントラスト)は、文字サイズを変えるだけでなく、他にも多くの方法で変化をつけることが可能です。

文字のコントラスト例

ここで気をつけたいこととして、わずかな対比では「見た目の変化」が乏しいので差がわかりにくいことです。「ハッキリとした差をつける」ことが「対比(コントラスト)」のポイントになります。

コントラストが弱い例

上記の様に見た目の差がわずかだと、変化に気づいてもらえず見る人に「何が重要か?」「何を伝えたいのか?」という意図が伝わらないままになってしまいます。また「文字サイズや色の設定ミス」をしていると捉えられることもありますね。

■読む人の視線の動きを考えて「情報を整列」させる。

次は情報の「整列」です。この整列についても、ただ並べるのではなく見る人の「視線の動き方」に気を配りながら整列させると、より効果的な配置が可能です。

[1.]見る人の視線の流れ方を知っておく。

WEBサイトでも紙媒体でも情報を目で追う場合、見る人の視線は「上から下」へ流れていきます。また、文字については記載されている文字(文章)を横に組んだ場合だと「左上から右下」へ、縦に組んだ場合だと「右上から左下」へと読み進める方向へ視線は移動します。

基本的な視線の流れ方

こういった点から考えると、多くの媒体で視線は「左上」から「右下」に向かって動くことが基本であることがわかります。だからこそ、情報の各要素はバラバラに配置するよりも、整列させているほうが「効率よくスムーズに情報閲覧ができる」と考えられますね。

[2.]揃える基本は「左揃え(頭揃え)」

この「視線の流れ方」を基に先ほどのサンプルを見てみましょう。

視線の流れ方から、もう一度見直してみる。

主題は情報の上の方にありあますが、一番最初にはありません。また、それぞれの「読み始めが揃っていない」ので、視線が乱れて読みにくさが目立ちます。これらを先ほどの「基本的な視線の流れ方」に沿って修正を加えてみます。

視線の流れ方に沿うように修正を加えると…

情報の主題は最初に目につくようにしたいので「情報の一番上」に位置づけました。そうすることで、それ以下の情報は「主題に関する情報」であることが自然と理解できます。

また、全体の文字要素の読み始めを「主題の行頭と同じ位置(左側)」で揃えました。これで、それぞれの行頭も揃い、視線も乱れにくくなり、先ほどよりも読みやすくなりましたね。

このように「基準となるライン」を設け、それに沿って並べると情報が見やすくなります。(このサンプルの場合の基準は「左側(主題の行頭)ですね。)また、基準線に沿って情報を上から下に目で追えば、「主題→詳細」という自然な流れに沿って情報を見せていく事もできますね。

[3.]基本的な揃え方のパターン

オーソドックスな例として「左揃え(頭揃え)」を挙げましたが、他にも基本的な揃え方がありますので、いくつか挙げてみます。

その他の基本的な揃え方

■情報の関連性を考えた「グループ分け」

扱う文字情報を見ていくと、情報ごとに「関連性の高い情報」と「内容の異なる情報」というものが存在します。ここでは情報の「グループ分け」について考えてみましょう。

視線の流れ方に沿うように修正してみたけれど…

サンプルを見ると、主題は情報の一番上に移動させ、整列もしていますが掲載している情報の並べ方が無茶苦茶で、情報同士の「繋がり(関連性)」がわかりにくく、内容をキチンと理解させるには不親切な状態です。(それぞれの情報を個別に読むと、一つひとつの内容は理解できるけれども・・・。)

[1.]それぞれの「伝えたいこと」を理解して、グループに分ける。

情報ごとのグループ分けを行う前に、まずは情報それぞれの「伝えたいこと」を簡単に見てみることにしましょう。

掲載する情報の「伝えたい内容」を見ていくと…

こうして内容を見ていくと、全て主題に関連している情報ではありますが、それぞれ伝えたい内容に違いがあることがわかります。こういった部分を理解した上で、関連する情報同士をグループとしてまとめると以下の様になります。

関連する情報同士をグループとしてまとめる

[2.]情報の優先度に合わせて順番を決める。

その次にグループ分けした内容から、「優先度」と「意味が伝わりやすい順番」に改めて並べ替えてみましょう。

情報を優先度に沿って並べ替えると…

情報の流れとして、やはり主題を最初に持ってくる必要があるので、【A】のグループ(タイトル→サブコピー→紹介文)」の優先度が一番高くなります。その次に【B】の催しの詳細事項(場所・時間・費用)を起き、最後に主催者の情報という順番が一番自然な流れになりますね。

こういったグループ分けを行う理由は、先ほどの視線移動とも関係があり、「隣り合う情報(近くにあるもの)」にも視線は移りやすいとされているので、関連する情報同士はできるだけ近くに置いておく必要があるのですね。

サンプルの場合はかなりわかりやすい内容としていますので、ここまで詳細に調べなくても理解が可能ですが、もっと多くの情報を扱う場合は、こういったグループ分けをキチンと行うことで「自然な流れで情報を見せ、理解を促す。」ことにつながっていきます。

■「適度な余白」で、画面にゆとりとメリハリを。

最後に重要な要素として「余白」を作ることが挙げられます。限られたスペースの中にできるだけ多くの情報を掲載したい気持ちはありますが、余白のコントロールができていないと、かえって「読みにくさ」を生み出してしまうことにもなります。

[1.]余白は「無駄な空間」ではない。

余白とは、情報の要素が「何もない空間」ですが、決して「無駄な空間」ではありません。

この余白があることで、見せたいものや、注目させたい情報に「意図的に視線を注がせる」ことができたり、意味合いの異なる情報を「分ける」こともできます。(先ほどのグループ分けとも関係してきますね。)また、余白をうまくコントロールすることで、「見た目の印象」を変えることも可能となります。

[2.]余白のコントロールで変わる印象

以下のサンプルでは余白の設定が違うサンプルを用意しました。比較的「余白が多いもの」と、「余白が少ないもの」です。この2つのサンプルを見ながら「余白」について考えてみましょう。

余白の設定の違う画面を見比べてみましょう。

まず、余白を多く設定しているものは「間(ま)」が多くあるので、画面を見た時に「ゆとりがあり、落ち着いた印象」を感じることができます。また、主題の周りにも多めに余白を取っていて、周りに目につく物が少ないので、他の要素に比べ目立つようになり視線も集めやすくなるメリットがあります。

それとは違い、余白を少なく設定しているものは、情報同士の間が詰まっているので密度が高まり「活発で元気のある雰囲気」や「情報がたくさん詰まっている」印象を感じることができますね。ですが、見る人によっては余白が少ないことで「窮屈さや息苦しさ」を与える場合もあります。

今回のサンプルの情報は「展覧会の告知」なので、美術館などの「静かで落ち着いた雰囲気」の中での開催ですから、余白を多く取った方が、展覧会の内容とマッチしていると言えますね。

このように余白をコントロールすることで、見た目の印象を変えることができます。また、文字の読みやすさと、見せたい情報への視線誘導、情報の分断をすることもできますね。

■今回のまとめ

  • 主題は他の情報と視覚的な差別化(対比)をして、明確にする。
  • 見る人の視線の動きに配慮しつつ、情報を整列させる。
  • 関連する情報同士は近づける。関連性の低いものは遠ざける。
  • 適度な余白で、読みやすさと見た目の印象をコントロールする。

最初にも書いた通り、文字は読むことで意味や内容を理解します。文字そのものの「見やすさ(視認性や可読性)」も文字を扱う上で重要ですが、加えて「情報の見せ方(上手な伝え方)」を知っておけば、伝えたい人へ的確に、正確な情報を届けることができますね。

WEBサイトの場合、「テキスト文字」と「画像文字」の2つを画面上に混在させることにもなりますが、レイアウトに関する基本的な考え方はどちらの場合も変わりません。

文字の基礎に関する記事は今回で一旦終了です。(最後の記事の公開に時間がかかってホントに申し訳なかったです。)文字に関しては書くべき情報がとても多くあるので、また別の機会に改めて書いてみたいと思います。

Pocket
LINEで送る

コメントはこちらから

Page top