Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜

Androidアプリの
魅力的な
インターフェース
本当にiOSのアプリのデザインを
流用するだけでいいの？
株式会社ツクロア秋葉ちひろ
12:00
？2013.8.21 マイナビクリエイターズ Power Session

•見た目だけでなく機能のデザインを
•デザインと技術、双方からのアプローチ
「気持ちいい」をデザインする会社
PC / iPhone / iPad / Android / and more...
秋葉ちひろデザイナー / アートディレクター

Designers Hack
技術にしばられずに
体験やデザインを考える
デザイナーズハック
http://designers-hack.net

12:00
Native Apps
Android
MockUp

Native Apps
まずは iOS 版のデザインを
つくってから、
Android 版にも使いまわしてよ。

12:00
Android
MockUp
Design
Design
Develop
Develop
Workflow

12:00
Android
MockUp
Android の Default UI

Why ?
Default UI は、
実装に負担をかけない

Android も同じものに？
？

res/menu/activity_main.xml
<menu>
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
<item android:id="@+id/action_delete"
android:icon="@drawable/ic_action_delete"
android:title="@string/action_delete"
android:showAsIcon="ifRoom" />
∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
</menu>
＃これだけだと、Android 2.x 以下ではメニューキーにて呼び出される

Why ?
iOS の UI をまねることで、
余計に工数がかかる
（こともある）

Why ?
iOS の UI をまねることで、
余計に工数がかかる
（こともある）
？
ANA

Good samples
iOS と Android で
UI をうまく使い分けている例
12:00
Android

Good samples
iOS と Android で
12:00
Android
Expedia

Good samples
iOS と Android で
12:00
Android
Dropbox

Android アプリの
基本的な Default UI について
12:00

Android アプリのデザインが
むずかしいといわれる理由
Android アプリの
基本的な Default UI について

基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal

> Androidのバージョン履歴 - Wikipedia
4.2
11.13
4.1
6.27
4.0
10.18
2009
2.0
10.26
2.2
5.21
2.3
12.6
2010 2011 2012 201
9.15
1.6
4.30
1.5 2.1
1.12
Cupcake Donut Eclair Froyo Gingerbread
1.5 1.6 2.0/2.1 2.2 2.3
iPhone 3GS iPhone 4 iPhone 4S iPhone 5

3.x
> Androidのバージョン履歴 - Wikipedia
d
4.2
11.13
4.1
6.27
4.0
10.18
0 2.2
5.21
2.3
12.6
010 2011 2012 2013
4.3
7.24
2.1
1.12
iPhone 4 iPhone 4S iPhone 5
Ice Cream
Sandwitch
4.0
Jelly Bean
4.1/4.2/4.3
Honeycomb
3.0/3.1/3.2

Design Concept
•バージョン 2.x から一新した 4.x
•できるだけ無駄なものを排除し、
シンプルに

Design Concept
• 2.x から一新した 4.x
• できるだけ無駄なものを排除し、
シンプルに
基本的な Default UI2.3 4.0-

さまざまな画面サイズに
適応しやすい工夫
•9-patch
•Action Bar

9-patch
• さまざまな画面サイズにあうように
調整できる、Android アプリ特有の
画像の実装方法

画像を 9 分割して、四隅は固定、
その他を伸びてもいいようにする

Action Bar

Action Bar
1. App icon

Action Bar
2. View control • app name
• tab controls
• drop-down menus

Action Bar
3. Action buttons • most important actions

Action Bar
4. Action overflow • more buttons

View controls
• app name

View controls
• tab controls

View controls
• drop-down menu

Action buttons
Action overflow

Action buttons
Action overflow
編集

Split action bar
上下にわかれた Action bar

Split action bar
でも、
横向きでは split しない

Split action bar

Split action bar
異なるサブタスク間、
ビュー間、またはノード間
を切り替える機能をユーザ
に提供します。
Tab bar
> iOS ヒューマンインターフェイスガイドライン p.142

Navigation Drawer
> Navigation Drawer | Android Developer

Navigation Drawer
すべて
Person Name
2 hours ago
All what to say is Android Design is along the guideline.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec,

Navigation Drawer
すべて
Person Name
2 hours ago
ホーム
ユーザー
写真

これからの (？) デザイン
12:00

•Card UI
•Effective animation

Card UI

