devsumi17 d-2

押さえておこう！
モバイル開発における
UX の考え方

17-D-2 池原大然
゗ンフラジステゖックス・ジャパン
デベロッパーエバンジェリスト

Developers Summit 2011

自己紹介
 池原大然（Neri）
 ゗ンフラジステゖックス・ジャパン
 INETA 登録スピーカー

 TwitterID: @Neri78
 Blog
 http://blogs.jp.infragistics.com/
blogs/dikehara/default.aspx


3 年前は
 開発サポート部門リーダ
 販売製品の技術サポートを担当

現在
 デベロッパーエバンジェリスト
 講演・執筆活動
 プリセールス
 トレーニング
運営


NetAdvantage シリーズ


本日お話しさせて頂くこと
 Windows Phone 7
ゕプリケーション開発について
 PC vs モバ゗ルその違い
 Windows Phone 7 に見る
モバ゗ルならではの UI・UX
 ゗ンフラジステゖックスの
取り組み

Twitter 実況中!!

ポ゗ント
各種リンクは
@IGJP
にて随時実況します!

注意点
 日本では Windows Phone 7 は
キャリゕから販売されて
いません
 開発ツールは英語版を
一部使用しているので
日本語版がリリースされた際に
表記が変わる可能性があります

Windows Phone 7
アプリケーション開発
について


開発環境の構築
 AppHub
http://create.msdn.com/ja-JP/
Windows Phone 7 と Xbox 360用
 Windows Phone Developer Tools (WPDT) を取得する


Windows Phone Developer Tools

 無料の開発環境
 Visual Studio 2010 Express
for Windows Phone
 Windows Phone Emulator Resources
 Silverlight 4 Tools For Visual Studio
 XNA Game Studio 4.0
 Microsoft Expression Blend
for Windows Phone
 ただし、英語版

使用できるフレームワーク
Silverlight for Windows Phone XNA Game Studio 4.0
 業務ゕプリケーション、  高いパフォーマンスを
ツール要求されるゲーム
 パフォーマンスが  C# のみサポート
要求されないゲーム
 Silverlight 3 + α
 4 の機能を一部
 C#/VB
 VB は制限あり


日本語リソース
 Windows Phone デベロッパーセンター
http://msdn.microsoft.com/ja-jp/windowsphone/

 コードサンプル
 トレーニングキット
 開発者ガイド
 Windows Phone 7 向け
UI デザイン/操作ガイド
(必読)


Windows Phone 7
Silverlight ゕプリケーション
エミュレータ & 実機

Demo Developers Summit 2011

Metro テーマ

G M H T

C Y Z N F

地下鉄の色分けのようにすっきり
とした色合いを演出

PC vs モバイル
その違い


画面解像度
 モバ゗ル端末の解像度・サ゗ズはPC に
比べて小さい
 今回のデモ機 :HTC HD7
 480 × 800 (WVGA)
 4.3 ゗ンチ
 表示できる情報量に制限がある


入力デバイスの違い

カーソルに比べてより大きな領域が必要


最適な大きさとは？
 タッチ対象のサ゗ズ
9 mm 以上
 見た目のサ゗ズ
60 ~ 100 %
7 mm~
 タッチ対象の間隔
少なくとも
2 mm のスペース

ボタンボタン

7mm 2mm 7mm


画面サ゗ズの比較と
タッチ領域


入力の解釈の違い
マウス入力
• MouseDown
• MouseUp
• MouseMove
などなど

• 指（タッチ）からの入力
ジェスチャーが存在する
• タップ
• ダブルタップ
• パン
• フリック
• タッチゕンドホールド
• 縮小と拡大
などなど


レイアウト・ナビゲーション

①

②

モバ゗ルではどう配置・遷移する？


Windows Phone 7
に見るモバイル
ならではの UI・UX


サポートされている
ジェスチャー
タップ素早く 1 度タッチ

ダブルタップ素早く 2 度タッチ

パン指を下ろした後に移動

指を下ろした後に素早く移動し、
フリック離す

指を下ろし決められた時間
タッチゕンドホールドそのままにする

2 本の指を下ろし近づける、
縮小と拡大もしくは離す


Silverlight での
ジェスチャー処理
 通常は Mouse, Manipulation 関連の
゗ベントを使用しジェスチャーを判定
 非常にめんどくさい

 Silverlight Toolkit for Windows Phone
ではジェスチャー利用のための
GestureService が実装されている
http://silverlight.codeplex.com/


GestureService の活用


