AndroidとiOSのアプリケーション設計の違いに迫る
デバイスの種類に最適かつ、トップレベルのユーザー体験を提供するアプリを作る上で、iOSとAndroid、この２つのプラットフォームの違いの理解はマストです。これらのアプリは外観だけでなく、構造やフローも異なります。iOSおよびAndroid用のネイティブモバイルアプリはOS固有機能が多数あります。AppleとGoogleは、可能な限りでプラットフォーム基準に沿ったアプリナビゲーションコントロール（page controls、tab bars、segmented controls、table views、 collection views、 split views）の使用を勧めています。ユーザーは各プラットフォームで稼働しているこれらのコントロール方法に慣れているため、標準コントローラーを使用する際、アプリ機能の使い方が直感的にわかります。
iOSとAndroid上のインタラクションデザイパターン間の違いにフォーカスを当て、iOSとAndroid上のアプリの外観が異なる理由を把握すると同時に、どうしてそのようになっているかも探っていきましょう。以下にネイティブアプリ設計パターンとネイティブアプリの例を挙げ、わかりやすいよう説明していきます。
<目次＞
- ナビゲーションテンプレートにおける相違点
- iOSとAndroidにおける異なるアプリナビゲーションテンプレート
- 標準コントロールのカスタムビュー機能
- iOSとAndroidにおけるボタンの形式
- AndroidのネイティブボトムシートとiOSのビュー及びアクションページの違い
- タッチターゲットとグリッドの違い
- フォントの違い
- マイクロインタラクション
１．ナビゲーションテンプレートにおける相違点
画面間の移動はモバイルアプリにおいて一般的なアクションになります。これはナビゲーションテンプレートについて言及する際、iOSとAndroidのネイティブアプリ設計原則が異なることを考慮することが重要です。Androidデバイスの最も下の部分にはナビゲーションバーがあります。ナビゲーションバーの【戻る】ボタンは、押せばひとつ前の画面もしくは手順へ戻り、ほとんどの全てのAndroidアプリで機能しています。
一方、Appleの設計方法はかなり特別です。Androidのようなユニバーサルナビゲーションバーは存在しないため、iOSアプリのデザイン中の戻るボタンで戻ります。これはiOSモバイルアプリの設計に影響を与え、画面の左上に戻るボタンが設置された独自のナビゲーションバーが必要となります。
Appleもアプリ内で左から右にスライドすることで前の画面に戻る機能を備えています。これはほとんどのアプリで稼働しています。この場合におけるiOSとAndroidの違いとして、左から右へのスライド操作をすると、ネイティブアプリのiOSデバイス上では前の画面に戻り、Android上ではタブが切り替わります。iOSと異なり、Androidデバイス上では【戻る】ボタンを含む下のナビゲーションバーで前の画面に戻ります。
これは他のモバイルアプリに対して一貫性を維持するための各プラットフォーム間の違いなので、常に頭に入れておくことが必要です。
２．iOSとAndroidにおける異なるアプリナビゲーションテンプレート
Material Designガイドラインには異なるナビゲーションオプションがいくつかあります。Androidアプリで使用されているナビゲーションテンプレートはタブとナビゲーションドロワーが組み合わさったものです。
ナビゲーションドロワーはハンバーガーメニューをタップすると左側もしくは右側からスライドしてででくるメニューのことです。各タブは画面タイトルのすぐ下に設置されており、複雑な内容の構成や、ユーザーがプレビュー機能、データセットとアプリの機能面間の切り替えを行うことが可能になります。
その他、Material Designには下部ナビゲーションと呼ばれるものがあり、これもネイティブアプリにとって重要なものです。下部ナビゲーションバーにより、ユーザーはワンタッチでトップレベルのプレビュー間の検索や切り替えが簡単にできます。Material Designの原則として、ナビゲーション時に誤認を引き起こす可能性があるため、各タブと下部ナビゲーションを同時に使用しないよう勧めています。
AppleのHuman Interface Guidelinesでは、ナビゲーションドロワーメニューと同様な標準ナビゲーションコントローラーはありません。その代わり、Appleはタブバーにグローバルナビゲーションを配置するよう推奨しています。タブバーはアプリ画面の最下部に表示され、アプリのメイン部分の切り替えを素早く行います。
通常、タブバーの項目は5個以下です。これはMaterial Designの下部ナビゲーションと同様ですが、iOSアプリではより一般的に使用されています。
タブ、セグメントコントロール、下部ナビゲーション及びタブバーなど、双方のOS上で同じような機能を実行している同様の要素がありますが、ナビゲーションはiOSとAndroid間の主な相違点の1つであることは間違いありません。他の相違点として、iOS上にはない、Androidのグローバルナビゲーションバー（仮想ナビゲーションキー）といった客観的な違いや、iOSとAndroidのビジョンの違いも挙げられます。
Appleは主なナビゲーション要素はフォアグラウンドに設置し、ハンバーガーメニューはユーザーの実行による日常的なタスクの生成機能の保管に使用するようにしています。
３．標準コントロールのカスタムビュー機能
どのプラットフォーム上でもアプリのコンポーネントを同じようにしたい場合、最適なモバイルアプリデザインの追加開発に努力が必要になります。ラジオボタン、チェックボックス、トグルボタンといったデフォルトコントロール関連で最も複雑なものを使用する場合、カスタムビューを実装し、AndroidでのiOSのようなコントロールの表示、若しくはiOS上でのAndroidのようなコントロールの表示をします。
各プラットフォームにはそれぞれ独自のインタラクションがあります。優れた設計とは、各OSのユーザーの習慣を尊重した設計です。このことは、iOSおよびAndroid上で、ニーズに合わせたモバイルアプリの設計の際に頭に入れるべき大切なことです。 当２つのプラットフォームにおいて通常設計が異なる要素の例として、日付ピッカーが挙げられます。AndroidユーザーはiOSで一般的なダイアルアップタイプの日付ピッカーに不慣れです。Androidでこのタイプの日付ピッカーを使用するにはカスタムビューが求められ、複雑化するほか、開発時間やアプリデザインがAndroidプラットフォームとかけ離れたものになります。
４．iOSとAndroidにおけるボタンの形式
Material Designのボタンには２Dタイプと３Dタイプの2つの形式があります。これらのボタンはそれぞれ異なる場面で使用されます。Material Designのボタン上のテキストは通常全て大文字です。たまにネイティブiOSアプリでも大文字ボタンテキストを見ることができますが、ほとんどタイトルケースが見られます。
もう一つボタンの種類があります。Android上のフローティングアクションボタンとiOS上の呼び出しアクションボタンです。フローティングアクションボタンはアプリ内のメインアクションを表示します。
例：メールアプリの作成ボタンもしくはSNSアプリの新規ポスト投稿ボタンはフローティングアクションボタンにできます。iOSアプリにおいてはアクション呼び出しボタンがこれと同様のデザインにあたり、タブバーの中間に設置されます。
５．AndroidのネイティブボトムシートとiOSのビュー及びアクションページの違い
６．タッチターゲットとグリッドの違い
iOSとAndroidではタッチターゲットへのガイドが異なります。(iOS：44px @ 1x Android： 48dp / 48px @ 1x). Material Designは全要素を8dpの正方形のベースライングリッドに配置することも推奨しています。
７．フォントの違い
San FranciscoはiOSのシステムフォントで、RobotoはAndroidの標準フォントとなっています。NotoはchromeとAndroidにおける各言語の標準フォントで、Robotoによって補助されています。各プラットフォームの配置及びフォントの規則について注意が必要です。
マイクロインタラクション
デザインについて述べれば、最終ユーザーの体験が第一印象となります。
これは、なぜデザインが速攻ユーザーを引き付けるのに非常に大切なのかという理由につながります。アプリ開発及び設計の過程で、アニメーションとインタラクションを通し、魅力的なユーザー体験を生み出すことができます。
双方のプラットフォームへのインタラクション及び切り替えに関する主要な推奨事項及び規則事項は以下のように定められています。
焦点と重要性：各インタラクションはユーザーがアプリ内の重要事柄に集中できるよう注力し、必要時に使用するようにする。ユーザーの集中力を欠いたり、ストレスにつながるので、双方のプラットフォーム共に限度を超えたアニメーションを推奨しないこと。
統一性と分散性：インタラクションは、各要素が関連性のあることを表示させることによって、ユーザーのアプリ内でのナビゲートにつながることを頭に置いておくことが重要である。馴染み深く、スムーズで目立たない画面から画面への切り替えはユーザーに好まれる。 これが、慣れ親しんだインタラクションへ特に注意を払うことが、ユーザー体験を向上し、各プラットフォーム上で自然に見えるようにするために重要である訳です。
iOSユーザーはiOSで使用されている繊細なアニメーションに慣れ親しんでいます。スムーズな遷移や、デバイスの向きに沿った滑らかな変化もしくは物理的にスクロールなどがその例にあたります。無意味な動きや物理法則に反した動きがある場合、iOSユーザーは混乱するような感覚になります。画面最上部から下へスライドさせてビュー表示をさせる場合、ユーザーはそれと逆方向に画面をスライドさせ、ビューをオフにしたいと思うでしょう。これは、ゲームなどの体験をユーザーが作り出している場合を除き、HIG（Human Interface Guidelines）によって、ユーザーへ組み込みのアニメーションと比較できるカスタムトランジションの実装を勧めています。
Material Designによれば、遷移過程において、遷移された各インターフェース要素は、“進行中”“ 到着中”“ 永続的”に分けられます。アイテムが属するカテゴリは、遷移実行方法に影響します。アニメーションはユーザーの注意を引きます。UIの外観が変わると、モーションが遷移前後の各要素の出現と位置間の連続性を提供します。インターフェースに対する全体的なインタラクションにおいて、ナビゲーションの移行は大事な要素となっています。それらはアプリの分散システム表示によってユーザー自身によるナビゲートをサポートします。
例えば、要素が展開されて画面全体を埋め尽くす際、展開アクションは新しい画面が子要素を表し、それが展開する画面をその親要素といいます。
同じ親のいる画面（アルバムの中の写真、プロフィールセクション、スレッドの各手順）は一斉に移動し、それらの関係を強化します。P2P画面が一方向からスライドすると、それの兄弟たちがそれと逆方向に沿って画面から移動します。アプリのトップレベルでは、宛先は多くの場合、メインの（無関係であるかもしれない）クエストにグループ化されます。比率やぼかしといった各値を変更する方法を使って、これらの画面はその場で遷移します。
結論
もちろん、GmailのようなMaterial Designに準拠している一部のiOSアプリやInstagramといったHuman Interface Guidelinesに準拠しているAndroidアプリなど、例外も存在します。しかし確かなことは、モバイルアプリの設計する際、２つのOS両方へのネイティブコンポーネントを使用すると大幅にスピードアップします。このことからも、一番いいのは、AppleのHuman Interface GuidelinesとGoogleのMaterial Designのコンポーネントのミックスをシュミレーションするアプリを開発するのではなく、その時間をデザインする時間へあて、その後カスタム要素開発にも時間を割くことでしょう。
