Google Workspace アドオンは、拡張するホスト アプリケーションのスタイルとレイアウトと一致する必要があります。使い慣れたコントロールと動作を使用して、UI を自然に拡張する必要があります。ここで紹介するガイドラインでは、高品質なユーザー エクスペリエンスを推進するテキスト、画像、コントロール、ブランディングの取り扱い方法について説明します。
アドオンのオペレーションに不可欠な要素（アドオンの設定ページなど）を別々に開く場合は、それらのウェブページもこれらのスタイル ガイドラインを遵守していることを確認します。
Google Workspace アドオン設計キットを使用する
シームレスなユーザー エクスペリエンスをすばやく実現するには、Figma で公開されている Google Workspace アドオンの UI デザインキットを使用してください。無料の Figma アカウントを作成するか、組織の管理者にライセンスをリクエストします。
カードベースのインターフェースのコンポーネントを参照し、組み込みのテンプレートを使用してアドオンを作成して可視化します。
テキストと画像
このセクションでは、アドオンでテキストと画像を適切に使用する方法について説明します。
アドオン名
アドオンの名前は、プロジェクトのマニフェストと、公開用にアドオンを構成するときに設定する必要があります。この名前は、Google Workspace Marketplace のリストやメニューなど、さまざまな場所に表示されます。名前を選択する際は、次のようにします。
- 語頭を大文字にします（アルファベットの場合）。
- 句読点の一部（かっこを除く）は使用しません。
- 短くする（15 文字以下が最適）。正式名称は Google Workspace Marketplace リスティングなどで自動的に切り捨てられます。
- アドオンの名前に「Google」、「Gmail」などの Google プロダクト名を含めないでください。
- アドオンの名前に「アドオン」という単語を含めないでください。
- バージョン情報を省略します。
文章のスタイル
それほど多くのドキュメントを書く必要はありません。ほとんどのアクションは、アイコン、レイアウト、短いラベルで明確にする必要があります。アドオンの一部で、短いラベルよりも広範な説明が必要な場合は、アドオンを説明するウェブページを別途作成し、リンクすることをおすすめします。
UI テキストを記述する場合:
- 文頭を大文字にします（特に、ボタン、ラベル、カード アクションで使用します）。
- 専門用語や頭字語を使わない、シンプルで簡潔なテキストを優先します。
ユニバーサル アクションとカード アクション
アドオンでユニバーサル アクションまたはカード アクションを使用すると、定義したカードにメニュー項目として表示されます。これらのメニュー項目で使用するテキストは選択できます。使用するテキストを選択する際は、次のようにします。
- アドオンの名前を繰り返すだけのメニュー テキストは避けてください。
- 各メニュー項目を開始するには、「実行」、「構成」、「作成」などのアクション ワードを使用します。
- アクションが表示する UI コンポーネントではなく、タスクを記述します。
- アクションがワークフローを開始し、その処理を説明する動詞が 1 つもない場合は、「開始」と言います。
- ユーザーが大量のリストをスクロールしなくて済むように、メニュー項目の数を小さくします。実装するアクションが多い場合は、アクションごとに異なるカードを使用してください。
エラー メッセージ
問題が発生した場合は、簡単な言葉を使うことが重要です。お客様の視点から問題を説明し、修正方法を提案する。
- コードがスローした例外をユーザーが確認できないようにします。代わりに、
try...catchステートメントを使用して例外をインターセプトし、ユーザー フレンドリーなエラー メッセージを表示します。 - 公開する前に、アドオンの UI にデバッグ情報が表示されていないことを確認してください。
ヘルプ コンテンツ
ヘルプ情報を表示するカードや、ユーザーにアドオンの動作を説明するカードを設計することをおすすめします。アドオンのヘルプ コンテンツを作成する場合は、次の点に注意してください。
- 可能な限り、箇条書きや番号付きリストに手順を示します。名前付き UI 要素を明確に参照して、ユーザーを最終結果まで導きます。
- 指示に、要件（スプレッドシートの設定など）が明確に示されていることを確認してください。
- ウェブページのサポートなど、外部のヘルプ コンテンツを自由にリンクできます。
画像
アドオンで使用される画像は、組み込みのアイコンの種類か、URL で指定された公開ホスト画像のいずれかです。ホストされたイメージを使用するときは、アドオンを使用するすべてのユーザーが画像にアクセスできるようにしてください。
制御
このセクションでは、インタラクティブ ウィジェットのユーザー エクスペリエンスのガイドラインを示します。
ボタン
他のウィジェットではなく、ボタンを使用して、ユーザー インターフェースの主なアクションを制御します。
- ほとんどのテキストボタンのラベルは動詞で始める必要があります。
- ほとんどの場合、ボタンの行は 3 つ以下に制限する必要があります。
装飾テキスト
DecoratedText ウィジェットを使用すると、アイコン、ボタン、スイッチを使用してテキスト コンテンツを表示できます。
- テキスト コンテンツでは文頭を大文字にします。
- 利用可能なスペースに収まらない DecoratedText ウィジェットのテキストは、省略されます。このため、テキスト コンテンツはできるだけ短くすることをおすすめします。
選択入力
アドオン内で各種選択入力ウィジェット（プルダウン選択ボックス、チェックボックス、ラジオボタン）を使用できます。
- 複数のオプションを選択できる場合、またはオプションがまったくない場合は、チェックボックスを使用します。オプションを 1 つだけ選択する必要がある場合は、ラジオボタン（または選択メニュー）を使用します。 UI のスペースを節約しながら、代替の短いリストを提供するときは、プルダウンを使用します。
- 各オプションに割り当てられているテキストは、文頭を大文字にします。
- 選択を間違えることが多いため、選択の変更を使用して、元に戻しにくいメジャー アクションをトリガーしないでください。代わりに、現在の選択値を読み取り、アクションをトリガーするボタンを追加することを検討してください。
- プルダウンでは、オプションをアルファベットまたは論理的なスキームで並べ替えます（たとえば、日曜日や月曜日から始まる曜日を論理的に表示するなど）。
- 特定の選択入力ウィジェットのオプション数を妥当な数に制限します。オプションが多すぎると、ウィジェットが使いづらくなることがあります。そのような場合は、オプションを異なるカテゴリや複数のウィジェットに分割することを検討してください。
テキスト入力
テキスト入力は、ユーザーが文字列データを入力する場所です。
- テキスト入力を使用して、考えられる特定のエントリセットのいずれかにユーザータイプを入力しないでください。代わりにプルダウンで選択します。
- ヒントと提案を使用して、ユーザーが正しい形式と内容でテキストを入力できるようにします。
- 複数の単語を入力する場合は、複数行のテキスト入力を使用します。
ブランディング
このセクションでは、アドオン インターフェースにブランディング要素を追加するためのユーザー エクスペリエンスのガイドラインについて説明します。
アドオンの場合
ブランディングをアドオン UI に含める場合は、簡潔でシンプルにします。 これにより、ユーザーはアドオン機能に集中できます。
- アドオンの要素は、ブランディング ガイドラインを遵守している必要があります。
- 「Google」や「Gmail」などの Google サービス名を含めないでください。
- 変更された Google サービスのアイコンは含めないでください。
- ブランド テキストに「アドオン」という単語を含めないでください。
- ブランディング テキストは、簡潔にします。
Google Workspace Marketplace
公開用にアドオンを構成するときに、さまざまな画像アセットとテキスト アセットを指定して Google Workspace Marketplace リスティングを作成します。
ストアの掲載情報のすべての要素とこれらのアセットは、ブランドの取り扱いガイドラインを遵守する必要があります。