課題解決のためのUI/UX

情報デザインで考えるフォント選びの基礎

綾塚祐二

2019-11-15 07:00

 一般の人たちに「情報デザインの基礎」を説明すると、「フォントの選び方」について質問を受けることがある。プレゼンテーションのスライドやポスターにおいて、「フォント」(印刷物やPCの画面上で使われる書体)は重要な要素の一つである。フォント選びによって内容の伝わりやすさや印象も変わり得るためだ。

 最低限気を付けるべきポイントはさほど多くないが、少し踏み込もうとすると奥の深い世界であり、細かな意図や雰囲気なども考慮する必要がある。また、単なるデザイン面だけでなく、PC上で扱うときに気を付けることもある。今回はそうしたフォントにまつわる基本的な考え方を見ていく。

フォント選びの基礎の基礎

 人前でのプレゼンや事務的な告知のポスター、学術発表の資料など、通常の情報伝達では視認性や判別性、可読性を優先したフォントの選択が重要なのは言うまでもない。文書やスライドの中でのフォントの使い分けには意味を持たせるべきだが、フォントの種類が多過ぎるとまとまりがなくなってしまい、閲覧者の混乱を招きやすくなり意図も伝わりにくくなってしまう。一般的には、せいぜい3種類までにしておくべきであり、さらに基本的には見出し用と本文用の2種類で十分である。1種類でも構わない。

 見出し用と本文用の文字は、コントラストがはっきりしていた方がよい(もちろん、見出し用の方が目立つようにする)。フォントの使い分けをする際にも、コントラストがはっきりする組み合わせを選ぶのがよい。フォントが1つでも、太字(ボールド)と標準(レギュラー)でメリハリがあれば、それを見出しと本文で使い分けることもできる(ただし、本文中での強調表現をどうするかを別に考える必要がある)。

 例えば、Windows標準のゴシック体フォントだと、古くからある「MSゴシック」や最近の「游ゴシック」に比べて、「メイリオ」はレギュラーとボールドの差がはっきりしており、メリハリを利かせる目的では使いやすい。逆に、用途によってはコントラストが強過ぎて、中間の太さが欲しくなるかもしれない。

ゴシック体と明朝体

 「ゴシック体」とは何か。日本語において(フォーマルな状況などで)よく使われるフォントはゴシック体と明朝体に大別される。字画の線の太さがおおよそ一定で、装飾的要素を排したフォントがゴシック体と呼ばれ、欧文フォントで言うところのサンセリフ体(sans serif)に相当する。一方、「明朝体」は、「一」の字などの横棒の右端に三角形の「うろこ」が付くようなフォントであり、欧文フォントではセリフ体(serif)に相当する。字画の縦棒と横棒とで太さに差を付けたり、はねや払いを太さの変化で表現したりするのも特徴である。

 明朝体は、長文の印刷物などでは好まれることも多いが、線の太さに差があるためスライドやポスターの本文に使いにくい。特に小さな文字では線が細すぎるため、プリンターやプロジェクターの解像度によっては、線が欠けてしまうこともあるので注意する必要がある。スライドやポスターの本文では基本的にゴシック体を選択した方がよいだろう。

 長文の文書などでは、コントラストをよりはっきりさせる意味でも、本文に明朝体、見出しにゴシック体(の太字)という組み合わせがよく使われる。インタビュー記事などで、聞き手の問い掛け(相対的に短い)などがゴシック体で、インタビューされる人の話(相対的に長い)が明朝体になっているというような使い分けの例もよく見られる。

フォントデータ

 最近のPCには、初期状態からさまざまなフォントがインストールされている。それに加えて、有料/無料も含め、いろいろなフォントを追加することも簡単である。その一方で、スライド内でフォントを指定してあっても、表示するPCにそのフォントがインストールされていないと、そのままでは利用できない。

 PDF/Aと呼ばれる規格や最近のPowerPointでは、スライド中で使用しているフォントのデータをファイル内に埋め込んでおき、そのフォントがインストールされていない環境でも表示する機能がある。だが、フォントの種類によってはライセンスの制限(フォントも著作物である)により埋め込めないこともある。自分のPC以外の環境で使うときや、特に他人が編集する可能性のあるファイルには、OS標準のフォント以外を使わない方が無難である。

 アプリケーションでのフォント選択時に、それが埋め込み可能かどうかや標準フォントであるかなどが分かる仕掛けがあればいいのだが、少なくとも筆者は見かけてことがない。これは良いユーザー体験(UX)とは言えないので今後の改善が望まれる。

 ちなみに印刷所にデータを送って印刷するような場合には、テキストデータを図形に変換(アウトライン化)した状態でやりとりすることも多い(Adobe Illustratorなどにはそうした機能がある)。テキストとしての編集はできなくなってしまうが、インストールされているフォントなどを気にせずに作成者側での見た目を確実に再現する方法である。標準的なフォントであればそのままにしておいてよいケースもあるが、印刷を発注する際は、入稿データに含まれるフォントがどういう状態であるべきかをしっかり確認しておく必要がある。

 フォントのライセンスに関しては、ファイルに埋め込めるかどうかのほかにも、個人での利用は無料だが商用利用をする場合は有料になるというものもある。公開されているフォントをダウンロードして使うときには、その辺りもきちんと確認しておかねばならない。

ウェブフォント

 ウェブブラウザーが表示するフォントも、基本的にはOSにインストールされているものが使われる。ウェブページ側で何も指定しなければ、デフォルト設定のフォントで表示される。ロゴなど一部分だけであれば画像化しておけばいいが、本文全体をウェブサイトの雰囲気やブランドイメージに合わせたフォントで表示したいというような場合は「ウェブフォント」という仕組みが使われる。

 これは、あらかじめサーバーに置かれたフォントをブラウザーが呼び出すことで、ウェブページで指定されたフォントでコンテンツを表示するものである。ウェブフォントは有料のサービスが多いが、無料のものもある。ウェブサイトの性質などに応じてうまく活用するとよいだろう。

ユニバーサルデザインフォント

 フォント選びの話に戻るが、字形のわずかな違いが人によっては読みやすさに大きな影響を与えることもある。日本語のフォントであれば、濁点や半濁点の視認性などは分かりやすいポイントである。大きなサイズでは気にならなくても、小さいサイズだと分かりにくいことがある。

 そこで、できるだけ多くの人たちが使えることを考慮して“ユニバーサルデザイン”というコンセプトに基づき、使いやすさや見やすさにこだわったフォントが開発されている。そうしたフォントは「UD(Universal Design)フォント」と呼ばれ、フォントメーカーから提供されている。最近はWindowsでも「UDデジタル教科書体」が提供されている。

 防災情報や行政情報などは、なるべく多くの人に素早く確実に伝えることが重要である。そうした情報伝達の場では、こうしたフォントを積極的に活用したい。

最後に

 今回は欧文フォントの話にほとんど触れなかったが、基本的な気にかけるべき要素は同じである。しかし、日本語よりも活字印刷の歴史が長いため、PC上で利用できるフォントの数も桁違いに多く、目的に応じた使い分けなどもより細かく考えることができる。それぞれのフォントの成り立ちなどについても興味深い話が多い。

 最近では、フォントを擬人化し、その出自や性質などを解説したマンガもある。興味があれば、ぜひ一歩深くフォントの世界に足を踏み入れてみていただきたい。

綾塚祐二
東京大学大学院理学系研究科情報科学専攻修了。ソニーコンピュータサイエンス研究所、トヨタIT開発センター、ISIDオープンイノベーションラボを経て、現在、株式会社クレスコ、技術研究所副所長。HCIが専門で、GUI、実世界指向インターフェース、拡張現実感、写真を用いたコミュニケーションなどの研究を行ってきている。

ZDNET Japan 記事を毎朝メールでまとめ読み(登録無料)

ZDNET Japan クイックポール

自社にとって最大のセキュリティ脅威は何ですか

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]