はじめに
はじめまして！
レバテックでサービスサイトのデザイン制作とディレクション業務を行っている青木です。
現在は日々の制作業務に加え、デザインシステム『VoLT』の構築と運用に取り組んでいます。
『VoLT』は既に現場で利用されていますが、リリース後は現場の課題感に合わせてアップデートを行なっています。
本記事では、『VoLT』で定義されているテキストスタイルとグリッドシステムの再定義の話を中心に、抱えていた課題に「バーティカルリズム」という概念を取り入れて解決した事例について紹介します。
また、デザインシステム構築の背景や目的が書かれた記事も公開されているので、気になる方はぜひチェックしてみてください👀
これまでのテキストスタイルとグリッド
アップデートする前のテキストスタイルとグリッドは、以下の通り定義されていました。
テキストスタイル
- font-size
- 10px〜48pxの中から11種類
- font-weight
- regular / bold
- line-height
- 150% / 180%
- letter-spacing
- 2% / 4%
これまでのテキストスタイル
グリッド
- カラム数
- 1カラム / 2カラム / 3カラム
- デバイス
- モバイル / デスクトップ
これまでのグリッド
いわゆる、よく見るテキストスタイルとグリッドのシステムですね。
一般的なタイポシステムを参考にしながら、レバテックで利用できるよう検討してリリースしました。
どんな問題があったの？
一見問題がないように見えるテキストスタイルとグリッドですが、現場で使用する中で3つの問題が浮上しました。
① 読みやすさの一貫性に欠ける
レバテックでは各プロダクトが異なるユーザー体験やデザインのニーズを持ち、その中で「読みやすさ」の一貫性が確保できていませんでした。
② 明確な判断基準がない
デザイナーは、記事やLPのような「読んでほしいページ」、求人検索ページや、SaaSプロダクトのような「機能的なページ」の両方を制作する際に、「どっちのline-heightを使えば良いんだろう？余白どうしよう？」と迷い、結局「なんとなくこっちの方が良さそうだな」という感覚で決めることが多かったです。
③ フィードバックが属人化
フィードバックがレビュアーごとに異なり、一貫性がありませんでした。
👩Aさん< 行間大きくしてください
👱♂️Bさん< したよ
👩Aさん< 違う違う。150%じゃなくて180%にしてほしい
👱♂️Bさん< そうやって言ってくれ〜...
ということや
👩Aさん< ここは行間180%が良い
🧑🦰Cさん< いや、行間150%の方が良い
👱♂️Bさん< どっち...？（人によってバラバラだなあ）
line-heightはどちらの値を使うのか、どのくらい余白を設けるべきか...
これらはレビュアーによってバラバラでした。
（身に覚えがあるの方もいるのではないでしょうか？）
「line-heightはなぜ150%が良いの？」
「どのぐらいの余白が適切？それはなぜ？」
実際に自分も質問された際、答えられませんでした...。
デザインシステムの課題である「質（一貫性）」「効率」「コミュニケーション」を考えた理想の状態とは...
- 全てのページにおいて一貫性があり、読みやすさが担保されている✨
- 制作者、レビュアー共に作業の効率化✨
- コミュニケーションが円滑に進み、認識の齟齬がない✨
しかし、現状と理想に大きなギャップがありました。そこで、デジタル庁のデザインコンサルタントの方にもご協力いただき、テキストスタイルの見直しを行うことにしました。
どのように解決したの？
「バーティカルリズム」という概念
抱えていた問題を解消するため、バーティカルリズムという新しい概念を取り入れて、グリッドの再定義 / グリッドに沿ったテキストスタイルを再定義しました。
バーティカルリズムは、印刷のタイポグラフィに起源を持つ概念。バーティカルリズムとは、ページの要素間の縦のスペースを揃えるようにすることを言う。
（参照）
なぜバーティカルリズムを取り入れたの？
全てのページにおいて一貫性があり、読みやすさを担保させるためには、テキストスタイルの変更だけではなく、要素のサイズや余白も均一に保つ必要があると考えていました。
『VoLT』では、余白が一定の規則に従って定義されており、バーティカルリズムを取り入れることで、グリッドに沿ったテキストスタイルを定義でき、全体の高さを均一に保つことで、ページ全体の読みやすさを一貫性をもって確保できます。
行間や要素間の余白を均一に保つことで、視覚的に整然とした印象を与え、読みやすく、理解しやすくなります。
ユーザーがWeb上の要素をスムーズに認識するためには、高さに一定に秩序が必要なんですね💡
テキストスタイルとグリッドを策定
「Read / Function」の高さのグリッドを追加
これまでは「横」のグリッドだけでしたが、高さに一定の秩序を設けるために「縦」のグリッドを追加しました。
レバテックは同ページ内でもテキストスタイルが持つ役割が混在しています。
例）「レバテックの特徴」のように読ませたい箇所 / 「案件検索」のように機能的な箇所
ページや箇所が持つ役割によって適切な要素間の余白や行間は異なると考え、役割を「Read / Function」の2種類に分けて高さのグリッドを追加しました。
高さのグリッドを2種類作成
「Read / Function」のテキストスタイルを用意
どこで何のテキストスタイルを使用すべきか明確にするため、グリッドに合わせて「Read / Function」のテキストスタイルをそれぞれ用意しました。
テキストが持つ高さがグリッドに沿うように、フォントサイズごとに行間を変更しました。
Read
- 主な使用箇所
- ユーザーに読ませたい箇所（例：記事ページ、サービス説明、etc...）
Readのテキストスタイル（抜粋）
Function
- 主な使用場所
- 直感的に認識してもらいたい箇所、機能的な箇所（例：タブ、案件検索、etc...）
Functionのテキストスタイル（抜粋）
新しいテキストスタイルが完成！
バーティカルリズムを取り入れて、新しいテキストスタイルはこちらになります！
アップデート後のテキストスタイル
ちょうど、Figmaでバリアブルを使ったテキストスタイルの管理ができるというアップデートがあり、そちらも取り入れました✨（ナイスタイミング！）
バリアブルの値を登録
line-heightの値は「単位：%」で登録できないので、line-heightの値はバリアブルを使用していません。今後のアップデートに期待しております！！
アップデートしてどうだった？
感覚で値を決めることがなくなった
元々、余白や行間を感覚で決めることが多くありましたが、グリッドに沿ったレイアウトになるよう余白の値を決定し、制作箇所が持つ役割に合わせて使用すべきテキストスタイルを明確に判断できるようになりました。
制作者、レビュアーそれぞれ効率化でき、コミュニケーションの円滑化にも繋がっています！
現場の声
現場のメンバーも使用し、嬉しい声が上がっています！
👩「迷わずに使えるから、作業のスピードが上がったぞ」
👨「基準（グリッド）があるから制作しやすい」
👱♀️「シンプルに使いやすい！品質上がりそう！」
オンボーディングの実施
ただ作成するだけでは意味がないので、しっかり浸透させて利用されるためにオンボーディングを実施しました。
実際に触ってもらうことで、ユーザー（デザインシステムの利用者）のフィードバックを早く得ることができ、さっそく別の課題も見つかりました。
さいごに
利用されるデザインシステムを提供する
デザインシステムは作成するだけでは意味を持たず、プロダクト全体に適切に反映され、運用されて初めて意味を持つものとなると考えています。
テキストスタイルやグリッドの再定義を行い、よりユーザーが使いやすいデザインシステムにアップデートすることができました。
今回は大きなアップデートでしたが、現場の小さな問題も吸い上げ、今後も適切に運用され続けるデザインシステムを提供していきます💪
『VoLT』を一緒に構築していただける方を募集しています
今回取り上げた内容はたったの1つの事例で、多くの問題を解決し切るにはまだまだ道のりは長く、多くの協力者が必要です。
様々な専門性を持ったメンバーが必要なため、一緒に取り組んでくれる方々を大募集しています！！
これを読んで一緒に『VoLT』の構築に関わりたいと思った方は、ぜひ一度お話ししましょう✨
お気軽にご連絡ください！
レバテック開発部の公式XのDMからでも大歓迎です！お待ちしております。
ここまで読んでいただきありがとうございました！
Discussion