Office アドイン開発のベストプラクティス

[アーティクル]
05/20/2023

効果的なアドインは、目で見て分かる方法で Office アプリケーションを拡張する、ユニークで頼もしい機能を提供します。優れたアドインを作成するには、魅力的な初回エクスペリエンスをユーザーに提供して、最高の UI エクスペリエンスを設計し、アドインのパフォーマンスを最適化します。この記事で説明するベストプラクティスを適用して、ユーザーが迅速かつ効率的に仕事を遂行するための助けになるアドインを作成してください。

注:

アドインを AppSource に公開し、Office エクスペリエンス内で利用できるようにする場合は、商用マーケットプレイスの認定ポリシーに準拠していることを確認してください。たとえば、検証に合格するには、アドインは、定義したメソッドをサポートするすべてのプラットフォーム全体で機能する必要があります (詳細については、セクション 1120.3 と「Office アドインアプリケーションと可用性」のページを参照してください)。

価値を明確にする

ユーザーがタスクをすばやく効率的に完了するのに役立つアドインを作成します。 Office アプリケーションに当てはまるシナリオに絞ります。次に例を示します。
- コアオーサリングタスクをよりスピーディかつ簡単にし、中断を減らします。
- Office 内で新しいシナリオを有効にします。
- Office アプリケーション内に補完的なサービスを埋め込む。
- Office エクスペリエンスを向上させて生産性を高めます。
魅力的な初回実行エクスペリエンスを作成することで、アドインの価値がユーザーにすぐに明確であることを確認します。
効果的な AppSource リストを作成します。タイトルと説明から、アドインのメリットが明確にわかるようにします。アドインの内容を伝えるのに、ブランドだけに頼ることはしないでください。

魅力的な初回実行時エクスペリエンスを作成する

非常に使いやすく、直観で理解しやすいファーストエクスペリエンスによって、新しいユーザーを引き込みます。ユーザーは、アドインをストアからダウンロードした後も、使用するか中止するかを判断しています。
ユーザーがアドインを使用するのに必要な手順を明確にします。ビデオ、マット、ページングパネル、その他のリソースを使用して、ユーザーを誘導します。
単純にユーザーにサインを求めるのではなく、起動時にアドインの価値を強調します。
使い方や UI を個人用に設定する方法を説明する UI を提供します。
コンテンツアドインがユーザーのドキュメント内のデータにバインドされている場合は、サンプルデータまたはテンプレートを含めて、使用するデータ形式をユーザーに表示します。
無料の試用版を提供します。アドインでサブスクリプションを要求する場合は、一部の機能をサブスクリプションなしでも利用できるようにします。
サインアップエクスペリエンスをシンプルにします。メールや表示名などの情報を事前入力し、メールの検証をスキップします。
ポップアップウィンドウは使用しないでください。それらを使用する必要がある場合は、ポップアップウィンドウを有効にするようにユーザーをガイドします。

最初の実行エクスペリエンスを開発する際に適用できるパターンについては、「Office アドインの UX 設計パターン」を参照してください。

アドインコマンドを使用する

アドインコマンドを使用することで、アドインに関連する UI エントリポイントを提供します。設計のベストプラクティスを含む詳細については、「アドインコマンド」を参照してください。

UX 設計原則を適用する

アドインの機能とルックアンドフィールと機能が、Office のエクスペリエンスと合っていることを確認します。「 Office アドインの UI を設計する」を参照してください。
クロムよりもコンテンツを優先します。ユーザーエクスペリエンスの価値を高めない余分な UI 要素を追加しないようにします。
ユーザーをよく管理します。ユーザーが重要な決定事項を理解し、アドインが実行するアクションを簡単に取り消すことができるようにします。
ユーザーの信頼を得て、ユーザーを引き込むためにブランドを利用します。ユーザーを圧倒するためや、宣伝のためにブランドを使用しないでください。
スクロールしないようにします。 1366 x 768 の解像度用に最適化します。
ライセンスのないイメージは含めないでください。
アドインでは明確でシンプルな表現を使用してください。
アクセシビリティを考慮してください。すべてのユーザーにとって操作しやすいアドインにして、画面リーダーなどの支援テクノロジが利用できるようにしてください。
すべてのプラットフォームと入力方法 (マウスやキーボード、およびタッチなど) に対応するように設計してください。 UI が様々なフォームファクターに対応するようにしてください。

タッチ用に最適化する

Context.touchEnabled プロパティを使用して、アドインが実行される Office アプリケーションがタッチ対応かどうかを検出します。

注:

このプロパティは Outlook ではサポートされていません。
すべてのコントロールがタッチ操作に適したサイズになっていることを確認します。たとえば、ボタンに適切なタッチターゲットを設定し、入力ボックスはユーザーが入力するのに十分な大きさにします。
ホバーや右クリックなどのタッチ以外の入力方法に依存しないでください。
縦向きと横向きの両方のモードでアドインが機能することを確認します。タッチデバイスで、アドインの一部がソフトキーボードの後ろに隠れることがあることに注意してください。
サイドロードを使用して、アドインを実際のデバイスでテストしてください。

注:

デザイン要素に Fluent UI Reactを使用している場合、これらの要素の多くはデザインシステムに組み込まれています。

アドインのパフォーマンスを最適化して監視する

UI が素早く応答する感覚を与えるようにします。アドインが 500 ミリ秒以内で読み込まれるようにする必要があります。
すべてのユーザー操作が 1 秒以内で応答することを確認します。
長時間実行する操作には、読み込みインジケーターを提供します。
コンテンツ配信ネットワーク (CDN) を使用して、イメージ、リソース、および共通ライブラリをホストします。可能な限り多くのものを 1 つの場所から読み込みます。
Web ページを最適化するには、標準的な Web の慣習に従います。運用環境では、ライブラリの縮小バージョンのみを使用します。必要なリソースのみを読み込み、リソースが読み込まれる方法を最適化します。

操作の実行に時間がかかる場合は、ユーザーにフィードバックを提供します。次の表のしきい値に注意してください。追加情報については、「Office アドインのリソースの制限とパフォーマンスの最適化」を参照してください。

操作クラス	Target	上限	人間の感覚
即時	<=50 ms	100 ミリ秒	顕著な遅延はない。
速く	50 から 100 ミリ秒	200 ミリ秒	最低限知覚される遅延。フィードバックは不要。
普通	100-300 ミリ秒	500 ミリ秒	クイックですが、速すぎると説明するには遅すぎます。フィードバックは不要。
速い	300-500 ミリ秒	1 秒	高速ではないが、速いという実感はある。フィードバックは不要。
連続	>500 ミリ秒	5 秒	中程度の待機、応答性がなくなった。フィードバックが必要な可能性あり。
キャプティブ	>500 ミリ秒	10 秒	長いが、他の何かをするのに十分な長さではない。フィードバックが必要な可能性あり。
拡張	>500 ミリ秒	>10 秒	待機中に他のことを行うのに十分な長さ。フィードバックが必要な可能性あり。
長時間実行	>5 秒	>1 分	ユーザーは確実に別のことを行えます。

サービスの正常性を監視し、テレメトリを使用して、ユーザーが正常に完了したか監視します。
アドインと Office ドキュメント間のデータ交換を最小限に抑えます。詳細については、「ループで context.sync メソッドを使用しないようにする」を参照してください。

アドインを売り込む

アドインを AppSource に発行し、Web サイトから昇格します。効果的な AppSource リストを作成します。
アドインタイトルを簡潔でわかりやすいものにします。 128 文字以下にします。
アドインの短く説得力のある説明を記述します。「このアドインで解決される問題は何ですか?」という質問に答えます。
タイトルと説明でアドインの価値提案を行います。ブランドに依存しないでください。
ユーザーがアドインを見つけて使うことができる Web サイトを作成します。

以前の Microsoft Webview と Office バージョンをサポートする (推奨されますが、必須ではありません)

「以前の Microsoft Webview と Office バージョンをサポートする」を参照してください。

Office アドイン開発のベスト プラクティス

価値を明確にする

魅力的な初回実行時エクスペリエンスを作成する

アドイン コマンドを使用する