モバイルWebのUIデザインことはじめ : 第6回 プラットフォーム別のデザイン特性ーWindowsの場合
ガイドライン紹介のしめくくりはWindowsのデザインガイドラインの紹介です。
Windowsガイドラインは開発者向けリソース置き場やデザインに特化したリソース置き場など、複数のドメインに点在していて、ちょっと参照しづらいという難点があります。そこで、入門者が読んでおくと良い部分をピックアップしました。
Windows的モダンスタイルがわかる考え方
Microsoftによるガイドラインのなかでもいわゆる「モダンスタイル」のWindows 8スタイルの世界観を説明したWindows 8.1ユーザーエクスペリエンスガイドラインには、デザイナーにとって興味深い部分がいくつかあります。
Windowsプラットフォームという環境におけるデザインの質の定義や、独自のUI的な機能の使いどころ紹介、実際の実装手法に関する具体的な指南などが774ページにわたって綴られています。
Windows 8.1 UX ガイドライン (PDF/18.2 MB)
Windows 8.1ユーザー エクスペリエンスガイドラインのハイライト
Windowsのデザインガイドラインは、主にPCやタブレットといった大きなディスプレイ向けのアプリをターゲットにした構成になっています。中でも、どんなウインドウサイズでも共通して参考にできるスタイリングの方向性について紹介します。
スイス様式のグリッドデザインに影響を受けている
Windowsアプリのレイアウトは、フォントデザインの美しさ、見やすさを重視したグリッドデザインを推奨しています。レイアウトを決定する最小単位（エレメント）と、最小単位の集合であるモジュールを画面設計に使い、文字が目立つ印象に仕上げる点が特徴です。ちなみにスイス様式のデザイナーはヨゼフ・ミューラー＝ブロックマンとエミール・ルーダーの二人が立役者として有名です。
Saul Bass（ソール・バス）に影響を受けている
Saul Bassは、1960年代を中心に活躍したデザイナーです。映画のタイトルアニメーションを芸術に昇華させた最初の人物として知られています。タイポグラフィックと幾何学的なグラフィックに映画の内容を示唆する動きを付けるという、見た目は抽象的ながら意味や必然性がしっかりと把握できるアニメーションが持ち味です。このソール風の表現に影響を受けていると記しています。
代表的なSaul Bassの作品：
It’s a Mad Mad Mad Mad World – title sequence by Saul Bass
デジタル メディアの利点を最大限に活用
ガイドラインの「モダンデザイン」の節で「望ましいUI」を以下のように説明しています。
”ユーザーは、テクノロジとデジタル操作に精通するようになり、より強力でスケーラブルなデザイン言語に取り組む準備が整ってきました。これが本当のデジタル原則の根拠です。可能な場合は、直感を犠牲にすることなくインターフェイスをそぎ落とすることをお勧めします。”
要約すると、ボタンインターフェースに頼らず、ジェスチャー操作を臆せず活用することを推奨しているわけです。今や画面にボタンが無くても何をしたらよいかわからないユーザーは少ない、という見解を前提に、Windows UIのスタイルの正当性を説明してます。
Windows Phoneに特化したデザインガイドライン
次に、スマートフォンに特化したMSのデザイン原則のうち、プラットフォームを問わずデザイン作業全般で参考になりそうな個所を紹介します。
Windows Phoneのデザインガイドラインは、
Windows Phone のユーザー エクスペリエンスのデザイン ガイドライン
にまとめられています。
アプリのUIデザインは初めて。という人でも、このデザインガイドラインに一通り目を通すことで、必要な実務内容が把握できるようになっています。
このなかの「Windows Phone のアプリケーション デザイン プロセス」の１項目である
では、Windows PhoneのUIデザインのありようを
「Windows Phone では、コンテンツがインターフェイスです。」
と簡潔に説明しています。
「ユーザーは、画面に表示される文字、オブジェクト、メディアなどを直接操作できるものだと考え」
ているので、コンテンツを操作するためのボタンコントロールは不要だと説明しています。これはスマートフォンだけでなく全てのタッチデバイスに共通するデザイン原則ですね。
さらにアプリの画面には、誤操作を防ぐためにコンテンツ間の余白が重要だと繰り返し述べています。１画面に置く見出しの数は４つ以内にするなど、具体的に部品の数をできるだけ少なく控える設計を推奨しています。
Windowsの場合、デザイナーが工夫を凝らした独自のUIがアプリの質を決める機会は少ないです。むしろ、アプリの質はコンテンツの質とイコールといえます。
また、Windowsプラットフォームには「パノラマビュー」という独自のUIパターンがあります。
これは、レスポンシブなレイアウトパターンで、ラージスクリーンではアプリの全幅を表示し、スモールスクリーンで見た場合は左端の一部だけをみせて、あとは左方向にスワイプすることで右側にあふれたコンテンツ全体を閲覧するという使い方をします
この設計は指一本の単純な操作で仕分けしたコンテンツのカテゴリ表示を切り替えることが目的です。ここからも、UIに対する工夫は最小限にしてコンテンツの質向上にコストを割くことが強く推奨されていることがわかります。
その他、モバイル向けのデザイン原則を網羅的に解説したブログ記事も参考になります。
The windows Phone 8 design style （英語のみ）
msdn内のブログ記事です。モバイルサイズのデザインに必要な考え方がまとまっています。
PSD形式のデザインリソースも入手可能
Windows Phone 8用のデザインリソースも提供されています。ここには]UIパーツや基本的な画面のレイアウトがPSDファイルにまとめられています。そのままアプリ開発に活用できます。
UIパーツだけでなく、アプリを企画する段階で何について検討すべきかをまとめたテンプレート（デザインブリーフテンプレート）や、
情報設計（インフォメーション・アーキテクチャ）を考えるための画面フロー図のサンプル（IAテンプレート）も含まれていて、デザインのいろいろな工程で活用できる資料になっています。ぜひ一度チェックしてみてくださいね。