フラットデザイン実装における3つの重要なポイントとは：UXガイドラインから読み解く（2/2 ページ）

フラットデザインをよく知る筆者が、グリッド、タイポグラフィ、予測の3つの観点からMS提供の「Windows 8.1ユーザー エクスペリエンスガイドライン」を読み解いていく。

[菊池崇，Web Directions East]

【1】グリッド

　グリッドは簡単にいうとマス目状のガイドラインです。ガイドラインに添って文字やデザインのパーツを配置することでユーザーが視覚的に情報のまとまりを直感的に理解できるようになります。

　UXガイドにはグリッド、レイアウト、この後に紹介するタイポグラフィについて細かに説明されています。

固有のブランドを喚起する例（「Windows 8.1ユーザー エクスペリエンスガイドライン」（日本マイクロソフト）67ページ目から引用）

ユニット

　グリッドデザインでは下記のようにピンクの縦長の矩形を「カラム」、矩形同士の間を「ガーター」と呼びます、そして黒い線を「ハングライン」と呼びます。また、青い部分を「ユニット」と呼びます。

　ユニットが大きければ大きいほど情報の占有面積が大きくなります。単純に情報として大きく表示したいパーツはユニットを多く使って表示します。

ライブ タイル（「Windows 8.1ユーザー エクスペリエンスガイドライン」（日本マイクロソフト）26ページ目から引用）

グリッドの設計

　ではグリッドはどうやって設計するのでしょうか？

　実はグリッドは自由に自分で設計して構いません。「960gs」など、代表的なグリッドのサイトでは12カラムや16カラムなどが非常に多く使われていますが、その設計に縛られることはないのです。1つポイントとして言えることは偶数のカラムを用意すると設計しやすいでしょう。

　カラムを設定したら、後はハングラインを自由に設定してユニットを作り出してください。極端にユニットの高さがなかったりすると、不格好になります。ハングラインを上下に移動させて適宜、ユニットのサイズを設定するとよいでしょう。

　下記のカレンダーなどはグリッドをそのまま利用している例ともいえます。非常に参考になる例の一つでしょう。

チャームとコントラクト（「Windows 8.1ユーザー エクスペリエンスガイドライン」（日本マイクロソフト）33ページ目から引用）

【2】タイポグラフィ

　デザインというとレイアウトや色を整えることに注力しがちになりますが、Webサイトで色やレイアウトなどのデザインパーツをそぎ落とすと、そこにはテキストが残り、その読みやすさからデザインはスタートします。

　Windows 8のデザイン思想にあるバウハウスでは「どこまで余計なものを削ぎ落とすか」というデザイン手法を核としています。テキストこそがWebデザインの核といえるでしょう。

　大見出しは大きく、小見出しは小さく、といったような情報を整理する文字組みを大切にします。逆に全てが同じ大きさのテキストだと、メリハリがなく、どこから読んだらいいのか分からなくなるでしょう。

　下記の例では、色味が少ないですが、Aの見出しが一番大きく、B、Eと文字サイズが小さくなっています。また右に行くほど見出しが小さくなるのが分かるでしょう。この文字組であれば左から右に情報は並んでいることに気付くと思います。

Windowsストアアプリのレイアウトとタイポグラフィを基本的なブログ記事でどのように適用するか（「Windows 8.1ユーザー エクスペリエンスガイドライン」（日本マイクロソフト）193ページ目から引用）

　細かい部分のデザインでいうと、ガイドライン上では、文字の大きさに合わせて文字同士の間隔（CSSでいうletter-spacing）も調整しています。

Segoe UIでは、フォントのサイズと太さに基づいて、次のトラッキング値をお勧めします（「Windows 8.1ユーザー エクスペリエンスガイドライン」（日本マイクロソフト）194ページ目から引用）

【3】予測

　使いやすいデザインとは、ユーザーが考えなくても利用できるデザインです。その形から使い方が何気なく分かるものです。たまに複雑怪奇な形のツールで使い方が予測できないものがありますが、それは良いデザインとはいえません。

　Windows 8では、非常に分かりやすくユーザーに使い方を予測させています。ここまで出てきたスクリーンショットのサンプルにもそのテクニックが利用されています。

チャームとコントラクト（「Windows 8.1ユーザー エクスペリエンスガイドライン」（日本マイクロソフト）33ページ目から引用）

　フラットデザインでは、影などを利用した奥行きの表現ができません。その代わり、グリッドからずれたパネルが重なることによって、「奥行き」「重なり」を表現しています。赤枠の部分はグリッドからずれて配置されることで重なりをユーザーが感じ取ることができます。

　また、下記のスクリーンショットも情報が赤枠の部分が不自然に切れていることでユーザーは右に上方スクロールができることを無意識に理解してスワイプします。

ライブ タイル（「Windows 8.1ユーザー エクスペリエンスガイドライン」（日本マイクロソフト）26ページ目から引用）

　影や立体感に頼らずとも、このようにして奥行きを表現できるのです。

最も美しい形は、機能までも極限に減らすこと

　今まで紹介した内容は、フラットデザインというよりユーザーエクスペリエンスの話ではないのかと思われる方もいらっしゃるかもしれません。Windows 8のユーザーエクスペリエンスのディレクターSam Moreau氏は、以下の言葉を残しています

Reducing down to the most beautiful form and function--that’s what the Bauhaus was all about," Moreau says.

（日本語訳）最も美しい形は、機能までも極限に減らすこと、それがバウハウスだ。

　冒頭に紹介したようにフラットデザインを実装する際にバウハウスから学び、バウハウスについて言葉を残しているのですから、フラットデザインを実装するためには、バウハウスの“機能美”の考え方が重要であるといえます。

　デザインは単なる装飾ではありません。機能を磨き上げ、それを補完すると考えると、きっと使いやすいフラットデザインが実現でき、Windows 8のアプリが作れるのではないでしょうか。もちろん、iOSやAndroidでも今回の内容は役立つと思います。

菊池 崇

Web Directions East CEO／allWebクリエイター塾 講師

ウェブテクニカルストラテジスト、ウェブコンサルタント。

米国でマーケティング専攻。日米貿易会社経営を経て、オーストラリア発祥、米国、カナダ、イギリスなど世界各所で開催されている世界的に有名なカンファレンス「Web Directions」の日本版「Web Directions East LLC」の発起人＆CEOを務める。allWebクリエイター塾では、HTML5、CSS講座を担当。AsciiWebProfessionalから「レスポンシブWebデザイン」