こんにちは、ゆうきです！
昨年新卒で入社して、気づけば10ヶ月が経ちました✨
最近ではアプリのUIデザインを任せていただく機会も増え、実務を積みながら「AndroidとiOSのUIって、こんなにも違うんだ！」と驚かされることが多いです😮

そこで今回は、実際のアプリ画面を例に挙げて、

• アイコンのモチーフ
• カラー
• ボタンの配置
• 挙動

など、AndroidとiOSのUIの違いについて分かりやすく解説します。
この記事を読むことで、AndroidユーザーにもiPhoneユーザーにも使いやすいUIを提供するためのヒントを持ち帰っていただければと思います！

アプリデザイナーはもちろん、WEBデザイナーにも役立つ内容ですので、ぜひ最後までお読みください！

【調査方法と注意点】
Google Pixel 8とiPhone12の実機に同じアプリをインストールし、スクショをとって比較しました。
期間：2024年12月20日〜12月24日
※お伝えする内容は、事例のひとつです。できる限り一般的な事例を選んでいますが、すべてのプロダクトに当てはまるわけではありませんので、その点ご理解ください。

1. アイコンの違い

前の画面に戻るアイコンの違い

参考アプリ：YouTube

AndroidとiOSでは、「前の画面に戻る」ためのアイコンに大きな差があります。AndroidではMaterial Designのガイドラインに沿った真っすぐな左向き矢印が標準的で、画面上部のアクションバー（トップアップバー）に配置されることが多いようです。

一方、iOSの場合は、左向きの“くの字”のような矢印（通称：Chevron）を使用するのが一般的で、時には「Back」や前の画面名がアイコンの右に表示されることがあります。

三点リーダーの向きが違う

参考アプリ：Spotify

スマホアプリでよく見かける「その他のメニュー」を示す三点リーダー（…）のアイコンですが、AndroidとiOSで向きが異なることにお気づきでしょうか？

AndroidのMaterial Designでは「縦に並んだ三点リーダー」が基本とされ、いわゆる「Kebab Menu（ケバブメニュー）」と呼ばれるアイコンを使用します。

一方、iOSの場合は、横に並んだ「…」が一般的です。Appleの純正アプリなどを見ても、オプションや追加メニューを呼び出す際は水平の三点リーダーが使われることが多いです。

とても些細な部分ですが、このような細部のこだわりが使いやすいアプリ体験へと繋がりますね！

共有アイコンが違う

参考アプリ：X

スマホアプリでよく見かける「シェア（共有）」ボタンも、AndroidとiOSでデザインが異なります。AndroidのMaterial Designでは、縦に並んだ3つのノードが線でつながったような形が基本的な「共有」アイコンです。

一方、iOSでは、上向き矢印が箱の外に飛び出すようなアイコンが標準的です。これはApple独自の「共有」アイコンで、Safariや写真アプリなど、純正アプリでも共通して使われています。

2. アクションシートの違い

参考アプリ：X

Androidで使われる「ボトムシート」は、画面下部からスライドアップする形で表示され、選択肢が増えても操作性が保たれやすいのが特徴です。

一方、iOSでよく使われる「アクションシート」は、オブジェクトの近くにスッと表示され、選択肢をタップすることで操作や設定が行えます。シンプルで直感的ですが、選択肢が多くなると、画面が狭く感じられることがあります。また、さまざまなスマホの画面サイズに対応するのが難しいという点もあります。

そのため、最近ではiOSアプリでも「ボトムシート」を採用するケースが増えている印象です。

3. 破壊的アクションのモーダルの違い

Androidは破壊的アクションに赤色を使わないことがある

参考アプリ：Spotify / X

iOSのアクションシートなどでは、「削除」や「退会」などの破壊的アクションを赤色で表示するのが一般的です。これにより、ユーザーが重要な操作であることを一目で把握しやすくなっています。

一方、Androidアプリでは、破壊的アクションに赤色を使用しないケースが多くあります。
これは、Material Designの「赤色はエラー・警告に使用する」というガイドラインの影響が大きいのではないかと考えられます。

4. 「戻る＆閉じる」のヘッダーの表現

iOSは右上にボタンがあることがある

参考アプリ：マクドナルド / X

