Close

カテゴリー

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

著者: Tony Starr, リード コンテンツ デザイナー @ アトラシアン

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

テンプレートを使用する
デザイン コンポーネント テンプレート

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

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

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

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

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

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

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

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

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

Tony Starr

リード コンテンツ デザイナー @ アトラシアン


Tony はアトラシアンのリード コンテンツ デザイナーです。複数の分野に精通するテクニカル ライター兼コンテンツ ライターで、コンテンツ ガイダンスの基準を定め、限界を押し上げることに情熱を注いでいます。

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

    アトラシアン

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

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

  • コンテンツ戦略

    アトラシアン

    コンテンツ戦略

    コンテンツ戦略計画を作成して、編集カレンダーを整理します。

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

    アトラシアン

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

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