Windows アプリの文字体裁Typography in Windows Apps

ヒーロー イメージ

言語の視覚的表現である文字体裁において、何よりも重要な役割は情報を伝達することです。As the visual representation of language, typography’s main task is to communicate information. スタイルによってその目的が邪魔されてはなりません。Its style should never get in the way of that goal. この記事では、ユーザーが簡単かつ効率的にコンテンツを理解できるような Windows アプリの文字体裁のスタイルを決定する方法について説明します。In this article, we'll discuss how to style typography in your Windows app to help users understand content easily and efficiently.

フォントFont

アプリの UI 全体で同じフォントを使用してください。Windows アプリの既定のフォントである Segoe UI に統一することをお勧めします。You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, Segoe UI. このフォントは、常に最適な読みやすさが維持されるサイズとピクセル密度を備え、システムのコンテンツを清潔で軽快、かつオープンに美しく表示します。It's designed to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system.

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

アプリで英語以外の言語を表示する場合、または異なるフォントを選択する場合は、「言語」と「フォント」のセクションで、弊社が Windows アプリ向けに推奨するフォントを確認してください。To display non-English languages or to select a different font for your app, please see Languages and Fonts for our recommended fonts for Windows apps.

推奨 UI のフォントを統一してください。do Pick one font for your UI.

非推奨 複数のフォントを混在させないでください。don't Don't mix multiple fonts.

サイズとスケーリングSize and scaling

UWP アプリのフォント サイズは、すべてのデバイスで自動的に拡大縮小します。Font sizes in UWP apps automatically scale on all devices. スケーリング アルゴリズムによって、10 フィート離れた Surface Hub 上の 24 ピクセル フォントが、目の前にある 5 インチ サイズの電話の画面に表示された 24 ピクセル フォントと同じ読みやすさで表示されます。The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible as a 24 px font on 5" phone that's a few inches away.

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

スケーリング システムのしくみを踏まえ、実際の物理ピクセルではなく、有効ピクセルに基づいてデザインしてください。異なる画面サイズや解像度に応じてフォント サイズを変更する必要はありません。Because of how the scaling system works, you're designing in effective pixels, not actual physical pixels, and you shouldn't have to alter font sizes for different screens sizes or resolutions.

推奨 Windows の書体見本に従います。do Follow the Windows type ramp sizing.

非推奨 12 ピクセルよりも小さいフォント サイズを使用しないでください。don't Use a font size smaller than 12 px.

階層Hierarchy

ユーザーはページを斜め読みするとき、視覚的な階層を手掛かりにしています。見出しは内容を要約し、本文は詳細を説明するものと想定されます。Users rely on visual hierarchy when scanning a page: headers summarize content, and body text provides more detail. アプリでわかりやすい視覚的な階層を作成するためには、Windows 書体見本に従ってください。To create a clear visual hierarchy in your app, follow the Windows type ramp.

テキスト ブロック スタイル

書体見本Type ramp

Windows 書体見本は、ユーザーがコンテンツを読みやすいように、ページ上の各書体スタイル間の重要な関係を定めたものです。The Windows type ramp establishes crucial relationships between the type styles on a page, helping users read content easily. すべてのサイズは有効ピクセル単位で示され、UWP アプリが動作するデバイスを問わず、常に最適に表示されるように調整されています。All sizes are in effective pixels and are optimized for UWP apps running on all devices.

書体見本

書体見本の使用Using the type ramp

各レベルの書体見本は、XAML の静的リソースとしてアクセスできます。You can access levels of the type ramp as XAML static resources. これらのスタイルは、*TextBlockStyle 名前付け規則に従っています。The styles follow the *TextBlockStyle naming convention.

テキスト ブロック スタイル

<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>

推奨 ほとんどのテキストには "Body" を使用します。do Use "Body" for most text.

スペースに制約がある場合はタイトルに "Base" を使用します。Use "Base" for titles when space is constrained.

非推奨 プライマリ操作や長い文字列に "Caption" を使用する。don't Use "Caption" for primary action or any long strings.

テキストを折り返す必要がある場合に "Header" や "Subheader" を使用する。Use "Header" or "Subheader" if text needs to wrap.

配置Alignment

既定の TextAlignment (行揃え) は Left (左揃え) です。ほとんどの場合、左揃え、右不揃いの形式でコンテンツを一貫してアンカー設定することで、均一なレイアウトが実現します。The default TextAlignment is Left, and in most instances, flush-left and ragged right provides consistent anchoring of the content and a uniform layout. RTL 言語については、グローバリゼーションをサポートするためのレイアウトとフォントの調整に関するページをご覧ください。For RTL languages, see Adjusting layout and fonts to support globalization.

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

