有名iOS & AndroidアプリのUIデザイン比較まとめ

iOSアプリとAndroidアプリのUIデザイン違い比較

1.タブバー位置(Facebook / Twitter / YouTube / 食べログ)

iOSアプリとAndroidアプリのUIデザインで最初に気付きやすい違いがタブバー(メニューを切り替えるボタン一覧)の位置ではないでしょうか?iOSアプリではタブバーが一番下(フッター部分)にありますが、Androidアプリでは上の方にあるものを良く見かけます。

Androidのタブバーが上の方にある理由としては、Android端末には画面下部分にナビゲーションバー(戻るボタン / ホームボタン / アプリ履歴ボタン)が標準搭載されており、タブバーが下にあると誤作動を起こしやすいと考えられているためです。

タブバー位置(Facebook)

ツイッター、YouTube、食べログなどのアプリにおいてもiOSのタブバーは下、Androidのタブバーは上の方に配置させています。

また、これらのアプリにおいて、もう一つ特徴的な違いはAndroidアプリにはフローティングアクションボタン(FAB)というマテリアルデザイン特有のUIデザインが採用されている点です。このフローティングアクションボタンとは、ユーザーがその画面においてもっとも定常的に行う動作を促すためのボタンで、画面右下の丸い形で表示されています。ツイッターでは”ツイートする”ボタン、YouTubeでは”動画を作成する”ボタン、食べログでは”①写真投稿する / ②口コミ投稿する”ボタンになっています。

タブバー位置(Twitter)

タブバー位置(YouTube)

タブバー位置(食べログ)

2.リスト表示(AWA)

iOSアプリとAndroidアプリのUIデザイン違いとして、次にリスト表示が挙げられます。iOSアプリの場合は画面全体にリストが表示されるUIデザインを良く見かけますが、Androidアプリの場合はドロップダウンリストがポップアップのように画面の上に表示されるUIになります。

また、iOSアプリではリスト表示を非表示にするための”キャンセル”ボタンや”×”ボタンがありますが、Androidアプリではナビゲーションバーに戻るボタンがあるため、画面上にはあまり表示されません。

ちなみにiOSアプリではよく見かけるブラー処理ですが、Androidアプリの場合はあまりブラー処理を使ったUIデザインは見かけません。これはGoogleが推奨するマテリアルデザインにおいて、UIパーツの各要素を”紙”と”インク”の重なりの関係で表現している特徴からきていると考えられています。

リスト表示(AWA)

3.ピッカー表示(メルカリ)

リスト表示のUIデザインと似ていますが、iOSアプリではユーザーに複数の選択肢から項目を選んでもらう時にピッカー(ドラムロールのようなUIデザイン)をよく使用しますが、Androidアプリの場合はドロップダウンリストのUIデザインをよく使用します。

ピッカー表示(メルカリ)

4.フォントサイズ(スマートニュース / Facebook)

最後にiOSアプリとAndroidアプリのUIデザイン違いの特徴として、フォントサイズが挙げられます。特にコンテンツ内容においてiOSのフォントサイズよりもAndroidの方がフォントサイズが大きくなっています。これはマテリアルデザインの基本UIコンセプトの1つである”大胆で生き生きとした、意識デザイン”において大きな文字を大事にしていることから来ていると考えられます。

フォントサイズ(スマートニュース)

フォントサイズ(Facebook)

iOSとAndroidでUIデザインをそろえるアプリも登場

コメントの入力は終了しました。