UI／UX事業部の事業部長の鈴木慎吾です。

iOSの標準アプリである "ミュージック" がAndroid向けアプリ "Apple Music" として提供されているのはご存知でしょうか？

iOSプラットフォーム、Androidプラットフォームそれぞれ独自のUI作法があるため、同一機能の画面であっても異なるUIを採用したいケースが少なくありません。Gmail、Google Mapsなど、GoogleがiOSプラットフォームで提供するアプリは、Material Designを採用してiOS独自のUIを使用しないのに対して、Android版 Apple Music ではMaterial Designを採用し、Androidユーザーが違和感なく使用できる点に配慮されています。 そのため、iOS、Android双方のプラットフォームで提供するアプリのUIを検討する際に、iOS版 ミュージックとAndroid版 Apple Music の比較はよい参考になるのです。

今回はiOS9.2の"ミュージック"、Android版"Apple Music" ver. 0.9.6を対象として比較します。

ナビゲーションの違い、UITabBarとNavigation drawer

上記はiOS版、Android版それぞれの主要画面の一覧です。一見して大きな構造の違いはないですが、画面数に違いがあることが分かります。 この画面数の違いは、グローバルメニューのUIの違いに起因するものです。

iOS版ではグローバルメニューにUITabBarが採用されています。iOSアプリでは非常に一般的なUIです。一方AndroidにおいてはNavigation drawerが採用されています。 UITabBarでは、画面が縦向きの場合にボタンが５つまでしか配置できないのに対して、Navigation drawerではメニュー項目の数に物理的な上限はありません。そのためiOS版では

• For You
• New
• Radio
• Connect
• My Music

の５つメニュー項目が並び、"My Music"画面内でさらに"ライブラリ"と"プレイリスト"を切り替えるのに対し、 Android版ではメニュー項目が１つ増え、

• For You
• New
• Radio
• Connect
• プレイリスト
• My Music（ライブラリ）

となります。

ヘッダー部の違い、StatusBar, UINavigationBarとToolBar

レイアウトが大きく異なる箇所として、各OSのヘッダー部分（iOS：StatusBarとUINavigationBar、Android：ToolBar）があります。

iOSについてはドキュメント上に明確なサイズの指示はありませんが、特にサイズを指定しない限りはStatusBarの高さは20points、UINavigationBarは高さ44pointsで表示されます。 AndroidについてはMaterial DesignのLayoutにサイズについての表記があります。

ボタンアイコンの違い、App固有のアイコンと、iOS、Android固有のアイコン

次に、各ボタンに使用されているアイコンを見ていきます。

グローバルメニューの各ボタンや再生コントロールなど、Appの主機能に関わるボタンに使用されているアイコンに大きな違いはありません。検索、シェア、戻る、行の追加、削除といった、OSで共通に使用されることが多いアイコンには、OS準拠のアイコンが使用されています。 各OSでの使用アイコンについては以下に記載があります。

• iOS: Template Icons
• Android: Material icons

検索UIの違い、UISearchBarとExpandable search

検索画面のUIではiOS、Androidでスタイルが異なります。

iOSでは画面上部にUISeachBarが配置され、その下にScopeBarが配置されます。ScopeBarはUISegmentedControlの見た目と同じですが、検索結果を切り替える際にUISeachBarと組み合わせて使用されるために提供されているUIです。

Androidでは検索文字列の入力エリアはExpandable searchが使用され、検索対象の切替には Tabが使用されています。

各ボタンの動作に着目すると、

iOS、Android共に入力エリアの右側に配置された「×」ボタンを押すと入力文字がクリアされます。iOSにおいては「キャンセル」ボタン、Androidでは「←」ボタンを押すと、検索モードが解除されます。

編集モードの違い、キャンセルと確定

以下はプレイリスト作成画面における「キャンセル」ボタン、「完了」ボタンです。

iOSではプレイリスト作成画面をModalViewで表示するため、モーダルを閉じる「キャンセル」ボタンと編集内容を確定させるための「完了」ボタンが配置されています。Androidではシンプルにアイコンのみで表現されます。編集キャンセルは単純に「←」ボタンで前画面に戻り、「✔」ボタンで編集内容を確定します。

iOSのキャンセルボタンは先ほどの検索モードでは右に配置されていたのに対して、ModalViewでは左に配置されます。iOSの複数の標準アプリを確認したところ、キャンセルボタンが確定ボタンとの組み合わせで配置される場合には左に配置され、それ以外の場合は右に配置されるというルールのようです。

行の削除と並び替えの違い、UITableViewとListView

引き続き、プレイリスト作成画面を見ていきます。この画面には一覧（iOSの場合はUITableView、Androidの場合はListView）の行の削除と並び替えの機能があります。

iOS版ではUITableViewのEditingModeでの標準UIが採用されています。Android版ではGmailアプリなど、Androidの標準アプリと同様のUIが採用されています。ListViewの各行をサムネイル部分を長押しすると、チェックマークが表示され選択状態になり、ToolBarのゴミ箱ボタンを押すと曲が削除されるます。 行の並び替え、削除などの複雑な操作が必要となるUIの場合は、特別な理由がないか限り各OSの標準的なUIを使用するのがよいでしょう。ユーザーにとっては操作上の負担を、開発者にとっては実装面での負担を減らすことができるためです。

App Iconの違い

最後にApp Iconについてです。App Iconも各プラットフォームに応じたガイドラインがあり、最適な形状も異なります。 但しアプリの同一性を示すアイデンティティとして、異なるプラットフォームにおいても同一のアプリとして認識できなくてはなりません。

ミュージック／Apple Music での対応はとてもシンプルです。App Iconの核となる部分はグラデーションで塗られた音符で表現され、背景部分が各プラットフォームに応じた形状に切り取られます。各OSでのガイドラインは以下の通りです。

• iOS: アプリケーションアイコン
• Android: Product icons

今回取り上げたミュージック／Apple Music ではiOS版とAndroid版の比較を行いましたが、多くのユーザーに使われ、頻繁に改善されているアプリを観察してみるとさまざまな発見があります。UI設計に迷って手が止まった際は、普段使い慣れたアプリのUIを観察してみると、思わぬヒントが隠れているかもしれません。