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

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

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

テキストと画像

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

アドオンの名前

アドオンの名前は、プロジェクト マニフェストで設定し、公開用にアドオンを 構成するときに設定する必要があります名前は、Google Workspace Marketplace のリスティングやメニューなど、さまざまな 場所に表示されます。名前を選択する際は、次の点に注意してください。

  • 語頭を大文字にします(アルファベットの場合)。
  • ブランドの一部でない限り、句読点(特に丸括弧)は使用しないでください。
  • 短くします。15 文字以下が最適です。長い名前は、Google Workspace Marketplace のリスティングなどで自動的に切り捨てられることがあります。
  • アドオンの名前に「Google」、「Gmail」などの Google サービスの名称を含めないでください。
  • アドオンの名前に「アドオン」という語句を含めないでください。
  • バージョン情報は含めないでください。

文章のスタイル

記述する必要がある内容は多くありません。ほとんどの操作は、アイコン、レイアウト、短いラベルで明確にする必要があります。短いラベルでは説明しきれない部分がある場合は、アドオンについて説明する別のウェブページを作成してリンクすることをおすすめします。

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

  • 文頭を大文字にします(特にボタン、ラベル、カードの操作の場合)。
  • 専門用語や頭字語を使用せず、短くクリアテキストを使用してください。

ユニバーサル アクションとカードの操作

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

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

エラー メッセージ

問題が発生した場合は、平易な言葉を使用することが重要です。ユーザーの視点から問題を説明し、解決方法を提案してください。

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

ヘルプ コンテンツ

ヘルプ情報を表示したり、アドオンの操作方法をユーザーに説明したりするカードを設計することが必要になる場合があります。アドオンのヘルプ コンテンツを作成する場合は、次の点に注意してください。

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

画像検索

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

コントロール

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

ボタン

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

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

DecoratedText

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

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

選択入力

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

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

テキスト入力

テキスト入力では、ユーザーが文字列データを入力できます。

  • テキスト入力を使用して、ユーザーに特定の入力候補のいずれかを入力させることは避けてください。代わりに、プルダウン選択を使用してください。
  • ヒントと候補を使用して、ユーザーが正しい形式と内容でテキストを入力できるようにします。
  • 入力するテキストが数語を超える場合は、複数行のテキスト入力を使用します。

ブランディング

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

アドオン内

アドオンの UI にブランディングを含める場合は、簡潔で控えめなものにしてください。これにより、ユーザーはアドオンの機能に集中できます。

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

Google Workspace Marketplace

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

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