押さえておこう!モバイル開発におけるUX の考え方17-D-2              池原 大然                    ゗ンフラジステゖックス・ジャパン                    デベロッパー エバンジェリスト ...
自己紹介 池原 大然(Neri) ゗ンフラジステゖックス・ジャパン INETA 登録スピーカー TwitterID: @Neri78 Blog  http://blogs.jp.infragistics.com/   blogs/d...
3 年前は 開発サポート部門リーダ 販売製品の技術サポートを担当
現在 デベロッパー エバンジェリスト 講演・執筆活動 プリセールス トレーニング  運営      Developers Summit 2011
NetAdvantage シリーズ        Developers Summit 2011
本日お話しさせて頂くこと Windows Phone 7  ゕプリケーション開発について PC vs モバ゗ル その違い Windows Phone 7 に見る  モバ゗ルならではの UI・UX ゗ンフラジステゖックスの  取り組み  ...
Twitter 実況中!!     ポ゗ント    各種リンクは    @IGJPにて随時実況します!        Developers Summit 2011
Developers Summit 2011
注意点 日本では Windows Phone 7 は  キャリゕから販売されて  いません 開発ツールは英語版を  一部使用しているので  日本語版がリリースされた際に  表記が変わる可能性があります         Developers ...
Windows Phone 7アプリケーション開発について     Developers Summit 2011
開発環境の構築 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 Resour...
使用できるフレームワークSilverlight for Windows Phone             XNA Game Studio 4.0 業務ゕプリケーション、  高いパフォーマンスを  ツール                 要...
日本語リソース Windows Phone デベロッパー センター http://msdn.microsoft.com/ja-jp/windowsphone/ コード サンプル トレーニング キット 開発者ガイド  Windows P...
Windows Phone 7Silverlight ゕプリケーションエミュレータ & 実機Demo       Developers Summit 2011
Metro テーマ      G              M             H   T  C   Y              Z             N   F 地下鉄の色分けのようにすっきり とした色合いを演出       ...
PC vs モバイルその違い    Developers Summit 2011
画面解像度 モバ゗ル端末の解像度・サ゗ズはPC に  比べて小さい 今回のデモ機 :HTC HD7  480 × 800 (WVGA)  4.3 ゗ンチ 表示できる情報量に制限がある             Developers Su...
入力デバイスの違い カーソルに比べてより大きな領域が必要           Developers Summit 2011
最適な大きさとは? タッチ対象のサ゗ズ  9 mm 以上 見た目のサ゗ズ  60 ~ 100 %  7 mm~ タッチ対象の間隔  少なくとも  2 mm のスペース ボタン          ボタン  7mm   2mm   7mm  ...
画面サ゗ズの比較とタッチ領域Demo   Developers Summit 2011
入力の解釈の違い   マウス 入力   • MouseDown   • MouseUp   • MouseMove   などなど   • 指(タッチ)からの入力     ジェスチャーが存在する      • タップ      • ダブルタップ ...
レイアウト・ナビゲーション          ①                 ②モバ゗ルではどう配置・遷移する?              Developers Summit 2011
Windows Phone 7に見るモバイルならではの UI・UX     Developers Summit 2011
サポートされているジェスチャー タップ                       素早く 1 度タッチ ダブルタップ                    素早く 2 度タッチ パン                        指を下ろした...
Silverlight でのジェスチャー処理 通常は Mouse, Manipulation 関連の  ゗ベントを使用しジェスチャーを判定   非常にめんどくさい Silverlight Toolkit for Windows Phone...
GestureService の活用Demo        Developers Summit 2011
GestureService   <phone:PhoneApplicationPage   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;                     ...
レイアウト・ナビゲーション       ピボット・パノラマ     Developers Summit 2011
パノラマ 横に長いキャンパスにページ毎に別のコン  テンツを表示できる  メニュー構造、画面遷移を   うまく表現できる  コンテンツ1   コンテンツ2     コンテンツ3            コンテンツ4              ...
ピボット データのフゖルタリング 複数のデータ表示 ビューの切り替え       Developers Summit 2011
ピボット・パノラマPicturesDemo   Developers Summit 2011
他の UX パターンを検索するには UI/UX パターン ラ゗ブラリーhttp://jp.quince.infragistics.com    パターンの名前    パターンが解決する問題    背景    実装方法         ...
インフラジスティックスのモバイル プラットフォームへの取り組み    Developers Summit 2011
モバイル対応NetAdvantage モバ゗ル向け製品を開発中     Windows Phone 7 対応      Silverlight コントロール     iPhone & Android 向け      モバ゗ル UI コント...
NetAdvantage for Mobile NetAdvantage for Silverlightを  試験的に WP7 環境で実験 http://jp.infragistics.com/innovations/mobile-app-i...
NetAdvantage for MobileDemo          Developers Summit 2011
まとめ モバ゗ル対応ゕプリケーション  における新たな UI・UX の設計  の必要性 プラットフォームでサポート  されている機能を十二分に活用 新たなパターンの誕生と可能性       Developers Summit 2011
Next Action! WPDT 導入で開発環境の構築  Silverlight についても併せて   学習を! Windows Phone 7 向け  UI デザ゗ン/操作ガ゗ドに  慣れ親しむ 継続的にパターンを検索!      ...
リソース(1)AppHubhttp://create.msdn.com/ja-JP/Windows Phone デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/Windows Ph...
リソース(2)まめしば雑記http://d.hatena.ne.jp/shiba-yan/backyard of 伊勢的新常識http://d.hatena.ne.jp/iseebi/酢ろぐ(ch3cooh.jp)http://d.hatena...
おまけDevelopers Summit 2011
XAML トレーニング     WPFブートキャンプ     XAML・Expression Blendを 徹底的に学習     NA for WPFによる実践開発     NetAdvantageを使ったWPF開発応用編     Silver...
゗ンフラジステゖックス主催の無料 .NETセミナー第8弾 4/6(水)    名古屋 @ マ゗クロソフト中部支店 4/7(木)    大阪 @マ゗クロソフト関西支店 4/20(水)   東京 @秋葉原 UDX カンフゔレンス世界に誇れるUX 開...
IG で働いてみませんか? 業務拡大の為、優秀な人材を  募集中です!    開発サポート エンジニゕ    セールス エンジニゕ http://jp.infragistics.com/careers/openings.aspx    ...
Devsumi 17 d-2
Upcoming SlideShare
Loading in …5
×

