次の方法で共有


UI テンプレートを使用してMicrosoft Teams アプリを設計する

UI テンプレートを使用してMicrosoft Teams アプリをより迅速に設計します。 テンプレートは、一般的な Teams のユース ケース全体で機能する Fluent UI ベースのコンポーネントのコレクションであり、ユーザーにとって最適なエクスペリエンスを把握する時間を増やすことができます。

ツールとサンプルの概要

次のリソースは、UI テンプレートを使用してアプリを設計および開発するのに役立ちます。

Microsoft Teams UI Kit

Microsoft Teams UI Kit からアプリ設計用の UI テンプレートを取得します。これには、使用状況、構造、アクセシビリティ、ベスト プラクティスに関する広範な情報も含まれています。

アプリプレイブックと UI テンプレートは、 Microsoft 365 全体で拡張されたアプリの使用を開始するのに役立ちます。

Fluent UI React コンポーネント

ブラウザーで個々の Fluent UI React コンポーネントを表示してテストします。

サンプル アプリ

サンプル アプリをインストールして、TEAMS コンテキスト内での UI テンプレートの外観と動作を確認します。

予定表

Teams では、予定表は、ユーザーが自分またはグループの今後および過去のイベントを表示、スケジュール、管理する場所です。

上位のユース ケース

  • 会議とイベントをスケジュールする
  • 今後の会議やイベントのリマインダーを取得する
  • スケジュールの表示

Desktop

例は、デスクトップ上の予定表 UI テンプレートを示しています。

ダッシュボード

ダッシュボードには、さまざまな種類のコンテンツが中央の場所 (Teams 個人用アプリやタブなど) に表示されます。 ユーザーは、ダッシュボードに表示される内容の少なくとも一部をカスタマイズできる必要があります。

上位のユース ケース

  • データの分析
  • レポート メトリック
  • さまざまな情報を 1 か所に整理する

Mobile

例は、モバイル上のダッシュボード UI テンプレートを示しています。

Desktop

例は、デスクトップ上のダッシュボード UI テンプレートを示しています。

データ可視化

さまざまなカード サイズ (単一、二重、完全) を使用して、同じページにデータの視覚化を積み重ねて整理できます。 カードは、列レイアウトに合わせて拡大縮小し、空白を埋めます。

上位のユース ケース

  • 複雑な情報を表示する
  • ダッシュボードを作成する

Mobile

例は、モバイル上のデータ視覚化 UI テンプレートを示しています。

Desktop

例は、デスクトップ上のデータ視覚化 UI テンプレートを示しています。

空の状態

空の状態テンプレートは、サインイン、初回実行エクスペリエンス、エラー メッセージなど、多くのシナリオで使用できます。 柔軟性が高く、次の設計で 1 つ、いくつかのコンポーネント、またはすべてのコンポーネントを使用するように適応します。

上位のユース ケース

  • サインイン
  • ウェルカム メッセージと初回実行エクスペリエンス
  • 成功メッセージ
  • エラー メッセージ

Mobile

例は、モバイル上の空の状態 UI テンプレートを示しています。

Desktop

例は、デスクトップ上の空の状態 UI テンプレートを示しています。

Filter

フィルターを使用すると、選択した条件に基づいて表示される情報を減らすことができます。 コンテンツを整理するテーブル、リスト、カード、その他のコンポーネントを含むフィルターを含めることができます。

上位のユース ケース

コンテンツの整理:

  • リスト
  • テーブル
  • ダッシュボード
  • データ可視化

フィルター テンプレートの例を示します。

フォーム

フォームは、構造化された方法でユーザー入力を収集、検証、送信するために使用されます。 適切なユーザー エクスペリエンスを得るには、入力フィールドの明確なラベル付けと論理グループ化が不可欠です。

上位のユース ケース

  • サインイン
  • ユーザー プロファイル
  • Settings
  • ユーザー入力コレクション

Mobile

例は、モバイル上のフォーム UI テンプレートを示しています。

Desktop

例は、デスクトップ上のフォーム UI テンプレートを示しています。

リスト

リストを使用して、関連するアイテムをスキャン可能な形式で表示し、ユーザーがリスト全体または個々のアイテムに対してアクションを実行できるようにします。

上位のユース ケース

  • データの表示
  • アプリ コンテンツに対するコンテキスト アクション

Mobile

例は、モバイル上のリスト UI テンプレートを示しています。

Desktop

例は、デスクトップ上のリスト UI テンプレートを示しています。

サインイン

さまざまな Teams コンテキストと ID プロバイダーのアプリ サインイン フローを設計できます。 次の例にはシングル サインオン (SSO) が含まれています。これは、最も単純な認証エクスペリエンスに推奨されます。

上位のユース ケース

ユーザーの認証

Mobile

例は、モバイルでのサインイン UI テンプレートを示しています。

Desktop

例は、デスクトップ上のサインイン UI テンプレートを示しています。

Settings

設定画面は、ユーザーがアプリでユーザー設定を構成できる場所です。

注:

設定は、 基本的な UI コンポーネントのコンテナーです。

上位のユース ケース

アプリ機能を管理する

設定テンプレートの例を示します。

タスク ボード

タスク ボード (かんばんボードまたはスイム レーンとも呼ばれます) は、作業項目やチケットの状態を追跡するためによく使用されるカードのコレクションです。 また、任意の種類のコンテンツをカテゴリに並べ替えるためにも使用できます。 列間でカードを編集および移動できます。

上位のユース ケース

  • プロジェクトの管理。 タスクの割り当てと状態の追跡。
  • ブレーンストーミング。 さまざまなカテゴリにアイデアを追加する。
  • 並べ替えの演習。 あらゆる種類の情報をバケットに整理する。

Mobile

例は、モバイル上のタスク ボード UI テンプレートを示しています。

Desktop

例は、デスクトップ上のタスク ボード UI テンプレートを示しています。

ウィザード

ウィザードでは、ユーザーが複数の画面を案内してタスク (セットアップ プロセスなど) を完了します。

上位のユース ケース

  • セットアップ
  • オンボード
  • 最初の実行エクスペリエンス

Mobile

例は、モバイル上のウィザード UI テンプレートを示しています。

Desktop

例は、デスクトップ上のウィザード UI テンプレートを示しています。

関連項目