レイアウト

Office に埋め込まれている各 HTML コンテナーは、レイアウトを持つことになります。 これらのレイアウトは、アドインのメイン画面です。 その中で、顧客がアクションを開始したり、設定を変更したり、コンテンツを表示、スクロール、または移動したりできるようにするエクスペリエンスを作成します。 エクスペリエンスの継続性を保証するために、画面全体のレイアウトが整合性のあるアドインを設計します。 お客様が使い慣れている既存の Web サイトがある場合、既存の Web ページのレイアウトを再利用することを検討してください。 Office HTML コンテナー内に調和よく収まるようにそれらを適合させます。

レイアウトのガイドラインについては、「 作業ウィンドウ」の 「コンテンツ」を参照してください。 Fluent UI Reactまたは Office UI Fabric JS のコンポーネントを一般的なレイアウトとユーザー エクスペリエンス フローに組み立てる方法の詳細については、「UX デザイン パターン テンプレート」を参照してください。

レイアウトには、次の一般的なガイドラインを適用します。

• HTML コンテナーでは、狭い余白や広い余白は使用しないでください。 20 ピクセルが最適な既定値です。
• 要素を意図的に配置します。 追加のインデントや新しい配置点は視覚的な階層をより明確にするのに役立ちます。
• Office インターフェイスは、4 px グリッド線上にあります。 要素間のスペースを 4 の倍数に維持することを目標にします。
• インタ フェースに詰め込みすぎると、混乱を招き、タッチ操作が使いにくくなります。
• 画面全体でレイアウトの整合性を保ちます。 予期しないレイアウトの変更は、ソリューションの信頼と信用を失う一因となるビジュアルのバグのようになります。
• 一般的なレイアウトのパターンに従います。 規則は、ユーザーがインターフェイスの使用方法を理解するのに役立ちます。
• ブランドやコマンドのような要素を冗長に使用しないでください。
• コントロールとビューを統合して、マウスを移動させる回数を減らします。
• HTML コンテナーの幅と高さに適合する応答性の高いエクスペリエンスを作成します。