デザイン・ガイドラインに従って画面を作成するには？［Win 8］：WinRT／Metro TIPS

Windowsストア・アプリ（通称： Metroスタイル・アプリ）のUIデザインは、デスクトップ・アプリのそれと大幅に異なる。デザイン・ルールを調べ方のコツを説明する。

» 2012年08月23日 00時00分公開

[山本康彦，BluewaterSoft]

［注意］“Metro”という用語について

　Windows 8では、「WinRT」という開発基盤を用いた「Metroスタイル・アプリ」が利用できる。この“Metro”とは、「地下鉄（＝メトロ）の案内板のようなシンプルで直感的なUI（ユーザー・インターフェイス）デザイン」を表す用語であるが、マイクロソフトは正式リリース後にはその用語を廃止予定だと発表しており、最終的にどういう用語に変更されるかはまだ正式発表されていない。現時点で、マイクロソフト社内の各部門でも「旧Metroスタイル・アプリ」に対する呼び名が異なっているようで、「Modernスタイル・アプリ」「Windowsストア・アプリ」「Windows 8アプリ」などと呼ばれているようだ。　正式な用語発表が行われるまで、本「WinRT／Metro TIPS」では、UIデザイン名においては、開発者間での通称として“Metro”という用語を使用し続ける。アプリ種別名としては、Visual Studio 2012のプロジェクト・テンプレートとの用語の一貫性を重視して「Windowsストア・アプリ」という用語を用いる。WinRTにより開発できるもの全般を指す場合は「WinRTアプリ」という用語を用いる。各用語の使い分けを、.NETの場合と対比して、次の表にまとめた。


用語の対象	.NETの用語例	WinRTの用語例（現時点）
開発基盤	.NET（.NET Framework）	WinRT（Windows Runtime）
アプリ全般	.NETアプリ	WinRTアプリ
UIデザイン	Windows	Modern（通称： Metro）
技術カテゴリ（一例）	Windowsデスクトップ	Windowsストア
技術（一例）	WPF	.NET for Windows Store apps （旧称： .NET for Metro style apps）
アプリ種別（一例）	デスクトップ・アプリ（あるいは、WPFアプリ）	Windowsストア・アプリ（旧称： Metroスタイル・アプリ）

本TIPSの用語ルール（.NETの場合との対比）

　Windowsストア・アプリ（通称： Metroスタイル・アプリ）を作ろうとすると、今までとは大幅に異なるUXに戸惑い、どのようにデザインすればよいかよく分からない人も多いのではないだろうか？そんなときには、まずVisual Studioのテンプレートや実際にWindowsストアで配布されているアプリを眺めて見当を付け、それからMSDNを調べるとよい。

　Windowsストア・アプリは、Windowsストアで配布するための審査を受ける必要があるが、そこではデザインについても細かなガイドラインに従ってチェックされる。そこで本稿では、デザイン・ガイドラインの概要について説明する。

●事前準備

　Windows 8向けのWindowsストア・アプリを開発するには、Windows 8とVisual Studio 2012（以降、VS 2012）が必要である。Windows 8は、製品版がMSDNサブスクリプション上ですでに入手可能となっているが、90日間無償の評価版も利用できる。VS 2012も同じくMSDNサブスクリプション上ですでに入手可能だが、無償のVisual Studio Express 2012 for Windows 8（以降、VS 2012 Exp）を利用してもよい。

　本稿ではWindows 8とVS 2012 Expを使用する。

●テンプレートのデザインからデザイン・ルールを調べてみる

　さっそくVS 2012 Expで、Windowsストア・アプリの新しいプロジェクトを作ってみよう。

VS 2012 Expの［新しいプロジェクト］ダイアログ
［Windows ストア］のカテゴリを表示したところ。ここではC#だが、VB（Visual Basic）でも同様。

　上の画面に示した［新しいプロジェクト］ダイアログには、［Windows ストア］のテンプレートがいくつか並ぶが、「グリッドアプリケーション (XAML)」や「分割アプリケーション (XAML)」などのテンプレートがデザインの参考になる。ここでは「グリッドアプリケーション (XAML)」テンプレートを選んでみる。

　自動生成されたひな型XAMLコードの画面デザインをいくつか見てもらいたい。例えば次の画面は、ItemDetailPage.xamlファイル（＝項目の詳細ページ）をXAMLデザイナ上で表示した例である。

ItemDetailPage.xamlファイルの画面デザインの表示（XAMLデザイナ）
「グリッドアプリケーション (XAML)」テンプレートにより自動生成されたひな型XAMLコードをXAMLデザイナ上で表示しているところ。
　 （1）［戻る］ボタン（丸の中に左向き矢印）。
　 （2）ページ・ヘッダ（「Metro Tips: 001」）。

　画面の左上付近を拡大してみよう。

ItemDetailPage.xamlファイルの左上部分の拡大（XAMLデザイナ）
グリッド・アプリケーションのページ・ヘッダ部分（＝画面の左上付近）をXAMLデザイナ上で拡大表示したところ。
　 （1）［戻る］ボタンが入っているグリッド・セルは幅120ピクセル、高さ140ピクセル。
　 （2）ページ・ヘッダの下端は、画面上端から100ピクセル。

　ほかのページ（具体的には「GroupedItemsPage.xamlファイル：グループ項目ページ」や「GroupDetailPage.xamlファイル：グループの詳細ページ」）の画面デザインも、左上部分は同じ配置になっている。さらに、Windows 8に標準で入っているWindowsストア・アプリ（例えば「ゲーム」）や、Windowsストアから無料のアプリをいくつかインストールしてみて、確かめてほしい。ページ・ヘッダ（＝タイトル）を持っているアプリは、ほぼ例外なく同じサイズ・同じ位置にレイアウトされていることが分かるだろう。

　これはどういうことだろうか？そこでMSDNを調べてみると、次のルールを見つけることができる。

●グリッド・システムに関するデザイン・ガイドライン

　画面の主要な要素の配置には、ガイドラインがある。「グリッド・システム」と呼ばれる。