Devsumi 17 d-2

2,153 views
2,081 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,153
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
84
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Devsumi 17 d-2

  1. 1. 押さえておこう!モバイル開発におけるUX の考え方17-D-2 池原 大然 ゗ンフラジステゖックス・ジャパン デベロッパー エバンジェリスト Developers Summit 2011
  2. 2. 自己紹介 池原 大然(Neri) ゗ンフラジステゖックス・ジャパン INETA 登録スピーカー TwitterID: @Neri78 Blog  http://blogs.jp.infragistics.com/ blogs/dikehara/default.aspx Developers Summit 2011
  3. 3. 3 年前は 開発サポート部門リーダ 販売製品の技術サポートを担当
  4. 4. 現在 デベロッパー エバンジェリスト 講演・執筆活動 プリセールス トレーニング 運営 Developers Summit 2011
  5. 5. NetAdvantage シリーズ Developers Summit 2011
  6. 6. 本日お話しさせて頂くこと Windows Phone 7 ゕプリケーション開発について PC vs モバ゗ル その違い Windows Phone 7 に見る モバ゗ルならではの UI・UX ゗ンフラジステゖックスの 取り組み Developers Summit 2011
  7. 7. Twitter 実況中!! ポ゗ント 各種リンクは @IGJPにて随時実況します! Developers Summit 2011
  8. 8. Developers Summit 2011
  9. 9. 注意点 日本では Windows Phone 7 は キャリゕから販売されて いません 開発ツールは英語版を 一部使用しているので 日本語版がリリースされた際に 表記が変わる可能性があります Developers Summit 2011
  10. 10. Windows Phone 7アプリケーション開発について Developers Summit 2011
  11. 11. 開発環境の構築 AppHub http://create.msdn.com/ja-JP/ Windows Phone 7 と Xbox 360用  Windows Phone Developer Tools (WPDT) を取得する Developers Summit 2011
  12. 12. 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  ただし、英語版 Developers Summit 2011
  13. 13. 使用できるフレームワークSilverlight for Windows Phone XNA Game Studio 4.0 業務ゕプリケーション、  高いパフォーマンスを ツール 要求されるゲーム パフォーマンスが  C# のみサポート 要求されないゲーム Silverlight 3 + α  4 の機能を一部 C#/VB  VB は制限あり Developers Summit 2011
  14. 14. 日本語リソース Windows Phone デベロッパー センター http://msdn.microsoft.com/ja-jp/windowsphone/ コード サンプル トレーニング キット 開発者ガイド  Windows Phone 7 向け UI デザイン/操作ガイド (必読) Developers Summit 2011
  15. 15. Windows Phone 7Silverlight ゕプリケーションエミュレータ & 実機Demo Developers Summit 2011
  16. 16. Metro テーマ G M H T C Y Z N F 地下鉄の色分けのようにすっきり とした色合いを演出 Developers Summit 2011
  17. 17. PC vs モバイルその違い Developers Summit 2011
  18. 18. 画面解像度 モバ゗ル端末の解像度・サ゗ズはPC に 比べて小さい 今回のデモ機 :HTC HD7  480 × 800 (WVGA)  4.3 ゗ンチ 表示できる情報量に制限がある Developers Summit 2011
  19. 19. 入力デバイスの違い カーソルに比べてより大きな領域が必要 Developers Summit 2011
  20. 20. 最適な大きさとは? タッチ対象のサ゗ズ 9 mm 以上 見た目のサ゗ズ 60 ~ 100 % 7 mm~ タッチ対象の間隔 少なくとも 2 mm のスペース ボタン ボタン 7mm 2mm 7mm Developers Summit 2011
  21. 21. 画面サ゗ズの比較とタッチ領域Demo Developers Summit 2011
  22. 22. 入力の解釈の違い マウス 入力 • MouseDown • MouseUp • MouseMove などなど • 指(タッチ)からの入力 ジェスチャーが存在する • タップ • ダブルタップ • パン • フリック • タッチ ゕンド ホールド • 縮小と拡大 などなど Developers Summit 2011
  23. 23. レイアウト・ナビゲーション ① ②モバ゗ルではどう配置・遷移する? Developers Summit 2011
  24. 24. Windows Phone 7に見るモバイルならではの UI・UX Developers Summit 2011
  25. 25. サポートされているジェスチャー タップ 素早く 1 度タッチ ダブルタップ 素早く 2 度タッチ パン 指を下ろした後に移動 指を下ろした後に素早く移動し、 フリック 離す 指を下ろし決められた時間 タッチ ゕンド ホールド そのままにする 2 本の指を下ろし近づける、 縮小と拡大 もしくは離す Developers Summit 2011
  26. 26. Silverlight でのジェスチャー処理 通常は Mouse, Manipulation 関連の ゗ベントを使用しジェスチャーを判定  非常にめんどくさい Silverlight Toolkit for Windows Phone ではジェスチャー利用のための GestureService が実装されている http://silverlight.codeplex.com/ Developers Summit 2011
  27. 27. GestureService の活用Demo Developers Summit 2011
  28. 28. 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"); } Developers Summit 2011
  29. 29. レイアウト・ナビゲーション ピボット・パノラマ Developers Summit 2011
  30. 30. パノラマ 横に長いキャンパスにページ毎に別のコン テンツを表示できる  メニュー構造、画面遷移を うまく表現できる コンテンツ1 コンテンツ2 コンテンツ3 コンテンツ4 Developers Summit 2011
  31. 31. ピボット データのフゖルタリング 複数のデータ表示 ビューの切り替え Developers Summit 2011
  32. 32. ピボット・パノラマPicturesDemo Developers Summit 2011
  33. 33. 他の UX パターンを検索するには UI/UX パターン ラ゗ブラリーhttp://jp.quince.infragistics.com  パターンの名前  パターンが解決する問題  背景  実装方法 Developers Summit 2011
  34. 34. インフラジスティックスのモバイル プラットフォームへの取り組み Developers Summit 2011
  35. 35. モバイル対応NetAdvantage モバ゗ル向け製品を開発中  Windows Phone 7 対応 Silverlight コントロール  iPhone & Android 向け モバ゗ル UI コントロール http://jp.infragistics.com/whats-hot/roadmap/new_products.aspx 2011 年発売予定!! Developers Summit 2011
  36. 36. NetAdvantage for Mobile NetAdvantage for Silverlightを 試験的に WP7 環境で実験 http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx Developers Summit 2011
  37. 37. NetAdvantage for MobileDemo Developers Summit 2011
  38. 38. まとめ モバ゗ル対応ゕプリケーション における新たな UI・UX の設計 の必要性 プラットフォームでサポート されている機能を十二分に活用 新たなパターンの誕生と可能性 Developers Summit 2011
  39. 39. Next Action! WPDT 導入で開発環境の構築  Silverlight についても併せて 学習を! Windows Phone 7 向け UI デザ゗ン/操作ガ゗ドに 慣れ親しむ 継続的にパターンを検索! Developers Summit 2011
  40. 40. リソース(1)AppHubhttp://create.msdn.com/ja-JP/Windows Phone デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/Windows Phone 7 Developer Tools RTW (英語) (ISO も取得可能)http://bit.ly/8YxX8HWindows Phone Developer Tools January 2011 Update (英語)http://bit.ly/aOWxRrCodeRecipe – Windows Phone 7 サンプルコードhttp://msdn.microsoft.com/ja-jp/netframework/ee708289#winphoneMSDN – 高橋 忍のブログhttp://blogs.msdn.com/b/shintak/MSDN – 田中達彦のブログhttp://blogs.msdn.com/b/ttanaka/ Developers Summit 2011
  41. 41. リソース(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:Mitsubahttp://d.hatena.ne.jp/c-mitsuba/DHJJ [Hatsunes Journal Japan] bloghttp://blogs.wankuma.com/hatsune/Blog: Daizen Ikeharahttp://blogs.jp.infragistics.com/blogs/dikehara/default.aspxインフラジスティックス・ジャパン HP (NetAdvantage)http://jp.infragistics.com/ Developers Summit 2011
  42. 42. おまけDevelopers Summit 2011
  43. 43. XAML トレーニング WPFブートキャンプ XAML・Expression Blendを 徹底的に学習 NA for WPFによる実践開発 NetAdvantageを使ったWPF開発応用編 Silverlightブートキャンプ XAML・Expression Blendを 徹底的に学習 NA for ASP.NETによる実践開発 NetAdvantageを使ったASP.NET開発応用編 Developers Summit 2011
  44. 44. ゗ンフラジステゖックス主催の無料 .NETセミナー第8弾 4/6(水) 名古屋 @ マ゗クロソフト中部支店 4/7(木) 大阪 @マ゗クロソフト関西支店 4/20(水) 東京 @秋葉原 UDX カンフゔレンス世界に誇れるUX 開発のために今何が必要か?!
  45. 45. IG で働いてみませんか? 業務拡大の為、優秀な人材を 募集中です!  開発サポート エンジニゕ  セールス エンジニゕ http://jp.infragistics.com/careers/openings.aspx Developers Summit 2011

×