Office アドインの相互作用パターン

Office アドイン は、作成および生産性のエクスペリエンスを強化したり、より大規模な Web ベースのワークフローに Office ホスト アプリケーションのコンテンツを関連付けたりできます。多数の一般的なシナリオが、開発する可能性があるコンテンツ アドイン、作業ウィンドウ アドイン、Outlook アドインに適用されます。この記事では、いくつかの最も一般的なシナリオについて説明します。また、アドインの UX に推奨される相互作用パターンについて記載します。固有のシナリオに応じて、これらの相互作用パターンを分解および結合したり、混在および一致させたりできます。

一般的なアドインのシナリオ

アドインの種類 一般的なシナリオ
コンテンツ データの仮想化
ウィジェットとツール
作業ウィンドウ データの変換と処理
効果的かつ効率的に作成
コンテンツの検索とデータの挿入
Web サービスへのコンテンツの発行またはアップロード
Outlook メール コンテンツと外部アプリケーションの間の関連付け
メールのメッセージや予定のコンテンツに関する追加情報の提供
生産性を上げるための情報の提供

コンテンツ アドインによるデータの視覚化

これは、スプレッドシート内のデータからグラフを生成する Excel 用コンテンツ アドインの例です。

この相互作用パターンでは、グラフを生成するデータを選択し、バインドするまで、アドインはアクティブになりません。アドインの初期ビューで、アドインの目的とアドインをアクティブにするためのステップを伝えることが重要です。

スプレッドシート内のデータからグラフを生成する Excel 用コンテンツ アドイン
スプレッドシート内のデータからグラフを生成する Excel 用コンテンツ アプリ

  • ボタンを選択する前に操作を実行する必要があることを強調するには、無効化されたボタンと共に説明を表示します (A)。

  • セルの範囲を選択すると、[グラフの作成] ボタンがアクティブになります (B - C)。

  • コンテナーが視覚化され、前のビューに取って代わります (D)。

  • 設定ボタン (歯車) と共にアドインの下端に UI を追加し、アドインのリセットや管理ができるビューに移動できるようにします。

以下のものに最適です。
  • アクティブ化の前にデータを選択する必要があるアドイン。

作業ウィンドウ アドインによるコンテンツの変換

これは、ドキュメント内のテキストを別の言語に翻訳する作業ウィンドウ アドインの例です。

この相互作用パターンでは、ドキュメント内で翻訳するテキストを最初に選択する必要があります。

ドキュメント内のテキストを別の言語に翻訳する作業ウィンドウ アドイン
ドキュメント内のテキストを別の言語に翻訳する作業ウィンドウ アプリ

  • 見出しでアドインの目的を伝え、最初に選択を行う必要があることを示唆します (A)。

  • 言語メニューと [翻訳] ボタンは無効になっており、処理を進める前に操作を実行する必要があることが強調されます。ドキュメント内のコンテンツを選択すると、これらの 2 つの要素がアクティブになります (D)。

  • [翻訳] を選択すると、UI が展開され、翻訳されたコンテンツとそのコンテンツをドキュメントに挿入するためのボタンが表示されます (E)。

  • 初期ビューに戻れるように、[クリア] または [リセット] ボタンを表示することもできます。

以下のものに最適です。
  • アクティブ化の前にデータを選択する必要があるアドイン。

  • シナリオを進めると展開または開示される UI。

作業ウィンドウ アドインによるデータの処理

これは、Excel のデータをチェックする作業ウィンドウ アドインの例です。

この相互作用パターンでは、開始するにはスプレッドシートのセルの範囲を選択する必要があります。

Excel のデータをチェックする作業ウィンドウ アドイン
Excel のデータをチェックする作業ウィンドウ アプリ

  • アドインの目的が見出しで説明されます。説明は、作業を始める際の参考になります。

  • [選択データの送信] ボタンは無効になっており、処理を進めるためには操作の実行が必要なことが強調されています (A)。

  • スプレッドシート内のセルの範囲を選択すると (B)、[選択データの送信] ボタンがアクティブになります。

  • このボタンをクリックすると、UI は選択された範囲のセル、進行状況バー、および [キャンセル] ボタンで置き換えられます。

  • 進行状況バーには処理の状態が表示され、[キャンセル] ボタンで処理を中断できます (D)。

  • 処理が完了すると、結果が自動的に表示されます (E)。リストの要素を選択すると、スプレッドシート内の対応するセルがアクティブになります。

