次の方法で共有

Windows での文字体裁

  • [アーティクル]

Segoe UI 変数でレンダリングされた単語

言語の視覚的表現である文字体裁において、何よりも重要な役割は情報を伝達することです。 Windows 型システムは、UI の読みやすさと読みやすさを最大限に高めるために、コンテンツに構造と階層を作成するのに役立ちます。

Segoe UI Variable は、Windows 用の新しいシステム フォントです。 これは、従来の Segoe の刷新版であり、可変フォント テクノロジーを使用して、非常に小さいサイズで優れた読みやすさを動的に提供し、表示サイズのアウトラインを改善します。

ヒント

この記事では、 Fluent Design 言語 を Windows アプリに適用する方法について説明します。 詳細については、「 デザイン - 文字体裁」を参照してください。

Segoe Fluent Variable の使用

Segoe UI 変数では、テキストの 太さ と optical サイズの 2 つの軸がサポートされています。

  • 太さ軸 (wght) は、太さ (100) から太字 (700) までの増分です。
  • 光学サイズ軸 (opsz) は既定で自動オンになっています。 フォント内のカウンターの形状とサイズを制御し、大きなサイズで小さなサイズと個性で読みやすさを優先します (8pt から 36pt までの光学スケーリングの場合)。

XAML コモン コントロールを使用する場合、サポートされている言語に対しては、Segoe UI 可変フォントが既定で選択されます。 このフォントまたは光学式軸を持つ別の変数フォントが使用されている場合、光学サイズは、要求されたフォント サイズと自動的に一致します。 HTML を使用する場合は、光学スケーリングも自動で行われますが、CSS で Segoe UI 可変フォントを指定する必要があります。

タイプフェイスのいくつかの側面が強調表示された Segoe UI 変数にレンダリングされた

重み

ウェイト名 ウェイト軸の値 ビジュアル
"ライト" 300 Segoe UI 変数ライトでレンダリングされた
Semilight 350 Segoe UI 変数 semilight でレンダリングされた
通常 400 Segoe UI 変数の標準でレンダリングされる
Semibold 600 Segoe UI 変数でレンダリングされた
太字 700 Segoe UI 変数太字でレンダリングされた

光軸

Segoe UI 変数でレンダリングされる小文字で、レンダリングされるコンテキストに基づいて、さまざまな図形のアウトラインが表示されます。

Windows 11 での文字体裁のベスト プラクティス

Windows 11 では、テキストが表示されているコンテキストに基づいて、次の属性を備える Segoe UI Variable が使用されます。

属性 値 メモ
Weight Regular、Semibold ほとんどのテキストには Regular ウェイトを使用し、タイトルには Semibold を使用します
位置合わせ Left、Center 既定では左揃え、アイコンの下のテキストなどのまれなケースでのみ中央揃え
最小値 14px Semibold、12px Regular これらのサイズとウェイトよりも小さいテキストは、一部の言語では判読できません
壳 文の先頭文字を大文字にする タイトルを含むすべての UI テキストで、文の先頭文字を大文字にします
切り捨て 省略記号とクリッピング ほとんどの場合、省略記号を使用します。クリッピングはまれなケースでのみ使用されます

例

WinUI 3 ギャラリー アプリを開き、文字体裁の原則の動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

Windows アプリの文字体裁

ヒーロー イメージ

言語の視覚的表現である文字体裁において、何よりも重要な役割は情報を伝達することです。 スタイルによってその目的が邪魔されてはなりません。 この記事では、ユーザーが簡単かつ効率的にコンテンツを理解できるような Windows アプリの文字体裁のスタイルを決定する方法について説明します。

フォント

アプリの UI 全体で同じフォントを使用してください。Windows アプリの既定のフォントである Segoe UI 可変に統一することをお勧めします。 それはサイズおよびピクセル密度間の最適の読みやすさを維持するように設計され、システムの内容を補足するきれいな、軽く、そして開いた審美的を提供する。

Segoe UI 変数フォントのサンプル テキスト。

アプリで英語以外の言語を表示する場合、または異なるフォントを選択する場合は、「言語」と「フォント」のセクションで、弊社が Windows アプリ向けに推奨するフォントを確認してください。

サイズとスケーリング

