デザインシステムを文書化する簡単な９ステップ

デザインシステムは、デザイン作業を最初から最後まで強化および管理するための完全な標準セットを提供しますが、機能的なデザインシステムを構築して維持するには、まずはきちんと時間と労力をかけないと、効果的に行きません。  

本記事では、デザインシステムの文書化について紐解いていき、デザインシステムにおける文書化の必要性を探り、効果的なデザインシステムの文書化基盤を構築するためのステップについて見ていきます。  

デザインシステムの文書化とは

  デザインシステムの文書化は、デザインチームが使用ガイドラインを組み合わせて提示するのをサポートするのに使える貴重なリソースであり、このようなルールを共有、利用、実行することもできます。これにより、デザイナーとデベロッパーは、より予測可能なUIを提供するための作業をモデル化することができるのです。  

本題に入る前に、デザインシステムの文書化とはどのようなものかを簡単にご説明します。  

一般的なデザインシステムは、UIデザイン要素やその他のコンポーネント、ワークフローを含むコンポーネントライブラリで構成されています。このように、デザインシステムは、パターンライブラリやスタイルガイドを統一し、一つのまとまったエクスペリエンスを提供するものです。  

Blink UX社のプリンシパルUXデザイナー兼パートナーであるハイディ・アドキソン氏によると、デザイン文書のバリエーションはさまざまですが、よりタスクに特化したタイプとしては、以下のようなものがあります：  

• ユーザーストーリー：デザイナーのユーザーニーズの視点に基づいたアプローチを可能にする
• 画面遷移図：ユーザーが画面間をどのように移動するかを示すのに最適
• ユースケース：より長く、より客観的な物語を提供し、将来的に大きな利益をもたらす
• ページレベルの文書：ページの機能、目的、およびデモの手順の概要についての説明
• シナリオナレーション：具体的な作業の進め方を中心とした、説明的なナレーションの概要

  他にも、構造的な観点からの文書に関連するデザイン文書の種類で、以下のようなものがよくあります：

• オブジェクトモデル：システムの構造的なビューの提供
• アーキテクチャマップ： アプリやサイトが一般的にどのような構造になっているかを伝える
• 標準化されたコンポーネント：システム全体で共有される標準化された要素についての説明
• システム用語集：特定の単語、フレーズ、およびその他の関連するシステム固有の言語がリストアップされている
• ナビゲーションフレームワーク ：メニュー項目、ナビゲーション要素、および制御機構についての説明

デザインの文書化が必要な理由

  デザインの文書化は、今日、あらゆるデザインシステムにおいて不可欠な要素であり、コンテキストの提供からチームの調整作業の説明、システムのコンポーネント ライブラリの明確な記録の維持まで、コンポーネントの文書化はデザインを成功させるための基本になっています。  

デザインシステムの文書化は、かつて「重要でない」とされ、見過ごされがちでした。ステークホルダーは、デザインシステムの文書化の可能性に触れることもなく、文書がもたらす価値についてはさっぱりわかりませんでした。

  Googleのマテリアルデザインの登場後、デザイン文書が重要であることがすぐに明らかになりました。大体のデザイン文書は、無秩序なメモや箇条書きで構成されており、重要な情報のほとんどが抜け落ちていました。そこでマテリアルデザインはその状況を一変させ、必要な構造を追加し、文書化の必要性を保証してくれたのです。  

デザインシステムの文書化には、以下のように多くの利点があります：  

• チームが同意するビジョンの提供：書面での技術的な指示ではなく、人に焦点を当てたデザイン文書を作成することで、チームが集中力を欠いたときに参照することができる明確なビジョンを設定できる。
•  デザインシステムに明確で重要な構造を与える：プロセスの把握によって、デザイナーとデベロッパーは、アイデアや一般的な目的として存在するのではなく、目の前に提示された計画に頼ることができる。
•  リソースの節約： 優れた高品質の文書のデザインインフラストラクチャは、コストのかかる試行錯誤のミスの削減や、チームの時間と労力の最適化、再利用可能なデザインパターン記録の後々の再現を可能にする。
•  エンゲージメントと満足度の向上：大きなプロジェクトは、チームにとって大きな負担となることがあるが、効果的なデザイン文書を作成することで、困難な状況下でも信頼できる、現実的な目標が与えられる。
•  効率と生産性の向上：チームが必要とするすべてのものが文書化され、利用可能になることで、全員が同じ見解を持ちながら、物事をより迅速に進めることができる。

  効果的なデザイン文書がなければ、製品のデザインと市場投入の成功はほぼ不可能です。デザインシステムの文書化は、特定デザイン決定の根拠を提供し、ユーザーがモデルを理解し、操作できるようにすることで、必要不可欠なものとなりました。  

デザインシステムの文書作成の9ステップ

1. エンドユーザーを理解する

  デザインシステムの文書化の第一歩は、このような作業を行う市場、つまりユーザーを見ることから始まります。ユーザーが何を求めているかがわからなければ、デザインの目標や結果を大きく誤る可能性があります。  

文書は「製品」であり、チームはその製品の「消費者」である、と分類して考えてください。誰がこのドキュメントを使うのか、彼らが求めているコンテキストを提供するには何が含まれる必要があるのか、どのように構成すれば消費しやすいのかに焦点を当てましょう。  