<TextBlock TextAlignment="Left">

文字カウントCharacter count

推奨 読みやすさを確保するため、1 行当たり 50 ~ 60 文字の文字カウントを維持します。do Keep to 50–60 letters per line for ease of reading.

非推奨 1 行当たりの文字カウントが 20 文字を下回るか 60 文字を超えると読みにくくなります。don't Less than 20 characters or more than 60 characters per line is difficult to read.

クリッピングと省略記号Clipping and ellipses

テキストの量が利用可能なスペースを超えている場合は、テキストをクリッピングすることが推奨されます。クリッピングは、ほとんどの UWP テキスト コントロール で既定の処理です。When the amount of text extends beyond the space available, we recommend clipping text, which is the default behavior of most UWP text controls.

いくつかのテキスト クリッピングがあるデバイス フレームを示します。

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

推奨 テキストをクリップし、複数行を使用できる場合は、行を折り返します。do Clip text, and wrap if multiple lines are enabled.

非推奨 すっきりと表示するため、省略記号は使用しないでください。don't Use ellipses to avoid visual clutter.

:表示領域が不明確な場合 (領域が異なる背景色によって明確に表示されていない場合など)、または詳細テキストへのリンクがある場合は、省略記号を使用します。Note: If containers are not well-defined (for example, no differentiating background color), or when there is a link to see more text, then use ellipses.

言語Languages

Segoe UI は、英語、ヨーロッパの各言語、ギリシャ語、ヘブライ語、アルメニア語、ジョージア語、アラビア語に対応した弊社のフォントです。Segoe UI is our font for English, European languages, Greek, Hebrew, Armenian, Georgian, and Arabic. 他の言語については、以下の推奨事項を参照してください。For other languages, see the following recommendations.

フォントのグローバリゼーション/ローカライズGlobalizing/localizing fonts

特定言語の推奨フォント ファミリー、サイズ、太さ、スタイルにプログラムを使ってアクセスする場合は、LanguageFont フォント マッピング API を使ってください。Use the LanguageFont font-mapping APIs for programmatic access to the recommended font family, size, weight, and style for a particular language. LanguageFont オブジェクトを使うと、コンテンツのさまざまなカテゴリ (UI ヘッダー、通知、本文のテキスト、ユーザー自身で編集できるドキュメント本文のフォントなど) の正しいフォント情報にアクセスできます。The LanguageFont object provides access to the correct font info for various categories of content including UI headers, notifications, body text, and user-editable document body fonts. 詳しくは、「レイアウトとグローバリゼーションをサポートするフォントの調整」をご覧ください。For more info, see Adjusting layout and fonts to support globalization.

ラテン語以外の言語用のフォントFonts for non-Latin languages

