マイクロソフト エバンジェリストのブログ

日本マイクロソフトのエバンジェリストが、技術情報を発信するブログです!

タブレットアプリのデザイン

エバンジェリスト高橋です。

私の場合特にWindows Phone のアプリ開発周りにをずっとやっているので特にそう思うんですが、「タブレットのアプリケーションの画面デザインってなぜか難しい」って思うんです。そして、これまでの Windows のアプリデザインとも違うんです。

なんでだろう?って考えるといくつか要因がありそうです

・ 画面が広い。Phoneに比べると広すぎて画面を埋めるのに困る
・ 広いのでまとまらない、統一感がなくなる
・ デスクトップ感覚で作ると使いづらい

この辺りの話って、実はちょっとしたヒントで解決するものが多かったりします。ですので例をあげながら MSDNのUXパターンの記事を紹介してみましょうか。

Windows ストアアプリ UXパターン
http://aka.ms/8ux

埋まらない。ってのはやっぱり最初の設計が少し足りないせいかもしれません。まぁ、気軽に作り始めて作りながら考える、ってのも Visual Studio の便利なところではあったりしますけどね。
設計といってもそれほど大した話ではなく、どういったアプリにするか、そのために何が必要な要素か、それで子の画面では何をするのか?といったことを考えること。持って使う?置いて使う?これだけでも画面のつくり方は異なります。

この辺りの考え方はこの辺をぜひ眺めてみてください
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh465427

統一感、という意味ではデザインのパターンが決まっているか?というのが重要ですね。色や形のデザインパターンです。ひとまず無難なのは標準のコントロールや標準のテンプレートをもとに初めて見るのがいいでしょうね。
後、統一という意味では、見た目のものだけではなく、見た目でもアニメーションであったり、通知方法だったり、というのも統一パターンです。戻る時のアニメーション、進むときのアニメーション、これが統一されているだけでもユーザーには理解しやすく安心できるアプリになります。さらに操作方法の統一も重要で、こういう操作はこうやってというのはOSレベルである程度身についてしまうものです。これをアプリが合わせるのは大事なことですね。

UXガイドライン
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh465424

デスクトップ同様に作ると使いづらい。これもよくあることです。特にデスクトップアプリは1画面ですべて完結させたりするものが多く、結果としてすべての要素を画面に入れます。そして、マウスとキーボードで操作することを念頭に作られています。
しかし、タブれとはそうではない。重要なのは見やすいこと、そしてタッチで操作しやすいことだったりします。タッチ前提になれば、操作できる対象は必然的に大きくなります。当然情報量は減るので無駄なものを表示する余裕はありません。今すぐに使わないメニューは隠すようにすべきです。目的によってある領域の情報しか使わないのであればそれは目的別に画面を分けるべきです。

タッチパターン
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465415.aspx

なので、もう一度「どういうシチュエーションで使うのか?」「何をしたいのか?」そういったことをいったんきっちり考えてくると、非常に優れたアプリになったりします。

このためにもぜひ、一度UXパターンの記事は見てみてください。
http://aka.ms/8ux