勘違いだらけの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デザインのコンサルティング、デザイン調査

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

本日のテーマ
•  勘違いだらけの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
Copyright © 2012 Secret Lab, Inc. All Right Reserved.
（写真が語るUXとUIの違い）
6

UX/UIデザインの改善？

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


UX/UIデザインの改善？

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

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

UIデザインの改善

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

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

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


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


先ほどのテーマの回答
1.  Androidで独自性を出すのは大変？

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

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



さっそく本日の回答
1.  Androidで独自性を出すのは大変

メーカーは端末の差異化を出すので大変です

SNSゲーム会社は複数プラットフォーム向けにアプリ
を対応させるのが大変です

独自性と独創性が混在していることが多いです。

アプリの独自性＝コンテンツ、内容の事。見た目で
独自性を出すのは大変です。


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

社内に経験がない技術で開発すると大変です。

工数削減のために、既に開発済みのiPhone向けアプ
リをベースに開発すると、実は大変です。
（ネットにある記事のほとんどがこの話です）

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


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

複数サイズのリソース用意したりとか面倒くさいです

複数画面サイズのレイアウトデザインが必要で、実はちょ
っと面倒くさいです

Android向けのデザイン作業やデザインのルールを熟知し
ているデザイナーがまだまだ少ないです

デザイナーといってもiPhoneアプリのデザイン経験者が
多い。デザインがiPhoneっぽくなって… Добрый день



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

•  主な開発手法
–  ネイティブ
–  側だけネイティブ＋中身をWeb View
–  HTML5ベース

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


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


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


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

© Geeky Gadgets


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

© The Mobile Frontier


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

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


面倒くさい人には…


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

© Six Revisions
© xDevelop


良いアプリの作り方？


より良い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_ﬁrespeed）による日本語訳版
•  http://ﬁrespeed.org/diary.php?diary=kenz-1462


補足 : 9-Patch
•  http://developer.android.com/intl/ja/tools/help/draw9patch.html
•  Android SDKで提供されている伸縮可能なボタン画像
を簡単に作るツール
•  黒いドット部分を元に自動的に紫のように拡大される
•  ドットの指定方法が少し奇抜で慣れが必要

伸縮可能
エリア

パディング
指定も可能


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

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


Thank You

Nobuya Sato
Secret Lab, Inc.
nobsato@secret-lab.jp

http://about.me/nobsato
http://twitter.com/nobsato
http://slideshare.com/nobsato


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

More Related Content

What's hot

Viewers also liked

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

More from Nobuya Sato

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