XAML アプリのフォント サイズは、すべてのデバイスで自動的にスケーリングされます。 スケーリング アルゴリズムにより、10 フィート離れた大画面の 24 px フォントは、数インチ離れた小さな画面の 24 px フォントと同じくらい読みやすくなります。

さまざまなデバイスの視距離。

スケーリング システムの動作により、実際の物理ピクセルではなく、有効なピクセル単位で設計するため、さまざまな画面サイズや解像度に合わせてフォント サイズを変更する必要はありません。

階層

ユーザーはページを斜め読みするとき、視覚的な階層を手掛かりにしています。見出しは内容を要約し、本文は詳細を説明するものと想定されます。 アプリでわかりやすい視覚的な階層を作成するためには、Windows 書体見本に従ってください。

3 行のテキストを行ごとに少しずつ小さいフォントで表示したスクリーンショット。

タイプ ランプ

Windows 書体見本は、ユーザーがコンテンツを読みやすいように、ページ上の各書体スタイル間の重要な関係を定めたものです。 すべてのサイズは有効ピクセル単位で、すべての画面サイズで実行される Windows アプリ用に最適化されています。

Windows 11 では、UI のさまざまな種類のテキストに対して次の値を使用します。

例 体重 サイズまたは行の高さ
キャプション テキストの例 Small 12/16 epx
本文の例 Text 14/20 epx
本文の強いテキストの例 Text semibold 14/20 epx
本文の大きなテキストの例 Text 18/24 epx
字幕テキストの例 Display semibold 20/28 epx
タイトル テキストの例 Display semibold 28/36 epx
タイトルの大きなテキストの例 Display semibold 40/52 epx
表示テキストの例 Display semibold 68/92 epx

詳細については、XAML の書体見本の使用に関するガイダンスを参照してください。

Alignment

既定の TextAlignment は Left で、ほとんどの場合、フラッシュ左揃えと不規則な右揃えでは、コンテンツの固定と均一なレイアウトが提供されます。 RTL 言語については、「 グローバリゼーションをサポートするためのレイアウトとフォントの調整」を参照してください。

左揃えテキストを表示します。

<TextBlock TextAlignment="Left">

文字数

緑色のチェック マークが付いており、 読みやすくするために、1 行あたり 50 ~ 60 文字にしてください。

テストで 読みにくいので、1 行あたり 20 文字未満または 60 文字を超える文字を使用しないでください。

クリッピングと省略記号

テキストの量が利用可能なスペースを超えている場合は、テキストをクリッピングしたり、省略記号 [...] を挿入することが推奨されます。クリッピングは、ほとんどの UWP テキスト コントロールで既定の処理です。

一部がテキスト クリッピングされたデバイス フレームを示しています。

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

緑色のチェック マークが付いており、 テキストをクリップし、複数行が有効になっている場合は折り返します。

テストで 見た目が乱雑にならないように省略記号を使用しないでください。

Note

表示領域が不明確な場合 (領域が異なる背景色によって明確に表示されていない場合など)、または詳細テキストへのリンクがある場合は、省略記号を使用します。

言語

Segoe UI 可変は、英語、ヨーロッパ言語、ギリシャ語、およびロシア語のフォントです。 その他の言語については、次の推奨事項を参照してください。

フォントのグローバル化/ローカライズ

LanguageFont フォント マッピング API を使用して特定の言語で推奨されるフォント ファミリ、サイズ、太さ、スタイルにプログラムでアクセスします。 LanguageFont オブジェクトを使用すると、UI ヘッダー、通知、本文、ユーザーが編集可能なドキュメント本文フォントなど、さまざまなカテゴリのコンテンツに対して適切なフォント情報にアクセスできます。 詳細については、「 グローバリゼーションをサポートするためのレイアウトとフォントの調整を参照してください。

ラテン語以外の言語のフォント

フォント ファミリー スタイル メモ
エブリマ 標準、太字 アフリカのスクリプト (アドラム文字、エチオピア文字、ンコ文字、オスマニア文字、ティフィナグ文字、ヴァイ文字) 用のユーザー インターフェイス フォント。
ガドゥギ 標準、太字 北アメリカ スクリプト (カナダ音節文字、チェロキー文字、オセージ文字) 用のユーザー インターフェイス フォント。
リーラワディー UI

 Regular、Semilight、Bold 東南アジアのスクリプト (ブギス文字、クメール文字、ラオス文字、タイ文字) 用のユーザー インターフェイス フォント。
