Microsoft Teams のアプリの設計

  • [アーティクル]

Microsoft Teams の設計ガイドラインを紹介する概念画像。

ローコード ツールを使用しているデザイナー、製品マネージャー、開発者、メーカーのいずれであっても、これらのガイドラインは、Microsoft Teams アプリに適した設計上の決定をすばやく行うのに役立ちます。

まとまりのあるエクスペリエンスを作成する

Teams アプリの設計は、従来の Web アプリ—の設計に似ていますが、少し異なります。 効果的な設計では、Teams の機能とコンテキストに自然に適合しながら、アプリ固有の属性を強調表示します。

これらのガイドラインとリソースは、そのバランスを取るのに役立ちます。 Teams アプリの設計時に何を行うか、何を避けるか (タブ内のマルチレベル ナビゲーションなど) がわかります。

Teams アプリの設計原則

Teams アプリは、ユーザーがより一緒により多くのことを達成するのに役立ちます。 これらの原則を使用して、設計をガイドします。

コラボレーション

Teams アプリは、ユーザー間の最適化された共有アクティビティを通じてコラボレーションを促進します。

信頼できる

アプリはセキュリティで保護され、準拠しています。 ユーザーはプライバシーに関する情報を簡単に見つけることができます。

グローバルに包括的である

あらゆる背景、スキルセット、および分野のユーザーがアプリを使用できます。 文化的、人種的、および社会的に認識されます。

低負荷

アプリは、Teams ワークフローと融合するコアシナリオに焦点を当てています。

ネイティブまたは個別

アプリでは、ネイティブの Teams デザイン コンポーネントまたは独自のコンポーネントが使用されます。 配色、コントロールなどを組み合わせたものはありません。

役に立つ

アプリは、ユーザーが Teams で行う必要があるシナリオに基づいています。

使いやすい

UI は理解しやすく、見た目とトーンが楽しく、ユーザーの生産性が向上させます。

応答性が高い

アプリはデバイスや画面に依存しません。

アクセシビリティ

このアプリは、色のコントラスト、ナビゲーションの代替手段などの点で、Teams のアクセシビリティ要件を満たしています。

よく説明されています

テキスト、アイコンおよび画像によって、アプリの用途と使用方法が明確になります。

Teams の設計システム

レイアウト、配色など、Teams アプリの設計の基礎について説明します。

アプリの機能

ユーザーが Teams アプリを追加、使用、管理して、設計の各機能を最大限に活用する方法について説明します。

UI テンプレート

一般的な Teams のユース ケースとワークフロー用のテンプレートを使用して、複雑で忠実な設計を作成します。 アプリプレイブックと UI テンプレートは、 Microsoft 365 全体で拡張されたアプリの使用を開始するのに役立ちます。

基本的な UI コンポーネント

Fluent UI に基づいて、これらは、Teams エクスペリエンスをゼロから作成するために使用できるコア要素です。

ツールとサンプル

以下のツールは、デザイナーや開発者が作業を開始するのに役立ちます:

Microsoft Teams UI Kit

必要に応じてドラッグ、ドロップ、変更できる UI コンポーネント、テンプレート、および例を使用して、Teams アプリを設計します。 UI キットには、さまざまな Teams シナリオでのアプリの外観と動作に関する包括的な情報も含まれています。

UI キットを取得する (Figma)

Fluent UI のドキュメント

コード サンプルを取得し、Teams エクスペリエンスの構築に使用される基本的な Fluent UI コンポーネントの実装の詳細を理解します。

Teams UI コンポーネント (Fluent UI)を試す

サンプル アプリ

サンプル アプリをアップロードして、Teams クライアントでのアプリの外観と動作を確認できます。

サンプル アプリを取得する (GitHub)

アダプティブ カード デザイナー。

Web ベースのツールでアダプティブ カードを設計します。

アダプティブ カード デザイナーを試す

関連項目