Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

デブサミ2011レポート
押さえておこう!モバイル開発におけるUXの考え方

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/03/30 14:00

 セッションのテーマは、モバイルアプリケーションにおけるUI/UX。本セッションでは、日本のキャリアから未発売のWindows Phone 7における開発がテーマだが、世界最大の携帯電話メーカー、ノキアが採用を発表した直後というタイミング。モバイルアプリケーション開発における基本的なUI・UXを押さえ、最新トレンド情報入手の重要性を説くなど、他プラットフォームのモバイル開発者にとっても示唆に富んだ内容となった。

 セッションのテーマは、モバイルアプリケーションにおけるUI/UX。本セッションでは、日本のキャリアから未発売のWindows Phone 7における開発がテーマだが、世界最大の携帯電話メーカー、ノキアが採用を発表した直後というタイミング。モバイルアプリケーション開発における基本的なUI・UXを押さえ、最新トレンド情報入手の重要性を説くなど、他プラットフォームのモバイル開発者にとっても示唆に富んだ内容となった。

インフラジスティックス・ジャパン株式会社 デベロッパー エバンジェリスト 池原 大然 氏
インフラジスティックス・ジャパン株式会社 デベロッパー エバンジェリスト 池原 大然 氏

Windows Phone 7のUI・UX開発はSilverlight、XAMLが基本

 Windows Phone 7の開発環境は、無償で入手できる。マイクロソフトのAppHubと呼ばれているサイトから、Windows Phone Developer Tools(以下、WPDT)をダウンロードする。WPDTには、開発環境の「Visual Studio 2010 Express for Windows Phone」やエミュレータなど、開発に必要な一通りのツールが含まれている。現時点では英語版のみだが、日本語環境の中でも問題なく使うことができる。

 使用できるフレームワークはSilverlight for Windows Phoneと、XNA Game Studio 4.0。業務アプリケーションや高いパフォーマンスを要求されないゲームの開発であれば、主に前者を使うことになる。画面設計はXAMLで記述し、イベント処理やビジネス・ロジックなどはC#やVBのコードで記述する、コードビハインドと呼ばれる形態が採用されている。ただしVBを使うためには、有償のVisual Studio 2010 Professionalを入れておく必要がある。

 コードサンプルやトレーニングキットなど、開発に必要なリソースは、すべてWindows Phoneデベロッパーセンターのサイトに用意されている。中でも池原氏が一読を勧めるのが、モバイル開発におけるUXの考え方を記した「UIデザイン/操作ガイド」だ。

解像度の制限、入力解釈実装の課題を克服するアイデアとツール

 PCとモバイルで最も異なるのが画面の解像度だ。池原氏が持参した実機、HTC HD7では4.3インチで480×800。モバイルの方が小さいが、特にスマートフォンになってから入力の主流は指タッチであり、PCのカーソルに比較して大きな入力領域が必要になる。デザインガイドで推奨されている、タッチを許容するサイズは9ミリ以上で、見た目のサイズは対象の60~100%、7ミリ以上。タッチ対象の間には少なくとも2ミリ以上のスペースを入れるべきだとしている。

 入力の解釈にも大きな違いがある。PCではマウスアップ、ダウン、ムーブが、イベント情報取得の代表的手法になっている。一方、Windows Phone 7でサポートされている指による入力パターンはジェスチャーと呼ばれており、タップ(クリックに相当)、ダブルタップ(ダブルクリック)、パン(ドラッグ)、フリック(指を置いた後、素早く動かす)、タッチアンドホールド(指を下ろした後、一定時間そのままにする)、縮小と拡大(2本の指による操作)の6種類がある。

 WPDTだけを導入した環境では、PC版のイベントと同様にイベントを処理し、ジェスチャーを判断する必要がある。例えばダブルタップの場合、1回目と2回目のタップの間隔が一定以内の時間で、場所が同じである場合にダブルタップと解釈する。これでは、実装に数多くの工数がかかってしまう。そこでSilverlight Toolkit for Windows PhoneをWPDTに追加すれば、GestureServiceクラスなどにより効率的にジェスチャーを実装できる。

 またWindows Phone 7では、小さな画面を有効に使うため、画面レイアウトの配置に関して独自のアプローチを取っている。ピボットとパノラマと呼ばれている考え方だ。

 パノラマは、Windows Phone 7の画面領域に対し、横に広い絵を置くイメージ。そこに1画面分の絵を並べていく。画面1から2に行く場合は、フリックを使い、横にずらすような形になる。メインメニュー、オプション設定、実行、などのように画面を入れ込むことができる。

 一方ピボットは、1画面の中にオプションを出しておき、ユーザーの操作に応じて画面を切り替える時などで使う。適している使い方はデータのフィルタリング、1つのアプリケーションにおいて複数のデータを別々に表示、などになる。

モバイル開発を支援するツール、情報サイトを提供

 モバイル対応アプリケーションでは、PCとは違う新たなUI・UXの設計が必要になる。まず、プラットフォームがサポートする機能を十二分に活用することだ。そのサポートのため、インフラジスティックスでは2011年中にVisual Studio対応の開発支援コンポーネント「NetAdvantage」のモバイル対応版をリリースする予定だ。

 池原氏は「今後、新たなUI、UXが出てくる可能性が高い。先行すればするほど、トップになれる可能性が高い」と指摘する。インフラジスティックスでは、UXデザインパターンライブラリ「Quince」(クインス)というサイトで無償公開しており、PCアプリケーションに加えWindows Phone、iPhone、Androidなどでは現在、どういうパターンが主流なのか情報を得ることができる。池原氏は、同サイトでの継続的な検索など、情報収集の重要性を強調した。

図:6種類の「ジェスチャー」
6種類の「ジェスチャー」
お問い合わせ

インフラジスティックス・ジャパン株式会社

東京都渋谷区神宮前3-25-12 パシフィックスクエア原宿 3F

http://jp.infragistics.com/



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:デブサミ2011セッションレポート

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5