ノンデザイナーでもよくわかる文字のデザインと情報伝達5つのポイント
文字って、読まない人にとっては邪魔なもの
特に日本語は漢字かなが混じり、カタカナやアラビア数字とアルファベットも混ざるので、濃淡や高さ、句読点や段落によるマージンのバランスにより、見た目の美しさを求めるのは難しいのです。
せめて不愉快でないように整えるぐらいが精一杯です。
一方、その情報を探し求めている人にとっては、見た目より大事なことがたくさんあります。
1.見つけやすさ
まずなんといっても大事なのが見つけやすさです。見つけられない限り決して読まれません。
探してるのに見つからないと、踊り出して夢の中へ迷い込んでしまうかもしれません。
この見つけやすさは、しばしば画面内のレイアウトの優先度やピクセルバジェット（面積の取り合い）との相談になります。
また、目に見える要素だけでなく、そこに情報があることを期待させたり予想させたりする、意味のつながりも見つけやすさを左右します。
2.ユーザーの利用文脈
例えば、「アクセス」というラベルを見て予想されるものと「事業所案内」「会社概要」は同じではありません。
でも、住所を知りたいというニーズにとってはどれでも含まれていそうです。
住所といっても、会社に訪問するための経路や最寄駅を知るためのニーズと、取引先としての基本情報を確認するため登記上の住所を知りたいニーズと、請求書を郵送するために担当者のいるオフィスまで届く住所を知りたいのか？によって内容が全然違う可能性もあります。
だからといって「住所」というラベルをつけたリンクや個別ページを設けるかというとそれは冗長です。
・行動文脈に合わせた構造化
そこで、こういう場合はさまざまなニーズを持つユーザーの行動文脈に合わせて、構造化を行います。
取引先や就活生などの来訪者に確実にわかりやすくアクセス情報を伝えるためには、来訪してほしい玄関や受付のある場所がユニークに指定できるように個別のURLがある方が便利です。
メールや何かの媒体にそのURLをコピペする or 掲載するだけで、場所の特定ができます。
その個別のURLを持っているのは、Webページに限らずPDFファイルでも構いません。
・個別のページを一覧化する
それらの個別ページやファイルがインデックスされたリストのページ（いわゆる事業所一覧ページとか）には、一覧性が重要なユーザーのために住所（入居ビルの複数のフロアに分かれる場合は受付のフロアを）はテキスト情報で持たせるべきでしょう。
このインデックスページはあくまで来訪や郵送の目的のための住所を探すユーザーへの情報なので、会社として登記された事業所などの情報は会社概要のページに記載すべきです。
そして、その会社概要のページからこのインデックスページには、「拠点」や「アクセス情報」としてリンクさせると良いでしょう
また、事業やサービスのページからも来訪ニーズが発生するのであればインデックスや個別ページへのリンクを設けると良いでしょう。
このような構造化によって、見つけやすさは担保しつつ、必要な情報を邪魔にならないようにレイアウトすることができるようになります。
CMSを使っているなら住所マスタにすることで、変更の際の更新漏れを防ぐこともできます
3.読みやすさ
ある程度の情報量や複雑な論理構造を持っていてそれなりに長い文章でしか表現できない時は、テキストが多くなることを受け入れるデザインが必要です。
この時、ユーザーは集中して文字を追い頭を使って理解しながら読み進めていきます。
必然的に読みやすさが重要になってきます。
・余白
読みやすさを左右する要因として、余白とストレスの関係があります。
テキストブロックの周りのマージンや段落のマージン、あるいは行間や文字間のスペースは読みやすさを大きく左右します。
また、余白を広めに取ると高級感の演出につながりやすく、文字の大きさ調整と合わせてよく使われる手法です。
また、文字間の詰めはフレーズや単語を読みやすくする上でも重要なテクニックのひとつです。
最近は画像化しなくてもある程度調整が利くようになってきたので、ここぞというところでは丁寧に処置しましょう。
ただし、きちんと読んでもらうことが必要な文章の場合は過度な演出は避けた方が良いでしょう。
・フォント
余白と並んで読みやすさに影響を与えるのはフォントの選び方があります。（大きさについては別の機会に説明します）
明朝体かゴシックかについては理解も広まっていますが、ウェイト（太さ）も忘れずに全体の中で階層を設計すると良いでしょう。
また、本文だけでなくビュレットやリスト番号など、箇条書きで使用するパーツも読みやすさにとって大事な要素です。
目立ちすぎない範囲で本文との関係を区別しつつ、項目の改行と並列の項目の区別をわかるように設計することが重要です
4.理解しやすさ
文章を見つけてもらって、ストレスなく読んでもらっても、理解できなければ役に立ちません。
内容の複雑さによってもその難易度は左右されますが、デザインの力で理解しやすくするためのポイントがいくつかあります。
・階層構造
ユーザーは書き手の表現のままに理解するわけではありません。
読み取った情報から自分の頭の中で要素や論理の再構成を行います。
それが納得のいく形になった時にはじめて、わかったという実感が生まれ、理解につながります。
この一連の活動を助けるためには、理解してほしい実体を小分けにして階層化することが効果的です。
小分けになっていることで、ユーザーはワーキングメモリの範囲内で、理解するために必要な脳内活動をこなすことができるようになります。
これがないと、ユーザーは本当に理解するためにメモ帳とペンを用意して整理しながら読み進めなくてはなりません。
Webの画面の前でそこまでやってくれるユーザーは皆無（まれ）でしょう。（高級なカメラ機材を選ぶ時などは必死なのでやるときはやります）
HTMLには文書の構造を明確に定義づける記法があります。
記法通りにマークアップされたものに対して、階層構造がわかるようにスタイルを当てていくのは難しいことではありません。
重要なのは、ユーザーが理解しやすくなるための小分け作業という観点です。
・論理構造
ユーザーが理解する論理構造とは、「AゆえにBになる」とか「AはBであり、BはCなので、AはCである」など、因果関係や相関関係などを把握することをさします。
ユーザーが論理構造を理解するには、「速い脳」と「遅い脳」それぞれに働きかけることがコツのひとつです。
「早い脳」と呼ばれる部分は、直感的に関係性や因果関係・作用機序などを理解する役割なので、視覚要素が占める割合が高くなります。そのため、ある文字と文字とのグルーピングやマージンによって、その伝達ができる部分です。
「遅い脳」と呼ばれる部分は、自分の中で咀嚼して再構成して理解する部分です。ここでは、まず大くくりの枠をきちんと伝えて細かい補足を注釈の形で補うことで理解される確率が高まります。
5.インタラクションとアフォーダンス
階層構造と論理構造を適切にした上で「インタラクションとアフォーダンス」に配慮すれば、かなりわかりやすくなるはずです。
文字の場合特に一番重要なのは「押せるのか？」（クリックできる文字かどうか？）が一番大事です。
「押せそう」という期待を抱かせるアフォーダンスは、ホバー（マウスのポインタを乗せたとき）時にアンダーラインが出たりポインタの形が変わったりするインタラクションによって示すことがよくあります。
ただ、このホバーのイベントはタッチデバイス（スマホとかタブレット）には使えないため、別のソースで対応しない場合は別の手段が必要になります。
よく浸透している古典的な方法は、文字色の変化があります。最近では色調は同系で濃淡によってクリッカブル（押せる）かどうかを表すことが増えてきました。（濃淡は色の認識が多くの方と違う人でも認識しやすいメリットがある）
他にも文字の下地に色をつけたり、枠囲みをしたり、文字の横にアロー（不等号のマーク）やプラス、マイナスボタンをつけたりして、アフォーダンスを確保することがあります。
いずれも「押せるよ」ということをメッセージするUIを使って、ユーザーに操作できる可能性を示すことが重要です。
以上、５つのポイントに絞って文字のデザイン、特にレイアウトと伝達の話を中心に手短に解説しました。配色やナビゲーションや情報設計についてはまたいつか書きます。
デザイナーではないけれど、デザイナーが出してきた案に対して意見をしなくてはならない立場の方（開発エンジニアとか、マネージャーとか、ディレクターとか）が、「文字のデザイン」が気になった時に是非とも読んでいただければと思います。
おまけ。さまざまな画面幅・タテヨコ比への対応
最近、UIデザイナーを悩ませる大きなテーマがこれです。
ちょっと昔のPCのモニターを見ると、まるで正方形に見えてしまうぐらいデスクトップにおいては横長の形が増えてきました。
一方で、スマートフォンは徐々に画面が大型化し、それでも片手で持つことを想定して縦長になりつつあります。
やっかいなのは、これが横使い・縦使い両方できちゃうこと。
紙の時代や、テレビの画面で見ることが前提の時代は、枠の中に綺麗に収まっていることがとても重要だったのですが、枠の大きさや向きがユーザーに委ねられている現状では「文字のデザイン」は、単純な見た目のよりもっと本質的なところに注力する必要があります。その方が結果としての情報伝達効率を高めることになると思われてならないのです。
【参考】文字以外も含め「レイアウト」について、この方のnoteがとても分かりやすく書いてありました。（スライドが素晴らしいです）
この記事が気に入ったらサポートをしてみませんか？