フォント

  • [アーティクル]

Note

この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。

ユーザーは、Microsoft Windows の他の要素よりもテキストを操作します。 Segoe UI ("SEE-go" と発音) は Windows システム フォントです。 標準フォント サイズが 9 ポイントに増加しました。

segoe ui フォントのアルファベットの図

Segoe UI フォント。

Segoe UI と Segoe は同じフォントではありません。 Segoe UI は、ユーザー インターフェイスのテキスト文字列を対象とした Windows フォントです。 Segoe は、Microsoft とパートナーが印刷および広告用の素材を作成するために使用するブランドフォントです。

Segoe UI は、親しみやすい、オープンでわかりやすい書体であり、その結果、Tahoma、Microsoft Sans Serif、Arial よりも読みやすさが向上します。 それはヒューマニズムサンセリフの特徴を持っています:その首都の様々な幅(例えば、幅がより似ているヘルヴェティカと比較して狭いEとS、かなり広い);その小文字のストレスとレターフォーム。その真の斜体(多くの産業的なサンセリフのように、"斜め"や斜めのローマ語ではなく)。 書体は、画面と印刷で同じ視覚効果を与えるために意図されています。 それは強い性格や気が散る風変わりなヒューマニズムサンセリフのように設計されました。

Segoe UI は ClearType 用に最適化されており、Windows では既定でオンになっています。 ClearType が有効になっている場合、Segoe UI はエレガントで読みやすいフォントです。 ClearType が有効になっていない場合、Segoe UI は許容されるわずかです。 この要素は、Segoe UI を使用する必要があるタイミングを決定します。

Segoe UI には、ラテン文字、ギリシャ語、キリル文字、アラビア語の文字が含まれます。 他の文字セット用に作成され、使用するために ClearType 用に最適化された新しいフォントもあります。 これには、Meiryo for Japanese、Malgun Gothic for Korean、Microsoft JhengHei for Chinese (繁体字)、Microsoft YaHei for Chinese (簡体字)、ヘブライ語の Gisha、タイ語用の Leelawadee、およびドキュメント用に設計された ClearType コレクション フォントが含まれます。

Meiryo には、Verdana に基づくラテン文字が含まれています。 Malgun Gothic、Microsoft JhengHei、Microsoft YaHei は、カスタマイズされた Segoe UI を使用します。 これらのフォントの斜体バージョンを使用することはお勧めしません。 Malgun Gothic、Microsoft JhengHei、および Microsoft YaHei は、標準スタイルと太字スタイルでのみ提供されます。つまり、斜体の文字は、直立したスタイルを傾斜させて合成されます。 Meiryo には真の斜体と太字の斜体が含まれていますが、これらのスタイルはラテン文字にのみ適用され、斜体のスタイルを適用すると、日本語の文字は直立したままになります。

Meiryo UI と呼ばれる Meiryo のバリエーションは、リボン コマンドのユーザー インターフェイスで推奨されます。

これらの文字セットを使用してロケールをサポートするために、Segoe UI は ローカライズ プロセス中に各ロケールに応じて正しいフォントに置き換えられます。

Windows ベースのプログラムを使用して配布するための Segoe UI やその他の Microsoft フォントのライセンスを取得するには、 Monotype にお問い合わせください。

メモ：スタイルとトーン、ユーザー インターフェイスのテキストに関連するガイドラインは、別の記事で示されています。

設計概念

フォント、書体、ポイント サイズ、および属性

従来の文字体裁では、フォントは書体、ポイント サイズ、および属性の組み合わせを表します。 書体はフォントの外観です。 Segoe UI、Tahoma、Verdana、Arial はすべて書体です。 ポイント サイズとは、フォントのサイズを指し、アセンダーの上部からディセンダーの下部まで、内部間隔 (先頭と呼ばれます) を差し引いた値を指します。 ポイントは約 1/72 インチです。 最後に、フォントには太字または斜体の属性を含めることができます。

