文字体裁のガイドライン

[アーティクル]
05/15/2015

説明

文字体裁は、Microsoft デザイン言語の中心的要素です。Microsoft デザインのすべての原則で、文字体裁の重要性が認識されています。アプリの開発者は、高度な文字体裁機能をサポートする一連のフレームワークを初めて利用できるようになりました。

推奨と非推奨

文字体裁グリッドを使ってテキストをレイアウトします。
Unicode を使ってテキストを改善します。
Microsoft OpenType 機能をグローバルに適用する。
文の先頭文字を大文字にします。
数値範囲ではハイフンではなく半角ダッシュを使います。
推奨されるフォントを使わない場合は、随意の合字を適用しないでください。
両端揃えのテキストを使わないでください。

その他の使い方のガイダンス

Segoe UI

Windows の代表的なユーザーインターフェイスフォントである Segoe UI は、Windows Vista/Office 2007 の時期に導入されました。これは、看板や標識で使われた伝統的な書体から作成されたサンセリフデザインです。Segoe UI の導入以降、すべてのマイクロソフト製品の個性が Segoe UI によって決定付けられ、オペレーティングシステム、アプリ、デバイスの印象だけでなく、ロゴ、ブランド、広告、パッケージの印象にも影響を及ぼしています。この書体は、マイクロソフトの文字体裁に対する方針を表しています。

Windows 8 では、Segoe UI ファミリに重要なアップグレードが加えられました。主な変更点は次のとおりです。

Segoe UI Light と Segoe UI Semibold が再ヒンティング (調整) されて、画面上でのレンダリング品質が改善されました。
Windows Phone 版の Segoe に合わせて、既定の数字と "Q" および "I" のデザインを調整しました。SS01 Microsoft OpenType Stylistic Set (SS01) を使うと、以前の Windows Vista 形式の文字を使うことができます。
Segoe UI Light、Semilight、Semibold では、既定で数字の幅をプロポーショナルにしました。従来の固定ピッチの数字を利用するには、C#/VB/C++ と XAML を使った Windows ストアアプリでは、Typography.NumeralAlignment 添付プロパティを "Tabular" に設定します。JavaScript と HTML を使う場合は、font-feature-settings property プロパティを "TNUM" に設定して、表形式用 (固定ピッチ) の数字間隔の OpenType 機能を適用します。
Segoe UI Light は、設計時の想定よりも小さい 20 ポイント未満のサイズで使われることが多いため、線の細い Segoe UI である Segoe UI Semilight が追加されました。これは、小さいサイズでも美しくレンダリングされ、11 ポイントまで対応します。小さいフォントのテキストに軽い印象を与える場合に、このフォントをお勧めします。
Windows Vista と Windows 7 では、Segoe UI はラテン文字、ギリシャ文字、キリル文字、アラビア文字をサポートしていました (標準および太字のみ)。Windows 8 では Segoe UI が拡張され、ヘブライ文字、アルメニア文字、ジョージア文字にも対応し、アラビア文字を更新しました。また新たに、主要なヨーロッパ言語と中東言語のすべてに対応する文字セットが含められました。
Windows UI では斜体を使いませんが、5 種類の Segoe UI すべてに斜体を追加し、アプリで使えるようにしました。
フォントに高度な OpenType 書体 (すべての太さの小型英大文字、合字、数字のスタイルを含む) を追加しました。

Windows 8.1 では、欧州全地域の言語で Segoe UI Black と Segoe UI Black Italic が追加され、使用可能なフォントの選択パレットがさらに拡張されました。

他の言語のフォント

Windows 8 には、他のほとんどの言語向けの Segoe UI 調整フォントも用意されています。標準と太字の 2 種類の太さのフォントを使うことができます。日本語向けの Segoe UI 調整フォントは用意されていませんが、日本語 UI フォントである Meiryo UI には、Segoe UI スタイルのラテン文字および数字として OpenType Stylistic Set (ss20) が含まれています。

次に、一般的な言語およびスクリプトでお勧めされるフォントの一覧を示します。

文字	フォント
ラテン文字、ギリシャ文字、キリル文字	Segoe UI
アラビア語	Segoe UI
ヘブライ語	Segoe UI
アルメニア語およびジョージア語	Segoe UI
簡体字中国語	Microsoft YaHei UI
繁体字中国語	Microsoft JhengHei UI
韓国語	Malgun Gothic
タイ語	Leelawadee UI
クメール語	Leelawadee UI
ラオス語	Leelawadee UI
チェロキー語を含むアメリカ先住民言語	Gadugi
アフリカ諸語	Ebrima
インド諸語	Nirmala UI
日本語	Meiryo UI

Windows 8.1 には次のフォントも用意されていることに注意してください。

