Microsoft Teams アプリ設計システム

Teams アプリ設計の基礎について簡単に説明します。包括的なガイダンスと例については、「Microsoft Teams UI キット (Figma)」を参照してください。

レイアウト

Teams は、デザインコンポーネント間の一貫性と洗練された関係を確保するためにグリッドレイアウトに依存しています。グリッドの 4 ピクセルベースユニットを使用すると、コンポーネントは Teams のすべてのディスプレイサイズにわたって一貫してスケーリングできます。

Teams レイアウトの概念図。

アバターは、Teams 内の人物、チーム、ボット、またはエンティティをグラフィカルに表したものです。アバターグループは、多くの場合、ライブアクティビティを伝達したり、縦のスペースを保持する方法で名簿を表すために使用されます。

Teams アバターの概念図。

アプリのプライマリアイコンは、ブランドを Teams ユーザーに伝達するのに長い道のりを行くことができます。アイコンのデザインを正しくすることは、アプリを Microsoft Teams ストアに公開する場合にも重要です。

アプリ全体で Fluent UI アイコンを使用することもできます。

Teams アイコンの概念図。

Teams は、タイプランプとさまざまなフォントサイズやウェイトに Segoe UI を使用することで、階層を作成し、読みやすさを確保しています。

Teams 文字体裁の概念図。

Teams Web とデスクトップでは既定のテーマ (明るいテーマ)、ダークテーマ、ハイコントラストテーマがサポートされていますが、Teams モバイルでは明るいテーマとダークテーマがサポートされています。各テーマには独自の配色があります。

Teams 色の概念図。

図形と昇格を使用して、アプリに追加の階層を作成できます。

図形と昇格の概念。

Teams の一部であると感じるには、一般に、アプリのコピーは次の [Microsoft 音声原則] に従う必要があります。暖かくリラックスし、鮮明でクリアで、すぐに使用できます。

コピーとコンテンツの概念イメージ。