Google Workspace アドオンの UI スタイルガイド

Google Workspace アドオンは、拡張するホスト アプリケーションのスタイルとレイアウトと一致している必要があります。使い慣れたコントロールと動作を使用して、UI を自然に拡張する必要があります。ここで説明するガイドラインでは、質の高いユーザー エクスペリエンスを促進するテキスト、画像、コントロール、ブランディングを扱う方法について説明します。

アドオンの操作に不可欠な別のウェブページ（アドオンの設定ページなど）が開く場合は、それらのウェブページもこれらのスタイル ガイドラインに準拠していることを確認してください。

テキストと画像

このセクションでは、アドオンでテキストと画像を適切に使用する方法について説明します。

アドオン名

アドオンの名前は、プロジェクトのマニフェストと、公開用にアドオンを構成するときに設定する必要があります。この名前は、Google Workspace Marketplace の掲載情報やメニュー内など、さまざまな場所に表示されます。名前を選択する際の注意事項:

• 語頭を大文字にします（アルファベットの場合）。
• 句読点（特にかっこ）は、ブランドの一部でない限り使用しないでください。
• できるだけ短くしてください。15 文字以下が理想的です。長い名前は、Google Workspace Marketplace の掲載情報などで自動的に切り捨てられることがあります。
• アドオン名に「Google」、「Gmail」などの Google サービス名を含めないでください。
• アドオン名に「アドオン」という単語を含めないでください。
• バージョン情報は省略します。

文章のスタイル

書き込みはあまり必要ありません。ほとんどの操作は、アイコン、レイアウト、短いラベルで明確にする必要があります。アドオンの一部について、短いラベルでは説明が不十分な場合は、アドオンの説明を記載した別のウェブページを作成してリンクを設定することをおすすめします。

UI テキストを作成する際は、次の点に注意してください。

• 文頭を大文字にします（特にボタン、ラベル、カード アクションの場合）。
• 専門用語や頭字語を使用せず、短くシンプルなテキストを作成します。

ユニバーサルとカードの操作

アドオンでユニバーサル アクションまたはカード アクションを使用している場合、それらは、定義したカードのメニュー項目として表示されます。これらのアクションのメニューで使用されるテキストを選択できます。使用するテキストを選択する際は、次の点にご注意ください。

• アドオンの名前を繰り返すだけのメニュー テキストは避けてください。
• 各メニュー項目は、「実行」、「構成」、「作成」などの動詞で始めます。
• アクションで表示される UI コンポーネントではなく、タスクを記述します。
• アクションがワークフローを開始し、その動作を説明する動詞が 1 つしかない場合は、「開始」という名前を付けます。
• ユーザーが長いリストをスクロールしなくても済むように、メニュー項目の数を少なくします。実装するアクションが複数ある場合は、それぞれ異なるアクションを持つ複数のカードを使用することを検討してください。

エラー メッセージ

問題が発生した場合は、わかりやすい言葉を使うことが重要です。お客様の立場から問題を説明し、解決方法を提案します。

• コードがスローした例外をユーザーに表示しないでください。代わりに、try...catch ステートメントを使用して例外をインターセプトし、ユーザー フレンドリーなエラー メッセージを表示します。
• 公開する前に、アドオンが UI にデバッグ情報を表示していないことを確認します。

ヘルプ コンテンツ

ヘルプ情報を表示するカードや、アドオンの操作をユーザーに説明するカードを設計できます。アドオンのヘルプ コンテンツを作成する場合は、次の点にご注意ください。

• 可能であれば、手順を箇条書きまたは番号付きリストで表示します。名前付き UI 要素を明確に参照しながら、最終的な結果までユーザーを案内します。
• スプレッドシートを特定の方法で設定するなど、要件を明確に説明してください。
• サポート ウェブページなど、外部ヘルプ コンテンツへのリンクを追加しても構いません。

画像

アドオンで使用する画像は、組み込みアイコンタイプのいずれか、または URL で指定された一般公開ホストされている画像のいずれかです。ホストされた画像を使用する場合は、アドオンを使用する可能性のあるすべてのユーザーが画像にアクセスできるようにしてください。

コントロール

このセクションでは、インタラクティブ ウィジェットのユーザー エクスペリエンスに関するガイドラインについて説明します。

ボタン

他のウィジェットではなく、ボタンを使用してユーザー インターフェースの主なアクションを制御します。

• ほとんどのテキスト ボタンのラベルは動詞で始めます。
• ほとんどの場合、ボタンの行は 3 つ以下にする必要があります。

DecoratedText

DecoratedText ウィジェットを使用すると、アイコン、ボタン、スイッチを使用してテキスト コンテンツを表示できます。

• テキスト コンテンツは文頭を大文字にします（アルファベットの場合）。
• 使用可能なスペースに収まらない場合、DecoratedText ウィジェットのテキストは切り捨てられます。そのため、テキスト コンテンツはできる限り短くするようにしてください。

選択入力

アドオンでは、プルダウン選択ボックス、チェックボックス、ラジオボタンなど、さまざまな選択入力ウィジェットを使用できます。

• チェックボックスは、ユーザーが複数のオプションを選択できる場合や、オプションをまったく選択できない場合に使用します。1 つのオプションのみを選択する必要がある場合は、ラジオボタン（または選択メニュー）を使用します。UI のスペースを節約しながら、代替案の短いリストを提供する場合は、プルダウンを使用します。
• 各オプションに割り当てるテキストは先頭を大文字にします。
• 選択時にミスが生じることがよくあるため、選択の変更を使用して、元に戻しにくい大きな操作をトリガーしないでください。代わりに、現在の選択値を読み取ってアクションをトリガーするボタンを追加することを検討してください。
• プルダウンの場合は、オプションをアルファベット順に並べ替えるか、すべてのユーザーが理解できる論理的なスキーム（日曜日または月曜日から順に曜日を表示するなど）で並べ替えます。
• 特定の選択入力ウィジェットのオプションの数を妥当な数に制限します。オプションが多すぎると、ユーザーがウィジェットを使いづらくなる可能性があります。その場合は、オプションをさまざまなカテゴリと複数のウィジェットに分割することを検討してください。

テキスト入力

テキスト入力は、ユーザーが文字列データを入力する場所を提供します。

• テキスト入力を使用して、ユーザーに特定のエントリセットのいずれかを入力させないでください。代わりにプルダウン セレクタを使用してください。
• ヒントや候補を使用して、ユーザーが正しい形式とコンテンツでテキストを入力できるようにします。
• 入力するテキストが数語を超える場合は、複数行テキスト入力を使用します。

ブランディング

このセクションでは、アドオン インターフェースにブランド要素を追加するためのユーザー エクスペリエンスのガイドラインについて説明します。

アドオン内

アドオンの UI にブランドを表示する場合は、簡潔で軽いデザインにします。これにより、ユーザーはアドオン機能に集中できます。

• アドオンのすべての要素がブランディング ガイドラインに準拠している必要があります。
• 「Google」、「Gmail」などの Google サービスの名前は含めないでください。
• Google プロダクトのアイコンは、変更されている場合でも含めないでください。
• ブランディング テキストに「アドオン」という単語を含めないでください。
• ブランド関連のテキストは数語以内にしてください。

Google Workspace Marketplace で

公開用にアドオンを構成する際に、Google Workspace Marketplace のリスティングを作成するために、さまざまな画像アセットとテキスト アセットを指定します。

ストアの掲載情報とこれらのアセットのすべての要素は、ブランディング ガイドラインに準拠している必要があります。