非公式には、多くの場合、この記事で行われるように、書体の代わりにフォントを使用しますが、技術的には、Segoe UI はフォントではなく書体です。 属性の各組み合わせは一意のフォントです (たとえば、9 ポイントの Segoe UI 標準、10 ポイントの Segoe UI 太字など)。

Serif と sans serif

書体は serif または sans serif です。 Serif は、多くの場合、フォントで文字のストロークを終了する小さなターンを指します。 sans serif 書体には serifs がありません。

通常、閲覧者は、ドキュメント内で本文テキストとして使用されるセリフ フォントを優先します。 セリフは、文書に形式性と優雅さを提供します。 UI テキストの場合、クリーンの外観とコンピューター モニターの解像度が低いほど、sans serif 書体がより適切に選択されます。

この例を、

テキストは、テキストの輝度と背景の間に大きな違いがある場合に読み取るのが最も簡単です。 白い背景の黒いテキストは、非常に明るい背景に最高のコントラストの暗いテキストを与え、ハイコントラストを提供することもできます。 この組み合わせは、プライマリ UI サーフェスに最適です。

暗い背景の明るいテキストは、コントラストは良好ですが、明るい背景には濃いテキストほど適していません。 この組み合わせは、プライマリ UI サーフェスを基準にして強調を解除するエクスプローラー作業ウィンドウなどのセカンダリ UI サーフェスに適しています。

ユーザーがテキストを読むようにする場合は、明るい背景に濃いテキストを使用します。

アフォー ダンス

テキストでは、次の アフォーダンスを 使用して、その使用方法を示すことができます。

  • ポインター。 I バー ("text select") ポインターはテキストが選択可能であることを示し、左向きの矢印 ("通常の選択") ポインターはテキストが選択されていないことを示します。
  • キャレット。 テキストに入力フォーカスがある場合、キャレットは、選択可能または編集可能なテキストの挿入/選択ポイントを示す点滅する垂直バーです。
  • 箱。 編集可能であることを示すテキストの周りのボックス。 プレゼンテーションの重みを減らすために、編集可能なテキストが選択されている場合にのみ、ボックスを動的に表示できます。
  • 景色。 淡い灰色は、テキストが無効になっていることを示します。 灰色以外の色 (特に青と紫) は、テキストがリンクであることを示します。
  • 背景色。 明るい灰色の背景は、テキストが読み取り専用であることを弱く示唆していますが、実際には、読み取り専用のテキストは任意の色の背景を持つことができます。

これらのアフォーダンスは、次の意味で組み合わされます。

  • 編集可能。 テキスト選択ポインター、キャレット (入力フォーカスの場合)、通常は白い背景で、ボックスに表示されるテキスト。
  • 読み取り専用、選択可能。 選択ポインターとキャレット (入力フォーカス時) を含むテキスト。
  • 読み取り専用、選択不可。 矢印ポインターを含むテキスト。
  • 無効。 灰色の背景に矢印ポインターが付いた淡い灰色のテキスト。

読み取り専用テキストは、従来は灰色の背景を持ちますが、灰色の背景は必要ありません。 実際、灰色の背景は、テキストが無効になっており、読み取りを推奨しないため、特に大きなテキスト ブロックでは望ましくない場合があります。

アクセシビリティとシステムのフォント、サイズ、色

障;障のあるユーザーがテキストにアクセスできるようにするためのガイドラインは、1 つの単純なルールに分けることができます。システムのフォント、サイズ、色を常に使用してユーザーの設定を尊重します。

1 つだけの操作を行う場合...

システムのフォント、サイズ、色を常に使用して、ユーザーの設定を尊重します。

開発者： コードから、GetThemeFont API 関数を使用して、システム フォントのプロパティ (サイズを含む) を決定できます。 システムの色は、GetThemeSysColor API 関数を使用して決定できます。