GestureService
<phone:PhoneApplicationPage
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
assembly=Microsoft.Phone.Controls.Toolkit“
>
<Image Source="DaizenIkehara.jpg" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener
Flick=“GestureListener_DoubleTap”/>
</toolkit:GestureService.GestureListener>
</Image>
</phone:PhoneApplicationPage>

private void GestureListener_DoubleTap(object sender, GestureEventArgs e)
{
MessageBox.Show("DoubleTap");
}


レイアウト・ナビゲーション

ピボット・パノラマ


パノラマ
 横に長いキャンパスにページ毎に別のコン
テンツを表示できる
 メニュー構造、画面遷移を
うまく表現できる

コンテンツ１コンテンツ2 コンテンツ3 コンテンツ4


ピボット
 データのフゖルタリング
 複数のデータ表示
 ビューの切り替え


ピボット・パノラマ
Pictures


他の UX パターンを検索するには

 UI/UX パターンラ゗ブラリー
http://jp.quince.infragistics.com
 パターンの名前
 パターンが解決する問題
 背景
 実装方法

インフラジスティックスの
モバイルプラットフォーム
への取り組み


モバイル対応
NetAdvantage
 モバ゗ル向け製品を開発中
 Windows Phone 7 対応
Silverlight コントロール
 iPhone & Android 向け
モバ゗ル UI コントロール
 http://jp.infragistics.com/whats-hot/roadmap/new_products.aspx

2011 年発売予定!!

NetAdvantage for Mobile
 NetAdvantage for Silverlightを
試験的に WP7 環境で実験
http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx


NetAdvantage for Mobile


まとめ
 モバ゗ル対応ゕプリケーション
における新たな UI・UX の設計
の必要性
 プラットフォームでサポート
されている機能を十二分に活用
 新たなパターンの誕生と可能性


Next Action!
 WPDT 導入で開発環境の構築
 Silverlight についても併せて
学習を!
 Windows Phone 7 向け
UI デザ゗ン/操作ガ゗ドに
慣れ親しむ
 継続的にパターンを検索!

リソース（1）
AppHub
http://create.msdn.com/ja-JP/

Windows Phone デベロッパーセンター
http://msdn.microsoft.com/ja-jp/windowsphone/

Windows Phone 7 Developer Tools RTW (英語) (ISO も取得可能)
http://bit.ly/8YxX8H

Windows Phone Developer Tools January 2011 Update (英語)
http://bit.ly/aOWxRr

CodeRecipe – Windows Phone 7 サンプルコード
http://msdn.microsoft.com/ja-jp/netframework/ee708289#winphone

MSDN – 高橋忍のブログ
http://blogs.msdn.com/b/shintak/

MSDN – 田中達彦のブログ
http://blogs.msdn.com/b/ttanaka/


リソース（2）
まめしば雑記
http://d.hatena.ne.jp/shiba-yan/

backyard of 伊勢的新常識
http://d.hatena.ne.jp/iseebi/

酢ろぐ(ch3cooh.jp)
http://d.hatena.ne.jp/ch3cooh393/

Portfolio：Mitsuba
http://d.hatena.ne.jp/c-mitsuba/

DHJJ [Hatsune's Journal Japan] blog
http://blogs.wankuma.com/hatsune/

Blog: Daizen Ikehara
http://blogs.jp.infragistics.com/blogs/dikehara/default.aspx

インフラジスティックス・ジャパン HP (NetAdvantage)
http://jp.infragistics.com/


おまけ

XAML トレーニング
WPFブートキャンプ
XAML・Expression Blendを徹底的に学習

NA for WPFによる実践開発
NetAdvantageを使ったWPF開発応用編

Silverlightブートキャンプ
XAML・Expression Blendを徹底的に学習

NA for ASP.NETによる実践開発
NetAdvantageを使ったASP.NET開発応用編


゗ンフラジステゖックス主催の無料 .NETセミナー第8弾

4/6(水) 名古屋 @ マ゗クロソフト中部支店
4/7(木) 大阪 @マ゗クロソフト関西支店
4/20(水) 東京 @秋葉原 UDX カンフゔレンス

世界に誇れるUX 開発のために今何が必要か？！

IG で働いてみませんか?
 業務拡大の為、優秀な人材を
募集中です!
 開発サポートエンジニゕ
 セールスエンジニゕ

 http://jp.infragistics.com/careers/openings.aspx


devsumi17 d-2

More Related Content

Viewers also liked

Similar to devsumi17 d-2

devsumi17 d-2