Close

8 月 4 日から始まる、毎週 20 分間のエピソードでチームのコラボレーションを改善する方法をご覧ください。無料登録はこちら →

カテゴリー

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

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

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

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

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

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

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

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

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

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

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

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

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

Tony Starr

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


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

  • Content design glossary template

    アトラシアン

    Content design glossary

    Teach writers how to use product names, industry terms, and other content with an A-Z guide.

  • Content strategy template

    アトラシアン

    コンテンツ戦略

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

  • Customer interview report template

    アトラシアン

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

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