UIデザインガイドライン

マテリアルデザイン|No.17:The type system|日本語解説

この記事から得られること

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「The type system(文字の仕組み)」の概要について学ぶことができます。

Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html

なお、この記事は「約7〜10分」で読める内容となっています。

この記事の前提

この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。

また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。

なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。

マテリアルデザイン|No.00:概要と構成|日本語解説この記事では、Googleが提供しているUIデザインガイドライン「マテリアルデザイン(Material Design)」の概要と、そのコンテンツ構成について学ぶことができます。...

“Type scale” という考え方

マテリアルデザインでは、「Type scale」と呼ばれる、13種類の「文字(Type)」から構成される「文字の組み合わせセット」を使用して、UI上に文字を表示します。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

そして、マテリアルデザインでは上の図のような「Type scale generator」と呼ばれる、「Type scale」を作成するためのツールが提供されています。

具体的には、Googleが提供しているフォント(書体)から選択して、その「Type scale」を生成し、同時にプログラム用のコードも生成されます。

また、各文字のサイズは、自動的に適切なサイズに調整されます。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

上の図は「Type scale」の一例をまとめた表です。

この「Type scale」の表をもとに、UIに対して適切な「Scale Category」の文字を選んで表示させます。

“Font” のサイズと行間

この「The type system」の章では、プラットフォーム(OS)別の「フォントサイズ」と「行間」の対比表が規定されています。

この記事では、具体的なフォントサイズと行間の紹介は割愛しますが、作成したUIのプラットフォーム(OS)を変える際は、以下リンクの表を参考にすることをおすすめします。

Material Design : Design section “The type system” > Font size units
URL:https://material.io/design/typography/the-type-system.html#type-scale

それでは次に、具体的な13種類の「文字」について解説します。

まずは「Headlines|見出し」について解説します。

“Headlines”|見出し


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

マテリアルデザインにおける「Headline」は「1〜6」の6種類があります。

「Headline」は、UIにおいて重要な文字として認識され、「文章のタイトル」として使用することができます。

文字の「読みやすさ」も重要ですが、「目を引く」フォントを使用できるのも「Headline」の特徴です。

上の図では、「H2(Headline2)」のサイズのフォントを使用しています。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

上の図では、「H3」に「Script type(筆記体)」を使用した例です。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

上の図は、「H6」に対して「サンセリフ体」のフォントを使用した例です。

それでは次に「Subtitle(サブタイトル)」について解説します。

“Subtitles”|サブタイトル


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

「Subtitle」は「Headline」よりは小さいですが、画面上の小さいUI要素のタイトルとして使用される文字です。

上の図では、各画像のタイトルとして「Subtitle」が使用されています。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

上の図のように、独特なフォントを「Subtitle」に使用することもできますが、「読みやすさ」の観点で、独特なフォントを使用する際は注意が必要です。

それでは次に、「Body|本文」について解説します。

“Body”|本文


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

「Body(本文)」には2種類のサイズがあり、文章量が多い場合は、小さい方の「Body」を使用することが推奨されています。

また、「Body」に使用するフォントは「セリフ体」か「サンセリフ体」が推奨されています。

上の図では「Body」に対して「Body1」の「セリフ体」が使用されています。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

上の図では「Body」に対して「Body2」の「サンセリフ体」が使用されています。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

また、「Body」のフォントは「読みやすさ」を考慮し、上の図のような「手書きフォント」や「筆記体」の使用はマテリアルデザインにおいて禁止されています。

それでは次に「Caption」と「Overline」について解説します。

“Caption” and “Overline”|キャプションとオーバーライン


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

「Caption(図の説明文)」と「Overline(見出しの上の補足文)」は、「Type scale」の中でも最小のサイズで使用されます。

これは「補足的な意味で使用される文字」であるため、小さい文字サイズとなっています。

例えば上の図では、画像の下に説明文として「Caption」が使用されています。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

上の図では、見出しの補足文として「サンセリフ体」の「Overline」が使用されています。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

なお、「Caption」や「Overline」は文字サイズが小さいため、「読みやすさ」を重視し、独特なフォントの使用は避けてください。

それでは次に「BUTTON(ボタン上の文字)」について解説します。

“BUTTON”|ボタン



出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

ボタン名である「BUTTON」は、基本的には読みやすさを考慮し英語の場合は「大文字のサンセリフ体」を使用します。

上の図では「ADD TO CART」ボタンに「BUTTON」の文字を適用しています。

一応「BUTTON」では小文字を使用することも許容されてはいます。


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

ただ、上の図のように「読みやすさ」に影響のある独特なフォントを使用することは避けてください。

まとめ


出典:Material Design : Design section “The type system”
URL:https://material.io/design/typography/the-type-system.html#type-scale

今回の記事では、マテリアルデザインにおける「文字(Type)」の種類について解説しました。

具体的には、以下の13種類があります。

  • Headline|見出し:6種類
  • Subtitle|サブタイトル:2種類
  • Body|本文:2種類
  • Caption|図の説明文
  • Overline|タイトルの補足文
  • BUTTON|ボタン名

統一感のあるUIを作成するためにも、文字のフォント(書体)や文字サイズはルールを作成し、統一することをおすすめします。

また、「Type scale generator」と呼ばれる、「Type scale」を作成するためのツールが提供されていますので、ぜひ色々と「Type scale」を作成してみることをおすすめします。

最後までお読みいただきありがとうございます。
今回の記事は以上です。

この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。

続きを学びたい方は

なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。

次のガイドラインを学びたい方は
マテリアルデザイン|No.18:Understanding typography|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Understanding typography(文字組みの理解)」の概要について学ぶことができます。...

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.16-2/2:Dark theme|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Dark theme(ダークテーマ)」の概要について学ぶことができます。...

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA