情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

フォント

デザイン コンセプト
使用パターン
ガイドライン
   フォントと色
   属性

メイリオと Meiryo UI

Microsoft Windows 上でユーザーがもっとも利用するユーザーインターフェイス(UI)要素はテキストです。Segoe UI は欧文用の Windows のシステムフォントですが,日本語のテキスト表示にはメイリオが標準で使用されます。欧文用、和文用ともに既定のフォントサイズは9 ポイントです。

Aa511282.FontMeiryo(ja-jp,MSDN.10).png

メイリオ フォント

Windows 7 では新しいユーザーインターフェイスとしてリボンコントロールを採用しました。リボンコントロールはユーザーの直観的な操作を可能にするためにアイコンを多用しますが、それらのアイコンとともに表示されるテキスト領域は,通常のUIで確保されるテキスト領域に比べて必ずしも十分な広さがあるとは限りません。そうしたリボン上に表示するUIテキストに最適なのが Meiryo UI フォントです

Aa511282.FontMeiryoUI(ja-jp,MSDN.10).png

Meiryo UI フォント

メイリオと Meiryo UI とはそれぞれ独立したフォントですが、いずれもClearTypeに最適化された可読性の高い日本語フォントです。メイリオの和文文字はすべて日本語組版で標準的ないわゆる全角幅でデザインされており、本文用としてもUI用としてもあらゆる世代に読みやすく設計されています。一方 Meiryo UIはその名に示すように,UIとして多用されるカタカナやひらがなに関して,狭い領域でも可読性を失うことがないように字面および字間、行間を調整し,Windows 7の新しいUIプラットフォームであるリボンに最適化しています。

Segoe UI

Microsoft® Windows® 上でユーザーがもっとも利用するユーザーインターフェイス(UI)要素はテキストです。Segoe UI (発音は "シーゴ") は、Windows のシステム フォントです。標準のフォント サイズは、9 ポイントと大きくなりました。

Segoe UI フォントで表示されたアルファベットの図

Segoe UI フォント

"Segoe UI" と "Segoe" は異なるフォントです。Segoe UI は、ユーザー インターフェイスの文字列に使用する Windows フォントで、Segoe は、印刷や広告用の資料作成に Microsoft とパートナーが使用するブランド フォントです。

Segoe UI はオープンな親しみやすい書体であり、Tahoma、Microsoft Sans Serif、Arial よりさらに読みやすい文字を提供します。Segoe UI の特徴は、より人間の視覚に配慮したサン セリフであるということです。たとえば、大文字はどれも広めの同じような幅になっている Helvetica と比べて、Segoe UI の E や S は狭く、幅に変化があります。また、小文字のアクセントや字形にも特徴があるほか、多くの工業的なサン セリフの斜体 "oblique" がローマン体を傾けたものであるのに対し、Segoe UI では真のイタリック体が使用されています。この書体は、画面でも印刷物でも同じ視覚効果が得られるように意図されたものです。個性を強調せず、奇をてらわないことで、より読みやすいサン セリフになるようにデザインされています。

Segoe UI は、Windows で既定で有効になっている ClearType に合わせて最適化されています。ClearType が有効になっていると、Segoe UI は洗練された読みやすいフォントになります。ClearType が有効になっていないと、Segoe UI は辛うじて受け入れられるほどの表示にしかなりません。この点が、Segoe UI を使用するかどうかの見極めになります。

Segoe UI には、ラテン文字、ギリシャ文字、キリル文字、およびアラビア文字が含まれています。それ以外の文字セットや用途には、同じく ClearType に合わせて最適化された新しいフォントがあります。たとえば、日本語にはメイリオ、韓国語には Malgun Gothic、中国語 (繁体字) には Microsoft JhengHei、中国語 (簡体字) には Microsoft YaHei、ヘブライ語には Gisha、タイ語には Leelawadee があり、ドキュメント向けには ClearType コレクションのフォントがあります。

メイリオには、Verdana を基にしたラテン文字が含まれています。Malgun Gothic、Microsoft JhengHei および Microsoft YaHei には、Segoe UI のカスタマイズ版が使用されています。これらのフォントのイタリック体の使用はお勧めしません。Malgun Gothic、Microsoft JhengHei および Microsoft YaHei は、標準スタイルおよび太字スタイルのみ提供され、イタリック文字は標準スタイルを傾斜させて合成します。メイリオには真のイタリックとボールド イタリックが含まれていますが、これらのスタイルはラテン文字にのみ適用されます。日本語文字は、イタリック スタイルが適用されても標準スタイルのままになります。

メイリオのバリエーションである メイリオ UI は、リボン コマンド ユーザー インターフェイスに適しています。

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

Windows ベースのプログラムに必要な Segoe UI およびその他の Microsoft フォントの配布用ライセンスについては、Ascender にお問い合わせください。

注: スタイルとトーンおよびユーザー インターフェイスのテキストに関するガイドラインは、それぞれ別の項目として記載しています。

デザイン コンセプト

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

