Office アドイン開発のベスト プラクティスBest practices for developing Office Add-ins

効果的なアドインは、目で見て分かる方法で Office アプリケーションを拡張する、ユニークで頼もしい機能を提供します。優れたアドインを作成するには、魅力的な初回エクスペリエンスをユーザーに提供して、最高の UI エクスペリエンスを設計し、アドインのパフォーマンスを最適化します。この記事で説明するベスト プラクティスを適用して、ユーザーが迅速かつ効率的に仕事を遂行するための助けになるアドインを作成してください。Effective add-ins offer unique and compelling functionality that extends Office applications in a visually appealing way. To create a great add-in, provide an engaging first-time experience for your users, design a first-class UI experience, and optimize your add-in's performance. Apply the best practices described in this article to create add-ins that help your users complete their tasks quickly and efficiently.

注意

AppSource にアドインを公開し、Office エクスペリエンスで利用できるようにする予定がある場合は、AppSource の検証ポリシーに準拠していることを確認してください。たとえば、検証に合格するには、定義したメソッドをサポートするすべてのプラットフォームでアドインが動作する必要があります (詳細については、セクション 4.12Office アドインを使用できるホストおよびプラットフォームのページを参照してください)。If you plan to publish your add-in to AppSource and make it available within the Office experience, make sure that you conform to the AppSource validation policies. For example, to pass validation, your add-in must work across all platforms that support the methods that you define (for more information, see section 4.12 and the Office Add-in host and availability page).

価値を明確にするProvide clear value

  • ユーザーがタスクをすばやく効率的に完了するのに役立つアドインを作成します。Office アプリケーションに当てはまるシナリオに絞ります。次に例を示します。Create add-ins that help users complete tasks quickly and efficiently. Focus on scenarios that make sense for Office applications. For example:
  • コア オーサリング タスクをよりスピーディかつ簡単にし、中断を減らします。Make core authoring tasks faster and easier, with fewer interruptions.
  • Office 内で新しいシナリオを有効にします。Enable new scenarios within Office.
  • Office ホストに補助サービスを埋め込みます。Embed complementary services within Office hosts.
  • Office エクスペリエンスを向上させて生産性を高めます。Improve the Office experience to enhance productivity.
  • 魅力的な初回実行時エクスペリエンスを作成して、ユーザーがアドインの価値をすぐに感じられるようにしてください。Make sure that the value of your add-in is clear to users right away by creating an engaging first run experience.
  • 効果的な AppSource リストを作成します。タイトルと説明から、アドインのメリットが明確にわかるようにします。アドインの内容を伝えるのに、ブランドだけに頼ることはしないでください。Create an effective AppSource listing. Make the benefits of your add-in clear in your title and description. Don't rely on your brand to communicate what your add-in does.

魅力的な初回実行時エクスペリエンスを作成するCreate an engaging first-run experience

  • 非常に使いやすく、直観で理解しやすいファースト エクスペリエンスによって、新しいユーザーを引き込みます。ユーザーは、アドインをストアからダウンロードした後も、使用するか中止するかを判断しています。Engage new users with a highly usable and intuitive first experience. Note that users are still deciding whether to use or abandon an add-in after they download it from the store.

  • ユーザーがアドインを使用するのに必要な手順を明確にします。ビデオ、マット、ページング パネル、その他のリソースを使用して、ユーザーを誘導します。Make the steps that the user needs to take to engage with your add-in clear. Use videos, placemats, paging panels, or other resources to entice users.

  • 単純にユーザーにサインを求めるのではなく、起動時にアドインの価値を強調します。Reinforce the value proposition of your add-in on launch, rather than just asking users to sign in.

  • 使い方や UI を個人用に設定する方法を説明する UI を提供します。Provide teaching UI to guide users and make your UI personal.

    作業の開始手順が含まれないアドインの隣に、作業の開始手順を含むアドインの作業ウィンドウを示すスクリーンショット

  • コンテンツ アドインがユーザーのドキュメント内のデータにバインドされている場合は、サンプル データまたはテンプレートを含めて、使用するデータ形式をユーザーに表示します。If your content add-in binds to data in the user's document, include sample data or a template to show users the data format to use.

    データを含まないコンテンツ アドインの隣に、データを含むコンテンツ アドインを示すスクリーンショット

  • 無料の試用版を提供します。アドインでサブスクリプションを要求する場合は、一部の機能をサブスクリプションなしでも利用できるようにします。Offer free trials. If your add-in requires a subscription, make some functionality available without a subscription.

  • サインアップをシンプルにします。情報 (電子メール、表示名) を事前に入力し、電子メールの確認はスキップします。Make signup simple. Prefill information (email, display name) and skip email verifications.

  • ポップアップは使用しないようにします。使用する必要がある場合は、ポップアップを有効にするようユーザーに指示します。Avoid pop ups. If you have to use them, guide the user to enable your pop up.

最初の実行エクスペリエンスを開発する際に適用できるパターンについては、「Office アドインの UX 設計パターン」を参照してください。For patterns that you can apply as you develop your first-run experience, see UX design patterns for Office Add-ins.

アドイン コマンドを使用するUse add-in commands

  • アドイン コマンドを使用することで、アドインに関連する UI エントリ ポイントを提供します。設計のベスト プラクティスを含む詳細については、「アドイン コマンド」を参照してください。Provide relevant UI entry points for your add-in by using add-in commands. For details, including design best practices, see add-in commands.

UX 設計原則を適用するApply UX design principles

  • アドインの外観と機能が、Office のエクスペリエンスと合っていることを確認します。Office UI Fabric を使用します。Ensure that the look and feel and functionality of your add-in complements the Office experience. Use Office UI Fabric.

  • クロムよりもコンテンツを優先します。ユーザー エクスペリエンスの価値を高めない余分な UI 要素を追加しないようにします。Favor content over chrome. Avoid superfluous UI elements that don't add value to the user experience.

  • ユーザーをよく管理します。ユーザーが重要な決定事項を理解し、アドインが実行するアクションを簡単に取り消すことができるようにします。Keep users in control. Ensure that users understand important decisions, and can easily reverse actions the add-in performs.

  • ユーザーの信頼を得て、ユーザーを引き込むために ブランドを利用します。ユーザーを圧倒するためや、宣伝のためにブランドを使用しないでください。Use branding to inspire trust and orient users. Do not use branding to overwhelm or advertise to users.

  • スクロールしないようにします。1366 x 768 の解像度用に最適化します。Avoid scrolling. Optimize for 1366 x 768 resolution.

  • 使用許可を得ていないイメージを含めないでください。Do not include unlicensed images.

  • アドインでは明確でシンプルな表現を使用してください。Use clear and simple language in your add-in.

  • アクセシビリティを考慮してください。すべてのユーザーにとって操作しやすいアドインにして、画面リーダーなどの支援テクノロジが利用できるようにしてください。Account for accessibility - make your add-in easy for all users to interact with, and accommodate assistive technologies such as screen readers.

  • すべてのプラットフォームと入力方法 (マウスやキーボード、および タッチなど) に対応するように設計してください。UI が様々なフォーム ファクターに対応するようにしてください。Design for all platforms and input methods, including mouse/keyboard and touch. Ensure that your UI is responsive to different form factors.

タッチ用に最適化するOptimize for touch

  • アドインを実行するホスト アプリケーションがタッチに対応しているかどうかを検出するには、Context.touchEnabled プロパティを使用します。Use the Context.touchEnabled property to detect whether the host application your add-in runs on is touch enabled.

    注意

    このプロパティは、Outlook ではサポートされていません。This property is not supported in Outlook.

  • すべてのコントロールがタッチ操作に適したサイズになっていることを確認します。たとえば、ボタンに適切なタッチ ターゲットを設定し、入力ボックスはユーザーが入力するのに十分な大きさにします。Ensure that all controls are appropriately sized for touch interaction. For example, buttons have adequate touch targets, and input boxes are large enough for users to enter input.

  • ホバーや右クリックなどの非タッチの入力方法に依存しないようにしてください。Do not rely on non-touch input methods like hover or right-click.

  • 縦向きと横向きの両方のモードでアドインが機能することを確認します。タッチ デバイスで、アドインの一部がソフトキーボードの後ろに隠れることがあることに注意してください。Ensure that your add-in works in both portrait and landscape modes. Be aware that on touch devices, part of your add-in might be hidden by the soft keyboard.

  • サイドロードを使用して、アドインを実際のデバイスでテストしてください。Test your add-in on a real device by using sideloading.

注意

