🗂️ Design Materials：デザインシステム・チェックリスト。デザインシステムの計画、構築、および拡張に役立てよう！

今回はデザインシステムの計画、構築、および拡張に役立つオープンソースのチェックリストをご紹介します。

他の言語と同様に、デザイン言語は、プロダクトデザインへのアプローチを通じて視聴者とコミュニケーションをとるための系統的な方法です。 これは、一貫したカスタマーエクスペリエンスの基礎です。

デザイン言語

他の言語と同様に、デザイン言語は、プロダクトデザインへのアプローチを通じて視聴者とコミュニケーションをとるための系統的な方法です。 これは、一貫したカスタマーエクスペリエンスの基礎です。

□ ブランド
ブランドは、新しいプロダクトや機能を構築するときに行うすべての決定を推進します。優れたブランドとは、名前やロゴだけではありません。それはあなたのユニークなアイデンティティを定義する価値観であり、あなたを他の人から際立たせるものです。

□ ヴィジョン
なぜあなたが存在するのか、あなたの価値観は何か、そしてそれらがあなたのプロダクトの未来を導くのにどのように役立つのか。

□ デザイン原則
あなたの実務の基礎を導く考慮事項。哲学的な観点からデザインにアプローチする方法を概説し、日常の意思決定を支援します。

□ トーン・オブ・ボイス
トーン・オブ・ボイスというのは「語り口調」のことで、そのブランドをより「らしくする」ための特定の表現（文体・語調）を戦略的に決定することです。明確なトーン・オブ・ボイスは、聴衆が旅のあらゆる瞬間にどのように話すかを定義し、聴衆が行きたい場所に行くのを助けます。

□ ターミノロジー（特定の分野の専門用語。 用語）
ユーザーエクスペリエンス全体で同じに保つ必要のある標準的な用語やフレーズを作成し、デザインプロセスをスピードアップし、声を統一します

□ ライティングのガイドラインの作成
すべての一貫した経験には、緻密な執筆が必要です。家のスタイルの基礎を早期に敷設することで、一貫した文法、スタイルの選択、アクション指向の言語にすべてを一致させて、デザインを支援します。

□ ロゴ
ほとんどの顧客は、プロダクトについて数秒で意見を述べます。ほとんどの場合、あなたのロゴは誰かが最初に目にするブランド資産になります。正しい第一印象を与えることがすべてです。独特のロゴは、ユーザーがプロダクトをすぐに認識し、ブランドの本質を与えるのに役立ちます。

□ モノクロバージョン
写真の上や低品質のプリンターで印刷したときに見栄えのするロゴのモノクロバージョン。

□ スモール使用ガイダンス
ロゴは適切に機能し、すべてのサイズで認識できる必要があります。このような場合にロゴを使用するためのヒントは、ロゴが誤用されるリスクを最小限に抑えます。

□ 配置とクリアランスのガイダンス
ロゴは、他のコンテンツと一緒に使用されるため、ロゴの配置方法とスペースの保護方法に関する明確なガイダンスが付属している必要があります。

□ 使用ガイダンス
ロゴをどうするか（しないか）の文脈上の例を提供します。

□ さまざまなファイル形式
ロゴのベクターバージョンにさまざまな形式を提供すると、他の人が作業しやすくなり、他の人がロゴを再描画するのを防ぐことができます。

□ ガイドライン
一般的なUXパターンにアプローチする方法に関するガイダンスを提供することで、組織はどのプラットフォームでも一貫したアプローチと一貫したユーザーエクスペリエンスを確立できます。

□ アクセシビリティ
アクセシビリティへのアプローチ方法、および色、階層、支援技術を活用してユーザーを支援する方法に関するガイドライン。

□ ユーザーのオンボーディング
ユーザーをプロダクトまたは新機能にオンボーディングし、最初から優れたエクスペリエンスをユーザーに提供する方法。

□ マイクロコピーのガイドライン
デザインシステムのコンポーネントを作成するための標準的な方法。これらは、すべてを考慮に入れるためのプラットフォームの規則とベストプラクティスを考慮に入れています。

デザイントークン

色やタイポグラフィなど、デザインシステムのベースレイヤーの値を格納する変数。これらはコンポーネントで使用されるため、このレベルでの変更はシステム全体に響き渡ります。

色合い
ブランドを紹介する効率的な方法だけでなく、ユーザーとコミュニケーションをとる効率的な方法でもあります。美学よりも目的を持って作成されたカラーパレットは、インターフェイスに意味を追加することで、直感的なデザインパターンを作成するのに役立ちます。