2. 各コンポーネントの文書化の必要性を概説する

  次に、各コンポーネントのニーズを網羅するアウトラインの確立が必要であり、以下のようなデザインのガイドラインを含める必要があります。  

• パターン
• コード・スニペット
• 色
• 画像
• フォント 
• ADAコンプライアンスガイドラインなど

  コンポーネントの文書化は、他のデザイン要素との関連性を考慮した上で概要を検討する前に、何よりもまず組織のニーズを考慮する必要があります。

3. スタイルガイドを作る

スタイルガイドで、文書の視覚的プレゼンテーションの基礎を確立でき、デザインシステムのビジュアルとコンテンツ要素のガイドラインがもたらされます。スタイルガイドは、まず他のデザイン文書の要素を見て、色やロゴの目立ち方、全体の語調などを記述し、最終的には、他の人が使うためのテンプレートとしての役割を果たします。 

4. チームで共有できる再利用可能なテンプレートを作る

そして、チームで共有しながら何度も再利用できるような文書のテンプレートの作成が必要です。再利用可能な文書のテンプレートがあれば、チームの時間が節約され、一貫性を保ち、誰もが自分の見ているものを理解できるようになります。

5. 信頼できる唯一の情報源（Single source of truth）の開発

信頼できる唯一の情報源（Single source of truth）の確立、明確化および文書化は、おそらく製品デザインの最も重要な要素の1つであり、この普遍的に承認された合意は、デザインチームが作業するすべてのものの中心になります。アイコンや配色、文字の大きさやボタンなど、すべての人が「こうあるべき」と理解していれば、物事はよりスムーズに運びます。

UXPinなどのツールで作成したコンポーネントライブラリにある基本的なデザインコンポーネントから始めるか、Reactコンポーネントで起源を確定して開発段階から始めるか、どちらかです。例えば、UXPinでは、UXPin Mergeのデザインシステムのバージョン管理により、会社全体の一貫性を確保することができます。

プロジェクトに取り組む際に、チームがデザインするための信頼できる唯一の情報源（Single source of truth）を作り続けましょう。UXPin Mergeはデザインシステムのバージョン管理を提供し、それによって信頼できる唯一の情報源（Single source of truth）のデザインアプローチが最適化され、コード駆動型プロトタイプの管理ができます。UXPinのようなツールでは、作り込まれたオープンソースライブラリの利用や、Git、Storybook、NPMの統合による独自のデザインシステムのインポートができます。

6. スターターキットを同梱する

デザインキットは、見落とされがちな「優れたデザインシステムの文書化を構成する要素」ですが、こういった必要なリソースは、優れたUX（ユーザーエクスペリエンス）に不可欠な「出発点」の要素を表しています。スターターキットは、オンボーディングツールとして最適で、ステップバイステップのガイドラインから高度なユーザーマニュアルまで柔軟に対応します。 

7. フィードバックを集める

フィードバックで、デザインシステムがうまく機能している時と、そうでないときを知ることができます。例えば、フィードバックを集める仕組みをGitHubの課題に限定している組織がありますが、これは、デザイナーや技術的な専門性の低いロールプレイヤーが意見を述べにくくなってしまいます。

文書化サイトのフィードバックボックスのようなフィードバックの代替収集手段だと、ユーザーが問題を記述して送信することができます。GitHub の問題を開く必要がない効率的なフィードバックチャネルにより、フィードバックが必要な場合は、文書化プラットフォームを通じて、速やかにに行うことができます。

8. 責任を分散させる

文書化は、ボランティアでやってくれる人がいつでもいるとは限らない、手間のかかる作業ですが、その重要性をチームに伝えることで、文書を作成することの価値を理解してもらうことができます。一人に負担をかけるのではなく、チーム内で分担することを検討しましょう。そうすれば、さまざまな気づきが得られるだけでなく、タスクも達成しやすくなります。

9. 定期的に更新する

デザインシステムは、メンテナンスされ、清潔に保たれ、適切である必要があります。潜在的な問題領域の特定や矛盾の削減、有効なシステムの数の効率化に継続的に注意しましょう。

いい例として、文書化サイトやデザインシステムのコンポーネントに対して、Reactストーリーのコード例を「信頼できる唯一の情報源（Single source of truth）」として確立し、定期的に更新して、互いの整合性を確保するというのがあります。

また、UXPinには定期的なアップデート機能備わっており、デザインシステムからマスターコンポーネントを変更した場合、システム内ですぐに更新することができ、すべてが完全に整合された状態を維持することができます。  

デザインシステムでプロトタイプを作ろう

  健全なデザインシステムは、コンポーネントライブラリを充実させ、信頼できる唯一の情報源（Single source of truth）を中心に展開する、明確で曖昧さのないコンポーネント文書によるサポートが必要です。  

一般的ないいプラクティスのルールとして、文書が全てです。文書によって進捗状況、マイルストーン、勝ち負けの追跡、過去に遡っての見直し及び学習ができ、そして何より、人はデザインシステムそのものを理解し、それに従うことができるようになります。  

デザイン システムの実装の確認が必要ですか？Mergeテクノロジーを搭載したUXPinでは、デザインシステムのUIコンポーネントをプロトタイプで使えます。UXPinにインポートし、デザインエディターでドラッグ＆ドロップして、完成品のような一貫性のあるプロトタイプを作成しましょう。 UXPin Mergeについてもっと読む。