Metro 開発者が気を付けたいタイポグラフィーのこと。

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

自己紹介など吉竹 遼@ryo̲pan / http://yo-ry.com
ソフトウェア会社にてスマートフォンの UI デザインを担当。
Windows8 はじめました。
このような場でお話させて頂くのは初めてなので緊張してます！

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

もくじ・タイポグラフィーの「た」
・Windows8 とタイポグラフィー
・アプリを見ながら考えてみよう
・おまけ

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

タイポグラフィーの「た」
タイポグラフィーとは：印刷物の発展と同時に生まれた技術。主に可読性、視認性の向上を目指すとともに、美的要素を持たせるために用いられる。
一般的な意味としてはこんな感じですが、今ではシーンによって意味は変化します。
ここでは印刷物など、可読性、視認性に主体を置いたものをタイポグラフィーと呼びます。
美しいタイポグラフィーを構成するための要素はたくさんあります。
書体 / サイズ / ウェイト / 色 / マージン などなど

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー
Metro スタイルにおいて、タイポグラフィーは重要な要素です。
iOS や Android で使われているような質感のあるボタン、ボーダーなどの表現は推奨されていないため、アプリのレイアウトの良し悪しは、自然とタイポグラフィーに左右されるためです。（もちろん、必ずしもそうではありません）
美しいアプリケーションをつくるためには美しいタイポグラフィーができなければ魅力は半減すると言っても過言ではないと思います。
Metro スタイルではユーザーがどのアプリを使っても操作に迷わないように様々なガイドラインを設けていますが、もちろんタイポグラフィーに関するガイドラインもあります。

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー
msdn からガイドラインを引っ張ってくると…
Segoe UI フォントを用いる。ウェイト（書体の太さ）は 5 種類。
種類はページヘッダ / ページサブヘッダ / アイテムタイトル / ナビゲーション / 本文
リンク /3 次情報
サイズは42pt/20pt（大きいと感じた場合は 16pt）/11pt/9ptが基本構成。ただし、これは欧文を元にした数値なので、他言語の場合、書体やサイズを変えたほうがより良い構成になる場合があります。

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー
42pt
20pt

11pt

9pt

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー
マージンは1 sub unit 5x5px
1 unit 20x20px
1 column 80x80px
を基本構成とし、これらの倍数の数をレイアウトに用いる。

1 sub unit

1 unit1 column

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー
140px

120px

10px

80px

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー

基本的には、テンプレートに沿って作成していけば問題はない。

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー

ただ、気を付けるべきところもちらほら…

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

アプリを見ながら考えてみよう

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

アプリを見ながら考えてみよう
ここだけタップできる！

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

アプリを見ながら考えてみよう

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

アプリを見ながら考えてみよう
ここだけタップできない！

こっちとかはタップできる

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

アプリを見ながら考えてみよう
Metro スタイルのもとになった地下鉄の標識や、スイスタイポグラフィーといった印刷物のデザインは、「視る」ためのデザイン、「情報を把握する」ためのデザインであり、「触れる」ためのデザインではない。
iOS や Android では、現実世界と同じような「触れる」ためのインタラクション、アフォーダンスを UI に取り入れているため、そんなに苦労はしない（Android はICS でだいぶ変わったけど）。
Web と同じことが言えますが、テキスト表示のみの場合、ナビゲーションに気を使う必要があります。
（でも Metro スタイル的に「See more」的表現は好ましくないらしい）（「Xbox LIVE ゲーム」で「もっと見る」使われてるけどね！）

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

Windows8 とタイポグラフィー
Metro スタイルのもとになった地下鉄の標識や、スイスタイポグラフィーといった印刷物のデザインは、「視る」ためのデザイン、「情報を把握する」ためのデザインであり、「触れる」ためのデザインではない。
iOS や Android では、現実世界と同じような「触れる」ためのインタラクション、アフォーダンスを UI に取り入れているため、そんなに苦労はしない（Android はICS でだいぶ変わったけど）。
Web と同じことが言えますが、テキスト表示のみの場合、ナビゲーションに気を使う必要があります。
（でも Metro スタイル的に「See more」的表現は好ましくないらしい）（「Xbox LIVE ゲーム」で「もっと見る」使われてるけどね！）

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

おまけガイドラインと独自性のはなし。

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

おまけガイドラインはあくまでもガイドライン。
必ずしも守る必要はないが、守ったほうがいいことのほうが多いのは確か。
MetroStyle の場合デザインが足し算しかできないため、表面的な独自性＝デコラティブなデザインになり、Metro のデザイン原則から外れてしまうことがある。
一方で、装飾されていると他のアプリと比較して良い印象をユーザーに与える場合もある（私たちが生きている時間は Metro よりも現実のほうが多い）。
Metro の原則から離れずに独自性を見出し、本当に意味のある要素なのかどうか、デザインする側は慎重に取捨選択する必要がある。

MetroStyleDeveloper #2

Metro 開発者が気を付けたいタイポグラフィーのこと。

ご清聴ありがとうございました。

MetroStyleDeveloper #2