Windows アプリの文字体裁

hero image

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

フォント

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

Sample text of Segoe UI Variable font.

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

First screenshot of a green bar that has a green check mark and the word Do in it. UI のフォントを 1 つ選択します。

don't 複数のフォントを混在させないでください。

可変フォントの軸

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

サイズとスケーリング

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

viewing distances for different devices.

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

Second screenshot of a green bar that has a green check mark and the word Do in it. Windows の書体見本のサイズに従います。

don't 12 ピクセルよりも小さいフォント サイズを使用しないでください。

階層

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

Screenshot of three lines of text where the font size gets smaller from one line to the next.

書体見本

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

The Windows type ramp.

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

配置

既定の TextAlignment (行揃え) は Left (左揃え) です。ほとんどの場合、左揃え、右不揃いの形式でコンテンツを一貫してアンカー設定することで、均一なレイアウトが実現します。 RTL 言語については、グローバリゼーションをサポートするためのレイアウトとフォントの調整に関するページをご覧ください。

Shows flush-left text.

<TextBlock TextAlignment="Left">

文字数

Fourth screenshot of a green bar that has a green check mark and the word Do in it. 読みやすさを確保するため、1 行当たり 50 から 60 文字にします。

don't 読みにくくなるため、1 行当たり 20 文字未満または 60 文字を超える文字を使用しないでください。

クリッピングと省略記号

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

Shows a device frame with some text clipping.

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

Fifth screenshot of a green bar that has a green check mark and the word Do in it. テキストをクリップし、複数行を使用できる場合は、行を折り返します。

don't すっきりと表示するため、省略記号は使用しないでください。

注意

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

言語

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 標準 記号用のフォールバック フォント。