ここ数年でデザインシステムの注目度は高まり、国内外の様々な企業のプロダクト開発にデザインシステムが導入されています。Wantedly は 2018年からデザインシステムの構築に取り組みはじめ、社外の方々にも参照いただけたらと、2021年に「Wantedly Design System」を公開しました。Wantedlyのデザインシステムの取り組みをオープンにすることで、デザインシステムの認知向上や改善に繋げていきたいと考えています。
今回の記事では「Wantedly Design System」の詳細や取り組みについて解説していきたいと思います。
※この記事は2022年8月に公開したエンジニア向けのデザインシステムの記事『ノンデザイナーズ・Wantedly デザインシステム完全理解ペーパー』を、デザイナー向けの内容に一部アップデートしたものになります。
目次
なぜデザインシステムを作るのか
WantedlyのUIデザインシステムは以下の目的で作成しています。
- ブランド表現
- Wantedlyとしての見た目と振る舞いの一貫性を保つ
- ベーシックなユーザビリティの担保
- デザインアウトプットの効率化
- 細かい造形で悩まず、プロダクトとして大切な体験にフォーカスするため
- 複数のプロダクトをまたいでも、共通の考え方で対応するため
- エンジニアとのフロントエンド開発、コミュニケーション、メンテナンスの効率化
また、WantedlyのUIデザインシステムは、WantedlyのUIをデザインする上での共通の考え方とツール＆アセットであると定義してます。共通の考え方とツール＆アセットを提供することで、「一貫した表現で」「基本的なユーザビリティを備えた」デザインを「効率的に」生み出すことができます。
Wantedly Design Systemとは何か
「Wantedly Design System」には大きく『Graphic Standards』と 『UI デザインシステム』という２つの役割が存在しています。
- Graphic Standards：Wantedly”らしさ”やデザインの一貫性を保つためのガイドライン
- 価値観と原則
- ビジュアルガイドライン: ブランドカラーやカラーパレット、フォントなど
- UI デザインシステム：UI や体験の一貫性を保つ（実装に準じた）概念と UI の設計
- スタイルガイド
- Foundation(デザインパラメータ, デザイントークン): Elevation, Text(font-size、line-height)など
- Component: Button、Text fieldなど
『Graphic Standards』は Wantedly らしいデザインをするため、『UI デザインシステム』は Wantedly らしい UI を持つプロダクトを作るためのルール、とお伝えするとわかりやすいかもしれません。
デザインシステムの構成要素
デザインシステムは複数のレイヤーが積み重なって構成されます。
「コンポーネントを構成するためのデザイン最小単位である Foundation」「Foundation の組み合わせからなる Surface」「1つ以上の Surface の組み合わせからなる Component」などです。
Graphic Standardsに準じたFoundation, Surface, Componentを定義することでWantedly”らしさ”やUI、体験の一貫性を担保しています。
次に、それぞれの要素をご紹介します。
Foundation - デザインシステムの最小単位
まず デザインシステムの最小単位として、 Foundation というものが定義されています。デザイントークンと呼ばれるものとほぼ同義と思っていただいて構いません。
Foundation には以下の10の要素が存在します。
- Graphic Standard をもとに定義されているもの
- Color Palette
- Text
- Icon
- プロダクト開発上必要になるもの
- Layout Unit
- Responsive
- Shape
- Elevation
- Dimming
- Reaction
- Basic Easings
いくつか抜粋して紹介します。
Color Palette
- Wantedly のデザイン上で利用されるカラーパレットです
- ブランドカラーと統一性のある表現ができる色のセットです
- WhiteAlpha100, BlackAlpha800 など半透明の白と黒は背景色に対して常にコントラストを維持することができるため、UI 上で頻繁に利用されています
Text
- 文字の大きさ, 太さ, フォント, 行の高さなど Typography に関するパラメータのセットです
- つかみ1(catch1), 見出し3(headline3), 本文1(body1) など、複数のテキストのスタイルが定義されています
- 英語 or 日本語や PC or Mobile(Web or iOS or Android) でパラメータが変化したり、プラットフォーム固有のパラメータが存在することがあります
Icon
- Wantedly のプロダクト上で利用されるアイコンです
- Wantedlyでは、Figma 上で管理されてるアイコンを更新すると、React 実装ライブラリに更新 Pull Request が自動で作成されます
Responsive
- レスポンシブ対応における breakpoint を定義しています
- Mobile（縦向きスマホ）, Tablet（縦向きタブレット, 横向きスマホ）, Laptop（横向きタブレット, PC）の3種類を利用することが多いでしょう
Elevation
- Z軸方向の高さを shadow で定義しています
Basic Easings
- コンポーネントの状態が別の状態に変化するとき、時間に対してどのように変化していくかを定義します
- CSS だと transition プロパティなどに渡す Easing Function に相当します
- ユーザ操作が起点（direct）かそうじゃないか（indirect）や遷移にかかる時間によって利用すべき Easnig Function が決まっています
Surface - あらゆるコンポーネントの基礎
前述した Foundation のうち、Shape, Elevation, Reaction と Background Color(背景色) の4つの値を組み合わせることで、「色がついて、ユーザの操作に反応できる板」を作ることができます。これを Surface と呼び、あらゆるコンポーネントの基礎となります。
たとえば Wantedly Visit で使われるプライマリーのボタンであれば、以下の4つの値から構成される Surface が基本で、その上に白い文字（Text は button）が乗っています。
- Shape: R100
- Elevation: 4
- Background: VisitGrad（Wantedly Visit のプロダクトカラー）
- Reaction: Color + Elevation, 白の overlay
UI デザインシステムに定義されているコンポーネントはもちろん、Wantedly のプロダクトの UI に登場するコンポーネントは原則この Surface から作られています。
Theme, Variant
例えばボタンであれば、ユーザへの訴求の強さに応じて3種類の Surface を使いわけます。
また、同じ強さであってもプロダクトごとに異なる Surface が定義されています（以下は People 用のボタン定義）。
また、そのコンポーネントが配置される場所の明るさ（あるいはシステムのライトテーマ・ダークテーマ設定）によってもコンポーネントの見た目が変わることがあります。
この 「プロダクト」と「明暗」の2つをまとめて Theme と定義しています。また、3種類の強さのボタンのように、同一テーマ内でのコンポーネントの種類分けを Variant と定義します。Theme は visit-light や people-dark など、Variant はボタンであれば primary, secondary のようになります。
その他・UI デザインシステム構成要素
TouchArea
ボタンやテキストフィールドなど、一部のインタラクティブコンポーネントは TouchArea（タッチエリア）と呼ばれる余白を持ちます。
目的は「コンポーネントのタッチ可能領域を広げる」ことです。Wantedly が提供するプロダクトは PC だけでなく画面の小さなスマートフォンでも多く利用されます。小さな画面であまりに小さなコンポーネントを出していると、ユーザはタップするのにも苦労するでしょう。コンポーネントの間が詰まっていると誤タップしてしまうかもしれません。
Google や Apple のデザインガイドラインでは Interactive Element のタッチ可能領域の最低値を定義しています。
また、TouchArea が存在することでコンポーネント同士の間隔が自然といい感じになるといった作用もあります。これも Material Design の Touch target で同じような話が紹介されています。
Surface の組み合わせによるコンポーネントの実現
Surface では「Wantedly のプロダクトの UI に登場するコンポーネントは原則この Surface から作られている」という紹介をしました。これを実際の例で見てみましょう。
たとえば Wantedlyには、以下のようなコンポーネントが存在します。全体として薄いグレー（正確には透明度の高い黒）が下敷きにあり、その上にホバーやクリックで色が変わるアイテムが乗っています。
このコンポーネントは以下2つの Surface の組み合わせで作られています。
- 背景はグレーでリアクションがない、リスト全体の Surface
- 背景はないがリアクションで overlay が乗る、リストアイテムの Surface」の2つを組み合わせています
このように、Wantedly のプロダクト上の UI コンポーネントの多くは Surface の組み合わせで説明できるようにデザインされています。
WantedlyのUIデザインシステムはオーバーライドが可能
公開されているUI デザインシステムを見てみると、あらゆる値がカッチリ決まっているように見えるかもしれません。実際、UI の一貫性を保つため定義通りの値を使うことがほとんどです。しかし、たとえば「ユーザに強く訴求したい」であったり「局所的な見た目の一貫性を優先したい」など、情報設計やビジュアル的な理由で値のオーバーライドが発生することもあります。
デザインシステムを活用する上で、3つの心がけ
デザインシステムを運用・活用する上での心がけをまとめました。
1. UI デザインシステムに定義されているもの、されていないもの
Wantedly の UI デザインシステムは Foundation, Surface など一見すると完成されたものに見えるかもしれませんが、実態としては一般化しきれていない例外などがまだまだ残っています。Wantedlyのデザイナーやデザインシステムに関わるメンバーは、「各種パラメータは拡張に対して開いておく」「例外を無理に一般化せずに、ケース集にストックしておく」ことを意識して、デザインシステムをアップデートしていくことを心がけています。
2. 言葉を正しく使う
同じ言葉・同じ単語セットで会話をすることは円滑なコミュニケーションをする上で非常に重要です。たとえば "Modal" という単語についてエンジニアとデザイナーでそれぞれ違うものを思い浮かべていた場合、話が噛み合わなくなります。
また、関連して「勝手に単語を作らない」というのもデザインシステムに関わるメンバー全員が意識している点です。デザインシステムで定義されている言葉を使い、新しいコンポーネントについてはデザイナーがまずは命名し、エンジニアや他のチームメンバーと認識がズレないよう心がけています。
3. フィードバックを恐れない
Wantedlyのデザイナー職以外のメンバー（エンジニアなど）のUI / UXのリテラシーは非常に高く、高い完成度でデザインチェックに入ることができます。
ガイドラインの通りに作っても細かなデザインのズレなどが発生する可能性は十分あり、表層に関しては数pxのズレがユーザーにブランドの「らしさ」から逸脱した印象を与えてしまう可能性があるので、しっかりとチェック＆フィードバックをしてもらいます。チーム全員がユーザーにより良い価値を届けられるようプロダクトと向き合っています。
最後に
この記事では「Wantedly Design System」の全体像から思想・個別の要素・実践的な考え方について紹介してきました。実利的な話に落とすと、デザインシステムの必要性は「コミュニケーションコストは開発上大きくなりがちなので、それを最適化するために共通認識を作る」「デザインの意図・思想を正しく理解できる環境を作ることで、正しく実装できる（情報設計を正しく反映できていてユーザにとって使いやすい・コンポーネント設計がいい感じなので生産性が高い）」と考えています。
「Wantedly Design System」は外側から見ると完成された・整ったものに見えるかもしれません。しかし実際はまだまだで、未定義なところ、詰めないといけないところ、もっと良くしたい、良くできるところ が沢山あります。ブランドやサービスの進化に合わせて、デザインシステムも少しずつアップデートしていきたいと考えています。
また、今回この記事を読んで「Wantedly Design System」に興味を持ってくださったデザイナーさんは、是非Wantedlyのデザイナーに話を聞いていただけると嬉しいと思っています！デザインシステムの勉強会やイベント交流会などのお誘いもお待ちしています。
Tags