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

Google Workspace アドオンは、Google Workspace のアドオンの 編集スタイルとレイアウトが ホスト アプリケーション あります。UI を拡張する必要がある なじみのあるコントロールや動作で自然に生成できます。ここで紹介するガイドラインは ここでは、宣伝する商品またはアプリを宣伝する広告のテキスト、画像、コントロール、ブランディングを 実現することを目指しています

アドオンで個別のウェブページが開き、そのウェブページがアドオンの 操作(アドオンの設定ページなど)を実行する場合は、そのウェブページが これらのスタイル ガイドラインを遵守してください。

テキストと画像

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

アドオン名

アドオンの名前はプロジェクトで設定する必要があります マニフェストを参照し、 アドオンを公開用に構成します。 この名前は、Google Workspace Marketplace など、さまざまな場所に表示されます。 アクセスできます。名前を決めるときの注意:

  • 語頭を大文字にします。
  • ブランド要素の一部でない限り、句読点、特に丸括弧は使用しないでください。
  • 簡潔にし、15 文字以下が最適です。長い名前は Google Workspace Marketplace のリスティングやその他の場所で自動的に切り捨てられます。
  • 「Google」や「Gmail」などの Google プロダクト名は使用しないでください 」と入力します。
  • 「アドオン」という単語を含めないでください。」と入力します。
  • バージョン情報は省略します。

文章のスタイル

記述はあまり必要ありません。ほとんどのアクションは 画像、レイアウト、短いラベルですアドオンの一部が見つかった場合 短いラベルよりも詳細な説明が必要な場合は、 アドオンについて説明したウェブページを別途作成し、そのウェブページにリンクする演習を行います。

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

  • 最初の語の語頭を大文字にします(ボタン、ラベル、カード操作など)。
  • 専門用語や頭字語を使用しない、短くシンプルなテキストが好まれます。

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

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

  • 単にアドオンの名前を繰り返すメニュー テキストは避けてください。
  • 各メニュー項目は、「Run」、「Configure」、 [作成] をクリックします。
  • アクションによって表示される UI コンポーネントではなく、タスクについて説明します。
  • アクションがワークフローを開始するときに、それを表す単一の動詞がない場合 「Start」とします。
  • ユーザーがスクロールせずに済むように、メニュー項目の数を少なくします。 目を向けます他にも実装が必要なアクションがある場合は、 それぞれにアクションの異なる複数のカードが表示されます。

エラー メッセージ

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

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

ヘルプ コンテンツ

ヘルプ情報を表示するカードや ユーザーに対するアドオンの動作です。ご自身でヘルプ コンテンツを作成し、 追加する場合は、次の点に留意してください。

  • 可能であれば、手順は箇条書きまたは番号付きリストで示します。徒歩のユーザー 名前付き UI 要素に明確に参照します。
  • 設定などの要件がある場合は、手順にわかりやすく説明してください。 特定の方法で実行できます。
  • 対応するウェブページなど、社外向けのヘルプ コンテンツへのリンクを自由に設定してください。

画像

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

コントロール

このセクションでは、 インタラクティブなウィジェット

ボタン

ユーザー インターフェースの主なアクションを制御するには、 利用できます

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

DecoratedText

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

  • テキスト コンテンツの文頭を大文字にします。
  • DecoratedText ウィジェットのテキストは、 できます。このため、テキスト コンテンツは常に できる限り短くします

選択入力

さまざまな 選択入力ウィジェット プルダウン選択ボックス、チェックボックス、ラジオボタンです。

  • チェックボックスは、ユーザーが複数のオプションを選択できる場合、またはオプションをまったく選択できない場合に使用します。 選択肢を 1 つだけ選択する必要がある場合は、ラジオボタン(または選択メニュー)を使用します。 選択肢の短いリストを提示する場合は、プルダウンを使用して UI でスペースを節約できます。
  • 各選択肢に割り当てられるテキストでは、最初の語の語頭を大文字にします。
  • 元に戻しにくい主要な操作をトリガーするために選択内容の変更を使用することは避けてください。 なぜなら ユーザーは選択をするときに 間違えることが多いからです代わりに 現在の選択値を読み取り、トリガーするボタンを追加する できます。
  • プルダウンの場合は、オプションをアルファベット順または論理スキームで並べ替えます すべてのユーザーが理解できる構成で、曜日の提示など 日曜日または月曜日を順に指定します。
  • 特定の選択入力に含まれるオプションの数を制限する 適切な数に調整します。選択肢が多すぎると、特定のオプションを ウィジェットは使いづらいですそのような場合は、選択肢を ウィジェットを分類できます

テキスト入力

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

  • テキスト入力を使用して、ユーザーの入力を 表示されます。代わりにプルダウン選択を使用してください。
  • ヒントや候補を使用して、ユーザーが正しいテキストを入力できるようサポートする 形式と内容が異なります。
  • 複数行のテキストを入力する場合は、複数行のテキストを入力する あります。

ブランディング

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

アドオン内

アドオン UI にブランド要素を含める場合は、簡潔で軽量なものにします。 これにより、ユーザーはアドオンの機能に集中できます。

  • アドオンのすべての側面は、 ブランドの取り扱いガイドライン
  • 「Google」や「Gmail」などの Google プロダクト名は使用しないでください。
  • Google サービスのアイコンは、改変されている場合であっても含めないでください。
  • 「アドオン」という単語を含めないでください。ブランディングテキストに 追加する必要があります
  • ブランド テキストは数語以内にしてください。

Google Workspace Marketplace

公開対象のアドオンを設定すると 画像およびテキスト アセットが多数用意されており、 Google Workspace Marketplace の リスティングです

ストアの掲載情報とこれらのアセットは、 ブランドの取り扱いガイドライン