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 のリスティングを作成するためのグラフィック アセットとテキスト アセットをいくつか指定します。

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