4 人のうち 4 人が役に立つと評価しました - このトピックを評価する

フォント

メイリオと 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 の既定のフォントと色は次のとおりです。

パターン	テーマシンボル	フォント、色
	CaptionFont	9 ポイント黒 (#000000) Segoe UI
	MainInstruction	12 ポイント青 (#003399) Segoe UI
	Instruction	9 ポイント黒 (#000000) Segoe UI
	BodyText	9 ポイント黒 (#000000) Segoe UI
	BodyText	9 ポイント黒 (#000000) Segoe UI、太字または斜体
	BodyText	9 ポイント黒 (#000000) Segoe UI、ボックス囲み
	Disabled	9 ポイント濃い灰色 (#323232) Segoe UI
	HyperLinkText	9 ポイント青 (#0066CC) Segoe UI
	Hot	9 ポイント薄い青 (#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 または WinForms	Windows Vista 以降	適切な Segoe UI フォントを使用します。
Win32 または WinForms	拡張可能なコンポーネントまたは Vista 以前の Windows	Windows® 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 テキストは、属性のないプレーンテキストにします。属性を使用する場合は、次のように使用します。
- 太字。コントロールのラベルにおいて、テキストの理解を助けるために使用します。また、必読のテキストに注目させるために、控えめに使用します。乱用すると太字の効果が減少します。
- 斜体。テキストを (引用符なしで) 文字どおりに引用するために使用します。また、特定語句を強調するために、控えめに使用します。テキストボックスや編集可能なドロップダウンリストの中のプロンプトにも使用します。
- 太字斜体。使用しません。
- 下線。リンク以外には使用しません。強調するには代わりに斜体を使用します。
すべてのフォントで太字と斜体がサポートされるわけではないため、太字や斜体がなくてもテキストを理解できるようにします。

この情報は役に立ちましたか。はいいいえ

不正確

内容が浅い

もっとコード例が必要

翻訳品質の向上が必要

(残り 1500 文字)