こんにちは！Ｓｋｙスタイル部デザインチームです。Ｓｋｙスタイル部では社内システム向けのデザインシステムを構築しています。 この記事では、デザインシステムのタイポグラフィを見直した話をしたいと思います。どのようなプロセスで課題解決しているかも紹介します。ぜひ最後までご覧ください！
タイトル感がないという課題
デザインチームではデザインシステムに対する課題をオンラインホワイトボードツールFigJamに上げて議論しています。デザイナーが自由に課題を上げて、その課題に対して複数デザイナーで議論し課題解決策を検討します。
あるとき「デザインした画面のタイトルが弱い、タイトル感がない」という課題があがりました。
議論の結果、タイトルとして使える一番大きいフォントサイズが20pxで他の見出しとの差が小さく、タイトル感を出せてない、だから大きいフォントサイズを用意していこうという結論になりました。
他社事例をリサーチして理想の姿を探る
ざっくり対応方針は決まりましたが、具体的に何pxのフォントサイズがあれば良いか、定義方法含めてどうするべきか検討する必要があります。理想の姿を探るべく、他社のデザインシステムのタイポグラフィをリサーチしました。
デザインシステムのタイポグラフィとは？
デザイン全体で一貫性のあるブランドイメージを確立し、使いやすさを向上させるために、フォント、サイズ、太さ、行間、文字間隔などを定めた文字のデザインルールです。
理想の姿
リサーチの結果、他社はフォントサイズとして20pxより大きい24pxや32pxなど提供していました。
- タイトルを目立たせたい場合があるため24pxや28pxを追加する
- スマホだとPCより大きいフォントサイズが好ましいのでスマホ用のタイトルとして32pxを追加する
フォントサイズとしてこれらのpxを追加することにしました。 他社のデジインシステムのタイポグラフィを調査していく中、弊社はセマンティックトークンだけでタイポグラフィを定義していましたが、他社はセマンティックトークンに加えてプリミティブトークンも定義していることが多いことがわかりました。
プリミティブトークンも提供することで、デザインシステムでルールは決めつつ、ルールの範囲では自由にデザインできるようになります。デザインチームとしてもメリットが大きいことからプリミティブトークンを設計していくことにしました。
いくつかの候補をデザインして比較する
プリミティブトークンとしてfont-size、font-weight、line-height、letter-spacingを定義する必要があります。line-height、letter-spacingについてはリサーチだけでは結論が出なかったので、実際にいくつかの候補をデザインして決めることにしました。
デザインを比較して感じたことを言語化して結論を導き出しました。
line-height
タイトルのline-heightは120にする
- 改行時のまとまり感出すため
本文のline-heightは150にする
- 本文のフォントサイズ16px~12pxあるが、全てで読みやすいのは高さ150だった
- 高さ160にするとフォントサイズが小さい場合にline-heightの余白が邪魔をして本文のまとまりがでず読みづらい
line-heightは175も残す（余白重視デザイン用）
- 高さ175あると余白が目立って本文のまとまりが弱くなり、結果として読みづらい
- 業務システムは情報量が多いため、高さ175だと余白が悪目立ちする
- ブログのように余白が多く、余白でオシャレさをデザインする場合は高さ175以上あると良い
letter-spacing
本文のletter-spacingは2%にする
- 5%までいくと現状との差がありすぎて違和感
- Noto Sansのフォントが開き気味なので2%でちょうど良い文字間隔になる
タイトルのletter-spacingは5%にする
- 英数字が2％だとつまりすぎる（Noto Sansのため）
- 5％の方が存在感が出てタイトルらしくなる
完成！
デザインシステムに新しいタイポグラフィを追加することができました。
気づき
タイポグラフィは奥が深いです。タイポグラフィが文章のリズムを生み出し、読みやすさや審美性にもつながってるのだと感じました。感覚を言語化することもデザイナーの重要なスキルの一つと再認識する機会でもありました。
引き続き、デザインシステムの改善に取り組んでいきます。