「AndroidはiOSと同じ
デザインで！」
と言われたときのTips
2018/03/28
@ogapants

自己紹介
• おがぱん@ogapants
• Android開発歴4年くらい
• 作った新規プロダクト7つくらい
• GooglePlayベストアプリとった

「AndroidはiOSと
同じデザインで！」

「いや、iOSはヒューマンイ
ンターフェースガイドライン
に則り、Androidはマテリア
ルデザインガイドラインに則
り、それぞれ適切なUI/UXを
設計しましょう！」

解決

しません

なぜこう言われるのか
なぜiOSなUIのAndroidアプリ
が世に出ているのか

原因の分析

①企画やデザイナーが
Androidらしくする利点を知らない

②エンジニアが議論で押し負けた

③エンジニアがAndroidらしい
UIを知らない

原因からみるエンジニアに
必要とされるもの
1. 説明するための情報整理
2. 議論するための心構え
3. 実践するための前提知識
(個人の感想です)

説明するための情報整理
∼なぜAndroidらしく作るのか∼

①工数削減のため
• 実装速度の向上
• 保守性、拡張性の向上

②GooglePlayに最適化するため
• GooglePlayでフィーチャーされる
• ランキングや検索順位も上がる
https://support.google.com/googleplay/android-developer/answer/4448378

③ユーザーが違和感なく
操作できるようにするため
• 見慣れたUIで視認性抜群
• 使い慣れたUXで操作性抜群

議論するための心構え
∼よくあるご意見とその対応例∼

事例
※必ずしも全てに当てはまるものではないです
※議論手法の話じゃないです
※個人の感想です

「Androidのことを考える
リソースはない！」

「Androidのことを考える
リソースはない！」
→目の前の生産性だけ上げたい？
・長期的な生産性を考える
・エンジニア主体で進める
・許可より謝罪でやってみせる

「iOSからAndroidに移行し
た人は混乱する！」

「iOSからAndroidに移行した
ユーザーは混乱する！」
→ユーザーの立場に立てていない？
・なぜやるのか再確認
・よく考えるとユーザーは別に困らない

「マテリアルデザインで作っ
たら独自性がなくなる！」

「マテリアルデザインで作った
ら独自性がなくなる！」
→ガイドラインの理解が足りない？
・なぜどんな独自性が必要なのか再確認
・厳密に守らなくてもいい
・「あえてこうする」という施策はめっちゃあり

「ガイドラインが英語で
読めない！」

「ガイドラインが英語で
読めない！」
→そもそも読んだことない？
・まず日本語版を読んでもらう
・全体を図だけ流し読むだけでも効果あり
・目標を立てて輪読会をやる

「iOSのデザインに出来ないのは
あなたの実力が足りないだけ！」

「iOSのデザインに出来ないのは
あなたの実力が足りないだけ！」
→感情に訴えてくる？
・反論すべきところは冷静に反論する
・
・

よくあるご意見の対応例まとめ
• 発言の根拠を理解する
• 知らないことは教え合う
• お互いを尊重し合う

実践するための前提知識
∼Androidらしさとマテリアルデザインらしさ∼

iOSとAndroidのUI対応表

そんなものはない
• 同じような見た目のUIでも作られた経緯や
目的は違う
• 単純な比較はできない
• とはいえ「似てる」UIはある
• 「代用できるかも」くらいに捉える

Androidらしくする・
マテリアルデザインらしくする
• ちょっとちがう
• Androidらしさ
→標準APIで代用してiOS感から脱却
• マテリアルデザインらしさ
→ガイドラインに倣ってより優れた体験を

Androidらしくする例

right-pointing caretsは削除
• 画面遷移を示すこれ ＞
• Androidではアイコンの
意味を考えさせてしまう
ことはしない



https://developer.android.com/design/patterns/pure-android.html

枠線ボタンは使わない
• Androidでは基本RaisedButton(かFlatButton)
• Playストアで見かけるので実はアリ…？!
https://material.io/guidelines/components/buttons.html

マテリアルデザインらしくする例

タッチフィードバックをつける
• タップ可能範囲を示す
• 連続した動きを見せる
•
selectableItemBackground,
selectableItemBackgroundBorderless


https://material.io/guidelines/motion/material-motion.html
https://developer.android.com/training/material/animations.html

オフラインでも使えるようにする
• オフラインでも最低限の
機能は提供しよう
• オフライン状態であること
を伝えよう
https://material.io/guidelines/patterns/offline-states.html

続きはWebで！！！！！！！

さいごに

諸注意
• 既存のユーザーに配慮する
• 目標を立てる
• 数字をチェックする
• バランスよくやる

まとめ
もしも「AndroidはiOSと同じデザインで！」と言われたら…
• なぜAndroidらしく作るのか整理する
• 建設的な議論をする
• エンジニアのやっていき
• 一番尊重すべきはユーザー

あとはキミの目で
確かめてくれ！