Microsoft YaHei UI Light (20 ポイント以上で使用可能です)
Microsoft JhengHei UI Light (20 ポイント以上で使用可能です)
Leelawadee UI Semilight (11 ポイント以上で使用可能です)
Nirmala UI Semilight (11 ポイント以上で使用可能です)

アプリをローカライズするときに組み込みのフォントを使用する場合は、Windows.Globalization.Fonts API に関するトピックをご覧になり、その文字システムの推奨される UI とドキュメントフォントを特定してください。

代替フォントの使用

Segoe UI が Windows 8 と Microsoft を連想させることには、メリットとデメリットの両方があります。適切に使えば、アプリの信頼感を手軽に高めることができます。その一方で、このフォントを使うとアプリに独自の個性やブランド性を与えることが難しくなる場合があります。

Windows 8 には Segoe UI の代わりとなる高品質フォントが多数用意されています。Cambria などのセリフフォントは対応言語も多く、伝統的な印象を与えます。マイクロソフトの既定のオーサリングフォントである Calibri は、ユーザーが見慣れたものでしょう。 Windows 8 では、Calibri に light weight が追加され、Segoe UI で sans-serif の良い代替になります。Segoe UI と同様、Cambria フォントと Calibri フォントには高度な OpenType 機能が備えられています。また Windows 8.1 では、一連のサイズで使用可能な Sitka と呼ばれる新しい書体ファミリが追加されました。

組み込みのフォントを使うときには、そのフォントを Windows 8 で使用できることと、Microsoft Office などの他のアプリをインストールする必要がないことを確認するために、Windows 8 をクリーンインストールしたコンピューターを使ってフォントをテストしてください。Windows 8 および Windows 8.1 では、言語やエディションに関係なく、まったく同じ種類のフォントが付属します。

Windows の基本フォントではアプリの目的に対応できない場合には、アプリに代替フォントを埋め込むことができます。ただし、表示とライセンスに関して次のような問題が発生する可能性があることに注意してください。

ほとんどのサードパーティ製フォントには多くの Windows 組み込みフォントと同等のヒンティングがないため、フォントを目的のサイズで徹底的にテストするようにしてください。
ほとんどのフォントライセンスでは、一部の形式によるドキュメントフォントの埋め込みを許可していますが、フォントを再頒布することや、アプリやゲームの内部にフォントを埋め込むことは禁止しています。フォントを埋め込む前にフォントのライセンスを熟読し、フォントの埋め込みの可否に関して疑問がある場合にはフォントの作成元に問い合わせてください。

適切なサイズと太さの選択

デスクトップパブリッシングの出現と共に、過剰な種類の書体サイズと書体太さを簡単に扱えるようになりました。初期のデスクトップパブリッシングのユーザーは、さまざまな書体サイズと書体太さを同じドキュメント内で使っていました。これは文字体裁に不慣れなユーザーの特徴でもあります。書体サイズと書体太さの種類が多すぎると、効果的な情報階層を確立することは困難です。このような理由から、Windows 8 では限られた種類のフォントサイズと太さのみを使っています。

見出し: Segoe UI Light 42 ポイント
見出し: Segoe UI Light 20 ポイント
本文: Segoe UI Semilight 11 ポイント
キャプション: Segoe UI Regular 9 ポイント

すべての書体見本 (type ramp) については、「フォントのガイドライン」をご覧ください。

注 Windows の書体見本 (type ramp) は、暗色の背景に明色のテキストを表示する状態に合わせて最適化されており、あえて線が細いフォントが使われています。アプリで明色の背景に暗色のテキストを表示することが多い場合、この書体見本に従うことは適切でない可能性があります。文字サイズが小さいと、Segoe Ui Light、Semilight などのフォントは見づらくなるからです (薄い灰色の背景に濃い灰色のテキスト)。明色の背景に暗色のテキストを表示する場合、Regular や Semibold などの線が太いフォントの方が適しています。

Windows 8 の書体見本に従わない場合は、書体のサイズとスタイルの種類はできる限り少なくしてください。

アプリのページのレイアウト

テキストを囲む空間の広さはフォントサイズと同じくらい重要です。そのため、文字体裁グリッドを使ってテキストをレイアウトすることをお勧めします。Windows グリッドの使い方について詳しくは、「アプリページのレイアウト」をご覧ください。グリッドを使うだけでなく、写真やイラストの周囲の余白や空間にも特に注意してください。美しいレイアウトも、テキストの画像の回り込み処理に問題があったり、ページ要素内の余白が一貫していなかったりすると、台無しになります。

優れた文字体裁を実現するための 8 個のヒント

