Windows ストア アプリのUI開発で心がけたいポイント7つ


モダンUIと呼ばれているWindows ストア アプリにも適用される新しいWindowsのUIは、作法が細かく決まっており、なかなかオリジナリティが出しにくいと受け取られがちです。
しかしUIの設計次第では、モダンUIの特徴を活かしつつオリジナリティを出すことができると考えています。
Windows ストア アプリのUIを設計、開発をおこなうときに心がけているポイントを7つまとめてみました。

①マージンに一貫性を持たせる

Windowsストアアプリは、グリッドレイアウトが推奨されています。
要素のマージンに一貫性を持たせて規則正しく配置すると、整然とした印象になります。ペーパープロトタイピングには方眼用紙を使用することをおすすめします。

しかし、いざ実装段階に入るといつの間にかマージンがページ単位で若干ずれている…ということもよくあります。
開発時に、まず全てのページに適用できるスタイルを定義しておくとページ間のスタイルのずれを防ぐことができます。
特にヘッダー(おおよそ140ピクセル)、フッターの部分(アプリバーに重ならない90ピクセル以上)は共通して設定しておくと便利です。グループでまとめられたGridViewのセクション間やコンテンツ間のMargin、タイル内のPaddingなどは共通で設定した値を使用するのがおすすめです。

また、テンプレートを使っていない場合、セマンティックズーム付のGridViewなどは、ピンチ操作する領域がページ全体になるのでPaddingプロパティで余白を設定します。
その他「Blend」を使用して開発をおこなうときには、気づかないうちにMarginプロパティが独自に指定されてしまうこともありますので注意が必要です。

モダンUIは一般的にコンテンツを枠線で囲むことをしません。
代わりに、コンテンツと背景の色差やコントラスト比で境界をあらわします。さらに角丸をしないため、全体的にパキッとした印象になります。境界線がくっきりしている分、要素の間隔のずれは目立ちやすいので気を配っておくとよいと思います。

②カラー、タイポグラフィに一貫性を持たせる

マージンと同様にカラー、タイポグラフィもアプリで使用するバリエーションをあらかじめ設定しておくことがおすすめです。
アプリ内で使用するカラーやテキストスタイルを決めておくことで、変更にも柔軟に対応できます。

カラーに関しては、アプリで使用するカラーとブラシの定義、各パーツのブラシの定義を設定リソースディクショナリーとして切り出しておくことで、カラーのカスタマイズが設定ファイルの変更だけで行えるようにできます。
また、アプリ内のカラーを変更する機能やハイコントラストモードに対応させることも可能になります。
テキストも同様に、FontSizeやLineHeight、FontFamilyなどを指定したスタイルを設定しておくと便利です。
テンプレートを使用している場合には「StandardStyles.xaml」のスタイルを参照することも有効です。

ついつい各パーツごとに指定したくなる部分ではありますが、ページ数やパーツが増えれば増えるほど変更が困難になってくる大事な部分だと思います。
開発をはじめるときに、まず設定用のリソースディクショナリーを作成するところから始めることを心がけています。

③デバイスの画面解像度や向きによって最適な表示をする

Windows ストア アプリは、画面解像度やデバイスの向きごとの見え方を確認しておく必要があります。
特に、TextTrimmingが必要になる可能性のあるTextBlockや、モーダルポップアップの表示位置、画面サイズと相対的にサイズが指定してあるコンテンツなど関して注意が必要です。

デバイスの向きの変化を検知するには以下のような方法があります。
XAMLでは「VisualState」を使うと簡単に設定を行うことが可能です。
その他、C#で「OrientationChangedイベント」を取得する方法、「SizeChangedイベント」を取得する方法などがあります。

また、画面解像度によって画像品質が落ちてしまうことのないよう、アプリ内で使用する画像は拡大率に合わせて数パターン用意するか、SVGファイルを使用するなどの対応が必要になります。

④アプリバーを活用する

アプリバーに配置するパーツは、アプリごとにさまざまだと思いますが、代表的な使い方を3つまとめてみました。

1.ナビゲーション

アプリの中で基本的に共通して使うグローバルナビゲーションとして利用されるものです。
Windowsストアアプリは階層構造を持つことの多いため、主なページへの遷移方法がハブページにしかない状態になってしまうとユーザーが使いにくさを感じる要因になってしまいます。
上部アプリバーにナビゲーションを設けておくのがおすすめです。上図の上部アプリバーのようなタイルデザインを使用するアプリも多いです。一般的なAppBarButton(丸いコマンド)と差別化しやすく、目につきやすいので、グローバルナビゲーションはタイルの形状にするように心がけています。

