勘違いだらけのandroid uiデザイン

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.

自己紹介 •  @nobsato •  UXデザイン、デザイン戦略、IA

–  1994年からWebデザイン

–  Webエージェンシーで大規模な企業サイトの情報設計や企業のグローバル戦略、海外サイト構築やグローバル展開

–  Sonyのデザイン部門でAndroidのPF戦略やタブレット戦略

– 米Seesmicで日本語化やAndroidアプリやWP7アプリ

– 現在はUXやUIデザインのコンサルティング、デザイン調査

3 Copyright © 2012 Secret Lab, Inc. All Right Reserved.

本日のテーマ •  勘違いだらけのAndroid UIデザイン

1.  Androidで独自性を出すのは大変？

2.  Androidアプリの開発は工数が係る？

3.  Android向けのデザインは大変？

4.  検証すべき端末は数百、すでに飽和状態？

Copyright © 2012 Nobuya Sato. 4

UX/UIデザイン


UX = UI ?

UX/UIの違い


The Difference Between UX and UI: Subtleties Explained in Cereal （写真が語るUXとUIの違い）

UX/UIデザインの改善？

•  ユーザーの使い方、モノの使われ方を観察して問題点を直すことで、ユーザーの体験を改善でき、モノの使われ方やユーザーエクスペリエンス（UX）を向上することができる


UX/UIデザインの改善？

•  ユーザーの使い方、モノの使われ方を観察して問題点を直すことで、ユーザーの体験を改善でき、モノの使われ方やユーザーエクスペリエンス（UX）を向上することができる


　→　改善しているのはUX（使い方や使われ方）、本来のUI（ボタンやアイコン）はスライドで見てきた例では改善されていない。

UIデザインの改善

1.  提供しようとしているコンテキスト（内容）は何か？

2.  どのように機能を提供できるか？

3.  その場におけるルール（作法）は何か？


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


先ほどのテーマの回答 •  勘違いだらけのAndroid UIデザイン

1.  Androidで独自性を出すのは大変？

2.  Androidアプリの開発は工数が係る？

3.  Android向けのデザインは大変？

4.  検証すべき端末は数百、すでに飽和状態？


さっそく本日の回答 •  勘違いだらけのAndroid UIデザイン

1.   Androidで独自性を出すのは大変メーカーは端末の差異化を出すので大変です SNSゲーム会社は複数プラットフォーム向けにアプリを対応させるのが大変です独自性と独創性が混在していることが多いです。アプリの独自性＝コンテンツ、内容の事。見た目で独自性を出すのは大変です。　



2.   Androidのアプリの開発は工数が係る？社内に経験がない技術で開発すると大変です。工数削減のために、既に開発済みのiPhone向けアプリをベースに開発すると、実は大変です。（ネットにある記事のほとんどがこの話です）

現状、Fragmentを利用して複数デバイス（タブレット/フォーン）向けに完璧に開発しようとすると、実はかなり大変です



3.   Android向けデザインは大変？複数サイズのリソース用意したりとか面倒くさいです複数画面サイズのレイアウトデザインが必要で、実はちょっと面倒くさいです Android向けのデザイン作業やデザインのルールを熟知しているデザイナーがまだまだ少ないですデザイナーといってもiPhoneアプリのデザイン経験者が多い。デザインがiPhoneっぽくなって… Добрый день



4.   検証すべき端末は数百、すでに飽和状態？



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などの変態端末も可。海外主流の京セラもわりと良い

さっそく本日の回答 •  勘違いだらけのAndroid UIデザイン •  主な開発手法

– ネイティブ – 側だけネイティブ＋中身をWeb View – HTML5ベース


　→　標準ブラウザも実はかなりいじられている

良いアプリUIのデザイン方法？


UIプロトタイピング •  まずはUIのプロトタイピングから…


UIプロトタイピング •  ワイヤーフレームとユーザーフローをしっかり作る


© Geeky Gadgets

ペーパープロトタイピング •  費用も掛からず、全員が確認できて効果的


© The Mobile Frontier

UIステンシルツールなどを使う •  画面デザインを沢山つくるのに便利


Google I/O 2012で配られたGoogle Android UI teamオフィシャル？ステンシル

面倒くさい人には…


UIデザイン＝画面の流れのデザイン •  アプリを作る前に必ず、画面フローを確認をする


© xDevelop © Six Revisions

良いアプリの作り方？


より良いAndroidアプリの作り方


•  https://developer.android.com/intl/ja/distribute/googleplay/strategies/app-quality.html

Androidアプリの品質向上


•  Google API Expert 安藤さん（@yukio_andoh）による日本語訳 •  http://www.andoh.org/2012/06/android-improving-app-quality.html

Androidアプリの品質向上


1.  ユーザーの声を聞く 2.  安定性の向上とバグの削除 3.  UI 応答性の向上 4.  ユーザビリティの向上 5.  プロフェッショナルな外観と審美性

–  User Interface Deign Tips (2010 July)

6.  必要な機能の正しい選択 7.  システムと第三者アプリの統合 8.  詳細に対して注意すること

Android Design Guideline


Android Design Guideline、Jelly Bean対応！


•  http://developer.android.com/design/

旧Android Design Guideline（ICS版）


•  http://developer.android.com/design/

Android Design Guideline日本語版？


残念ながら表示しません。

有志による日本語訳版（ICS版） •  松岡さん（@kenz_firespeed）による日本語訳版 •  http://firespeed.org/diary.php?diary=kenz-1462


補足 : 9-Patch •  http://developer.android.com/intl/ja/tools/help/draw9patch.html

•  Android SDKで提供されている伸縮可能なボタン画像を簡単に作るツール

•  黒いドット部分を元に自動的に紫のように拡大される •  ドットの指定方法が少し奇抜で慣れが必要


伸縮可能エリア

パディング指定も可能

•  Action BarやICSで追加されたAPIなどを理解するのに良い参考書（エンジニア向け）

•  Android UI Cookbook for 4.0 ICSアプリ開発術 •  あんざいゆき（@yanzm）／著 •  インプレスジャパン

補足: Action Barの理解を助ける書籍


Thank You

Nobuya Sato Secret Lab, Inc. [email protected] http://about.me/nobsato http://twitter.com/nobsato http://slideshare.com/nobsato


勘違いだらけのandroid uiデザイン

Technology