従来の文字体裁の "フォント" とは、書体、ポイント サイズ、およびその他の属性の組み合わせを表すものです。"書体" とはフォントの外観のことであり、Segoe UI、Tahoma、Verdana、Arial などはすべて書体です。"ポイント サイズ" とはフォントのサイズであり、アセンダー上端からディセンダー下端までの長さから内部の間隔 (内部レディング) を引いたものです。1 ポイントは 72 分の 1 インチ (約 0.35 mm) のサイズになります。この 2 つに加えて、フォントには太字や斜体などの "属性" を指定できます。

このトピックでもそうですが、"フォント" という言葉を "書体" の代わりに使用することがよくあります。しかし、技術的には Segoe UI はフォントではなく書体です。9 ポイント Segoe UI 標準、10 ポイント Segoe UI 太字のように、属性の組み合わせが固有のフォントになります。

セリフとサン セリフ

書体はセリフまたはサン セリフのいずれかに属します。"セリフ" とは、フォントの文字ストロークの先端によく付いている小さな飾りのことです。"サン セリフ" はセリフのない書体です。

一般的に、ドキュメント内の本文にはセリフ フォントが好まれます。セリフは、ドキュメントに格式のある上品な感じを与えます。UI テキストには、すっきりした外観が必要であることと、コンピューターのモニターがより低解像度であることから、サン セリフの書体の方が適しています。

コントラスト

テキストは、背景との明度の差が大きい場合に最も読みやすくなります。白い背景に黒いテキストを使用すると、コントラストが最も大きくなります。明るい背景に濃い色のテキストを使用する場合も、コントラストを大きくできます。この組み合わせは、プライマリ UI 画面に最適です。

暗い背景に薄い色のテキストを使用すると、適度なコントラストがとれますが、明るい背景に濃い色のテキストを使用した場合ほどではありません。この組み合わせは、エクスプローラーの作業ウィンドウなど、プライマリ UI 画面ほど強調しない セカンダリ UI 画面に適しています。

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

アフォーダンス

テキストには、用途を示すために次のようなアフォーダンスを使用できます。

  • ポインター。I 字型のバー ("テキスト選択") ポインターは、テキストが選択可能なことを示します。一方、左向きの矢印 ("通常選択") ポインターは、テキストが選択可能でないことを示します。
  • キャレット。テキストに入力フォーカスがあるときの、点滅する垂直のバーです。選択または編集可能なテキストの挿入または選択ポイントを示します。
  • ボックス。テキストを囲むボックスは、テキストが編集可能であることを示します。表示を軽くするため、編集可能なテキストが選択されたときのみ動的にボックスを表示することもあります。
  • 前景色。薄い灰色はテキストが無効であることを示します。灰色以外の色、特に青や紫は、テキストがリンクであることを示します。
  • 背景色。薄い灰色の背景はテキストが読み取り専用である印象を与えますが、実際は、読み取り専用のテキストにはどのような背景色も使用できます。

以上のアフォーダンスを組み合わせることで、次の意味を表すことができます。

  • 編集可能。テキストをボックスで囲み、テキスト選択のポインターと (入力フォーカス時に) キャレットを表示し、通常は背景を白にします。
  • 読み取り専用、選択可能。テキストに、選択ポインターと (入力フォーカス時に) キャレットを表示します。
  • 読み取り専用、選択不可。テキストに矢印ポインターを表示します。
  • 無効。薄い灰色のテキストに矢印ポインターを表示します。背景を灰色にすることもあります。

従来的に、読み取り専用のテキストには灰色の背景が使用されていますが、必ずしも灰色の背景は必要ではありません。実際のところ、テキスト ブロックが大きい場合などは灰色の背景が望ましくないことがあります。灰色の背景は、テキストが無効である印象を与え、読む気を損なわせます。

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

障碍のある方がテキストを読めるようにするためのガイドラインは、1 つの単純なルールに集約されます。すなわち、常にシステム フォント、サイズ、色を使用してユーザーの状況に配慮するということです。

最も重要な点
常にシステム フォント、サイズ、色を使用して、ユーザーの設定に配慮します。

開発者向け情報: サイズを含むシステム フォントのプロパティは、GetThemeFont API 関数を使用したコードで確認できます。システム カラーは、GetThemeSysColor API 関数を使用して確認できます。

ユーザーのシステムのテーマがどのような設定になるかわからないため、次のことを守る必要があります。

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

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

使用パターン

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

タイトル バーのテキスト
ウィンドウを識別するタイトル バー上のテキスト。
                                            

タイトル バー テキストのフォント例

メイン指示テキスト
ページ、ウィンドウ、ダイアログ ボックスなどでの操作を説明するテキスト。

メイン指示テキストのフォント例

サブ指示テキスト
ページ、ウィンドウ、ダイアログ ボックスなどでの操作を説明する補足テキスト。

サブ指示テキストのフォント例

標準テキスト
ユーザー インターフェイスに表示される通常 (読み取り専用) のテキスト。

標準テキストのフォント例

強調テキスト
太字のテキストは、テキストの理解を助けたり必読のテキストに注目させるために使用します。斜体のテキストは、テキストを (引用符なしで) 文字どおりに引用したり特定語句を強調するために使用します。

強調テキストのフォント例

