こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。
エキサイトホールディングス Advent Calendar 2023 シリーズ2の19日目は、私齋藤が担当させていただきます。
今回は、あるプロジェクトでデザインシステム構築を担当していた際に、コンポーネントライブラリのドキュメントを書く中で考えていたことやドキュメントに記していたことについてお話したいと思います。
はじめに
冒頭、私がやっていたことをざっくりとご紹介します。
とある新規サービスの立ち上げにジョインし、当初はUIデザインとフロントエンド（主にマークアップ）を担当していました。デザインはFigma、フロントエンドはNuxt.js（v3・Composition API・TypeScript）を用いた開発環境でした。
開発を進める中で、新規機能の追加などの将来的な拡張を見据えて、デザイン面ではデザイン要素のルール化、エンジニアリング面では汎用的なUI要素のコンポーネントライブラリ化をすることで開発スピードの向上や非属人化、一貫性の担保などができると考え、メンターやエンジニアの方々にご相談をした結果、デザインシステムの構築をさせていただくことになりました。
デザインシステムの構築では以下のことをやっていました。
- デザイントークンの設計とFigma Variablesへの実装（カラー・タイポグラフィ・レイアウト・角丸・エレベーション・アイコノグラフィー）
- 汎用的なUI要素（ButtonやChipなど）のFigmaコンポーネント化
- 汎用的なUI要素のフロントエンドでのコンポーネント化（Vuetifyのように使えるようにする）
- ドキュメンテーション
今回は「ドキュメンテーション」に絞ってお話をすることになります。
なぜデザインシステムにドキュメントが必要なのか
なぜデザインシステムにドキュメントが必要なのかを言語化しておきたいと思います。
デザインシステムを構築すると、デザイナー側はFigma、エンジニア側にはコードとして残りますが、どちらも双方に共通するデータとなることは難しいと考えます。
デザインシステム自体、デザインとエンジニアリングをつなげる共通言語的なものを理念としていますので、その成果物が完全に二分されてしまうことは理念に反します。
そこで、デザイナー・エンジニア双方に共通するデータとして、ドキュメントが必要であると私は考えます。
ドキュメントに何を記すか
実際のButtonコンポーネントを例に、どんなことをドキュメントに記していたかをご紹介します。
デザインパターン
存在するデフォルト状態の表層的なデザインのパターンの名称や使用用途を記したセクションです。
使用用途を明示することにより、そのデザインパターンがどのような場合に適するのかについての共通認識を生み出し、デザインの属人化を防ぎます。
状態変化
Hover時やActive時、Disabled状態など、デフォルト状態以外の表層的なデザインの変化を記したセクションです。
Figmaでは状態変化はVariantsで表現することが多いため、その情報も書いておきます。
サイズバリエーション
コンポーネントにサイズのバリエーションがある場合、その詳細な値を記したセクションです。
こちらも、FigmaではVariantsで表現することが多いため、その情報も書いておきます。
コンテンツバリエーション
コンポーネント内の要素の有無（Buttonならアイコンの有無など）が選択できる場合、その旨を記したセクションです。
こちらも、FigmaではVariantsで表現することが多いため、その情報も書いておきます。
Components API
ここからはコーダー向けのセクションです。
Import
コンポーネントのImport文を記します。
Props
コンポーネントにあるPropsの情報を記します。
それぞれのtypeやPropType、デフォルトの値などを明記します。
加えて、Components APIより前のセクションとの関係や、どういった挙動をするのかなども書いておきます。
Slot
コンポーネントにSlotが存在する場合、どのUI要素にあたるのかを記します。
これで以上です。
ドキュメントを書いてみて
ドキュメントを書くことでデザインシステムを構築する中での頭の整理にも繋がりますし、実際に活用される場合にFigmaやコードを観察したり対照させたりする必要がほとんどなく理解することができるため、開発のスピードも向上するのではないかと実感しました。
一方で、デザインシステムの構築自体、規模が大きければ大きくなるほど時間と労力が必要となるので、それぞれの事情やプロダクトの特性を見極めながら行う必要がありそうです。
さいごに
デザインシステム構築についての書籍や記事がまだまだ少ない中で、特にドキュメンテーションに関する情報はより少ないと言っても過言ではありません。 そんな中で、デザインシステムに関わる方の一助となればと思い、この記事を執筆してみました。
エキサイトホールディングス Advent Calendar 2023では、他にも弊社のエンジニアやデザイナーが執筆した記事が多く配信されていますので、ぜひチェックしてみてください。
ご精読ありがとうございました。