以下のものに最適です。
  • 所要時間が不確かな処理。

作業ウィンドウ アドインによるコンテンツの分析

これは、入力した単語の定義を表示する作業ウィンドウ アドインの例です。

この相互作用パターンでは、結果を表示するにはドキュメント内のテキストを選択する必要があります。

入力した単語の定義を表示する作業ウィンドウ アドイン
入力した単語の定義を表示する作業ウィンドウ アプリ

  • 見出しには、アドインの目的と作業の始め方が示されています (A)。

  • 自動検索が既定では有効になっており、これを無効にするオプションも用意されています (B)。

  • 選択を行うと、アドインは対応するコンテンツを表示します (D)。

  • 詳細な情報を表示するためのリンクを提示します (E)。

以下のものに最適です。
  • 作成時に自動的にコンテンツを返すアドイン。

  • アクティブ化の前にコンテンツを選択する必要があるアドイン。

作業ウィンドウ アドインによるコンテンツの検索

これは、コンテンツを検索するための作業ウィンドウ アドインの例です。

この相互作用パターンでは、検索ボックスに文字列を入力するか、対象コンテンツのリストから選択して開始します。

コンテンツを検索するための作業ウィンドウ アドイン
コンテンツを検索するための作業ウィンドウ アプリ

  • 初期ビューには [検索] ボックス (A) と対象コンテンツのリスト (B) が含まれます。

  • 検索ボックスに文字列を入力すると、検索アイコンが閉じるアイコン (C) で置き換えられます。

  • 閉じるアイコンをクリックすると、初期ビューに戻ります。

以下のものに最適です。
  • 作成時に自動的にコンテンツを返すアドイン。

  • アクティブ化の前にコンテンツを選択する必要があるアドイン。

作業ウィンドウ アドインによるメディアの挿入

この相互作用パターンでは、検索結果からイメージを選択し、ドキュメントに挿入できます。

イメージを挿入するための作業ウィンドウ アドイン
イメージを挿入するための作業ウィンドウ アプリ

  • 検索結果のリストをフィルター処理し (A)、挿入するコンテンツを選択しました (B)。

  • 選択したコンテンツの詳細ビューが表示されます (C)。表示されるボタンをクリックするとリストに戻ります。

  • [写真の挿入] ボタンはフッター (D) にあります。このボタンを選択した後、イメージがドキュメントに挿入されます。

  • 挿入されるコンテンツには、イメージの提供元に関する短い説明が含まれます (E)。

  • このアドインの UI では、操作が成功したことを視覚的に確認できます。

以下のものに最適です。
  • コンテンツを挿入するためのアドイン。

作業ウィンドウ アドインによる選択したテキストの挿入

この相互作用パターンでは、検索結果からテキストを選択し、ドキュメントに挿入します。

テキストを挿入するための作業ウィンドウ アドイン
テキストを挿入するための作業ウィンドウ アプリ

  • コンテンツの一部の検索を既に完了しています (A)。

  • フッター部分には無効化された [選択範囲の挿入] ボタンが表示されます (B)。

  • テキスト文字列を選択すると (C)、[選択範囲の挿入] ボタンがアクティブになります。

  • このボタンをクリックすると、アドインは、選択されたテキストを、そのコンテンツ ソースへの参照と共にドキュメント内に挿入します (E)。

以下のものに最適です。
  • 調査を実施してコンテンツを挿入するためのアドイン。

作業ウィンドウ アドインによる Web サービスへの発行

これは、ドキュメントをブログ投稿として発行するための作業ウィンドウ アドインの例です。

この相互作用パターンでは、ドキュメント内のコンテンツ作成を完了しているときに、そのコンテンツをブログに投稿しようとしています。

