デザイン コンポーネント テンプレート

作成者:Tony Starr, リード コンテンツ デザイナー @ Atlassian

丁寧に文書化されたデザイン コンポーネントのライブラリを作成

主な機能
ドキュメント
要件
ナレッジベース

カテゴリ

デザイン
ページ テンプレート

特に拡大中のチームでは、デザインで使用するすべてのコンポーネントを容易に追跡できない可能性があります。デザイン コンポーネント テンプレートを使用して、コンポーネントの機能と構造などの基本情報から、さまざまなコンテキストでの見た目や動作などの詳細まで、各コンポーネントを文書化できます。追加ガイダンスのセクションもあり、そこでコンテンツやアクセシビリティ、モバイルその他、コンポーネントの固有ルールについて説明できます。完全なコンポーネント ライブラリをゼロから作成しましょう!

デザイン・コンポーネント・テンプレート使用方法

ステップ 1. 基本情報から始める

コンポーネントの詳細を記述する前に、基本情報を入力する必要があります。最初に「Component basics(コンポーネントの基本情報)」の行を入力します。コンポーネントに名前を付け、その機能を説明し、コールアウトに番号を付けた構造図をアップロードします。これらのコールアウトを使用してキーを作成し、コンポーネントの構造の各要素を定義します。このセクションの目的は、コンポーネントの使用者にコンポーネントの構造を理解してもらうことです。

ステップ 2. 詳細を記述する

ここでは、より大きな機能のデザインの一部としてコンポーネントをどのように使用するのかを記述します。デザイン全体の目的を含むコンポーネントの使用方法を記述してから、さまざまなコンテキストでの見た目や動作を説明します。リポジトリのライブ コードをデザイン システムに使用し、異なるバリエーションを表示します。最後に、コンポーネントのビジュアル スタイルを記述します。すべきこととすべきではないことの例を必ず含めましょう。

ステップ 3. ヒント、コツ、ベスト プラクティスを文書化する

それぞれのコンポーネントに特有の癖があります。それらを Additional guidance (追加ガイダンス)に記録しましょう。最初にコンテンツについて記録します。句読点に関するコンポーネント固有のルールがありますか?標準ラベルはありますか?アクセシビリティに関するコンポーネント固有の懸念事項や、モバイル環境でのコンポーネントの利用に関するヒントとともにこれらを記録します。コンポーネントの使用方法に関する業界標準のベスト・プラクティスがある場合は、それらも記載します。最後に、関連するコンポーネントやパターンへのリンクを追加します。

ステップ 3. ヒント、コツ、ベスト プラクティスを文書化する

Related Templates

コンテンツ デザイン用語集

コンテンツ デザイン用語集

製品名、業界用語、その他のコンテンツの使用方法を A-Z ガイドでライターに教えます。

作成者:Atlassian
詳細を見る
コンテンツ戦略

コンテンツ戦略

コンテンツ戦略を詳細に計画して、編集カレンダーを整理する

作成者:Atlassian
詳細を見る
コンテンツ デザイン用語集

コンテンツ デザイン用語集

製品名、業界用語、その他のコンテンツの使用方法を A-Z ガイドでライターに教えます。

作成者:Atlassian
詳細を見る
コンテンツ戦略

コンテンツ戦略

コンテンツ戦略を詳細に計画して、編集カレンダーを整理する

作成者:Atlassian
詳細を見る
顧客インタビュー レポート

顧客インタビュー レポート

顧客インタビュー ピラミッドを使って情報を役立てよう

作成者:Atlassian
詳細を見る