フォント

Serendieブランドは、欧文フォント「Roboto」、和文フォント「Noto Sans JP」を採用しています。Serendie Design Systemにおいてもそれを踏襲しつつ、等幅フォント「Noto Sans Mono」を追加しています。いずれのフォントもオープンソースであり、無償で商用利用可能です。

Noto Sans JP

デザインシステムは、デザインと開発の効率化、アクセシブルで一貫したプロダクト品質の担保、ナレッジの蓄積とベストプラクティスの波及、コミュニケーションの円滑化などを目的とします。そのために、ブランドやビジュアルに関するアイデンティティの定義、カラーやタイポグラフィなど視覚要素を定めたデザイントークン、再利用性の高いUIコンポーネント、アイコンやイラストなどのビジュアルアセットを提供します。これらは代表例であり、デザインシステムの構成要素は組織や状況に応じて様々です。

Roboto

A design system aims to improve the efficiency of design and development

Noto Sans Mono

A design system aims to improve the efficiency of design and development

CSSで利用する

WebアプリケーションにおいてはGoogle FontsなどでWebフォントとして利用してください。Serendie UIにはバンドルされており、個別設定は不要です。

個別設定を行う場合は、下記を参考にCSSのfont-familyを記述し、システムフォントへのフォールバックを適切に設定してください。

body {
  font-family: Roboto, "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

Figmaで利用する

Figmaではいずれのフォントもデフォルトで利用可能です。ただしFigmaでは和欧混植設定 (和文/欧文フォントの自動使い分け) がサポートされていないことに注意が必要です。現在のところSerendie Design Systemは、Figma上では常にRobotoを指定することを推奨しています。

Robotoは欧文フォントのため和文はサポートされていません。ただし、Figmaのフォントフォールバックにより、サポートされない箇所にはNoto Sansが自動適用されます。これにより、特別なプラグイン無しで、RobotoとNoto Sansの和欧混植が実現できます。混植のための細かな設定はできませんが、運用性の高さを優先しています。

フォントサイズ

フォントサイズ (font-size) は、可読性や視認性に大きく影響します。また見出しや本文など役割に応じて、フォントサイズを一貫させることや、サイズを変化させることでリズムを生むことも大切です。

Serendie Design Systemでは調和数列をベースにフォントサイズスケールを設計し、リファレンストークンとしています。デザイン上の使い勝手を考慮し、16px (medium) を基準としつつ、使用頻度の高いmedium未満 (10px〜14px) はスケール間隔を小さくし、ジャンプ率が求められるmedium以上 (18px〜64px) はスケール間隔を大きくしています。

参考文献

音楽、数学、タイポグラフィ - ÉKRITS

ウェイト

見出しや文章内の強調など、視覚的・意味的に強弱をつけたいときはウェイト (font-weight) を変化させます。通常 (regular) と太字 (bold) の2種類をリファレンストークンとして定義しています。数値はregularを400、boldを700としています。

regular

デザインシステムは、デザインと開発の効率化、アクセシブルで一貫したプロダクト品質の担保、ナレッジの蓄積とベストプラクティスの波及、コミュニケーションの円滑化などを目的とします。そのために、ブランドやビジュアルに関するアイデンティティの定義、カラーやタイポグラフィなど視覚要素を定めたデザイントークン、再利用性の高いUIコンポーネント、アイコンやイラストなどのビジュアルアセットを提供します。これらは代表例であり、デザインシステムの構成要素は組織や状況に応じて様々です。

bold

デザインシステムは、デザインと開発の効率化、アクセシブルで一貫したプロダクト品質の担保、ナレッジの蓄積とベストプラクティスの波及、コミュニケーションの円滑化などを目的とします。そのために、ブランドやビジュアルに関するアイデンティティの定義、カラーやタイポグラフィなど視覚要素を定めたデザイントークン、再利用性の高いUIコンポーネント、アイコンやイラストなどのビジュアルアセットを提供します。これらは代表例であり、デザインシステムの構成要素は組織や状況に応じて様々です。

行の高さ

行ボックスの高さ (line-height) は、文章の可読性や印象に影響します。normal (160%) を基準とし、ゆったりとした印象を与えるrelaxed (180%)、逆に情報量を優先させるtight (140%)、ボタンなどラベルテキストでの使用を想定した none (100%)の4パターンをリファレンストークンとして定義しています。

Figmaでの利用上の注意

他と同様にFigmaではVariablesとして定義されていますが、2024年11月現在のFigmaの仕様では、相対値を含むVariablesを行の高さに設定することができません。今後のアップデートで対応されると考え、現在のところVariablesを使わず直値指定で運用しています。

ロール

タイポグラフィは、フォント、ウェイト、サイズ、行の高さなどをグループ化し、グループごとに見出し、タイトル、本文、ラベルなど、UI上の役割を持つことが特徴です。これらをシステムトークンとして定義しています。

Display

最も大きなフォントサイズを使用し、視覚的に印象付ける役割を持ちます。表現を重視するプロダクトにおいて、PCなど比較的大きなブラウザ幅で用います。Displayロールは、smallとmediumの2つのサイズを持ちます。

Headline

ページや文章を端的に表す大見出しとして用います。ブラウザ幅に関わらず利用頻度の高いロールです。Headlineロールは、small/medium/largeの3つのサイズを持ちます。

Title

Headlineよりも小さめの小見出しとして用います。HeadlineやBodyとセットで使われることが多いため、デフォルトのウェイトを太くすることで強弱をつけています。extraSmall/small/medium/largeの4つのサイズを持ちます。

Body

複数行からなる本文として用います。extraSmall/small/medium/largeの4つのサイズを持ち、特にmediumサイズは、サイト全体のテキストの基準サイズとなります。extraSmallサイズのみ、複数行からなる補足文に使うことを想定しており、行の高さを狭め (tight) にしています。

Label

Buttonなどコンポーネント内のテキストや、入力フォームのラベルに用います。Labelはsmall/medium/large/extraLargeの4つのサイズを持ちます。いずれも行の高さは100% (none) にしており、単行を想定しています。文章が折り返されたり、改行が入る場合は、Bodyを使ってください。

Figmaでの利用上の注意

Figma Variablesはグループ化されたトークン (Composit Tokenと呼ばれます) に現在対応していません。そのため、タイポグラフィのシステムトークンはVariablesではなくText Stylesとして定義しており、他と適用方法が異なることに注意してください。

ブラウザ・画面幅に応じた基準サイズの変更

Bodyロールのmediumサイズは、ページ本文に用いることを想定しており、これをフォントサイズの基準として扱います。

ただしこの基準サイズは、ブラウザ幅によって変化するのが一般的です。Serendie Design Systemでは、ブラウザ幅がCompact (モバイル) の場合は16px、Expanded (PC) の場合は14pxを基準としています。これを基準として、全ロールが相対的にフォントサイズが変わることに注意してください。

Serendie Design Systemでは、これをVariableモードとして扱います。Themingと同様に、ページやセクション、フレームなどにモード (Expanded/Compact) を割り当てることで、基準サイズを変更できます。

デフォルトはCompactモード(モバイル)です。 Expanded(PC)用の画面をデザインするときには、ページ全体をExpandedモードに変更してください。