Office UI Fabric をデザイン要素に使用している場合は、これらの要素の多くが適切に設定されます。If you're using Office UI Fabric for your design elements, many of these elements are taken care of.

アドインのパフォーマンスを最適化して監視するOptimize and monitor add-in performance

  • UI が素早く応答する感覚を与えるようにします。アドインが 500 ミリ秒以内で読み込まれるようにする必要があります。Create the perception of fast UI responses. Your add-in should load in 500 ms or less.

  • すべてのユーザー操作が 1 秒以内で応答することを確認します。Ensure that all user interactions respond in under one second.

  • 長時間実行する操作には、読み込みインジケーターを提供します。Provide loading indicators for long-running operations.

  • 画像、リソース、および一般的なライブラリを CDN を使用してホストします。可能な限り多くのものを 1 つの場所から読み込みます。Use a CDN to host images, resources, and common libraries. Load as much as you can from one place.

  • Web ページを最適化するには、標準的な Web の慣習に従います。運用環境では、ライブラリの縮小バージョンのみを使用します。必要なリソースのみを読み込み、リソースが読み込まれる方法を最適化します。Follow standard web practices to optimize your web page. In production, use only minified versions of libraries. Only load resources that you need, and optimize how resources are loaded.

  • 操作の実行に時間がかかる場合は、ユーザーにフィードバックを提供します。次の表のしきい値に注意してください。追加情報については、「Office アドインのリソースの制限とパフォーマンスの最適化」を参照してください。If operations take time to execute, provide feedback to users. Note the thresholds listed in the following table. For additional information, see Resource limits and performance optimization for Office Add-ins.

    インタラクション クラスInteraction class ターゲットTarget 上限値Upper bound 人間の知覚Human perception
    即時Instant 50 ミリ秒以下<=50 ms 100 ミリ秒100 ms 顕著な遅延はない。No noticeable delay.
    速くFast 50 から 100 ミリ秒50-100 ms 200 ミリ秒200 ms 最低限知覚される遅延。フィードバックは不要。Minimally noticeable delay. No feedback necessary.
    普通Typical 100-300 ミリ秒100-300 ms 500 ミリ秒500 ms 速い。しかし、高速とまではいかない。フィードバックは不要。Quick, but too slow to be described as fast. No feedback necessary.
    速いResponsive 300-500 ミリ秒300-500 ms 1 秒1 second 高速ではないが、速いという実感はある。フィードバックは不要。Not fast, but still feels responsive. No feedback necessary.
    連続Continuous 500 ミリ秒より長い>500 ms 5 秒5 seconds 中程度の待ち時間。速いという実感はない。フィードバックが必要な可能性あり。Medium wait, no longer feels responsive. Might need feedback.
    キャプティブCaptive 500 ミリ秒より長い>500 ms 10 秒10 seconds 長い。しかし、何か他のことを行えるほどの長さではない。フィードバックが必要な可能性あり。Long, but not long enough to do something else. Might need feedback.
    拡張Extended 500 ミリ秒より長い>500 ms 10 秒より長い>10 seconds 待機中に他のことを行うのに十分な長さ。フィードバックが必要な可能性あり。Long enough to do something else while waiting. Might need feedback.
    長時間実行Long running 5 秒より長い>5 seconds 1 分より長い>1 minute ユーザーは確実に別のことを行えます。Users will certainly do something else.
  • サービスの正常性を監視し、テレメトリを使用して、ユーザーが正常に完了したか監視します。Monitor your service health, and use telemetry to monitor user success.

アドインを売り込むMarket your add-in

  • アドインを AppSource に公開して、Web サイトでそれを宣伝します。効果的な AppSource リストを作成しますPublish your add-in to AppSource and promote it from your website. Create an effective AppSource listing.

  • アドイン タイトルを簡潔でわかりやすいものにします。128 文字以下にします。Use succinct and descriptive add-in titles. Include no more than 128 characters.

  • アドインの短くて魅力的な説明を作成します。「このアドインでどんな問題が解決しますか?」という質問への答えを提供します。Write short, compelling descriptions of your add-in. Answer the question "What problem does this add-in solve?".

  • タイトルと説明でアドインの価値提案を行います。ブランドに依存しないでください。Convey the value proposition of your add-in in your title and description. Don't rely on your brand.

  • ユーザーがアドインを見つけて使うことができる Web サイトを作成します。Create a website to help users find and use your add-in.

関連項目See also