フォント ファミリーFont-family スタイルStyles メモNotes
EbrimaEbrima 標準、太字Regular, Bold アフリカのスクリプト (エチオピア文字、ンコ文字、オスマニア文字、ティフィナグ文字、ヴァイ文字) 用のユーザー インターフェイス フォント。User-interface font for African scripts (Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
GadugiGadugi 標準、太字Regular, Bold 北アメリカ スクリプト (カナダ音節文字、チェロキー文字) 用のユーザー インターフェイス フォント。User-interface font for North American scripts (Canadian Syllabics, Cherokee).
Leelawadee UILeelawadee UI 通常、Semilight、太字Regular, Semilight, Bold 東南アジアのスクリプト (ブギス文字、ラオス文字、クメール文字、タイ文字) 用のユーザー インターフェイス フォント。User-interface font for Southeast Asian scripts (Buginese, Lao, Khmer, Thai).
Malgun GothicMalgun Gothic 標準Regular 韓国語用のユーザー インターフェイス フォント。User-interface font for Korean.
Microsoft JhengHei UIMicrosoft JhengHei UI 標準、太字、細字Regular, Bold, Light 繁体字中国語用のユーザー インターフェイス フォント。User-interface font for Traditional Chinese.
Microsoft YaHei UIMicrosoft YaHei UI 標準、太字、細字Regular, Bold, Light 簡体中国語用のユーザー インターフェイス フォント。User-interface font for Simplified Chinese.
Myanmar TextMyanmar Text 標準Regular ミャンマー文字のスクリプト用のフォールバック フォント。Fallback font for Myanmar script.
Nirmala UINirmala UI 通常、Semilight、太字Regular, Semilight, Bold 南アジア言語のスクリプト (バングラ文字、デーバナーガリー文字、グジャラート文字、グルムキー文字、カンナダ文字、マラヤーラム文字、オディア文字、オル チキ文字、シンハラ文字、ソラング ソンペング文字、タミール文字、テルグ文字) 用のユーザー インターフェイス フォントUser-interface font for South Asian scripts (Bangla, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu)
SimSunSimSun 標準Regular 中国語繁体字の UI フォント。A legacy Chinese UI font.
Yu Gothic UIYu Gothic UI 細字、中細、標準、中太、太字Light, Semilight, Regular, Semibold, Bold 日本語用のユーザー インターフェイス フォント。User-interface font for Japanese.

フォントFonts

サンセリフ フォントSans-serif fonts

サンセリフ フォントは、ヘッダーと UI 要素に適しています。Sans-serif fonts are a great choice for headings and UI elements.

フォント ファミリーFont-family スタイルStyles メモNotes
ArialArial 通常、斜体、太字、太字斜体、黒Regular, Italic, Bold, Bold Italic, Black ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしています。極太の太さがサポートされているのはヨーロッパのスクリプトだけです。Supports European and Middle Eastern scripts (Latin, Greek, Cyrillic, Arabic, Armenian, and Hebrew) Black weight supports European scripts only.
CalibriCalibri 通常、斜体、太字、太字斜体、中細、中細斜体Regular, Italic, Bold, Bold Italic, Light, Light Italic ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア語、ヘブライ語) をサポートしています。Supports European and Middle Eastern scripts (Latin, Greek, Cyrillic, Arabic and Hebrew). アラビア語は縦書きでのみ利用できます。Arabic available in the uprights only.
ConsolasConsolas 標準、斜体、太字、太字斜体Regular, Italic, Bold, Bold Italic ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字) をサポートする等幅フォント。Fixed width font that supports European scripts (Latin, Greek and Cyrillic).
Segoe UISegoe UI 標準、斜体、細字斜体、極太斜体、太字、太字斜体、細字、中細、中太、極太Regular, Italic, Light Italic, Black Italic, Bold, Bold Italic, Light, Semilight, Semibold, Black ヨーロッパおよび中東のスクリプト (アラビア文字、アルメニア文字、キリル文字、ジョージア文字、ギリシャ文字、ヘブライ文字、ラテン文字) およびリス文字のスクリプト用のユーザー インターフェイス フォント。User-interface font for European and Middle East scripts (Arabic, Armenian, Cyrillic, Georgian, Greek, Hebrew, Latin), and also Lisu script.
SelawikSelawik 標準、中細、細字、太字、中太Regular, Semilight, Light, Bold, Semibold 他のプラットフォーム上で動作する Segoe UI をバンドルしないアプリ向けの、Segoe UI と測定上の互換性があるオープン ソース フォント。An open-source font that's metrically compatible with Segoe UI, intended for apps on other platforms that don’t want to bundle Segoe UI. Selawik は、GitHub で入手できます。Get Selawik on GitHub.

セリフ フォントSerif fonts

セリフ フォントは、大量のテキストを表示するのに適しています。Serif fonts are good for presenting large amounts of text.

フォント ファミリーFont-family スタイルStyles メモNotes
CambriaCambria 標準Regular ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字) をサポートするセリフ フォント。Serif font that supports European scripts (Latin, Greek, Cyrillic).
Courier NewCourier New 標準、斜体、太字、太字斜体Regular, Italic, Bold, Bold Italic セリフ等幅フォントは、ヨーロッパおよび中東のスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしています。Serif fixed width font supports European and Middle Eastern scripts (Latin, Greek, Cyrillic, Arabic, Armenian, and Hebrew).
ジョージアGeorgia 標準、斜体、太字、太字斜体Regular, Italic, Bold, Bold Italic ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字) をサポートしています。Supports European scripts (Latin, Greek and Cyrillic).
Times New RomanTimes New Roman 標準、斜体、太字、太字斜体Regular, Italic, Bold, Bold Italic ヨーロッパのスクリプト (ラテン文字、ギリシャ文字、キリル文字、アラビア文字、アルメニア文字、ヘブライ文字) をサポートしている従来のフォント。Legacy font that supports European scripts (Latin, Greek, Cyrillic, Arabic, Armenian, Hebrew).

シンボルとアイコンSymbols and icons

フォント ファミリーFont-family スタイルStyles メモNotes
Segoe MDL2 アセットSegoe MDL2 Assets 標準Regular アプリ アイコン用のユーザー インターフェイス フォント。User-interface font for app icons. 詳しくは、Segoe MDL2 アセットの記事をご覧ください。For more info, see the Segoe MDL2 assets article.
Segoe UI EmojiSegoe UI Emoji 標準Regular
Segoe UI SymbolSegoe UI Symbol 標準Regular 記号用のフォールバック フォントFallback font for symbols