□ アクセシビリティ
パレットのメインカラー間にアクセシブルなペアリングがあることを確認してください。さらに重要なのは、背景色とテキストの色の間に少なくともAA標準のコントラスト比があることを確認することです。

□ ファンクショナルカラー
ブランドの色に加えて、無効な状態、背景、アクション、高コントラストのテキストなどの機能のために、色を定義して変数にしたことを確認してください。

□ ダークモード
カラーパレットのダークモードバージョンを準備すると、デザインシステムがダークモードに適応し、ユーザーが見たいものを尊重できるようになります。

□ ガイドライン
パレットの色をいつどのように使用するか、それらを使用する際に留意すべきこと、およびそれらを使用しない方法に関するガイドラインを提供します。

レイアウト
よく考えられたレイアウトは大いに役立ちます。グリッドと間隔を一貫して使用すると、ユーザーがユーザーインターフェイスをスキャンしてコンテンツを把握しやすくなります。

□ ユニット
単位は、レイアウトの最も細かい構成要素です。 一定の増分で値のセットを定義すると（4ポイントシステムの場合は4、8、12、16など）、グリッドと間隔の値をデザインする際の基礎が提供されます。

□ グリッド
すべてのレイアウトは、インターフェイスに順序と階層をもたらすグリッド上に配置する必要があります。 インターフェースが任意のプラットフォームに簡単に適応できるように、列、ガター、マージンを備えたモバイル、タブレット、デスクトップデバイス用に個別にグリッドを定義します。

□ ブレークポイント
グリッドが適応する画面サイズと方向を事前に定義します。

□ スペース
レイアウトでは、水平方向と垂直方向のリズムが大きな役割を果たします。 グリッドに関係なく、インターフェイス要素間にスペースを追加するための簡単な方法を提供する必要があります。

タイポグラフィ
タイポグラフィは、プロダクトのコンテンツを表示する主な方法の1つです。タイポグラフィスケールの明確な階層と対照的なスタイルにより、読みやすくなり、プロダクトの全体的な構造に役立ちます。また、ブランドのキャラクターと存在感を視覚化する機会でもあります。

□ 応答性
デスクトップデバイスは通常、モバイルデバイスに比べてフォントサイズを大きくする余裕があります。ビューポートのサイズに適応するタイポグラフィスケールを作成すると、より意味のある階層とレイアウトに役立ちます。

□ グリッド
フォントサイズと行送りは、テキストと他のUI要素のペアリングを改善するためにグリッドと一致する必要があります。この良い例は、バウンディングボックス付きのアイコンとペアになったテキストです。

□ 読みやすさ
タイポグラフィスケールの文字間隔（トラッキング）、行の高さ（先頭）、および行の長さを最適化すると、テキストの読みやすさが向上します。

□ パフォーマンス
カスタムフォントは、特にWebで表示する前に、ダウンロードする必要があります。タイポグラフィアセットの適切なフォールバックと高速な読み込み時間を確保してください。システムフォントを使用すると、このパフォーマンスの問題が解決します。

□ ガイドライン
タイポグラフィスケールでペアリングを使用する方法とタイミング、ペアリングを使用する際の注意事項、および使用しない方法に関するガイドラインを提供します。

アイコン
アイコンは、機能またはコンテンツを表す記号です。それらの意味は一目で理解できるため、ユーザーインターフェースで特に認識され、役立ちます。装飾のためだけに使用することもできますが、意味のある一貫した使用を行うことで、その可能性を最大限に引き出すことができます。

□ アクセシビリティ
意味を伝えたり機能を提供したりするアイコンについては、スクリーンリーダーに必要なサポートを追加してください。 装飾アイコンの場合はこれをスキップできます。

□ スタイル
アイコンファミリが全体として視覚的に意味があることを確認してください。 輪郭のあるスタイルまたは塗りつぶされたスタイルを選択し、それに固執することで、視覚的な一貫性と予測可能性が向上します。

□ ネーミング
アイコンの名前ではなく、アイコンの内容に基づいてアイコンに名前を付けます。 たとえば、ゴミ箱アイコンには、削除ではなくゴミ箱という名前を付ける必要があります。 関連するキーワードを追加して、発見可能性を向上させることもできます。

□ グリッドとの関係
グリッドとうまく機能するバウンディングボックスにアイコンを描画します。 これにより、他のUI要素とのペアリングが向上します。 この良い例は、テキストとペアになったバウンディングボックスのあるアイコンです。

□ サイズ
グリッドに関連するアイコンにさまざまなサイズを指定します。 最小サイズを指定し、小さいサイズのアイコンの不要な詳細を削除します。