ドキュメントをブログ投稿として発行するための作業ウィンドウ アドイン
ドキュメントをブログ投稿として発行するための作業ウィンドウ アプリ

  • 最初に、資格情報を入力するためのサインイン フォームが表示されます (A)。

  • アカウントを作成したり、一般的なサインインの問題に対処したりするためのリンクが用意されています (B)。リンクをクリックすると、ページがブラウザーで開きます。

  • サインインすると、アドインは、ブログ投稿を新規作成するためのフォームを表示します (C)。

  • サインインした (投稿先の) アカウントの名前がアドインの上部に表示されます。投稿をプレビューするためのリンクがアドインによって表示されます (D)。このリンクをクリックすると、プレビューがブラウザーに表示されます。

  • [投稿を作成] をクリックすると、アドインは、ドキュメントのコンテンツが投稿されたことを確認するビューを表示します (E)。

  • 投稿をブラウザーに表示するためのリンクや (F)、別の投稿を作成するためのボタン (G) もアドインによって提供されます。

以下のものに最適です。
  • ソーシャル ネットワーク、ブログ サイト、および Web サービスに対するコンテンツの出力、発行、または共有を行うアドイン。

  • サービスにサインインする必要があるアドイン。

Outlook アドインによる人に関する追加情報の取得

例 1

結果と詳細情報のページ
結果と詳細情報のページ
以下のものに最適です。

  • 提示に適した大規模なデータ セットを持つコンテンツの幅広さを示す場合。

  • フル サイズのアドイン コンテナーを使用する詳細情報ページ。

  • 前後移動のメリットがあるナビゲーション モデル。

例 2

固定のナビゲーションを備えた詳細情報ページ
固定のナビゲーションを備えた詳細情報ページ
以下のものに最適です。

  • 既定でデータセットの最初の結果を表示する場合。

  • タブのように機能するナビゲーション構造 (単一レベルの線型ナビゲーション)。

  • ナビゲーションを常時使用可能な状態にして選択の操作を減らす場合。

  • 常にナビゲーションを表示する余地を残しておく場合。

Outlook アドインによるコンテンツに関する追加情報の取得

例 1

結果と詳細情報のページ
結果と詳細情報のページ
以下のものに最適です。

  • 表示に適した大規模なデータ セットを持つコンテンツの幅広さを示す場合。

  • 詳細表示の前に選択を行う必要がある場合。

  • フル サイズのアドイン コンテナーを使用する詳細ページ。

  • 前後移動のメリットがあるナビゲーション モデル。

例 2

セカンダリ コンテンツを示す詳細ページ
セカンダリ コンテンツを示す詳細ページ
以下のものに最適です。

  • コンテンツの一部に焦点を当てようとする場合。

  • ユーザーによる操作なしにコンテンツを表示する場合。

  • 固定的なナビゲーション (ナビゲーションを簡素かつ容易なものにするためにこのモデルに追加可能)。

オンライン サービスへの接続とデータの表示

これは、オンライン サービスからデータとコンテンツを取得する相互作用パターンの例です。3 つのアドイン タイプ、すなわち、コンテンツ アドイン、作業ウィンドウ アドイン、Outlook アドインのすべてで利用できます。

例 1

カルーセル
カルーセル
以下のものに最適です。

  • 一度に 1 件ずつ表示したりグループ化して表示したりできる少量のデータ。

  • ギャラリー形式 (スライドショーやイメージ ギャラリー) でコンテンツを表示する場合。

  • "次へ/前へ" ナビゲーション モデルが有効な場合。

例 2

ウィザード
ウィザード
以下のものに最適です。

  • 決まった順序で提示する必要があるコンテンツ。

  • 一連の小さな部分ごとに利用するのが最適な大量のコンテンツ。

  • 書籍のような利用エクスペリエンスが求められる場合。

  • 一連の手順または操作によってタスクを完了する必要がある場合。

例 3

フォーム、結果、および詳細情報
フォーム、結果、および詳細情報
以下のものに最適です。

  • データ入力を必要とするアドイン

  • 結果と詳細情報のパターンへのエントリポイント。

その他のリソース