Office アドインの UI をデザインするDesign the UI of 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.

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

Office の設計原則Office design principles

Office アプリケーションは、一般的な一連の相互作用ガイドラインに従います。アプリケーションはコンテンツを共有します。また、よく似た外観と動作の要素を持っています。この共通性は一連の設計原則に基づいています。この原則は、Office チームがお客様のタスクをサポートするインターフェイスを作成するために役立ちます。これを理解し、従うことは、お客様の Office 内の目標をサポートするために役立ちます。Office applications follow a general set of interaction guidelines. The applications 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 に合わせて、わかりやすく設計する。Design explicitly for Office. アドインの機能と外観は、Office 体験を調和的に補完する必要があります。The functionality, as well as the look and feel, of an add-in must harmoniously complement the Office experience. アドインはネイティブに感じる必要があります。Add-ins should feel native. それらは iPad や PowerPoint on the web で、Word とシームレスに連携する必要があります。They should fit seamlessly into Word on an iPad or PowerPoint on the web. 独自のエクスペリエンス、プラットフォーム、Office アプリケーションの 3 つを適切に組み合わせたアドインが、適切に設計されたアドインといえます。A well-designed add-in will be an appropriate blend of your experience, the platform, and the Office application. 可能であれば、ドキュメントと UI テーマを適用します。Apply document and UI theming where appropriate. デザイン言語およびツール セットとして、Fluent UI for the web の使用を検討してください。Consider using Fluent UI for the web as your design language and tool set. Fluent UI for the web には、次の 2 つの機能があります。The Fluent UI for the web has two flavors:

    • 非反応 UIs の場合: CSS クラスと SASS mixins のオープンソース コレクションである Fabric Core CSS クラスおよび Sass mixin のコレクションで、色、アニメーション、フォント、アイコン、グリッドにアクセスできます。For non-React UIs: Use Fabric Core, an open-source collection of CSS classes and SASS mixins that give you access to colors, animations, fonts, icons, and grids. (歴史的理由から、"Fluent Core" とではなく "Fabric Core" と呼ばれています。) 開始するには、「Office アドインの Fabric Core」を参照してください。(It's called "Fabric Core" instead of "Fluent Core" for historical reasons.) To get started, see Fabric Core in Office Add-ins.
    • 反応 UI の場合: 広範なマイクロソフト製品にシームレスに適合するエクスペリエンスを構築するために設計された React フロントエンド フレームワークである Fluent UI React を使用します。For React UIs: use Fluent UI React, a React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. CSS-in-JS を使用して、高度にカスタマイズ可能かつ堅牢で最新のアクセス可能な React ベースのコンポーネントを提供します。It provides robust, up-to-date, accessible React-based components which are highly customizable using CSS-in-JS. 開始するには、「Office アドインのFluent UI React」を参照してください。To get started, see Fluent UI React in Office Add-ins.
  • クロムよりもコンテンツを優先します。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's 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