□ キーワード
キーワードを追加すると、各アイコンの発見可能性が向上し、システムを使用するすべての人のユーザーエクスペリエンスが向上します。

□ 予約済みアイコン
一般的なアクションを表すアイコンを予約すると、他のコンテキストでの使用が妨げられます。 ナビゲーションまたは追加と削除のシステムアイコンが良い例です。 これにより、より直感的なユーザーエクスペリエンスが実現します。

□ ガイドライン
アイコンを使用する方法とタイミング、アイコンを使用する際の注意事項、およびアイコンを使用しない方法に関するガイドラインを提供します。

コアコンポーネント

コンポーネントは、ユーザーインターフェイスの主要な構成要素です。 再利用可能なコンポーネントライブラリを構築すると、デザインと技術的負債が削減され、プロセスが高速化されるため、プロダクト開発ワークフローが強化されます。 コアコンポーネントは、その意味を失うことなく、細かく分割することはできません。

アバター
アバターは、ユーザーの写真のサムネイルやその他の種類のコンテンツの視覚的表現を表示するために使用されます。

□ 画像
アバターは、未知のデータソースからこの画像を取得する可能性があるため、画像をその形状にマスクし、任意の画像サイズで機能する必要があります。

□ 画像のフォールバック
利用可能な画像がない場合は、フォールバックが発生するはずです。これは、プレースホルダー画像またはイニシャルを使用して実行できます。

□ アクセシビリティ
単に役割に名前を付けるのではなく、アバター画像に表示される内容を説明するスクリーンリーダーの説明を常に提供してください。

□ サイズ
アバターを使用するには多くのコンテキストがあり、それらはすべてコンポーネントに異なるサイズを必要とします。平均的なプロジェクトでは、少なくとも2〜3の異なるサイズを使用し、少なくとも小さいサイズが利用可能であることを確認してください。

□ アイコン
アバターを画像の代わりにアイコンとともに使用して、画像が必ずしも関連付けられていない（または必要とされていない）領域を強調することができます。

□ 背景色
アイコンまたはテキストとともに使用する場合、アバターの形状に適用されるデザインシステムのカラートークンからの背景色が必要です。 WCAG AA標準に従って、アイコンとテキストの背景とのコントラスト比が十分であることを確認してください。

バッジ
バッジは、オブジェクトまたはユーザー入力値のステータスを表す要素です。

□ 外観
バッジは製品でさまざまな役割を果たす可能性があり、役割ごとに事前定義された色を設定すると、ユーザーがその意味を理解するのに役立ちます。 色を変更するときは、WCAGAA標準に従ってテキストの背景とのコントラスト比が十分であることを確認してください。

□ 却下可能なアクション
バッジは、選択した値を動的に表示する方法として使用でき、それらを閉じる方法があるはずです。

バナー
バナーには、ユーザーとのコミュニケーションの目立つ方法として使用される実用的なメッセージが表示されます。

□ 外観
バナーはさまざまな種類のメッセージを表示するために使用されます。バナーは、果たしている役割に基づいて視覚的な外観を区別することが重要です。役割の区別に背景色を使用している場合は、WCAGAA標準に準拠したコンテンツとの十分なコントラスト比があることを確認してください。

□ アイコンまたは画像の領域
バナーは、サポートするアイコンまたは画像を使用してメッセージを補足できます。テキストコンテンツの代わりに使用しないでください。

□ アクション
バナーのアクションは、そのテキストに関連し、ユーザーに送信されたメッセージに反応する方法を提供する必要があります。

□ 却下可能なアクション
ページ上のバナーでユーザーを圧倒しないでください。また、却下可能なアクションを含めてください。これは、個別の閉じるボタンまたは提供されたアクションの1つである可能性があります。

□ アクセシビリティ
バナーがページに動的に表示される場合は、支援技術によってユーザーに通知する必要があります。

□ 応答性
バナーはビューポートのサイズに適合させる必要があります。これは通常、スペースを節約するためにモバイルで全幅になることを意味します。

ボタン
ボタンは、シングルステップアクションに使用されるインタラクティブな要素です。

□ ホバー状態
ボタンにマウスカーソルを合わせると、ボタンがインタラクティブであることを明確に示します。

□ アクティブ状態
ボタンが押されたときに使用されます。同じ状態を使用して、ページ上の別の要素が視覚的に開かれているときにその要素を切り替える役割を担うボタンを表すことができます。

□ 集中状態
キーボードナビゲーションでボタンが選択されたときに使用されます。