適切なフォントを適切なサイズと適切な余白で使うこと以外にも、優れた文字体裁を実現するためのこつがあります。文字体裁については数多くの参考図書がありますが (「参考図書」をご覧ください)、ここでは文字体裁を次のレベルに高めるために役立つヒントをいくつか紹介します。

1. OpenType 機能をグローバルに適用する

推奨されるいずれかの UI フォントを使う場合、OpenType 機能のカーニング (kern)、随意の合字 (dlig)、Stylistic Set 20 (ss20) をすべてのテキストに適用します。

カーニングによって、テキストの文字間隔が改善されます。これはサイズが大きい場合に顕著となります (次の図の「適用前」と「適用後」で "To" を見比べてください)。
合字は高品質の文字体裁に欠かせない要素ですが、従来のコンテンツではダイアログの再配置を避けるために、標準合字を Segoe UI の随意の合字としてエンコードしていました。そのため、これを使うには有効にする必要があります。
OpenType Stylistic Set 20 を使うと、必要な字体と文字間隔を利用できます (この Stylistic Set は特に数字に役立ちます)。この Stylistic Set を適用するメリットは、Segoe UI のすべての太さとスタイルで、一貫したテキストレンダリングが保証されることです。

推奨される UI フォントを使っていない場合、カーニング (kern) と標準合字 (liga) のみを適用することをお勧めします。推奨されるフォントを使わない場合は、随意の合字を適用しないでください。

<p class='note'>
    6/16/2012<br />
    To: Simon Daniels<br />
    Please find enclosed five flashing baffles.
</p>

.note {
    font-family: 'Segoe UI';
    -ms-font-feature-settings: 'kern' 1, 'dlig' 1, 'ss20' 1, 'lig' 1
}

次の図に、OpenType 機能を適用する前と適用した後のテキストを示します。

適用前	適用後

2. Unicode の機能を活用する

プレーン ASCII テキストを避け、適切な文字を使うことは、テキストの外観を洗練させるために最も効果的な方法です。

直線状の引用符とアポストロフィを避ける
小文字の "x" を使わず、乗算記号を使う
時間の区切り文字にはコロンではなく比例記号を使う
適切なダッシュを使い、ハイフンやマイナス記号を使わない

ハイフンの誤った使い方で最も多いのは、数値範囲の表現です。半角ダッシュを使ってください。文字体裁をさらに改善するには、半角ダッシュの前後に Hair Space を使います。数字またはすべて大文字のテキストを 1 行に揃えるときには、半角ダッシュをわずかに上へ移動して、視覚的な文字の中心に合わせます。

ニュースフィードなどの制御できないコンテンツがアプリに表示される場合、基本的な文字列の検索と置き換えの手法を使えば、アプリの実行中にこのようなコンテンツを自動的に修正することができます。

次に、Unicode を使ってテキストを改善する方法の例を示します。

Unicode 記号なし	Unicode 記号あり	使用する Unicode コードポイント
		U+201C、U+201D
		U+2019
		U+2236
		U+00D7
		U+00BD
		U+2026
		U+2013、U+200A (わずかなスペース)

Unicode には記号も数千個含まれており、そのうち 722 個の絵文字が標準に加えられています。このような記号の多くを、アプリのテキストやビットマップの代わりに使うことができます。使用可能なすべての記号の一覧については、「Segoe UI Symbol アイコンのガイドライン」をご覧ください。

3. 文の先頭文字を大文字にする

テキストによるコミュニケーションでは、文の先頭文字を大文字にする従来からの形式が世界的に受け入れられています。すべて大文字または小文字のテキストスタイルが、大文字または小文字のいずれかのみを使う国際的な書記体系になることはありません。標準的な文の先頭文字を大文字にする形式に従うことで、アプリの対象ユーザーが広がります。

4. 特定の OpenType 機能を使う

最初の 3 つのルールに従えば、テキストの外観は非常に良くなるはずです。しかし、さらに上のレベルを目指すには、テキストの特定の部分に OpenType 機能を適用します。たとえば、頭字語には OpenType の "小型英大文字" 機能を適用します。この機能は本当の意味での小型英大文字を適用します (縮小した大文字ではありません)。コンテンツに数字が含まれる場合は、"旧スタイルの数字" 機能をテキストに適用します。この機能では、旧スタイルの数字 (小文字の数字と呼ばれる場合もあります) を使います。これがコンテンツに適している場合があります。

次に例を示します。

<p style="font-family: ’Segoe UI’;" >
   In <span style="font-feature-settings: ’onum’ 1;">2012</span> <span style="font-feature-
   settings: ’c2sc’ 1;">NASA</span> sent <span style="font-feature-settings: ’onum’ 1;">5</span> 
   astronauts to the <span style="font-feature-settings: ’c2sc’ 1;">ISS</span>
