サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

プラットフォーム事業本部のフロントエンドグループ（以降FEG）で技術支援をしているCTO室兼VPoE室の大村です。

今回は、FEGで構築しているデザインシステム「Turtle」のタイポグラフィーについての試行錯誤をご紹介します。

※Turtleは常にアップデートしているので記事公開時と実装は異なる場合がございます。

&nbsp;

<h2 id="デザイントークンの簡単な説明">デザイントークンの簡単な説明</h2>

デザイントークンとは、デザインシステムにおける見た目（色、タイポグラフィー、余白など）において、あるパターンを取り出したものを表します。

例えば以下のようなものです。

<ul>
	<li>color.blue600というデザイントークンは #2A7E9Fを表します</li>
	<li>color.primaryというデザイントークンはcolor.blue600を表します</li>
	<li>color.primaryButtonというデザイントークンはcolor.primaryを表します</li>
</ul>

この例の場合、デザイントークン同士に以下のような関係があることにが分かります。

<ul>
	<li>color.primaryButton &rarr; color.primary &rarr; color.blue600 &rarr; #2A7E9F</li>
</ul>

すると、color.blue600を#166B8Fへ変えた場合に、その変更を多くのプロダクトに一括で反映できます。

このように、目的にあったデザイントークンを設計することで、変更に強いデザインシステムをつくることができ、保守観点で大きなメリットがあります。

私たちのデザインシステムでは、Adobe Spectrumにある&nbsp;Global Token、&nbsp;Alias Token&nbsp;という概念を取り入れています。詳細は下記を参照していただければと思いますが、上記の例では、color.blue600をGlobal Token、color.primaryをAlias Tokenとして扱います。&nbsp;<a href="https://spectrum.adobe.com/page/design-tokens/#Design-token-types" target="_blank">https://spectrum.adobe.com/page/design-tokens/#Design-token-types</a>

&nbsp;

<h2 id="私たちが作るタイポグラフィー">私たちが作るタイポグラフィー</h2>

私たちが作るデザインシステム「Turtle」では、1~15の段階のフォントサイズの情報を持ったGlobal Tokenを定義してます。

一番大きなサイズが3.247rem(51.96px相当)で、もっとも小さなサイズが0.624rem(9.99px相当)となっています。

pxで小数点以下の数が出ると設計時には厄介な印象を持つ人が多いかもしれません。ですが、さまざまなデバイスで実際にレンダリングされる際には、サブピクセルレンダリングによって小数点のある数だとしてもアンチエイリアスによって最適に処理されるため、小数点以下の数を気にしていません。

それよりも、レイアウトの設計時にバランスの良いGlobal Token全体のリズミカルなスケールの調和を大切にしています。

<img alt="" height="728" src="https://image.dmm-corp.com/3quxcqjzdvwud1py7bc6vcats0t1" width="625" />

&nbsp;

<h2 id="Global-Token-の定義">Global Token の定義</h2>

前述した内容は<code>font-size</code>のみとなるため、TurtleではGlobal Tokenとして扱っています。

Global Tokenはトークンがどのようにして使われて欲しいかの意図を持ちません。そのため、後述のように、より用途を限定したAlias Tokenを定義することで、利用者が簡単に使えるようにしています。

&nbsp;

<h2 id="Alias-Token-の定義">Alias Token の定義</h2>

Alias Tokenは今現在、&nbsp;<code>heading</code>&nbsp;<code>body</code>&nbsp;<code>buttonText</code>&nbsp;の3種類にとどめています。汎用的なTokenを用意して、デザイナーに階層を考慮してもらい、ドキュメントでカバーするような運用にしています。ドキュメントを一部抜粋します。

