タイポグラフィ

HoloLens での文字体裁の例

テキストは、アプリ エクスペリエンスで情報を伝えるための重要な要素です。 2D 画面の文字体裁と同じように、明確で読みやすくすることを目指します。 Mixed Reality の 3 次元の側面により、テキストと全体的なユーザー エクスペリエンスをいっそう優れたものにする機会があります。

3D の文字というと、押し出されたボリューム感のある 3D テキストを想像しがちです。 一部のロゴのデザインやその他の限られた用途を除いて、押し出されたテキストはテキストの読みやすさが低下する傾向があります。 3D 用のエクスペリエンスを設計していても、文字が判読しやすく、読みやすいので、2D を使います。

HoloLens では、加法配色システムに基づいてライトを使ったホログラムで文字を構築しています。 他のホログラムと同じように、文字を実際の環境に置いて環境をロックしたり、あらゆる角度から観察したりすることができます。 文字と環境の間の parallax 効果により、エクスペリエンスに深みを与えることができます。

Mixed Reality での文字体裁

Mixed Reality における文字体裁の規則は、他の場所と変わりません。 物理世界でも仮想世界でも、テキストは判読可能で、読みやすい必要があります。 テキストは壁に貼られていたり、物理的なオブジェクトに重ねられていたりします。 デジタル ユーザー インターフェイスと一緒に浮かんでいる場合もあります。 どのようなコンテキストであっても、読みやすさと認識のために同じ文字体裁の規則を適用します。

明確な階層を作成する

異なる文字のサイズと太さを使うことで、コントラストと階層を構築します。 文字の傾斜を定義し、アプリ エクスペリエンス全体でそれに従うことで、一貫した情報階層を持つ優れたユーザー エクスペリエンスを提供します。

種類のランプの例
文字の傾斜を定義し、アプリ エクスペリエンス全体でそれに従う

フォントを制限する

1 つのコンテキストで複数のフォント ファミリを使うのは避けてください。 フォントが多すぎると、エクスペリエンスの調和と一貫性が損なわれ、情報の使用が難しくなります。 HoloLens では、物理環境の上に情報が重ねて表示されるため、使うフォント スタイルが多すぎると、エクスペリエンスが低下します。 Segoe UI は、Microsoft のすべてのデジタル デザインに適したフォントです。 Windows Mixed Reality シェルで一貫して使われています。 Segoe UI フォント ファイルは、Windows デザイン ツールキット ページからダウンロードできます。

Segoe UI タイプフェイスについての詳細情報

太さが細いフォントを避ける

縦の細いストロークは振動し、判読しやすさが低下するため、42 pt 未満の文字サイズでは、ライトまたはセミライトのフォントの太さを使わないでください。 ストロークの太さが十分な最新のフォントが適しています。 たとえば、Helvetica と Arial は、HoloLens では標準または太字の太さで判読しやすくなります。

HoloLens では、ホログラムが加法光システムで構成されるため、白色のテキストは非常に判読しやすくなります。 スタート メニューとアプリ バーにも白色のテキストが使われています。 HoloLens ではバック プレートがなくても白色のテキストは十分に機能しますが、複雑な物理的背景があると文字が読みづらくなる可能性があります。 ユーザーのフォーカスを高め、物理的背景の影響を最小限に抑えるには、暗い色または色付きのバック プレートに白いテキストを使うことをお勧めします。


濃色または色付きのバック プレートに白いテキストを使用することをお勧めします。濃色または色付きのバック プレート上の白いテキストの例。

暗い色の文字を使う場合は、明るい色のバック プレートを使うと読みやすくなります。 加法配色システムでは、黒は透明として表示されます。 つまり、色付きのバック プレートを使わないと、黒色のテキストは見えません。

黒色の上の白色と白色のテキスト上の黒色の例
黒色の上の白色と白色のテキスト上の黒色の例

システム アプリの黒色のテキストの例 - Store と設定
システム アプリの黒色のテキストの例 - Store と設定



想像できるように、PC やタブレット デバイスで使う文字サイズ (通常は 12 から 32pt) は、2 m の距離からは小さく見えます。 各フォントの特性にもよりますが、Microsoft ユーザー調査研究に基づくと、一般には、読みやすさを目的とした推奨の最小視野角とフォントの高さは 0.35° から 0.4° と 12.21 から 13.97 mm くらいです。 「Unity のテキスト」ページで紹介されている倍率で 35 から 40 pt くらいです。

0.45 m (45 cm) という近距離の対話式操作の場合、判読できる最小フォントの視野角と高さは 0.4° から 0.5° と 3.14 から 3.9mm です。 「Unity のテキスト」で紹介されている倍率で 9 から 12 pt くらいです。

近距離と遠距離の相互作用範囲近距離と遠距離の相互作用範囲のコンテンツ

読みやすい最小フォントサイズ

Distance 視野角 テキストの高さ フォント サイズ**
45 cm (直接操作距離) 0.4°~0.5° 3.14~3.9mm 8.9~11.13pt
2 m 0.35°~0.4° 12.21~13.97mm 34.63~39.58pt

快適に読みやすいフォントサイズ

Distance 視野角 テキストの高さ フォント サイズ**
45 cm (直接操作距離) 0.65°~0.8° 5.1~6.3mm 14.47~17.8pt
2 m 0.6°~0.75° 20.9~26.2mm 59.4~74.2pt

Segoe UI (Windows の既定フォント) は、ほとんどの場合、うまく機能します。 縦の細いストロークは振動し、判読しやすさが低下するため、小さいサイズでライトまたはセミ ライトのフォント ファミリを使うのは避けてください。 ストロークの太さが十分な最新のフォントが適しています。 たとえば、Helvetica と Arial は見た目が美しく、HoloLens では標準または太字の太さにすると判読しやすくなりなます。

Unity でのテキスト サイズの計算についての詳細については、「Unity のテキスト」を参照してください

表示角度表示距離、角度、およびテキストの高さ



リソース

Segoe フォント

(Zip ファイル)

HoloLens フォント

(Zip ファイル)

画像: HoloLens フォントには、Windows Mixed Reality で使われるシンボル グリフが用意されています。

HoloLens フォントは、Windows Mixed Realityで使用されるシンボル グリフを提供します。



関連項目