マルガン ゴシック

 Regular 韓国語のユーザー インターフェイス フォント。
Microsoft ジェンヘイ UI

 標準、太字、淡色 繁体字中国語のユーザー インターフェイス フォント。
Microsoft ヤヘイ UI

 標準、太字、淡色 簡体字中国語のユーザー インターフェイス フォント。
ミャンマー テキスト

 Regular ミャンマー スクリプトのフォールバック フォント。
ニルマラ UI

 Regular、Semilight、Bold 南アジア言語のスクリプト (バングラ文字、チャクマ文字、デーバナーガリー文字、グジャラート文字、グルムキー文字、カンナダ文字、マラヤーラム文字、メイテイ マイェック文字、オディア文字、オル チキ文字、シンハラ文字、ソラング ソンペング文字、タミール文字、テルグ文字) 用のユーザー インターフェイス フォント。
Segoe UI

 Regular、Italic、Light Italic、Black Italic、Bold、Bold Italic、Light、Semilight、Semibold、Black アラビア文字、アルメニア文字、グルジア文字、およびヘブライ文字のユーザー インターフェイス フォント。
SimSun

 Regular 従来の中国語 UI フォント。
游ゴシック UI

 Light、Semilight、Regular、Semibold、Bold 日本語のユーザー インターフェイス フォント。

フォント

Sans-serif フォント

Sans-serif フォントは、見出しと UI 要素に最適です。

フォント ファミリー スタイル メモ
Arial 標準、斜体、太字、太字斜体、黒 ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしています。 黒の太字では、ヨーロッパのスクリプトのみがサポートされます。
カリブリ 標準、斜体、太字、太字斜体、ライト、ライト斜体 ヨーロッパおよび中東のスクリプト (ラテン、ギリシャ語、キリル文字、アラビア語、ヘブライ語) をサポートします。 アラビア語はアップライトでのみ使用できます。
コンソラス 標準、斜体、太字、太字斜体 ヨーロッパのスクリプト (ラテン、ギリシャ語、キリル文字) をサポートする幅フォントを修正しました。
Segoe UI Regular、Italic、Light Italic、Black Italic、Bold、Bold Italic、Light、Semilight、Semibold、Black ヨーロッパおよび中東のスクリプト (アラビア語、アルメニア語、キリル文字、グルジア語、ギリシャ語、ヘブライ語、ラテン文字)、および Lisu スクリプト用のユーザー インターフェイス フォント。
Selawik Regular、Semilight、Light、Bold、Semibold 他のプラットフォーム上で動作する Segoe UI をバンドルしないアプリ向けの、Segoe UI と測定上の互換性があるオープン ソース フォント。 Selawik は、GitHub で入手できます。

Serif フォント

Serif フォントは、大量のテキストを表示する場合に適しています。

フォント ファミリー スタイル メモ
カンブリア Regular ヨーロッパのスクリプト (ラテン、ギリシャ語、キリル文字) をサポートする Serif フォント。
クーリエ ニュー 標準、斜体、太字、太字斜体 セリフ等幅フォントは、ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしています。
ジョージア 標準、斜体、太字、太字斜体 ヨーロッパのスクリプト (ラテン、ギリシャ語、キリル文字) をサポートします。
タイムズ ニュー ローマ字 標準、斜体、太字、太字斜体 ヨーロッパのスクリプト (ラテン、ギリシャ語、キリル文字、アラビア語、アルメニア語、ヘブライ語) をサポートするレガシ フォント。

可変フォント

可変フォントは、テキストの外観を正確に制御する場合に便利です。

フォント ファミリー Axes メモ
Bahnschrift 太さ、幅 ラテン文字、ギリシャ文字、キリル文字をサポートする可変フォント。
Segoe UI 変数 太さ、光学サイズ ラテン文字、ギリシャ文字、キリル文字をサポートする可変フォント。

記号とアイコン

フォント ファミリー スタイル メモ
セゴエ MDL2 アセッツ Regular アプリ アイコンのユーザー インターフェイス フォント。 詳細については、「 Segoe Fluent Icons フォント 記事を参照してください。
Segoe UI 絵文字 Regular Emoji 用のユーザー インターフェイス フォント。
Segoe UI シンボル Regular 記号用のフォールバック フォント。