<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
	<tbody>
		<tr>
			<th>Alias Tokens</th>
			<th>Description</th>
			<th>Global Tokens</th>
		</tr>
		<tr>
			<td>heading1</td>
			<td>line-height: 1.3; 
			font-weight: 500;</td>
			<td>fontSize110</td>
		</tr>
		<tr>
			<td>heading2</td>
			<td>line-height: 1.3; 
			font-weight: 500;</td>
			<td>fontSize100</td>
		</tr>
		<tr>
			<td>heading3</td>
			<td>line-height: 1.3; 
			font-weight: 500;</td>
			<td>fontSize90</td>
		</tr>
		<tr>
			<td>heading4</td>
			<td>line-height: 1.3; 
			font-weight: 500;</td>
			<td>fontSize80</td>
		</tr>
		<tr>
			<td>heading5</td>
			<td>line-height: 1.3; 
			font-weight: 500;</td>
			<td>fontSize70</td>
		</tr>
		<tr>
			<td>heading6</td>
			<td>line-height: 1.3; 
			font-weight: 500;</td>
			<td>fontSize60</td>
		</tr>
		<tr>
			<td>body1</td>
			<td>p, li, label...etc, 
			line-height: 1.75; 
			font-weight: normal;</td>
			<td>fontSize50</td>
		</tr>
		<tr>
			<td>body2</td>
			<td>p, li, label...etc, 
			line-height: 1.75; 
			font-weight: normal;</td>
			<td>fontSize40</td>
		</tr>
		<tr>
			<td>body3</td>
			<td>p, span 
			line-height: 1.75; 
			font-weight: normal;</td>
			<td>fontSize30</td>
		</tr>
		<tr>
			<td>body4</td>
			<td>p, span 
			line-height: 1.75; 
			font-weight: normal;</td>
			<td>fontSize20</td>
		</tr>
		<tr>
			<td>body5</td>
			<td>p, span 
			line-height: 1.75; 
			font-weight: normal;</td>
			<td>fontSize10</td>
		</tr>
	</tbody>
</table>

<code>buttonText</code>はどちらかといえばComponent Specific Tokenのほうが適切かもしれませんが、TurtleではAlias Tokenとしてまとめてしまっています。むしろ、私たちが作るデザインシステムにはAlias Tokenからさらに詳細度の高いComponent Specific Tokenを定義していません。

&nbsp;

たとえば、なんらかの入力欄に使うラベルのTokenを考えます。このとき、シンプルに<code>label</code>というTokenで名付けたくなるかもしれませんが、それにはいくつか問題があります。

&nbsp;

まず、<code>label</code>と一口に言っても、入力欄につかうもの以外にも考えられることです。例を挙げると、下記の画像のような、必須項目であることを表すUIです。

<img alt="" height="393" src="https://image.dmm-corp.com/foj8lab5pk902spbwf693dum3fdj" width="800" />

これは<code>label</code>でしょうか？ それとも、状態を表す<code>state</code>と名付けたほうが良いでしょうか？ デザインシステム側で指針を作ることも可能ですが、デザイナーや開発者の学習コストは上がってしまい、知識の差によって迷うケースが発生してしまいます。

また、さまざまなTokenを検討していましたが、詳細度を明確にしていくほどTokenの数が多くなりすぎてしまいます。DMMでは多くのサービスにTurtleを展開していく必要があるので、Tokenが多いと、提供側と利用側には大きなギャップが生じ、結果的に一貫性を保つことが難しくなってしまいます。

&nbsp;

そこでTurtleでは、MUIなどのOSSとしてさまざまなサービスに使われるデザインシステムを参考にし、詳細度を高めないTokenを採用することにしました（前述の<code>body1</code>,&nbsp;<code>body2</code>など）。

この設計だと自由すぎる制約にもみえますが、私たちの場合は、コンポーネントにベストプラクティスを集約し、そのまま使ってもらうことで緩和しています。また、Alais Tokenでは&nbsp;<code>line-heigth</code>&nbsp;と&nbsp;<code>font-size</code>&nbsp;がセットで提供されており、デザインシステムを利用する人が細かな調整を考える必要がないようにしています。

<img alt="" height="502" src="https://image.dmm-corp.com/nopdrxpe1a0m62stuu400zko3d9k" width="800" />

実際のコード上だと、以下のように使用できます。

<pre>
<code>const foo = (theme: TurtleTheme) =&gt; css(theme.turtle.typography.body1);</code></pre>

TurtleではCSSを書くのにEmotionを使っていて、関数として書くことで<code>theme</code>を暗黙的に解決できるようにしています。<code>theme</code>から<code>typography.body1</code>を指定するだけで利用者側はタイポグラフィーを使用できます。

&nbsp;

<h2 id="イレギュラーの対応">イレギュラーの対応</h2>

Global Tokenは15段階のスケールになっていますが、Global TokenのすべてをAlias Tokenとして扱っているわけではありません。

理由としては、DMMには多くのサービスがあることから、用途が限られるAlias Tokenでは不十分なケースが考えられるためです。たとえば、装飾として非常に大きなフォントをサービストップページのヒーローヘッダーに使いたい場合などが考えられます。そういったケースではGlobal Tokenを直接使ってもらうことができるようにしています。