ユーザーのシステム テーマ設定に関して何も想定できないため、次のことを行う必要があります。

  • 常にシステム テーマの色からフォントの色と背景を基にします。 固定 RGB (赤、緑、青) の値に基づいて独自の色を作成しないでください。
  • システム テキストの色と対応する背景色を常に一致させます。 たとえば、テキストの色にCOLOR_STATICTEXTを選択した場合は、背景色のCOLOR_STATICも選択する必要があります。
  • システム フォントのプロポーショナル サイズのバリエーションに基づいて、常に新しいフォントを作成します。 システム フォント メトリックを使用すると、太字、斜体、大きく、小さいバリエーションを作成できます。

プログラムがユーザーの設定を尊重していることを確認する簡単な方法は、異なるフォント サイズとハイ コントラストの配色を使用してテストすることです。 すべてのテキストのサイズを変更し、選択した配色で正しく表示する必要があります。

使用パターン

テキストには、いくつかの使用パターンがあります。

使用法 説明
タイトル バーの文字列
ウィンドウを識別するタイトル バーのテキスト。
 タイトル バーのテキスト フォントの例
主要な命令
ページ、ウィンドウ、またはダイアログ ボックスでの操作を説明するテキスト。
メイン命令テキスト フォントの例
2 番目の手順
ページ、ウィンドウ、またはダイアログ ボックスでの操作を説明する補足テキスト。
2 次命令テキストフォントの例
標準テキスト
ユーザー インターフェイスに表示される通常の (読み取り専用) テキスト。
標準テキスト フォントの例
強調されたテキスト
太字テキストは、テキストを解析しやすくし、ユーザーが読む必要があるテキストに注意を引くために使用されます。 斜体テキストは、テキストを (引用符ではなく) リテラルで参照し、特定の単語を強調するために使用されます。
強調テキスト フォントの例
編集可能なテキスト
ユーザーが編集できるテキストがボックスに表示されます。 プレゼンテーションの重みを減らすには、編集可能なテキストが選択されている場合にのみボックスを表示できます。
編集可能なテキスト フォントの例
選択不可のテキスト
無効なコントロールのラベルなど、現在のコンテキストに適用されないテキスト。 無効なテキストは、ユーザー (通常) がテキストの読み取りを気にしないことを示します。
無効なテキスト フォントの例
リンク
別のページ、ウィンドウ、またはヘルプ トピックに移動したり、コマンドを開始したりするために使用されるテキスト。
リンク テキスト フォントの例
リンク (ホバー) テキスト フォントの例
グループ ヘッダー
リスト ビュー内のアイテムをグループ化するために使用されるテキスト。
group-header テキスト フォントの例
[ファイル名]
ファイル名のテキスト (コンテンツ ビューのみ)。
ファイル名 (コンテンツ ビュー) テキスト フォントの例
ドキュメント テキスト
(ui テキストではなく) ドキュメントで使用されるテキスト。
文書のテキスト フォントの例
ドキュメントの見出し
文書内の見出しとして使用されるテキスト。
文書見出しのテキスト フォントの例

ガイドライン

フォントと色

  • Windows Vista および Windows 7 では、次のフォントと色が既定値です。