□ アイコンのサポート
アイコンは、ラベルの横で使用するとボタンの目的を簡単に伝えることができ、十分なスペースがない場合はテキストなしで使用できます。アイコンのみで使用する場合は、アクセシビリティラベルが提供されていることを確認してください。

□ 無効
ボタンがインタラクティブではないことを視覚的に示し、ボタンが押されるのを制限します。

□ 読み込み中
ユーザーがボタンを押した後、アクションの結果を待つ必要がある場合に使用されます。スピナーを使用してこの状態を表示する場合は、元のボタンの幅や高さが変更されていないことを確認してください。

□ 全幅
デフォルトでは、ボタンはコンテンツの幅を取りますが、モバイルデバイスでうまく機能する全幅のバリエーションも付属している必要があります。

□ バリアント
複数のボタンを使用する場合は、プライマリアクションとセカンダリアクションを区別する方法が必要です。ボタンは、ユーザーにとってさまざまな役割を果たしたり、さまざまな種類のサーフェスで使用されたりする可能性があり、外観を変更する必要があります。

□ サイズ
ボタンは、Webサイトのさまざまな領域で使用でき、複数の事前定義されたサイズを持つ場合があります。モバイルでは、iOSおよびAndroidのユーザー補助ガイドラインに従ってアクセスできるようにするには、タップ可能な領域が48ピクセル以上である必要があります。

カード
カードは、主題とそれに関連する行動に関する情報をグループ化するために使用されます。

□ あらゆるタイプのコンテンツをサポート
カードは、製品で最も使用されているコンポーネントの1つであるため、カードに配置されている他のコンポーネントをサポートするのに十分な柔軟性が必要です。

□ 情報構造
カードがどれほど柔軟であっても、製品の一貫性を保つために、カードの要素に特定の構造を持たせることが重要です。

□ メディアセクションをサポート
カードを使用するための最も一般的なシナリオの1つは、カードをメディアコンテンツと混合することです。 最も人気のあるオプションは、コンテンツの上に全幅の領域を配置するか、カードの片面に全高の領域を配置することです。

□ 補足措置
カードは、通常カードの下部に配置されるアクションで使用できます。または、カード自体をタップしてアクションを表すこともできます。

□ 応答性
モバイルビューポートでは、コンテンツのスペースを節約するために、通常、カードは全幅です。

カルーセル
カルーセルは同じタイプのアイテムを積み重ね、水平方向にスクロールできるようにします。

□ ナビゲーションコントロール
カルーセルには、コンテンツをスクロールするための見つけやすいナビゲーションコントロールが必要です。

□ すべてのコンテンツをサポート
カルーセルはさまざまなコンテキストで使用でき、特定の子コンポーネントに限定されるべきではありません。シナリオによっては、同じカルーセル内のアイテムを互いに異なるものにしたい場合があります。

□ アイテム幅のカスタマイズ
単純な製品の場合、カルーセルアイテムに複数の事前定義されたサイズを使用するのが適切な場合があります。柔軟性を高めるには、カスタム幅を定義する方法を提供することをお勧めします。

□ タッチイベントのサポート
カルーセルは、タッチデバイスでスクロール可能である必要があります。ベストプラクティスのいくつかは、ネイティブスクロールを使用し、携帯電話だけでなく、すべてのタッチデバイスで同じ動作をサポートしていることを確認することです。

□ キーボードナビゲーション
ナビゲーションコントロールに焦点を合わせると、キーボードの矢印でコンテンツをスクロールできるはずです。

ドロップダウン
ドロップダウンは、ドロップダウンがある領域に関連するアクションまたはコンテンツのリストを含むコンテキストサブビューを表示するために使用されます。

□ あらゆるタイプのコンテンツをサポート
ドロップダウンは、日付ピッカー、言語選択、その他の製品機能など、さまざまなコンテキストで使用できます。

□ アクションメニュー
ドロップダウンで最もよく使用されるシナリオの1つは、ユーザーにアクションメニューを提供することです。そのため、このレイアウトを定義しておくと便利です。

□ フォーカストラッピング
ドロップダウンが開くと、フォーカスはドロップダウン内の要素に対してのみ機能するはずです。 閉じると、フォーカスがドロップダウントリガーに移動します。

□ アクションを閉じる
ドロップダウン内のいくつかのアクションでドロップダウンを閉じるか、別の閉じるボタンが必要です。 また、ユーザーが外側をクリックしたときにドロップダウンを閉じることをお勧めします。

□ キーボードナビゲーション
キーボードでドロップダウンの子要素をナビゲートし、Escキーで閉じることができるはずです。