Card UI
• カードベースのフラットUIデザイン
• Android 5.0 Key Lime Pie で正式採用？

Card UI
すべて
Person Name
2 hours ago

すべて
Person Name
2 hours ago

すべて
Person Name
2 hours ago
Person Name
2 hours ago

Person Name
2 hours ago

Person Name
2 hours ago
Person Name
2 hours ago

Card UI
•出現時のアニメーションがさまざま
•Google+ では、iOS と Android で
出現アニメーションがちがう

Effective animation
•アニメーションは、つければいい
というわけではない
•自然で気持ちのよい動き
気持ちよさをデザインする

Effective animation
•フラットな中に、ほんの少しだけ立体感を
感じさせるようなエフェクト

Effective animation
•ローディング時のエフェクト
気持ちよさをデザインする

Effective animation
•もっといろんな効果的なものがあるの
ではないか？
•そういった観点からの提案を心がけて
いる

•わたしたちの生活に自然に入り込み、
便利にしていく
Google Map Google Calendar Google Search
> Google Now
Google+
Google のめざす UX

• Chrome や Map、
Calendar との連携で
Push 通知

•写真の顔認識機能
•写真の色補正
•笑顔補正

プロトタイプについて
弊社でのこころみ
12:00

HTML based prototype
• HTML をベースに Android ネイティブ
アプリのプロトタイプをつくる
プロトタイプについて弊社でのこころみ

Why HTML ?
•ビルドの手間が必要なく、その場で
微調整ができる
Good!

Why HTML ?
•完成品とは少しちがうところもある
Bad!

> Fries

How about Hybrid ?
> 【第3回】スマホ向けアプリ開発におけるハイブリッドアプリの利点 - MdN Design Interactiv
Native Web View×
固定のUI
Transition
Scroll
データの呼出
表示部分

Android アプリの魅力的な
インターフェース
•各所で Default UI を使えないかどうか考える
12:00

8月末日、
電子書籍発売！

AppName
TabName TabName TabName
[tuqulore] 音楽を再生するときのバグ - おせわに
なっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] Interfaceを削除する方法 - おせわに
17:49Chihiro.Akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
144
48
96
144
3624
12
54pt 42pt 36pt
よく使う余白ブロック（px）
Roboto Bold
Roboto Regular
3px
6px
9px
17:49hideki.akiba
よく使う要素ブロック（px）
画像要素などでよく使う大きさのブロックです。
よく使うフォントサイズ
フォントはあまりたくさん使わずに、
できるだけこの 3 種類におさえま
しょう。
余白で使うブロックです。
だいたいの大きさにあわせて大きさを調整
すれば、それだけできれいなレイアウトに。
コピペしてぺたぺた使えます。
よく使うフォント
英語は「Roboto」、日本語は「モ
トヤマルベリ」にしましょう。モ
トヤマルベリがない場合は「ヒラ
ギノ丸ゴ / 角ゴ」あたりが無難です。
font-weight は 2 種類（Bold/Regular）で考えましょう。
よく使うライン
むやみに太さを変えず、できるだけ
この 3 種類におさえましょう。

AppName
TabName TabName TabName
17:49hideki.akiba
[tuqulore] Interfaceを削除する方法 - おせわに
17:49Chihiro.Akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
17:49hideki.akiba
144
48
96
144
3624
12
54pt 42pt 36pt
よく使う余白ブロック（px）
Roboto Bold
Roboto Regular
3px
6px
9px
17:49hideki.akiba
よく使う要素ブロック（px）
画像要素などでよく使う大きさのブロックです。
よく使うフォントサイズ
フォントはあまりたくさん使わずに、
できるだけこの 3 種類におさえま
しょう。
余白で使うブロックです。
だいたいの大きさにあわせて大きさを調整
すれば、それだけできれいなレイアウトに。
コピペしてぺたぺた使えます。
よく使うフォント
英語は「Roboto」、日本語は「モ
トヤマルベリ」にしましょう。モ
トヤマルベリがない場合は「ヒラ
ギノ丸ゴ / 角ゴ」あたりが無難です。
font-weight は 2 種類（Bold/Regular）で考えましょう。
よく使うライン
むやみに太さを変えず、できるだけ
この 3 種類におさえましょう。
http://goo.gl/XepQd

ありがとうございました
秋葉ちひろ @tommmmy
12:00

Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜

More Related Content

What's hot

Similar to Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜

Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