iOSアプリでは、特にモーダル画面やダイアログ、サイドメニューなどのヘッダーの右側に「閉じる」ボタンが配置されていることがよくあります。

そのため、ユーザーは左上の「戻る」ボタンと右上の「閉じる」ボタンを無意識のうちに使い分けているのではないかなと思います。

一方、Androidでは、この右上の「閉じる」ボタンを使用することが少なく、代わりに左上に「戻るボタン」を設置する傾向にあります。
iOSに比べると「戻る」と「閉じる」を分けて扱うことが少ないとも言えるかと思います。

「キャンセル」という文言がヘッダーにあるのはiOSの特徴

参考アプリ：Spotify / X

iOSアプリでは、特にモーダルダイアログや検索窓、アクションシートなどのヘッダーに「キャンセル」という文言が表示されることがよくあります。この「キャンセル」ボタンは、ユーザーが現在行っている操作を中断し、前の画面に戻るか、操作を取り消すという意味があります。

一方、Androidでは「キャンセル」ボタンがヘッダーに表示されることは比較的少なく、代わりに「戻る←」ボタンや「閉じる✖️」ボタンを設置することが一般的です。

5. スクロールの挙動とAppleの特許

Pull to refresh（引っ張って更新）の際の違い

参考アプリ：note

こちらの記事をスマホで読んでいる方は、ぜひ記事の一番上に戻ってPull to refresh（引っ張って更新）をしてみてください。

どうでしょうか？Androidでは上から緑色の更新アイコンがひょこっと下に出てくると思います。

一方で、iPhoneの方は、ページ全体が下に動きコンテンツの外側の領域が垣間見えるバネのような動きをすると思います。

iOSには「バウンススクロール」という独自のスクロール挙動があり特許で守られている！

なぜこのような違いがあるのかというと、「バウンススクロール」はAppleの特許だからだそうです！

バウンススクロールとは、スクロールの端に到達した際に、少し弾むような動きをすることで、画面の境界を感じさせ、ユーザーに対して「これ以上スクロールできない」ことを直感的に伝えるインタラクションです。

このスクロール効果はAppleが特許を取得しているため、他のプラットフォームでは簡単に再現できない独自の動きとなっているのです！

Androidでは、この特許を侵害しないようにバウンススクロールを避けてデザインする必要性があります。気をつけたいところですね！

6. 長押し

AndroidもiPhoneも長押しをすると、そのオブジェクトに対するアクションが選択できるということが多いです。
一方で、以下のような違いもあります。

Androidでは長押しで複数選択モードになることが多い

参考アプリ：Gallery（Google）

Google系のアプリでは、画像のように長押しをするとオブジェクトが選択され、自動で複数選択モードになることが多くあります。

iPhoneユーザーには慣れていない挙動かも知れません。
実際にiPhoneユーザーの同僚にこの話をすると「長押しで複数選択ができるの知らなかった！」と驚かれたりもしました。

iOSでは長押しで中身の確認ができることが多い

参考アプリ：写真（Apple）

Apple系のアプリでは、画像のように長押しをするとオブジェクトが大きくクローズアップされ、中身が確認できることが多いようです。
LINEなどメッセンジャーアプリでは「既読をつけずに内容を見れる裏技！」として浸透していますよね。

AndroidとiOSのいいとこ取りをしよう！

これまで、AndroidとiOSのUIの違いを紹介してきましたが、実際には

• 完全にどちらかに準拠している
• AndroidとiOSで全てを出し分けて対応する

というアプリは少ないようです。

日本向けのアプリはiOSをベースに、海外向けのアプリはAndroidをベースにAndroidとiOSの"いいとこ取り"をして、共通して使える部分はそのまま活かすようなアプローチが多い印象です。

さいごに

最後まで読んでいただきありがとうございます！
いかがでしたでしょうか？「え！そんな違いあったの？！」という発見があれば嬉しいです！
今回のようなプラットフォームの違いを理解した上で、より優れたユーザー体験をデザインしていけるように頑張りたいです✨

viviONでは仲間を募集しています

株式会社viviONでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」「新しいサービスのデザインに携わりたい！」などデザインチームの仕事やviviONの社風に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。