次の方法で共有

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 変数ライトでレンダリングされた
セミライト 350 Segoe UI 変数 semilight でレンダリングされた
通常 400
セミボルト 600 Segoe UI 変数でレンダリングされた
太字 七百 Segoe UI 変数太字でレンダリングされた

光軸

Segoe UI Variable でレンダリングされた小文字の a には、レンダリングされるコンテキストに応じて、さまざまな形状のアウトラインがあります。

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

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

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

例

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

WinUI ギャラリー アプリには、ほとんどの WinUI コントロール、機能、および機能の対話型の例が含まれています。 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 のさまざまな種類のテキストに対して次の値を使用します。

例 体重 サイズ/行間高さ
キャプション テキストの例 小さい 12月16日 EPX
本文の例 テキスト 14/20 epx
ボディ強調テキストの例 テキスト セミボールド 14/20 epx
本文の大きなテキストの例 テキスト 18/24 EPX
字幕テキストの例 セミボールド表示 20/28 epx
タイトル テキストの例 セミボールド表示 28/36 epx
タイトルの大きなテキストの例 セミボールド表示 40/52 epx
表示テキストの例 セミボールド表示 68/92 EPX

詳細については、XAML タイプランプの使用ガイドを参照してください。

アラインメント

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

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

<TextBlock TextAlignment="Left">

文字数

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

使わないでください 1行あたり20文字未満または60文字を超える文字は、読みにくいため使用しないようにしてください。

クリッピングと省略記号

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

文字が切れているデバイスフレームを示しています。 

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

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

省略しないで 視覚的な乱雑を避けるために、省略記号を使用しないでください。

注

コンテナが不明確な場合（たとえば、異なる背景色によって識別されているわけではない場合）や、詳細を確認するためのリンクがある場合には、省略記号を使用します。

言語

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

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

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

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

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

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

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

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

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

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

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

 レギュラー、イタリック、ライト イタリック、ブラック イタリック、ボールド、ボールド イタリック、ライト、セミライト、セミボールド、ブラック アラビア文字、アルメニア文字、グルジア文字、およびヘブライ文字のユーザー インターフェイス フォント。
シムサン

 レギュラー 従来の中国語 UI フォント。
游ゴシック UI

 ライト、セミライト、レギュラー、セミボールド、ボールド 日本語のユーザー インターフェイス フォント。

フォント

Sans-serif フォント

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

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

Serif フォント

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

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

可変フォント

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

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

記号とアイコン

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