Pattern テーマ記号 フォント、色
タイトル バーのテキスト フォントの例
CaptionFont
 9 pt. 黒 (#000000) Segoe UI
メイン命令テキスト フォントの例
 MainInstruction
 12 pt. blue (#003399) Segoe UI
2 次命令テキストフォントの例
命令
 9 pt. 黒 (#000000) Segoe UI
標準テキスト フォントの例
BodyText
 9 pt. 黒 (#000000) Segoe UI
強調テキスト フォントの例
BodyText
 9 pt. 黒 (#000000) Segoe UI、太字または斜体
編集可能なテキスト フォントの例
BodyText
 9 pt. 黒 (#000000) ボックス内の Segoe UI
無効なテキスト フォントの例
無効
 9 pt. ダーク グレー (#323232) Segoe UI
リンク テキスト フォントの例
HyperLinkText
 9 pt. blue (#0066CC) Segoe UI
リンク (ホバー) テキスト フォントの例
ホット
 9 pt. 水色 (#3399FF) Segoe UI
group-header テキスト フォントの例
11 pt. blue (#003399) Segoe UI
ファイル名 (コンテンツ ビュー) テキスト フォントの例
11 pt. black (#000000) Segoe UI
文書のテキスト フォントの例
(なし)
 9 pt. black (#000000) Calibri
文書見出しのテキスト フォントの例
(なし)
 17 pt. black (#000000) Calibri
  • UI テクノロジと Windows のターゲット バージョンに基づいて、フォントを選択し、ウィンドウ レイアウトを最適化します。
UI テクノロジ ターゲット Windows バージョン 使用するフォントと最適化するフォント
Windows Presentation Foundation
 すべて
 WPF テーマ パーツを使用します。
Win32 または WinForms
 Windows Vista 以降
 適切な Segoe UI フォントを使用します。
拡張可能なコンポーネントまたは Windows Vista より前
 Windows XP と Windows 2000 をターゲットにするには、Tahoma にマップされる 8 ポイント MS Shell Dlg 2 擬似フォントを使用します。
以前のバージョンの Windows を対象にするには、8 ポイント MS Shell Dlg 擬似フォントを使用します。これは、Windows 2000 と Windows XP の Tahoma にマップされ、Windows 95、Windows 98、Windows Millennium Edition、Windows NT 4.0 の MS Sans Serif にマップされます。
  • 開発者：
    • 固定レイアウト (Windows ダイアログ テンプレートや WinForms など) を使用する要素の場合は、前の表の適切なフォントをハード コーディングします。
    • 動的レイアウト (Windows Presentation Foundation など) を使用する要素の場合は、テーマフォントを使用します。 DrawThemeText などのテーマ API を使用して、テーマシンボルに基づいてテキストを描画します。 テーマ サービスが実行されていない場合は、システム メトリックに基づいて代替手段を用意してください。
  • Segoe UI の場合は、9 ポイント以上のフォント サイズを使用します。 Segoe UI フォントはこれらのサイズに合わせて最適化されているため、サイズを小さくしないでください。
  • システム テキストの色と対応する背景色を常に一致させます。 たとえば、テキストの色にCOLOR_STATICTEXTを選択した場合は、背景色のCOLOR_STATICも選択する必要があります。
  • システム フォントのプロポーショナル サイズのバリエーションに基づいて、常に新しいフォントを作成します。 システム フォント メトリックを使用すると、太字、斜体、大きく、小さいバリエーションを作成できます。
  • 灰色の背景ではなく、読み取り専用テキスト (ライセンス条項など) の大きなブロックを明るい背景に表示します。 灰色の背景は、テキストが無効になっており、読み取りを推奨しないことを示します。
  • テキストを読みやすくするために、65 文字の最大行長を考慮してください。 (文字には、文字、句読点、スペースが含まれます)。

属性

  • ほとんどの UI テキストは、属性なしでプレーンにする必要があります。 属性は次のように使用できます。
    • 太字。 コントロール ラベルで を使用すると、テキストの解析が容易になります。 ユーザーが読む必要があるテキストに注意を引くには、慎重に使用してください。 太字を使いすぎると、その影響が軽減されます。
    • 斜体。 引用符の代わりに文字どおりテキストを参照するには、 を使用します。 特定の単語を強調するには控えめに使用してください。 テキスト ボックスや編集可能なドロップダウン リストのプロンプトに使用します。
    • 太字の斜体。 使用しないでください。
    • 下線。 リンク以外は使用しないでください。 強調する代わりに斜体を使用します。
  • すべてのフォントが太字と斜体をサポートしているわけではないため、テキストを理解するために重要になることはありません。