□ ダイナミックポジショニング
ドロップダウンコンテンツは、画面上のトリガー要素の現在の位置に基づいて表示され、常にユーザーに表示される必要があります。

□ 応答性
ドロップダウンコンテンツは、デスクトップ上で多くのスペースを必要とする可能性があるため、モバイルの視点に適合させる必要があります。

アイコン
アイコンコンポーネントは、製品での図像の静的アセットの表示方法を調整する方法です。

□ サイズ
アイコンには、製品全体で全体的なエクスペリエンスを提供するために、いくつかの事前定義されたサイズが必要です。 これらのサイズ値にタイポグラフィの組み合わせを使用して、テキストサイズと確実に一致させることができます。

□ 色
アイコンは、デザインシステムのカラーパレットの値を使用する必要があります。 アイコンの塗りつぶしの色に親要素のテキストの色を使用すると、これを自動的に行うことができます。

入力チェックボックス
入力チェックボックスは、1つまたは複数のオプションを選択するために使用されるフォーム要素です。

□ チェック状態
チェックボックスが選択されている場合に使用され、フォームの送信にその値を使用します。

□ 無効状態
チェックボックスの相互作用を防ぎ、フォーム送信からその値を削除します。

□ 不確定な状態
チェックボックスに子の選択可能な要素があり、それらの一部のみが選択されている場合に使用されます。

□ ラベル
チェックボックスフィールドにリンクされたテキストラベルがあるはずです。 ラベルをクリックすると、チェックボックスの選択もトリガーされます。

□ エラー状態
エラー状態は、エラーがチェックボックスフィールドのみに関連している場合のフォーム検証エラーに使用されます。 フィールドの色を変更するとともに、常にテキストエラーを使用してください。

□ キーボードのサポート
チェックボックスの選択は、スペースキーを使用してトリガーする必要があります。 これにネイティブ要素を使用すると、この種の相互作用がすぐに提供されます。

□ チェックボックスグループ
チェックボックスをグループ化して、同時に複数の値を処理できます。

入力ラジオ
入力ラジオは、リストから1つのオプションを選択するために使用されるフォーム要素です。

□ チェック状態
ラジオが選択されているときに使用され、フォームの送信にその値を使用します。 ラジオ入力をもう一度押して選択を解除することはできません。

□ 無効状態
無線の相互作用を防ぎ、フォーム送信からその値を削除します。

□ ラベル
ラジオフィールドにリンクされたテキストラベルがあるはずです。 ラベルをクリックすると、無線の選択もトリガーされます。

□ エラー状態
エラー状態は、エラーが無線フィールドのみに関連している場合のフォーム検証エラーに使用されます。 フィールドの色を変更するとともに、常にテキストエラーを使用してください。

□ キーボードのサポート
スペースキーを押すと、ラジオの選択がトリガーされます。 これにネイティブ要素を使用すると、この種の相互作用がすぐに提供されます。

□ ラジオグループ
無線入力は常にグループで使用する必要があります。 それらの1つが選択されている場合、別の無線を選択することによってのみ選択を解除できます。

入力テキスト
入力テキストを使用すると、ユーザーはテキストを入力および編集できます。

□ 無効状態
入力の相互作用を防ぎ、フォーム送信からその値を削除します。

□ プレースホルダー
値が入力されていない場合は、潜在的な値の例を含むプレースホルダーを表示します。 入力のラベルとしてプレースホルダーを使用しないでください

□ ラベル
テキストフィールドにリンクされたテキストラベルがあるはずです。 ラベルをクリックすると、フォーカスがフィールドに移動します。

□ エラー状態
エラー状態は、エラーがテキストフィールドのみに関連している場合のフォーム検証エラーに使用されます。 フィールドの色を変更するとともに、常にテキストエラーを使用してください。

□ オートコンプリート
該当する場合、HTMLオートコンプリート属性のサポートを追加すると、ユーザーはさまざまなデータ型を簡単に入力できるようになります。

□ アイコンのサポート
アイコンは、入力方法の説明、テキストフィールドの状態の表現、または追加機能の提供に使用されます。

□ 入力スイッチ
入力スイッチは、単一のアイテムの状態を切り替えます。 入力チェックボックスと比較して、それらの変更は通常、追加の送信なしで適用されます。

□ チェック状態
入力スイッチをONにしたときに使用します。 該当する場合は色を変更する以外に、チェックされた状態を示す追加の方法を提供することをお勧めします。

□ 無効状態
入力スイッチとの相互作用を防ぎます。