</p>

旧スタイルの数字を適用する前:

旧スタイルの数字を適用する前のテキスト

後:

旧スタイルの数字を適用した後のテキスト

5. 編集する

編集は、よく見逃される文字体裁の 1 面です。設計者の多くは、テキスト自体を変更する必要があるとは考えません。しかし、テキストが良い文章ではなく理解しづらければ、外観がどれほどよくても意味がありません。

6. カーニング、トラッキング、ハイフネーション、配置を効果的に使う

書体の設計者がよく言うことですが、文字の間隔は文字の形と同じくらい重要です。カーニング (最初のルールで説明しました) は、特定の 2 文字の組み合わせの間隔を調整することで、文字間隔を改善します。これはすべてのコンテンツに適用することをお勧めします。

一方で、トラッキングは文字列内のすべての文字の間に均等に余白を追加 (または削除) します。フォントの既定の文字間隔は特定のサイズでの読みやすさを考慮して最適化されているため、間隔をわずかに広げる方がよい場合もあります。トラッキングの値は .01 em または .02 em が便利です。

両端揃えのテキストを使うと、文字間隔を適切にすることが難しくなります。両端揃えによってテキストを強制的にコンテナーに合わせると、常に文字間隔が犠牲になります。一般的に、テキストを両端揃えにすると、コンテンツ全体に空白の "川" ができます (単語間に大きなすきまができます)。両端揃えのテキストを避けて可能な限り左揃えを適用し、テキストの右端がでこぼこになりすぎないようにハイフネーションを適用してください。

7. フォントベースのコントロールを使う

Windows の文字体裁で最も知られていない秘密の 1 つは、UI で使われるボタン、アイコン、コントロールの多くは実際にはフォントベースであることです。これはビットマップでもスケーラブルベクターグラフィックス (SVG) でもなく、Segoe UI Symbol フォントの Unicode 私用領域に割り当てられたグリフです。さまざまなショーケースアプリでも同じ手法を使って、アイコンやコントロールを表示しています。

フォントベースのアイコンとコントロールは通常のフォント文字と同様に縮小拡大できます。他のテキスト要素と並べて配置したり、レイヤーを使って色を付けることもできます。Windows 8.1 では、フォントベースのコントロールの可能性をさらに高めるフルカラーフォントをサポートします。

8. ユーザーが表示をカスタマイズできるようにする

ユーザーがシステム全体の設定を変更せずに本文のテキストサイズを変更できる設定を用意します。テキストサイズの値は、小 (11 ポイント)、中 (14 ポイント)、大 (18 ポイント) をお勧めします。さらに、明色の背景に暗色のテキスト (読みやすさに優れる) にするか、色付きの背景に暗色のテキストまたは暗色の背景に明色のテキスト (環境によっては眼精疲労の軽減に役立つ) にするかをユーザーがアプリで選べるようにすることもできます。ユーザーがさまざまな本文フォントを選べるようにすると、この機能を専用の電子書籍デバイスで使うユーザーに歓迎されるでしょう。種類を限定して、言語に適したフォントを用意してください。

リーダーアプリを作成する際には、下部のアプリバーにユーザーがテキストサイズを切り替えることができるポップアップを追加することを検討してください。ユーザーに対して一貫性のある予測可能なエクスペリエンスを作るために、Segoe UI Symbol フォントサイズのアイコンを使えます。標準的なアイコンの概要については、「Segoe UI Symbol アイコンのガイドライン」をご覧ください。

以下の図は、アプリバーにテキストサイズの変更に使うポップアップがあるニュースアプリです。拡張テキストサイズポップアップのあるニュースアプリのスクリーンショット

参考図書

ここで説明した基本的なアドバイスに従うことで、アプリの文字体裁は洗練されたものになるでしょう。しかし、ここでは最新の文字体裁と OpenType の機能を利用して実現できることのほんの一部を紹介しただけです。興味があれば、次の書籍を読むことをお勧めします。

The Elements of Typographic Style (Robert Bringhurst 著)
Inside Paragraphs: Typographic Fundamentals (Cyrus Highsmith 著)
Detail in Typography (Jost Hochuli 著)
Thinking with Type (Ellen Lupton 著)
Stop Stealing Sheep (Erik Spiekermann および E.M. Ginger 著)

フォントの全要素の使用に関するIEBlog 記事は、カスケードスタイルシート (CSS) OpenType 機能を適用する方法を知るための入門としてお勧めです。ここには Monotype、FontShop、Font Bureau によるデモのリンクがあり、このテクノロジを使ってどのようなことができるかを知ることができます。

文字体裁のガイドライン

説明

推奨と非推奨

その他の使い方のガイダンス

関連トピック

その他のリソース