ネイティブアプリをデザインする際に気をつけたい、AndroidとiOSの違い

多くのユーザーが利用している、iOSとAndroidのネイティブアプリ。ネイティブアプリをデザインするにあたっては、それぞれの違いについてきちんと知っておく必要があります。

今回は、ネイティブアプリのデザインにおけるiOSとAndroidの違いに焦点をあてて、それぞれの特徴とデザインのコツをご紹介します。

1. ナビゲーションパターンにおける違い

画面間の移動は、モバイルアプリにおいて頻繁に行われる操作のひとつです。画面間移動を司るナビゲーションパターンについても、iOSとAndroidで大きな違いがあります。

Androidの場合

Android端末の下部には、ナビゲーションバーがあります。ナビゲーションバーの戻るボタンを利用すると、前の画面・前のステップに戻ることができます。この機能は、ほとんどのAndroidアプリで利用可能です。

▲Androidのナビゲーションバー

iOSの場合

一方、AppleのデザインアプローチはAndroidとは異なります。グローバルナビゲーションバーがそもそも存在していないのです。ネイティブiOSアプリのデザインでは、Androidのような戻るボタンを利用できません。

例えば画面の左上に、「戻るボタン」を含めたネイティブナビゲーションバーを設置する必要があるでしょう。

▲iOSの戻るボタン

また、Appleは前の画面への移動にスワイプジェスチャーを採用しています。このジェスチャーはほぼすべてのアプリで利用可能です。

▲左から右へのスワイプジェスチャー（iOS）

おさえておきたいポイント

左から右へ画面をスワイプすると、iOS端末では前の画面に戻るのに対し、Android端末ではタブが切り替わります。先述したとおり、Android端末にはナビゲーションボタンがあるのに対し、iOSにはありません。

他のモバイルアプリとの一貫性を維持するためにも、こうしたプラットフォームごとの違いを覚えておきましょう。

▲左から右へのスワイプジェスチャー（Android）

2. アプリ内のナビゲーションパターンの違い

Androidの場合

Googleマテリアルデザインガイドラインには、いくつかのナビゲーションオプションがあります。Androidアプリで使用される人気のナビゲーションパターンのひとつが、「ナビゲーションドロワー」と「タブ」です。

ナビゲーションドロワーとは、ハンバーガーメニューアイコンを押すことによって左右にスライドするメニューです。タブは画面タイトルのすぐ下にあり、高度なコンテンツ構成が可能で、ユーザーはアプリのビュー、データセット、機能を切り替えられます。

▲ドロワーナビゲーションメニュー（左）タブ（右）

ボトムナビゲーションと呼ばれるコンポーネントもあります。このコンポーネントは、マテリアルデザインネイティブアプリにとっても重要です。下部のナビゲーションバーを使用すると、タップするだけでトップレベルのビューを簡単に切り替えられます。マテリアルデザインガイドラインでは、ボトムナビゲーションとタブを同時に使用することは、混乱を招く可能性があるため推奨されていません。

▲ボトムナビゲーション

iOSの場合

Appleヒューマンインターフェイスガイドラインには、ドロワーナビゲーションメニューのような標準的なナビゲーションコントロールはありません。代わりにAppleのガイドラインでは、タブバーにグローバルナビゲーションを配置することが推奨されています。アプリの画面下部のタブバーで、メインセクションをすばやく切り替えることができます。

▲iOSのセグメンテッドコントロール（左上部）iOSのタブバー（右下部）

おさえておきたいポイント

それぞれのOSにほぼ同じ機能がありますが、ナビゲーションはiOSとAndroidにおける大きな違いのひとつです。Androidにはグローバルナビゲーションバーがありますが、iOSにはなく、システムのビジョンも異なっています。

Appleは、主要なナビゲーション要素はフォアグラウンドにあるべきであり、ハンバーガーメニューは日常的に行われる操作には向いていないと考えています。一方Androidアプリでは、ハンバーガーメニューに主要なナビゲーションを隠すのが一般的です。

3. デートピッカーの違い

各プラットフォームには独自のインタラクションがあります。違いがわかりやすい例として、デートピッカーが挙げられます。

Androidの場合

Androidのユーザーは、iOSで一般的なスロットマシン型のデートピッカーに慣れていません。Androidで一般的なのはカレンダー型です。

iOSの場合

iOSのユーザーは、日付や時間などをスライドして選択する、下図のようなスロットマシン型のデートピッカーを使い慣れているはずです。

▲iOSのコントロール画面（左）Androidのコントロール画面（右）

▲iOSのピッカー（左）Androidのピッカー（右）

4. ボタンスタイルの違い

Androidの場合

マテリアルデザインガイドラインには2つのスタイルのボタンがあり、これらは状況に応じて使用されます。マテリアルデザインのボタンのテキストは、すべてが大文字となっています。

iOSの場合

ネイティブiOSアプリにも大文字のものはありますが、ほとんどの場合はタイトルケース（はじめの一文字だけが大文字、その他は小文字）です。

▲マテリアルデザインガイドラインのボタン（左）ヒューマンインターフェイスガイドラインのボタン（右）

おさえておきたいポイント

名前こそ違うものの、同じような機能をもったボタンがそれぞれに存在しています。それがフローティングアクションボタン（Android）、またはコールトゥアクションボタン（iOS）です。フローティングアクションボタンは、メールの作成や投稿など、アプリケーションの主要なアクションで用いられます。コールトゥアクションボタンは、iOSアプリのタブバーの中心に配置されています。

▲iOSのコールトゥアクションボタン（左）Androidのフローティングアクションボタン（右）

5. ボトムシートとアクションシート&アクティビティビューの違い

Androidの場合

Androidには、モーダルボトムシートと永続的なボトムシートという2種類のボトムシートがあります。そしてさらに、モーダルボトムシートには2つのコンテンツがあります。異なるアクションを含むものと、ユーザーがシェアアイコンをタップした際に表示されるアプリのリストです。

iOSの場合

iOSのアクションシートとアクティビティビューにも、Androidと同種のコンテンツが見られます。しかし、これらのコンポーネントはAndroidのボトムシートとは外見が異なります。

▲Androidのマテリアルデザインボトムシート（左）iOSのアクションシート（右）

6. タップターゲットとグリッドの違い

Androidの場合

マテリアルガイドラインは、すべてのエレメントを8dpの正方形のベースライングリッドに合わせることを推奨しています。タップターゲットのガイドラインは48dp×48pxです。

iOSの場合

iOSの場合、タップターゲットのガイドラインは44px×44pxです。

7. タイポグラフィーの違い

Androidの場合

標準のタイプフェイスはRobotoです。Chromeの場合や、その他Robotoがサポートしていない場合はNotoがカバーしています。

iOSの場合

標準のタイプフェイスはSan Franciscoです。

おさえたいポイント

それぞれのプラットフォームのタイポグラフィとレイアウトの違いには、細心の注意を払いましょう。

▲Androidのタイポグラフィ（左）iOSのタイポグラフィ（右）

8. マイクロインタラクションの違い

デザインという分野において、第一印象はとても需要なキーになります。だからこそまず、ユーザーの関心をひきつけることが重要なのです。そこで活用したいのが、マイクロインタラクションやアニメーションです。これらを使うことによって、ユーザーにとって非常に魅力的な体験を作ることができます。

Androidの場合

マテリアルデザインガイドラインによれば、画面の移行の最中に変換されるインターフェイス要素は「アウトゴーイング」「インカミング」「パーマネント」の3種類に分類されます。

アニメーションを用いることによって、移行前後の要素の外観に連続性を持たせられます。

ナビゲーションの移行は、インターフェイスとのインタラクションにおいて重要な要素です。アプリの階層構造を表現することによって、ユーザーを手助けしてくれるのです。たとえば、エレメントが拡大されて全画面に表示される場合、この拡大という動きは新しい画面が子要素であり、展開される画面が親要素であることを示しています。

▲親要素と子要素の例（マテリアルデザインガイドライン）

図のように、親画面に埋め込まれた子要素をタッチすると、子要素の画面が持ち上がって展開されます。この動作は親と子の関係を強化しながら、子画面に焦点をあてているのです。

アルバム内の写真など、同じ親を共有する画面においては、下図のように移動がスムーズに行われることによって関係が強化されます。

▲同時に水平に移動するタブ

アプリの最上位の階層では、リンク先がタスクごとにグループ化されている場合があります。これらの画面は、不透明度や縮尺などの値を変化させることよって移行します。

iOSの場合

iOSのユーザーは、なめらかな画面の移行やデバイスの傾きによる変化など、iOSで使用されている細かな技術・アニメーションに慣れています。そのため、動きが理にかなっておらず、物理法則に反していると、混乱する場合があります。たとえば画面を上から下にスライドさせてビューを表示した場合、ユーザーは下から上にスライドすることでビューを閉じることができると考えます。

このことから、ゲームなどの臨場感あふれるアプリを作る場合以外は、ビルトインアニメーションと類似のカスタムトランジションを作成することをおすすめします。

おさえておきたいポイント

インタラクションはそれぞれの要素の関連性を示すという点において、とても重要な役割を果たします。画面間のなめらかな移行はユーザーの注意をひきつけ、モーションがアクションの実行方法を示してくれるのです。

ただし、インタラクションは本当に重要なことにユーザーの関心を集中させる目的で使いましょう。アニメーションを使いすぎると、ユーザーの気が散ってしまうことに繋がります。

マイクロインタラクションを使用するにあたっての基本的なルールはどちらも似ていますが、明確に異なる点もあります。ユーザーはそれぞれのプラットフォーム固有の動作に慣れており、それが当たり前のものだと考えている、という点を忘れないようにしましょう。

まとめ

今回はネイティブアプリのデザインにおけるiOSとAndroidの違いと特徴をご紹介しましたが、その一方でそれぞれの特徴を全く無視したネイティブアプリがあることも事実です。

例えばiOSアプリの『Gmail』はGoogleのマテリアルデザインガイドラインに従っており、Androidアプリの『Instagram』はAppleのヒューマンインターフェイスガイドラインに則っています。

▲iOSのGmail（左）AndroidのGmail（右）

▲iOSのInstagram（左）AndroidのInstagram（右）

しかし、確実なことがひとつあります。それは、それぞれのOSでネイティブのコンポーネントを使用してモバイルアプリをデザインするほうがはるかに高速だということです。

Appleのヒューマンインターフェースガイドラインと、Googleのマテリアルデザインコンポーネントが混在するアプリをモックアップすることは、避けたほうが無難です。カスタム要素の開発に多くの時間を費やすよりも、デザインに時間を費やしましょう。

SteelKiwiは、ソフトウェア開発とアプリケーションデザインの会社です。ネイティブアプリの設計方法が知りたい場合は、ぜひご連絡ください。Androidデザインのベストプラクティスに従い、Appleのヒューマンインターフェイスガイドラインに準拠しています。

ネイティブエレメントとカスタムインターフェイスを使用したネイティブデザインアプリの例を見たい場合、DribbleとBehanceのページもぜひチェックしてみてください。

（著者：SteelKiwi Inc.　翻訳：Asuka Nakajima）