□ ラベル
スイッチフィールドにリンクされたテキストラベルがあるはずです。 ラベルをクリックすると、入力の選択もトリガーされます。

□ キーボードのサポート
スペースキーを押すと、スイッチの選択がトリガーされます。

リスト
リストは、ページコンテンツまたはそれらを垂直または水平に積み重ねる要素のグループのレイアウトを定義します。

□ あらゆるタイプのコンテンツをサポート
リストは、ページレベルのレイアウトから詳細なコンポーネント間のオフセットの管理まで、あらゆるコンテキストで使用できます。 ねえ、内部で使用されているすべてのコンポーネントで動作するはずです。

□ 水平スタッキング
リストはインライン要素に使用でき、要素の複数の行間のオフセットの処理など、水平方向に積み重ねる方法を管理する必要があります。

□ 分割されたバリアント
仕切り付きのリストは、多くのプラットフォームガイドライン（特にモバイル）で推奨されているベストプラクティスです。

□ 実用的なコンテンツをサポート
リストは、タップ可能なコンポーネントをグループ化するために使用されることがあり、リストアイテムの領域全体がクリック可能である必要があります。

読み込みインジケーター
読み込みインジケーターは、操作が実行されていることと、プロセスにかかる時間を示します。

□ 線形および非線形バリアント
コンテキストとそれが使用されるコンポーネントに応じて、負荷インジケーターは線形または非線形（円形など）のバリエーションで表すことができます。

□ 不確定または不確定の待機時間
場合によっては、待機時間が決定できないことがあります。 読み込みが完了するかエラーが発生するまで、読み込みインジケーターが表示されます。 それ以外の場合は、読み込みが完了するまでの残り時間を指定することをお勧めします。

□ ライトバリアント
読み込みインジケーターは、その親要素の背景を尊重し、暗い背景色で使用されるバリアントを提供する必要があります。

□ 動きの減少
ローディングインジケータは、システムモーション設定と同期し、モーション制限設定がオンになっている場合はアニメーション速度を下げる必要があります。

モーダル
モーダルは、重要な情報または実用的なコンテンツを提供するためにメインコンテンツの前に表示されるコンテナです。

□ あらゆるタイプのコンテンツをサポート
他のコンテナと同様に、モーダルはさまざまなシナリオで使用でき、内部の他のコンポーネントで使用できるはずです。

□ 補足措置
モーダルのコンテンツは実用的である可能性があるため、アクション要素用の領域を用意することが重要です。この領域は通常、モーダルコンテナの下部にあります。

□ アクションを閉じる
モーダルは、開いているときにコンテンツをブロックしているため、閉じる方法を明確にする必要があります。これは、個別の閉じるボタンまたは補足アクションの1つである可能性があります。

□ 情報構造
モーダルはコンテンツの空のコンテナーとして使用できますが、全体的なエクスペリエンスを提供するには、定義された情報構造が必要です。これには、タイトルとサブタイトルがデフォルトでどのように表示されるか、またはアクション要素の領域がどこにあるかを定義することが含まれる場合があります。

□ キーボードナビゲーションのサポート
Escキーを押すとモーダルを閉じることができ、モーダルコンテナ内のすべてのフォーカス可能な要素にキーボードナビゲーションでアクセスできる必要があります。

□ フォーカストラッピング
モーダルが開かれると、フォーカスはモーダル内の最初の要素に移動され、モーダルコンテナ内でループされる必要があります。モーダルを閉じると、フォーカスがページの最後にフォーカスされた要素に戻るはずです。

タブ
タブは、複数のページまたはコンテンツセクション間のナビゲーションを整理します。

□ アクティブなボタンの状態
選択されたタブボタンと選択されていないタブボタンは明確に区別されている必要があります。

□ ボタンアイコンのサポート
アイコンは、ラベルの横で使用すると、タブボタンの目的を示すのに役立ちます。

□ 同じサイズのタブボタン
タブは、一定数のセクションを切り替える必要がある比較的小さなサイズのコンテナーで使用できます。 このようなシナリオでは、ボタンの領域が均等に分割されているバリアントをサポートすることをお勧めします。

□ キーボードナビゲーション
すべてのタブボタンはフォーカス可能であり、タブのコンポーネント間のナビゲーションにはキーボードからアクセスできる必要があります。

□ 応答性
モバイルのすべてのタブがビューポートに収まらない場合でも、ユーザーはすべてのタブボタンにアクセスできます。 これを解決する方法は、モバイル用にボタン領域をスクロール可能にするか、残りのボタンとともにドロップダウンを含むボタンを表示することです。

