Your SlideShare is downloading. ×
0
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
勘違いだらけの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デザイン

52,431

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
218 Likes
Statistics
Notes
No Downloads
Views
Total Views
52,431
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
368
Comments
3
Likes
218
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

×