Windows アプリの文字体裁

  • [アーティクル]

ヒーロー イメージ

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

フォント

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

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 px フォントが、数インチ離れた 5 インチの電話の 24 px フォントと同じくらい読みやすくなります。

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

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

緑色のチェック マークが付いており、 Windows タイプのランプ サイズ設定に従います。

テストで 12 px 未満のフォント サイズは使用しないでください。

階層

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

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

タイプ ランプ

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

Windows 書体見本。

詳細については、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 MDL2 アセットの記事をご覧ください。
Segoe UI 絵文字 Regular Emoji 用のユーザー インターフェイス フォント。
Segoe UI シンボル Regular 記号用のフォールバック フォント。