トースト
トーストは、アクションの結果に関する短い意味のあるフィードバックメッセージを提供します。

□ 自動的に却下
トーストメッセージは、ユーザーフローを中断したり、画面を長時間ブロックしたり、ユーザーからの追加のアクションを要求したりしないでください。

□ アクションサポート
トーストは、メッセージを表示するだけでなく、アクションを元に戻すなど、メッセージに関連するアクションを提供する場合もあります。

□ 複数のインスタンスを処理します
頻繁には発生しませんが、トーストは複数のソースから同時に呼び出すことができるため、結果のトーストはすべてキューに入れる必要があります。 すべてのメッセージを同時に表示しないことをお勧めします。

□ アクセシビリティ
トーストメッセージは音声支援技術によってアナウンスされ、そのアクションはキーボードから簡単にアクセスできる必要があります。

□ 応答性
トーストはモバイルビューポートに合わせて配置する必要があり、トーストのアクションはタップするために簡単に到達できる必要があります。

ツールチップ
ツールチップはデスクトップ専用のコンポーネントであり、要素にカーソルを合わせたり、要素にフォーカスしたりすると、追加情報が表示されます。

□ キーボードホバーのサポート
キーボードを使用して要素にフォーカスがある場合は、ツールチップにアクセスできる必要があります。

□ ダイナミックポジショニング
ツールチップのコンテンツは、画面上のトリガー要素の現在の位置に基づいて表示され、常にユーザーに表示される必要があります。

□ ホバータイムアウト
ツールチップをトリガーする前に少しタイムアウトを設定すると、ユーザーがマウスカーソルを移動しているときにツールチップがときどき表示されないようにするのに役立ちます。

□ ライトバリアント
ツールチップは、その親要素の背景を尊重し、暗い背景色で使用されるバリアントを提供する必要があります。

□ 要素グループの即時移行
ツールチップを使用している要素のグループがある場合、ツールチップがすでにアクティブになっているときに別の要素にカーソルを合わせると、アニメーションがトリガーされないはずです。

ツーリング

デザインシステムを使用するすべての人が効率的に作業できるようにするには、ツールを不可欠なものにします。 人々が使用するツールと物事を統合できるワークフローを見つけてください。 これは、デザインシステムを有機的に広め、人々の日常業務に不可欠なものにするのに役立ちます。

デザイン
デザインシステムのUIとUXは、可能な限り開発に結び付ける必要があります。このチェックリストのツールは、デザイナーと開発者がよりよく連携するのに役立つはずです。

□ デザインエディター
今日の市場には多くのデザインエディターがあり、最も人気のある名前はSketch、Figma、AdobeXDです。どのルートを進むべきかわからない場合は、多くの場合、チームに相談するのが最善です。

□ プラグイン
最も人気のあるデザインエディター（特にSketchとFigma）には、サードパーティのプラグインサポートが付属しています。コンポーネントのレイアウトにはエディターの組み込みツールを使用するのが最善ですが、プラグインはさまざまな有用なデータを取り込んでコンポーネントにデータを取り込むことができます。

□ バージョン管理
デザインをセマンティックバージョニングでバージョン管理すると、デザインを開発に合わせて簡単に調整し、誤った変更をロールバックし、コードとデザインの変更を同時にリリースできます。

□ 貢献ガイドライン
デザインシステムのUIとUXに貢献するプロセスを定義し、それを発見可能な場所に文書化して、誰もが貢献しやすいようにします。

デベロップメント
デザインシステムを開発する際の主な課題の1つは、コンポーネントを構築することではありません。これにより、コードが安定し、読みやすく、貢献しやすくなります。

□ コンポーネントカタログ
UIコンポーネントの環境を製品コードベースの外部に分離して、グローバルな依存関係に依存せず、簡単に再利用できるようにします。

□ ドキュメンテーション
コードを文書化することは、採用を促進し、貢献者の負荷を軽減するための鍵です。

□ コードスタイル
コードスタイルを定義すると、システムでのコードの記述方法を調整し、開発速度を上げることができます。各プラットフォームに提供されているツールを使用して自動化する必要があります。

□ ユニットテスト
デザインシステムのすべての部分は、単体テストでカバーする必要があります。システムが採用されると、隔離された環境の変更が製品の動作に影響を与える可能性があります。

□ アクセシビリティテスト
デザインシステムは、可能な限りアクセシビリティをカバーする必要があります。これを自動化すると、製品内のアクセスできないコンポーネントやユーザーフローのリスクが軽減されます。

□ セマンティックバージョニング
バージョン番号の割り当て方法と増分方法を指示するセマンティックバージョニングを使用して、コードをバージョン管理します。

