Microsoft Teams アプリの設計プロセス

Microsoft Teams アプリを設計するためのツールとリソースは複数あります。 次の手順では、設計プロセス中にこれらをいつどのように使用するかについて説明します。 (一部の手順は、技術的には設計プロセスの外部にある可能性がありますが、追加のコンテキストのために含まれています)。

アプリを計画する

高品質の Teams アプリを設計するには、アプリで実現したいことと、ユーザーがそれをどのように使用するかを理解する必要があります。 ただし、設計を開始する前に次の質問に答えてみましょう。

• 対象ユーザーは誰か。
• 対象ユーザーの問題は何か。
• アプリでその問題を解決するにはどうすればよいか。
• アプリはどれくらいの頻度で使用されるか。
• アプリをどれほどのユーザーの数は使用するか。
• アプリでどのような投資収益率を提供できるか。

詳細については、アプリのユース ケースの理解、および Teams へのユース ケースのマッピングに関する記事を参照してください。

Teams デザイン ツールを入手する

Microsoft は、Teams アプリの設計を容易にするツールを提供しています。 少なくとも、Microsoft Teams UI キットを使用することを強くお勧めします。

Microsoft Teams UI キットを入手する

Microsoft Teams UI キットは、効果的な Teams アプリを最短時間で開発するのに役立ちます。 この UI キットには、さまざまな例やバリエーションなど、Teams アプリの設計などに関連するこれらのドキュメントで目にするものがすべて含まれています。

UI キットには、必要に応じてコピーおよび変更できる事前構築済みのテンプレートとコンポーネントも用意されているため、ボタンの外観を気にする代わりに、最適なユーザー エクスペリエンスの設計により多くの時間を費やすことができます。

1. Microsoft Teams UI キット Figma ページに移動します。
2. [Duplicate]\(複製\) を選択して UI キットを開きます。 (最初に Figma アカウントを作成する必要がある場合があります)。

サンプル アプリを試す

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

Teams の設計システムを学習する

レイアウト、配色など、Teams アプリの設計の基礎について詳しく読むか、少なくとも理解している必要があります。

アプリの機能を選択する

計画フェーズの後、アプリのユース ケースに適した Teams の機能を決定できます。 たとえば、ユーザーにプロアクティブに通知したい場合は、ボットが適切な機能である可能性があります。

UI キットには、ユーザーが通常、各機能を追加、設定、使用、管理する方法を示す事前構築済みのデザインがあります。 クイック リファレンスの情報はこれらのドキュメントにも含まれていますが、UI キットを使用すると、これらの設計の任意のものをアプリの設計にコピーして貼り付けることができます。

1. UI キットの左側のナビゲーションで、[アプリの機能] に移動し、アプリに必要な機能を選択します。
2. そのページから、アプリの設計に必要なものをコピーします。
   たとえば、アプリでシングル サインオンによる認証をサポートする場合は、そのシナリオを処理するための設計をコピーして貼り付けます。

UX フローを設計する

基本的なアプリの設計が完了したら、UI キットから Teams の UI テンプレートと基本コンポーネントをコピーして、必要に応じて変更と調整を加えることができます。

UI テンプレートを使用したデザイン

UI テンプレートは、Teams の一般的なユース ケースとワークフローのための複雑で忠実度の高い設計です。 基本コンポーネントのレベルから始めるのではなく、これらのテンプレートを使用して設計プロセスの簡略化および時間短縮を図ることをお勧めします。

1. UI キットの左側のナビゲーションで、[UI テンプレート] に移動します。
2. アプリのデザインに適したテンプレートをコピーします。
   たとえば、個人用アプリを設計する場合は、ダッシュボード テンプレートを使用できます。

基本 UI コンポーネントを使用した設計

Fluent UI に基づくこれらのコンポーネントは、使い慣れた Teams インターフェイスを作成するためのコア要素です。 UI テンプレートでは必要なものが不足している場合や、アプリを最初から設計したい場合は、これらのコンポーネントを使用します。

1. UI キットの左側のナビゲーションで、[Basic UI components]\(基本 UI コンポーネント\) に移動します。
2. アプリの設計に必要なコンポーネント (ボタンやトグルなど) をコピーします。

設計を実装する

設計が完了し、ビルドを開始する準備が整いました。 次のツールは、アプリのフロントエンド開発を簡略化するのに役立ちます。

UI テンプレートを使用したビルド

設計で UI テンプレートを使用した場合は、Microsoft Teams UI ライブラリ (Fluent UI に基づく React コンポーネント ライブラリ) を使用してこれらのテンプレートを実装できます。

一覧表示されているすべてのテンプレートが UI キットに含まれていない場合は、ライブラリで使用できます。

基本 UI コンポーネントを使用したビルド

デザイン フェーズとほぼ同じで、UI テンプレートでは必要なものが不足している場合や、アプリを最初からビルドしたい場合は、アプリ プロジェクトでこれらの Fluent UI コンポーネントを使用できます。

設計リソースを確認する

アプリの開発に着手したばかりの場合でも、実稼働可能なアプリの完成が間近な場合でも、次のリソースを定期的に確認することをお勧めします。

• Microsoft Teamsストアの検証ガイドライン: Teams ストアに一覧表示されているアプリだけでなく、すべての Teams アプリが求める基準を提供します。 詳細については、ガイドラインのページを参照してください。
• 設計のベスト プラクティス: これらのドキュメントと UI キットは、高品質のアプリを設計するためのベスト プラクティスを提供します。 たとえば、ボットを設計するためのベスト プラクティスに関する記事を参照してください。

関連項目

アクティビティ フィード通知の設計