また、ナビゲーション対象のページに使用頻度の高い表示メニューが存在する場合には、アプリバーを開閉式の2段にしてショートカットタイルをつくるのも効果的です。

2.コマンド

ページに対するコマンドにはAppBarButton(丸いコマンド)を使用します。ナビゲーションバーを上部アプリバーに使用するときには、下部アプリバーを使用するのが基本です。

ページ内コンテンツの選択状態によって表示される「選択コマンド」は、下部アプリバーの左端に表示させます。常時表示されているコマンドが既に下部アプリバーの左に存在する場合には、間にセパレーターを表示させます。
また、「選択コマンド」を使用するときには、「選択を解除する」コマンドを表示させることを心がけています。必要に応じて、「すべて選択する」コマンドもあると便利かと思います。

3.設定チャームに追加したメニュー

アプリの設定やヘルプはチャームにメニューを追加しておくことが基本です。
この設定やヘルプは、ページとして表示されるものやフライアウトで表示されるものがあります。
しかし、ユーザーが設定チャームのメニューに気づかない場合も多く、そうなってしまっては本末転倒です。
アプリの中で設定やヘルプの重要性が高い場合にはアプリバーのコマンドとしてこれらのメニューを追加することも有効だと考えています。

⑤セマンティックズームを取り入れる

Windows ストア アプリは、横のパンが基本となっており、多くのコンテンツがグループにまとめられて一つのページに収まっているのが特徴です。そのため、ページングの代わりに遅延ローディングといった機能があると考えています。

「セマンティックズーム」とは、目的のコンテンツをページ内から探し出すための機能です。
さらに、ページ内のコンテンツを上位のグループで俯瞰して見ることができる機能でもあります。
(個人的にWindows 8の一番好きな機能です。)

しかし、セマンティックズームを効果的に実装しているアプリはまだ少ないのが現状です。
下記の1のようなデフォルトの使い方が多いですが、設計次第で効果的に使える機能だと思います。
タイプを5つにまとめてみました。

1.グループごとにまとめられたGridView(標準)

グループ名(SectionTitle)を指標にして目的のコンテンツを探し出します。コンテンツの量が多い場合に効果的です。

2.グループごとにまとめられたGridView(グループを俯瞰して見ることに効果が期待できるケース)

目的のコンテンツを探し出す役割とともに、グループ単位でデータを俯瞰して見ることが可能になります。
グループの情報を記載したタイルとグラフを用いると把握しやすいです。

下図では、日別の月刊データをカレンダーで表示しています。
カレンダーを使って表すことでデータの分布や、曜日による傾向が見えます。

3.横に長いページ(項目が指標になるケース)

グループ化されていないコンテンツでも、各コンテンツに指標となる項目がある場合には
必要に応じてセマンティックズームをつけると情報を見つけやすくなります。

4.横に長いページ(指標になる項目がないケース)

コンテンツの量は多いが共通で扱える項目がない、といった場合には、コンテンツの情報を小さくして表示する(Zoomout)ことも有効だと考えています。
Windowsのスタート画面のセマンティックズームと同様です。

5.連続したコンテンツの一部分をプレビューしたページ

基本的にセマンティックズームは、ページ内でスクロールを行う機能ですが、このケースは例外です。
FlipViewや読書画面など、連続したコンテンツの一部分をページ内にプレビューしている場合に使います。
Microsoftの「リーダー」というアプリもこの仕様です。

⑥延長スプラッシュスクリーンをつかう

アプリ起動時のデータ読み込み等に時間がかかる可能性(今後の拡張も含めて)があるときには、延長スプラッシュスクリーンを用意しておくようにしています。
起動が遅いことによるユーザーのストレス軽減とアプリが自動的にOS側から落とされてしまわないようにする目的です。
延長スプラッシュスクリーンは、スプラッシュスクリーンのロゴは同様の位置に表示し、プログレスリングやプログレスバー、「読み込み中」などの文字を表示させることが多いです。

⑦タッチ操作とマウス操作を想定する

Windows ストア アプリへの入力方法は、タッチ、マウス、スタイラスペンなどがあります。基本的にどの入力方法でも同じ挙動が保証されていなくてはいけません。

  • 入力方法によって発生しないイベントを必須処理に利用していないか(Holdなど)
  • マウス操作時にスクロールバーは表示されるか(マウスホイールに依存してはいけない)
  • タップ(クリック)が必要なパーツの大きさは30×30ピクセル以上、マージンが10ピクセル以上か

シミュレータだけでなく、実機で実際に使用して、操作感を確かめることが大切だと考えています。