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

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

アドオンの動作に不可欠なウェブページ(アドオンの設定ページなど)が別のウェブページに表示される場合は、それらのウェブページもスタイル ガイドラインに準拠するようにしてください。

テキストと画像

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

アドオン名

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

  • 語頭を大文字にします。
  • ブランドに含まれる場合を除き、句読点(特に括弧)は使用しないでください。
  • できるだけ短くします(15 文字以内)。Google Workspace Marketplace のリスティングやその他の場所で、長い名前が自動的に切り捨てられることがあります。
  • アドオン名に「Google」や「Gmail」などの Google プロダクト名を含めないでください。
  • アドオン名に「アドオン」という単語を含めないでください。
  • バージョン情報は省略します。

文章のスタイル

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

UI テキストを記述する場合:

  • 文頭を大文字にします(特にボタン、ラベル、カード操作の場合)。
  • 専門用語や頭字語を使わず、簡潔で簡潔な文章にしてください。

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

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

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

エラー メッセージ

問題が発生した場合には、わかりやすい言葉を使うことが重要です。ユーザーの視点から問題を説明し、修正方法を提案します。

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

ヘルプ コンテンツ

ヘルプ情報やアドオンの動作をユーザーに説明するカードを作成することをおすすめします。アドオンのヘルプ コンテンツを作成する場合は、次の点に注意してください。

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

画像

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

操作

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

ボタン

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

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

DecoratedText

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

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

選択入力項目

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

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

テキスト入力

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

  • テキスト入力を使用して、ユーザーに使用可能なエントリの 1 つのいずれかを入力させないでください。代わりにプルダウン選択を使用してください。
  • ヒントや提案を使用して、ユーザーが正しい形式と内容のテキストを入力できるようにします。
  • 入力するテキストが数単語を超える場合は、複数行テキスト入力を使用します。

Branding(ブランディング)

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

アドオン

アドオンの UI にブランド表示を使用する場合は、簡潔で明快なものにします。 これにより、アドオン機能に注目してもらうことができます。

  • アドオンのあらゆる面で、ブランディング ガイドラインに従う必要があります。
  • 「Google」、「Gmail」などの Google プロダクト名は使用しないでください。
  • Google サービスのアイコンは、改変されていても表示しないでください。
  • ブランディング テキストには「アドオン」という単語を含めないでください。
  • ブランド テキストは数単語程度で済みます。

Google Workspace Marketplace 内

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

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