Windows アプリの文字体裁

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

フォント

アプリの UI 全体で同じフォントを使用してください。Windows アプリの既定のフォントである Segoe UI 可変に統一することをお勧めします。 このフォントは、常に最適な読みやすさが維持されるサイズとピクセル密度を備え、システムのコンテンツを清潔で軽快、かつオープンに美しく表示します。

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

UI のフォントを 1 つ選択します。

複数のフォントを混在させる必要はありません。

可変フォントの軸

Segoe UI 可変フォントには、テキストをより細かく制御するための 2 つの軸が含まれています。 このフォントには、細字 (100) から太字 (700) までの太さを持つ太さの軸 (wght) があります。 また、8pt から 36pt への光学スケーリングでは、光学サイズ軸 (opsz) があります。 XAML コモン コントロールを使用する場合、サポートされている言語に対しては、Segoe UI 可変フォントが既定で選択されます。 このフォントまたは光学式軸を持つ別の変数フォントが使用されている場合、光学サイズは、要求されたフォント サイズと自動的に一致します。 HTML を使用する場合は、光学スケーリングも自動で行われますが、CSS で Segoe UI 可変フォントを指定する必要があります。

サイズとスケーリング

UWP アプリのフォント サイズは、すべてのデバイスで自動的に拡大縮小します。 スケーリング アルゴリズムによって、10 フィート離れた Surface Hub 上の 24 ピクセル フォントが、目の前にある 5 インチ サイズの電話の画面に表示された 24 ピクセル フォントと同じ読みやすさで表示されます。

スケーリング システムのしくみを踏まえ、実際の物理ピクセルではなく、有効ピクセルに基づいてデザインしてください。異なる画面サイズや解像度に応じてフォント サイズを変更する必要はありません。

Windows の種類の傾斜路のサイズ設定に従います。

12 px より小さいフォント サイズは使用しないでください。

階層

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

書体見本

Windows 書体見本は、ユーザーがコンテンツを読みやすいように、ページ上の各書体スタイル間の重要な関係を定めたものです。 すべてのサイズは有効ピクセル単位で示され、UWP アプリが動作するデバイスを問わず、常に最適に表示されるように調整されています。

詳細については、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 ヘッダー、通知、本文のテキスト、ユーザー自身で編集できるドキュメント本文のフォントなど) の正しいフォント情報にアクセスできます。 詳しくは、「レイアウトとグローバリゼーションをサポートするフォントの調整」をご覧ください。

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

フォント ファミリー	スタイル	メモ
Ebrima	標準、太字	アフリカのスクリプト (アドラム文字、エチオピア文字、ンコ文字、オスマニア文字、ティフィナグ文字、ヴァイ文字) 用のユーザー インターフェイス フォント。
Gadugi	標準、太字	北アメリカ スクリプト (カナダ音節文字、チェロキー文字、オセージ文字) 用のユーザー インターフェイス フォント。
Leelawadee UI	通常、Semilight、太字	東南アジアのスクリプト (ブギス文字、クメール文字、ラオス文字、タイ文字) 用のユーザー インターフェイス フォント。
Malgun Gothic	標準	韓国語用のユーザー インターフェイス フォント。
Microsoft JhengHei UI	標準、太字、細字	繁体字中国語用のユーザー インターフェイス フォント。
Microsoft YaHei UI	標準、太字、細字	簡体中国語用のユーザー インターフェイス フォント。
Myanmar Text	標準	ミャンマー文字のスクリプト用のフォールバック フォント。
Nirmala UI	通常、Semilight、太字	南アジア言語のスクリプト (バングラ文字、チャクマ文字、デーバナーガリー文字、グジャラート文字、グルムキー文字、カンナダ文字、マラヤーラム文字、メイテイ マイェック文字、オディア文字、オル チキ文字、シンハラ文字、ソラング ソンペング文字、タミール文字、テルグ文字) 用のユーザー インターフェイス フォント。
Segoe UI	標準、斜体、細字斜体、極太斜体、太字、太字斜体、細字、中細、中太、極太	アラビア文字、アルメニア文字、グルジア文字、およびヘブライ文字のユーザー インターフェイス フォント。
SimSun	標準	中国語繁体字の UI フォント。
Yu Gothic UI	細字、中細、標準、中太、太字	日本語用のユーザー インターフェイス フォント。

フォント

サンセリフ フォント

サンセリフ フォントは、ヘッダーと UI 要素に適しています。

フォント ファミリー	スタイル	メモ
Arial	通常、斜体、太字、太字斜体、黒	ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしています。 黒の太字では、ヨーロッパのスクリプトのみがサポートされます。
Calibri	通常、斜体、太字、太字斜体、中細、中細斜体	ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア語、ヘブライ語) をサポートしています。 アラビア語は縦書きでのみ利用できます。
Consolas	標準、斜体、太字、太字斜体	ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字) をサポートする等幅フォント。
Segoe UI	標準、斜体、細字斜体、極太斜体、太字、太字斜体、細字、中細、中太、極太	ヨーロッパおよび中東のスクリプト (アラビア文字、アルメニア文字、キリル文字、ジョージア文字、ギリシャ文字、ヘブライ文字、ラテン文字) およびリス文字のスクリプト用のユーザー インターフェイス フォント。
Selawik	標準、中細、細字、太字、中太	他のプラットフォーム上で動作する Segoe UI をバンドルしないアプリ向けの、Segoe UI と測定上の互換性があるオープン ソース フォント。 Selawik は、GitHub で入手できます。

セリフ フォント

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

フォント ファミリー	スタイル	メモ
Cambria	標準	ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字) をサポートするセリフ フォント。
Courier New	標準、斜体、太字、太字斜体	セリフ等幅フォントは、ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしています。
ジョージア	標準、斜体、太字、太字斜体	ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字) をサポートしています。
Times New Roman	標準、斜体、太字、太字斜体	ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしている従来のフォント。

可変フォント

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

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

シンボルとアイコン

フォント ファミリー	スタイル	メモ
Segoe MDL2 アセット	標準	アプリ アイコン用のユーザー インターフェイス フォント。 詳しくは、Segoe MDL2 アセットの記事をご覧ください。
Segoe UI Emoji	標準	Emoji 用のユーザー インターフェイス フォント。
Segoe UI Symbol	標準	記号用のフォールバック フォント。

関連記事

• テキスト コントロール
• XAML テーマ リソース
• XAML スタイル
• Microsoft の文字体裁
• 可変フォント