Your SlideShare is downloading. ×
勘違いだらけのAndroid UIデザイン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

勘違いだらけのAndroid UIデザイン

49,200
views

Published on

【増員!→370名】 開発者、デザイナー必見! アプリ制作勉強会 / 勘違いだらけのAndroid UIデザイン 発表資料(2012年8月21日) …

【増員!→370名】 開発者、デザイナー必見! アプリ制作勉強会 / 勘違いだらけのAndroid UIデザイン 発表資料(2012年8月21日)
http://atnd.org/events/31039

The presentation doc for Smartphone application design seminar on 2012/08/21 by WAVE Multimedia School.

Published in: Technology

3 Comments
213 Likes
Statistics
Notes
No Downloads
Views
Total Views
49,200
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
367
Comments
3
Likes
213
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1
  • 2. WAVEイベントセミナー・アプリ制作勉強会勘違いだらけのAndroid UIデザイン Android UI Design, Too Much Misunderstanding Nobuya Sato Secret Lab, Inc. August 21st., 2012 Twitter: #appsemi Copyright © 2012 Secret Lab, Inc. All Right Reserved.
  • 3. 自己紹介•  @nobsato•  UXデザイン、デザイン戦略、IA –  1994年からWebデザイン –  Webエージェンシーで大規模な企業サイトの情報設計や企業 のグローバル戦略、海外サイト構築やグローバル展開 –  Sonyのデザイン部門でAndroidのPF戦略やタブレット戦略 –  米Seesmicで日本語化やAndroidアプリやWP7アプリ –  現在はUXやUIデザインのコンサルティング、デザイン調査 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 3
  • 4. 本日のテーマ•  勘違いだらけのAndroid UIデザイン 1.  Androidで独自性を出すのは大変? 2.  Androidアプリの開発は工数が係る? 3.  Android向けのデザインは大変? 4.  検証すべき端末は数百、すでに飽和状態? Copyright © 2012 Nobuya Sato. 4
  • 5. UX/UIデザイン UX = UI ? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 5
  • 6. UX/UIの違い The Difference Between UX and UI: Subtleties Explained in Cereal Copyright © 2012 Secret Lab, Inc. All Right Reserved. (写真が語るUXとUIの違い) 6
  • 7. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 7
  • 8. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 8
  • 9. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 9
  • 10. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 10
  • 11. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 11
  • 12. UX/UIデザインの改善?•  ユーザーの使い方、モノの使われ方を観察して問題点 を直すことで、ユーザーの体験を改善でき、モノの使 われ方やユーザーエクスペリエンス(UX)を向上する ことができる Copyright © 2012 Secret Lab, Inc. All Right Reserved. 12
  • 13. UX/UIデザインの改善?•  ユーザーの使い方、モノの使われ方を観察して問題点 を直すことで、ユーザーの体験を改善でき、モノの使 われ方やユーザーエクスペリエンス(UX)を向上する ことができる → 改善しているのはUX(使い方や使われ方)、 本来のUI(ボタンやアイコン)は スライドで 見てきた例では改善されていない。 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 13
  • 14. UIデザインの改善1.  提供しようとしているコンテキスト(内容)は何か?2.  どのように機能を提供できるか?3.  その場におけるルール(作法)は何か? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 14
  • 15. 勘違いだらけのAndroid UIデザイン Copyright © 2012 Secret Lab, Inc. All Right Reserved. 15
  • 16. 先ほどのテーマの回答•  勘違いだらけのAndroid UIデザイン 1.  Androidで独自性を出すのは大変? 2.  Androidアプリの開発は工数が係る? 3.  Android向けのデザインは大変? 4.  検証すべき端末は数百、すでに飽和状態? Copyright © 2012 Nobuya Sato. 16
  • 17. さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 1.  Androidで独自性を出すのは大変 メーカーは端末の差異化を出すので大変です SNSゲーム会社は複数プラットフォーム向けにアプリ を対応させるのが大変です 独自性と独創性が混在していることが多いです。 アプリの独自性=コンテンツ、内容の事。見た目で 独自性を出すのは大変です。  Copyright © 2012 Nobuya Sato. 17
  • 18. さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 2.  Androidのアプリの開発は工数が係る? 社内に経験がない技術で開発すると大変です。 工数削減のために、既に開発済みのiPhone向けアプ リをベースに開発すると、実は大変です。 (ネットにある記事のほとんどがこの話です) 現状、Fragmentを利用して複数デバイス(タブレット /フォーン)向けに完璧に開発しようとすると、実は かなり大変です Copyright © 2012 Nobuya Sato. 18
  • 19. さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 3.  Android向けデザインは大変? 複数サイズのリソース用意したりとか面倒くさいです 複数画面サイズのレイアウトデザインが必要で、実はちょ っと面倒くさいです Android向けのデザイン作業やデザインのルールを熟知し ているデザイナーがまだまだ少ないです デザイナーといってもiPhoneアプリのデザイン経験者が 多い。デザインがiPhoneっぽくなって… Добрый день Copyright © 2012 Nobuya Sato. 19
  • 20. さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 4.  検証すべき端末は数百、すでに飽和状態? Copyright © 2012 Nobuya Sato. 20
  • 21. さっそく本日の回答•  勘違いだらけのAndroid UIデザイン 4.  検証すべき端末は数百、すでに飽和状態? そうえいば18ヶ月保証とかありましたが… NexusシリーズやGoogleが指定しているリファレンス端末 (Xoomなど)を、OS毎に用意 ※OS毎の例:Android 1.6 = HTC Magic、Android 2.0 = DROID、Android 2.1 = Nexus One、Android 2.3 = Nexus S、Android 3.x = Xoom、Android 4.0 = Galaxy Nexus、Android 4.1 = nexus 7 国産メーカー(シャープ、NECカシオ、パナソニック、 ソニー)は☓。やっぱり海外端末、特に開発コミュニティ にも優しいSony EricssonかSamsungが良い。 ※LGやASUSなどの変態端末も可。海外主流の京セラもわりと良い Copyright © 2012 Nobuya Sato. 21
  • 22. さっそく本日の回答•  勘違いだらけのAndroid UIデザイン•  主な開発手法 –  ネイティブ –  側だけネイティブ+中身をWeb View –  HTML5ベース → 標準ブラウザも実はかなりいじられている Copyright © 2012 Nobuya Sato. 22
  • 23. 良いアプリUIのデザイン方法? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 23
  • 24. UIプロトタイピング•  まずはUIのプロトタイピングから… Copyright © 2012 Secret Lab, Inc. All Right Reserved. 24
  • 25. UIプロトタイピング•  ワイヤーフレームとユーザーフローをしっかり作る © Geeky Gadgets Copyright © 2012 Secret Lab, Inc. All Right Reserved. 25
  • 26. ペーパープロトタイピング•  費用も掛からず、全員が確認できて効果的 © The Mobile Frontier Copyright © 2012 Secret Lab, Inc. All Right Reserved. 26
  • 27. UIステンシルツールなどを使う•  画面デザインを沢山つくるのに便利 Google I/O 2012で配られたGoogle Android UI teamオフィシャル?ステンシル Copyright © 2012 Secret Lab, Inc. All Right Reserved. 27
  • 28. 面倒くさい人には… Copyright © 2012 Secret Lab, Inc. All Right Reserved. 28
  • 29. UIデザイン=画面の流れのデザイン•  アプリを作る前に必ず、画面フローを確認をする © Six Revisions © xDevelop Copyright © 2012 Secret Lab, Inc. All Right Reserved. 29
  • 30. 良いアプリの作り方? Copyright © 2012 Secret Lab, Inc. All Right Reserved. 30
  • 31. より良いAndroidアプリの作り方•  https://developer.android.com/intl/ja/distribute/googleplay/strategies/app- quality.html Copyright © 2012 Secret Lab, Inc. All Right Reserved. 31
  • 32. Androidアプリの品質向上•  Google API Expert 安藤さん(@yukio_andoh)による日本語訳•  http://www.andoh.org/2012/06/android-improving-app-quality.html Copyright © 2012 Secret Lab, Inc. All Right Reserved. 32
  • 33. Androidアプリの品質向上1.  ユーザーの声を聞く2.  安定性の向上とバグの削除3.  UI 応答性の向上4.  ユーザビリティの向上5.  プロフェッショナルな外観と審美性 –  User Interface Deign Tips (2010 July)6.  必要な機能の正しい選択7.  システムと第三者アプリの統合8.  詳細に対して注意すること Copyright © 2012 Secret Lab, Inc. All Right Reserved. 33
  • 34. Android Design Guideline Copyright © 2012 Secret Lab, Inc. All Right Reserved. 34
  • 35. Android Design Guideline、Jelly Bean対応!•  http://developer.android.com/design/ Copyright © 2012 Secret Lab, Inc. All Right Reserved. 35
  • 36. 旧Android Design Guideline(ICS版)•  http://developer.android.com/design/ Copyright © 2012 Nobuya Sato. 36
  • 37. Android Design Guideline日本語版? 残念ながら表示しません。 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 37
  • 38. 有志による日本語訳版(ICS版)•  松岡さん(@kenz_firespeed)による日本語訳版•  http://firespeed.org/diary.php?diary=kenz-1462 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 38
  • 39. 補足 : 9-Patch•  http://developer.android.com/intl/ja/tools/help/draw9patch.html•  Android SDKで提供されている伸縮可能なボタン画像 を簡単に作るツール•  黒いドット部分を元に自動的に紫のように拡大される•  ドットの指定方法が少し奇抜で慣れが必要 伸縮可能 エリア パディング 指定も可能 Copyright © 2012 Secret Lab, Inc. All Right Reserved. 39
  • 40. 補足: Action Barの理解を助ける書籍•  Action BarやICSで追加されたAPIなどを理解するのに 良い参考書(エンジニア向け)•  Android UI Cookbook for 4.0 ICSアプリ開発術•  あんざいゆき(@yanzm)/著•  インプレスジャパン Copyright © 2012 Secret Lab, Inc. All Right Reserved. 40
  • 41. Thank YouNobuya SatoSecret Lab, Inc.nobsato@secret-lab.jphttp://about.me/nobsatohttp://twitter.com/nobsatohttp://slideshare.com/nobsato Copyright © 2012 Secret Lab, Inc. All Right Reserved. 41

×