まだまだこれがベストだとは思っていませんが、デザインシステムを実際に各サービスやシステムで導入していく中でさまざまな表現に柔軟に対応していきたい意向があります。 定めたAlias Tokenとは違う表現を利用したいときに、Global Tokenを利用してもらう運用にしています。

&nbsp;

<h2 id="レスポンシブタイポグラフィー">レスポンシブタイポグラフィー</h2>

Turtleでは、レスポンシブタイポグラフィーを導入することで、あらゆるデバイスでの見え方を最適化しています。

たとえば、PC向けのデザインをFigmaでつくったときに、SPでは同じフォントサイズだと大きすぎる印象を与えることがあります。すべてのブレークポイントでデザインと実装をつくるのはコストがかかりますし、その上でも、すべてのデバイスサイズで最適な見え方になるとは限りません。

そこで<code>clamp()</code>を使用し、我々のユースケースで最適なフォントサイズをレスポンシブに可変させます。コードとしては以下のようになります。

<pre>
<code>@media (max-width: 44.9375em) {
 html {
 font-size: clamp(1rem / 1.125, 0.55rem + 1vw, 1rem)
 }
}
@media (min-width: 45em){
 html {
 font-size: clamp(1rem, 0.36rem + 1vw, 1.625rem);
 }
}</code></pre>

<pre data-lang="css" data-unlink="">
&nbsp;</pre>

コードの詳細を説明すると、まず、小さい画面幅では文字を小さくしたいという要望がありました。そのため、以下の設計で文字が小さく変化するようにしています。

<ul>
	<li><code>max-width: 44.9375em</code>: 719px。Turtleの画面幅でsmの最大値に当たり、比較的小さい画面幅の最大幅となる</li>
	<li><code>1rem / 1.125</code>: 1つ下のGlobal Tokenの大きさを下限値としている</li>
	<li><code>0.55rem + 1vw</code>: 719pxの時点で、ちょうど1remになるようにスケールする（<code>(16*0.55)+(719*0.01)</code>）</li>
	<li><code>1rem</code>: 上限値。小さい画面幅では文字を大きくしたいという要望はない</li>
</ul>

対して、大きい画面幅では文字を大きくしたいという要望があります。そのため、以下の設計で文字が大きく変化するようにしています。

<ul>
	<li><code>min-width: 45em</code>: 720px。Turtleの画面幅でmdの最小値</li>
	<li><code>1rem</code>: 下限値。大きい画面幅では文字を小さくしたいという要望はない</li>
	<li><code>0.36rem + 1vw</code>: lgの画面幅1024px以上でスケールし始める。mdでスケールさせるニーズはないため（<code>(16*0.36) + (1024*0.01)</code>）</li>
	<li><code>1.625rem</code>: この上限値は勘です。px換算すると26pxになり、デザインシステムにおけるドキュメントの説明でキリの良い数字だと利用者がイメージしやすいことから26px以上大きくならないと説明するために設定された数値です。</li>
</ul>

上記のように、DMMにおけるスケールのニーズが画面幅によって異なるため、メディアクエリを分けています。

レスポンシブタイポグラフィーを導入することで、デザインと実装コストを下げつつ、ユーザーにとって最適な見え方を実現できます。

&nbsp;

<h2 id="Typography-を適切に使ってもらうために">Typography を適切に使ってもらうために</h2>

FEGは実際にサービスを持っているわけではありません。あくまでデザインシステムを設計、運用、保守、導入サポート、導入先のコードレビューからデザインレビューを実施しています。

さまざまなサービスにデザインシステムに設計されたコンポーネントやTokenが共通して使えることに重きを置いています。そのため、私たちが設計したデザインシステムを同じ組織内の別のチームが利用することになります。

<img alt="" height="346" src="https://image.dmm-corp.com/vqo7abbpclmybet9nzwz55qpsffd" width="800" />

このようにして、デザインシステムを提供するだけに留まらず、サポートしていくことによって、実際に利用された知見を元にデザインシステムを育てています。

&nbsp;

<h2 id="まとめ">まとめ</h2>

今回は、プラットフォーム事業本部のフロントエンドグループで設計しているデザインシステムの試行錯誤を紹介させていただきました。

おそらく本記事を読んでいただいているほとんどの人が、今回の内容に限らず、課題に取り組んでいると思われます。私たちもまだまだデザインシステムを育てている途中なので、一緒に育ててくれる仲間も募集しています

デザインシステムにおけるタイポグラフィーの試行錯誤

シェア

関連する求人

関連する記事