□ リリース戦略
デザインシステムのリリースは自動化する必要があり、リリースの破損を防ぐために、ローカルまたはリモートCIパイプラインで実行されるスクリプトを使用するのが理想的です。

□ メッセージガイドラインと変更ログをコミットする
行われる変更を分類および定義するコミットメッセージガイドラインを採用することにより、変更ログの生成を自動化します。

□ テンプレート
生産的な議論を促進するために提案されている変更の概要を示すマージ要求テンプレートを作成します。

□ 貢献ガイドライン
デザインシステムのコードに貢献するプロセスを定義します。誰もが簡単に貢献できるように、すべてを発見可能な場所に文書化します。

プロジェクト管理

デザインシステムは、チームが引き受ける可能性のある他のプロジェクトと何ら変わりはありません。 1つを正常に構築および維持するには、毎日適切に実行される明確な戦略が必要です。また、デザインシステムを共有するために同僚がフィードバックを提供する機会を作成する必要があります。

タスク管理
堅実なタスク管理とワークフローは、プロジェクトを実行する上で重要なステップです。 アジャイルやかんばんのような方法論を採用すると、多くの分野をカバーするのに役立ちます。

□ ロードマップ
短期および長期のビジョンを設定し、物事をマッピングすることで、実行する手順を決定し、全体像の中で自分の位置を理解し、日常のタスクに優先順位を付けることができます。

□ マイルストーン
ロードマップを使用して、プロジェクト管理でより大きな叙事詩として機能するマイルストーンを定義します。 これらはあなたがあなたの進歩を理解するのを助けるでしょう。

□ 発券業務
Jira、Trello、GitHubなどのチケットソフトウェアを使用して、日々の進捗状況を簡単に追跡できます。 これにより、他のユーザーが機能の提案やバグレポートを簡単に送信できるようになります。

□ コミュニケーション
ユーザーは、デザインシステムの形成に大きな役割を果たします。 彼らが声を上げることができるコミュニケーションチャネルを作成することは、彼らがあなたのシステムをどのように使用しているかを追跡するのに役立ちます。 また、所有権の感覚とシステムの採用も向上します。

□ コミュニティミーティング
デザインシステムを使用するすべての人とのコミュニティミーティングを手配します。 あなたの知識を共有し、コミュニティの感覚を向上させるための提案をしてください。

□ 通信チャネル
ほとんどの製品開発作業はデジタルで行われるため、人々が連絡を取り、質問できるデジタルチャネルを作成します。

□ 営業時間
より詳細に話し合うことができる、よりプライベートな設定で視聴者を引き付けることができる営業時間を作成します。 これらをピアコーディングまたはピアデザインの機会として使用することもできます。

□ よくある質問
全員の時間を節約するために、聴衆が頻繁に尋ねる質問を定義し、見つけやすい場所に文書化します。

アナリティクス
デザインシステムの開発に関しては、データだけが推進要因ではありません。 システムが開発プロセスと最終製品でどのように使用されているかを鋭敏に監視することで、今後の戦略に情報を提供できます。

□ コンポーネント分析
コンポーネントの使用状況を追跡します。 開発には、FigmaのDesign SystemAnalyticsなどの組み込みツールを使用できます。 最終製品の場合、テクノロジーに応じてプラットフォームごとに個別の追跡方法を使用できます。

□ エラーログ
製品のコンポーネント関連の停止を追跡および特定する方法を実装します。

□ ツーリング分析
設計システムに使用されているツールを追跡します。 最も使用されている機能と最も人気のある機能を確認してください。

□ サービスとヘルスのメトリック
設計システムのサービスとヘルスのメトリックを定義して、パフォーマンスのベンチマークを設定します。 一般的な例としては、クローズされたチケットの数、行われた改善、修正されたバグなどがあります。

まとめ

リストはLight Weight Labsによって制作されたDesign System Checklistに従って作成されます。

Lightweight Labs

Light Weight Labsは長い間デザインシステムに取り組んできました。 そして、それらすべてが共有する類似点を見つけました。Design System Checklistは、広範囲なデザインシステムを構築するのに役立つベストプラクティスのコレクションとなっています。

こちらに記載されているカテゴリは、システムと正確に一致しない場合があります。すべてのデザインシステムのアイテムの決定的なリストを意味するものではありません。これは、確実なユーザーエクスペリエンスを提供するために、チェックしたいすべてのものを追跡するための一連のガイドラインです。ここに表示されるものはすべてオープンソースです。 

Design System Checklist

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。