編集可能なテキスト
ユーザーが編集できる、ボックス囲みのテキスト。表示を軽くするため、編集可能なテキストが選択されたときのみボックスを表示することもあります。

編集可能なテキストのフォント例

淡色表示のテキスト
無効にされたコントロールのラベルなど、現在のコンテキストに該当しないテキスト。淡色表示のテキストは、ユーザーが (通常) テキストを読まなくてもよいことを示します。

淡色表示テキストのフォント例

リンク
別のページ、ウィンドウ、ヘルプ トピックへの移動、またはコマンドの開始のためのテキスト。

リンク テキストのフォント例

リンク (ホバー) テキストのフォント例

グループ ヘッダー
リスト ビューでアイテムをグループ化するために使用されるテキスト。

グループ ヘッダー テキストのフォント例

ファイル名
ファイル名のテキスト (コンテンツ ビューでのみ使用)

ファイル名 (コンテンツ ビュー内) テキストのフォント例

ドキュメント テキスト
(UI テキストに対して) ドキュメント内で使用するテキスト。

ドキュメント テキストのフォント例

ドキュメント見出し
ドキュメント内で見出しとして使用するテキスト。

ドキュメント見出しテキストのフォント例

ガイドライン

フォントと色

  • Windows Vista と Windows 7 の既定のフォントと色は次のとおりです。
    パターンテーマ シンボルフォント、色
    タイトル バー テキストのフォントの例  CaptionFont9 ポイント黒 (#000000) Segoe UI
    メイン指示テキストのフォント例  MainInstruction12 ポイント青 (#003399) Segoe UI
    サブ指示テキストのフォント例    Instruction9 ポイント黒 (#000000) Segoe UI
    標準テキストのフォント例  BodyText9 ポイント黒 (#000000) Segoe UI
    強調テキストのフォント例  BodyText9 ポイント黒 (#000000) Segoe UI、太字または斜体
    編集可能なテキストのフォント例  BodyText9 ポイント黒 (#000000) Segoe UI、ボックス囲み
    淡色表示テキストのフォント例  Disabled9 ポイント濃い灰色 (#323232) Segoe UI
    リンク テキストのフォント例  HyperLinkText9 ポイント青 (#0066CC) Segoe UI
    リンク (ホバー) テキストのフォント例  Hot9 ポイント薄い青 (#3399FF) Segoe UI
    グループ ヘッダー テキストのフォント例   11 ポイント青 (#003399) Segoe UI
    ファイル名 (コンテンツ ビュー内) テキストのフォント例   11 ポイント黒 (#000000) Segoe UI
    ドキュメント テキストのフォント例  (なし)9 ポイント黒 (#000000) Calibri
    ドキュメント見出しテキストのフォント例  (なし)17 ポイント黒 (#000000) Calibri
  • UI テクノロジとターゲットとする Windows のバージョンに基づいて、フォントを選択し、最適なウィンドウ レイアウトにします。
    UI テクノロジターゲットとする Windows のバージョン使用するフォントと最適化
    Windows Presentation FoundationすべてWPF のテーマ パーツを使用します。
    Win32 または WinFormsWindows Vista 以降適切な Segoe UI フォントを使用します。
    拡張可能なコンポーネントまたは Vista 以前の WindowsWindows® XP および Windows 2000 をターゲットとする場合は、8 ポイント MS Shell Dlg 2 擬似フォントを使用します。このフォントは Tahoma にマッピングされます。
    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 フォントは 9 ポイント以上で適切に表示されるように設計されているので、9 ポイント未満のサイズは使用しないようにします。
  • システムのテキストの色は、常に対応する背景色と一緒に使用します。たとえば、テキストの色に COLOR_STATICTEXT を選択する場合は、その背景色にも COLOR_STATIC を選択する必要があります。
  • 新しいフォントを作成する場合は、常にシステム フォントのプロポーショナル サイズ フォントを基準にします。システム フォントのメトリクスから、太字にしたり、斜体にしたり、大きめまたは小さめのフォントを作成できます。
  • 大きなブロックの読み取り専用テキスト (ライセンス条項など) の場合、背景は灰色ではなく明るい色にします。灰色の背景は、テキストが無効である印象を与え、読む気を損なわせます。
  • 1 行の文字数は半角換算で 65 文字以内になるようにします。これより長いとテキストが読みにくくなります(句読点や空白文字も含めてカウントします)。

属性

  • 大部分の UI テキストは、属性のないプレーン テキストにします。属性を使用する場合は、次のように使用します。
    • 太字。コントロールのラベルにおいて、テキストの理解を助けるために使用します。また、必読のテキストに注目させるために、控えめに使用します。乱用すると太字の効果が減少します。
    • 斜体。テキストを (引用符なしで) 文字どおりに引用するために使用します。また、特定語句を強調するために、控えめに使用します。テキスト ボックス編集可能なドロップダウン リストの中のプロンプトにも使用します。
    • 太字斜体。使用しません。
    • 下線。リンク以外には使用しません。強調するには代わりに斜体を使用します。
  • すべてのフォントで太字と斜体がサポートされるわけではないため、太字や斜体がなくてもテキストを理解できるようにします。

表示: