マテリアルデザインで見るタイポグラフィ

私は普段、講師としてWebやモバイルアプリのUIデザインを学校などで教えています。その中でAppleのiOSヒューマンインターフェイスガイドライン(以下HIG)や、Googleのマテリアルデザインについては必ず授業でも紹介していますが、マテリアルデザインは10章からなる膨大なガイドラインになっているので、 全てを授業で紹介することは出来ません。

しかしマテリアルデザインでは、HIGとは違って細かくアニメーションから写真、タイポグラフィなどについて書かれており、マテリアルデザインのガイドラインではあるものの、デザインの基本となるルールやテクニックが書かれているので、デザインを学んでいる方にはとても役に立つ情報が詰まっています。

まずマテリアルデザインとは何か?

https://material.io/guidelines/

マテリアルデザインとはGoogleが作成した、デスクトップからモバイル、腕時計などのウェアラブルデバイスまで一貫性をもって同じ体験ができるように設計されたUIフレームワークです。Androidのスマートフォンをお使いの場合、端末にインストールされた主要なアプリケーションはほとんどをマテリアルデザインに沿って作られていると思います。

フラットデザインに似ていますが、紙とインクをメタファー(比喩)とし、奥行きを持つという特徴があります。

タイポグラフィの5つのポイント

今回はマテリアルデザインの中でもタイポグラフィに絞って、補足を入れながらご紹介していきます。

タイポグラフィとは、書体、字体の大きさ、行間、字間、構成などを設定し、文字の可読性や美しさを得るもののことを言います。グラフィックデザインやUIデザインなどの情報デザインの場合、画面の大半にテキストを用いるため、デザインの専門学校では、まず基本であるタイポグラフィを習うことが多いのではないでしょうか。

そのタイポグラフィで大事な5つのポイントをマテリアルデザインのガイドラインと併せて紹介していきます。

  1. 書体(フォント)
  2. 大きさ
  3. 行間
  4. 字間(トラッキング、カーニング)
  5. 行長

1.書体(フォント)

まずタイポグラフィでは、書体を選ぶことから始めます。
Androidではシステムフォントとして、欧文書体では「Roboto」、Robotoで対応していない書体(和文書体など)は「Noto」が使用されます。

https://material.io/guidelines/
https://material.io/guidelines/

Robotoは、高精細なディスプレイでも美しく、かつ低解像度の画面でも読みやすいフォントとして作られたGoogleの書体で、6種類のウェイトと呼ばれる太さと、斜めのイタリック体のファミリーを持ちます。
また、Notoフォントは「世界中の言語を1つのフォントセットで表現する」というテーマを持ち、現在800言語に対応しているそうですから驚きですね。中国語、日本語、韓国語の言語では、7種類と幅広いウェイトを持ちます。

Typeface

2.大きさ

次に書体の大きさを選びます。

書かれているspとは、フォントのサイズの単位で、画面上に表示されるフォントサイズをユーザが自由に設定で変更できるようになる単位です。

https://material.io/guidelines/

「Display」「Title」「Body」などレイアウトする場所でスタイルがある程度決まっており、情報の重要度を考えて文字の大きさを選びます。

ルールを作ったり、守ったりすることはとても面倒ですが、コンテンツの中で書体にルールが無く、大きさや太さなどのスタイルがいくつも混在していると、使う側が情報を見分けるのに苦労し、またビジュアル的にもバラバラした悪い印象も与えてしまいます。

またジャンプ率と言って、文字の大小の差がある画面は賑やかな印象を与え、ジャンプ率が低い画面は、小説の長めの記事などのテキストを読むことに適していますが、大人しい印象になります。

情報の読みやすさも考慮することも大事ですが、文字のジャンプ率をコントロールすることで、コンテンツのトーンを使い分けることもできます。

Styles

3.行間

https://material.io/guidelines/

行と行の余白を行間(Leading)と呼び、文字の大きさによって、視認性を考慮した調整が必要です。Line heightの項では、文字の大きさ(スタイル)によって決められた行間が書かれています。

文字サイズ対行間の比率を大きなdisplay2と小さなbody1で比べてみましょう。なぜ大きな文字の行間が小さく、小さな文字の行間が大きく設定されているのでしょうか?

Display 2
type 45sp : Leading 48sp (約106%)

body1
type 13sp and 14sp : Leading 20sp (約153%)

文字サイズが小さく、文字数が多いほど行間を空けたほうが読みやすくなります。大きな文字ほど行間を狭くしても読みづらくなることはなく、また反対に行間を空けすぎると余白が目立ち不恰好にも見えてしまうこともあります。
行間も適切な余白を空けることで読みやすさを確保できる重要な要素です。

Line height

4.字間(トラッキング、カーニング)

https://material.io/guidelines/

文字の大きさに合わせて余白を調整する事で、視認性が上がります。こちらも行間と同じく、小さな文字は見出しなどの大きな文字よりも字間を空けたほうが読みやすくなります。大きな文字は反対に字間を空けすぎると余白が目立ち読みづらくなり、不恰好にも見えてしまうこともあります。

また、文字と文字の単体の余白を調整する事をカーニングと呼びます。システムフォントでは使用しませんが、画像テキストの場合は必ずカーニングまで気を配りましょう。例えば、アルファベットのA、J、L、P、T、V、Wのような文字には前、または後に余白が多くできますし、H、I、M、N、Uのようなステムと呼ばれる縦のラインを持つ文字が続くと余白が少なく感じます。文章や単語で調和がとれリズムよく読むことができるように行間や字間のスペーシングを調整してください。

スペーシングを調整する事で、「力強い」や「やわらかい」など、デザインのトーンも変えることができるといった特徴もあります。

Other typographic guidelines

5.行長

読みやすい行の長さ(行長)は何文字でしょうか?

https://material.io/guidelines/
https://material.io/guidelines/

長すぎる行は、終わりから次の行の先頭まで目で追う距離が長くなってしまいテキストに集中するのが難しくなってしまいます。反対に短すぎる行は、目線を頻繁に繰り返し移動しないといけないため、読むリズムが崩れてしまいます。

行長が適当でない文章にならないようにし、ユーザーにストレスを与えないようにしましょう。

英語の場合、本文で60文字前後。キャプションのような行長の短い場合は、15文字以上にするように指定されています。
日本語の場合の適切な行長はまた変わりますので、注意が必要です。

Other typographic guidelines

まとめ

UIコンポーネントは誰もがガイドラインに沿えば、少ないコストで統一したデザインを作ることができる素晴らしいツールです。

しかしデザイナーであれば、ガイドラインを使う側ではなく、作る側になる場合もあります。ただマテリアルデザインに沿うだけでなく、なぜこのガイドラインになっているかを理解することで、デジタルデバイスでのタイポグラフィをどうすべきかを考える機会になれば幸いです。

まだマテリアルデザインに目を通したことが無い方は、日本語訳のPDFも配布されているので、ちょっと長いですが読んでみて下さい。しかしPDF版は動画が見れなかったり、見づらい部分もあるので、私のオススメとしては、英語サイトの流し読みです。細かいことは理解できないかもしれませんが、動画と図で英語が読めなくてもマテリアルデザインの言いたいことはざっくり理解できると思います。

すでに知っている人も、日々更新されておりガイドラインにもう一度ゆっくり目を通してみると新たな発見があるかもしれませんね。


参考文献

  • 『書物と活字 』ヤン・チヒョルト 著、菅井暢子 訳(朗文堂)
  • 『ウェブデザインのつくり方、インターフェイスデザインの考え方。』矢野りん 著(MdN)