Office アドインを設計するDesign your Office Add-ins

Office アドインは、ユーザーが Office クライアントで使用できるコンテキストに応じた機能を提供することで、Office のエクスペリエンスを拡張します。アドインにより、コストのかかるコンテキストの切り替えなしで、サード パーティの機能が Office で使用できるようになり、ユーザーの生産性は向上します。Office Add-ins extend the Office experience by providing contextual functionality that users can access within Office clients. Add-ins empower users to get more done by enabling them to access third-party functionality within Office, without costly context switches.

アドインの UX 設計は、効率的で自然な対話式操作をユーザーに提供するために、Office とシームレスに統合する必要があります。アドインのコマンドを利用して、アドインへのアクセスを提供します。また、HTML ベースのカスタム UI を作成するときに推奨されるベスト プラクティスを適用します。Your add-in UX design must integrate seamlessly with Office to provide an efficient, natural interaction for your users. Take advantage of add-in commands to provide access to your add-in and apply the best practices that we recommend when you create custom HTML-based UI.

Office の設計原則Office design principles

Office アプリケーションは、一般的な一連の相互作用ガイドラインに従います。アプリケーションはコンテンツを共有します。また、よく似た外観と動作の要素を持っています。この共通性は一連の設計原則に基づいています。この原則は、Office チームがお客様のタスクをサポートするインターフェイスを作成するために役立ちます。これを理解し、従うことは、お客様の Office 内の目標をサポートするために役立ちます。Office applications follow a general set of interaction guidelines. The apps share content and have elements that look and behave similarly. This commonality is built on a set of design principles. The principles help the Office team create interfaces that support customers’ tasks. Understanding and following them will help you support your customers’ goals inside of Office.

Office の設計原則に従って、ポジティブなアドイン体験を作成します。Follow the Office design principles to create positive add-in experiences:

  • Office に合わせて、わかりやすく設計する。 アドインの機能や外観は、Office 体験を調和的に補完する必要があります。アドインはネイティブに感じる必要があります。それらは iPad や PowerPoint Online で、Word とシームレスに連携する必要があります。独自のエクスペリエンス、プラットフォーム、Office アプリケーションの 3 つを適切に組み合わせたアドインが、適切に設計されたアドインといえます。Office UI Fabric を設計言語として使用することを検討してください。可能であれば、ドキュメントと UI テーマを適用します。Design explicitly for Office. The functionality, look and feel of an add-in must harmoniously complement the Office experience. Add-ins should feel native. They should fit seamlessly into Word on an iPad or PowerPoint Online. A well-designed add-in will be an appropriate blend of your experience, the platform and the Office application. Consider using Office UI Fabric as your design language. Apply document and UI theming where appropriate.

  • いくつかの主要なタスクに重点を置き、それらのタスクを適切に実行できるようにします。 あるジョブの実行が、別のジョブの邪魔にならないように、お客様を支援します。お客様に真の価値を提供します。一般的なユース ケースに焦点を当てて、Office ドキュメントの操作時に、ユーザーにとって最も有益なものを慎重に選択します。Focus on a few key tasks; do them well. Help customers get one job done without getting in the way of other jobs. Provide real value to customers. Focus on common use cases, pick carefully those that benefit users most when interacting with Office documents.

  • クロムよりもコンテンツを優先します。 お客様のページ、スライド、またはスプレッドシートに、体験の焦点を当てたままにすることができます。アドインは補助的なインターフェイスです。アクセサリ クロムは、アドインのコンテンツや機能を妨げるものではありません。体験を適切にブランド化します。認識可能な独自の体験をユーザーに提供し、操作の邪魔は避けることが重要です。ブランドに注意を向けるよりも、コンテンツやタスクを完了することに重点を置いてください。Favor content over chrome. Allow customers’ page, slide or spreadsheet to remain the focus of the experience. An add-in is an auxiliary interface. No accessory chrome should interfere with the add-in’s content and functionality. Brand your experience wisely. We know it is important to provide users with a unique, recognizable experience but avoid distraction. Strive to keep the focus on content and task completion, not brand attention.

  • 楽しいものにして、ユーザーをコントロールしてください。Make it enjoyable and keep users in control. 人々は機能的で視覚的に魅力的な製品を使うのを楽しみます。People enjoy using products that are both functional and visually appealing. あなたの経験を、慎重に、巧みに活用してください。Craft your experience carefully. すべての相互作用と視覚的な詳細を考慮して、ディテールを正しく整えます。Get the details right by considering every interaction and visual detail. ユーザーが自分の経験をコントロールできるようにします。Allow users to control their experience. タスクを完了するために必要なステップは、明確かつ適切でなければなりません。The necessary steps to complete a task must be clear and relevant. 重要な決定は、理解しやすいものにする必要があります。Important decisions should be easy to understand. 操作は、容易に元に戻せるようにしなければなりません。Actions should be easily reversible. アドインは目的ではなく、Office機能の拡張機能です。An add-in is not a destination – it’s an enhancement to Office functionality.

  • すべてのプラットフォームおよび入力方式に対応するように設計する。アドインは、Office がサポートしている、すべてのプラットフォームで動作するように設計します。また、アドインの UX は、あらゆるプラットフォームおよびフォーム ファクターで最適に機能する必要があります。マウス/キーボードとタッチ入力のデバイスをサポートして、カスタムの HTML UI が各種のフォーム ファクターに順応するようにします。詳細は、「タッチ」をご参照ください。Design for all platforms and input methods. Add-ins are designed to work on all the platforms that Office supports, and your add-in UX should be optimized to work across platforms and form factors. Support mouse/keyboard and touch input devices, and ensure that your custom HTML UI is responsive to adapt to different form factors. For more information, see Touch.

関連項目See also