【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
多くのユーザーが利用している、iOSとAndroidのネイティブアプリ。ネイティブアプリをデザインするにあたっては、それぞれの違いについてきちんと知っておく必要があります。
今回は、ネイティブアプリのデザインにおけるiOSとAndroidの違いに焦点をあてて、それぞれの特徴とデザインのコツをご紹介します。
目次
画面間の移動は、モバイルアプリにおいて頻繁に行われる操作のひとつです。画面間移動を司るナビゲーションパターンについても、iOSとAndroidで大きな違いがあります。
Android端末の下部には、ナビゲーションバーがあります。ナビゲーションバーの戻るボタンを利用すると、前の画面・前のステップに戻ることができます。この機能は、ほとんどのAndroidアプリで利用可能です。
一方、AppleのデザインアプローチはAndroidとは異なります。グローバルナビゲーションバーがそもそも存在していないのです。ネイティブiOSアプリのデザインでは、Androidのような戻るボタンを利用できません。
例えば画面の左上に、「戻るボタン」を含めたネイティブナビゲーションバーを設置する必要があるでしょう。
また、Appleは前の画面への移動にスワイプジェスチャーを採用しています。このジェスチャーはほぼすべてのアプリで利用可能です。
左から右へ画面をスワイプすると、iOS端末では前の画面に戻るのに対し、Android端末ではタブが切り替わります。先述したとおり、Android端末にはナビゲーションボタンがあるのに対し、iOSにはありません。
他のモバイルアプリとの一貫性を維持するためにも、こうしたプラットフォームごとの違いを覚えておきましょう。
Googleマテリアルデザインガイドラインには、いくつかのナビゲーションオプションがあります。Androidアプリで使用される人気のナビゲーションパターンのひとつが、「ナビゲーションドロワー」と「タブ」です。
ナビゲーションドロワーとは、ハンバーガーメニューアイコンを押すことによって左右にスライドするメニューです。タブは画面タイトルのすぐ下にあり、高度なコンテンツ構成が可能で、ユーザーはアプリのビュー、データセット、機能を切り替えられます。
ボトムナビゲーションと呼ばれるコンポーネントもあります。このコンポーネントは、マテリアルデザインネイティブアプリにとっても重要です。下部のナビゲーションバーを使用すると、タップするだけでトップレベルのビューを簡単に切り替えられます。マテリアルデザインガイドラインでは、ボトムナビゲーションとタブを同時に使用することは、混乱を招く可能性があるため推奨されていません。
Appleヒューマンインターフェイスガイドラインには、ドロワーナビゲーションメニューのような標準的なナビゲーションコントロールはありません。代わりにAppleのガイドラインでは、タブバーにグローバルナビゲーションを配置することが推奨されています。アプリの画面下部のタブバーで、メインセクションをすばやく切り替えることができます。
それぞれのOSにほぼ同じ機能がありますが、ナビゲーションはiOSとAndroidにおける大きな違いのひとつです。Androidにはグローバルナビゲーションバーがありますが、iOSにはなく、システムのビジョンも異なっています。
Appleは、主要なナビゲーション要素はフォアグラウンドにあるべきであり、ハンバーガーメニューは日常的に行われる操作には向いていないと考えています。一方Androidアプリでは、ハンバーガーメニューに主要なナビゲーションを隠すのが一般的です。
各プラットフォームには独自のインタラクションがあります。違いがわかりやすい例として、デートピッカーが挙げられます。
Androidのユーザーは、iOSで一般的なスロットマシン型のデートピッカーに慣れていません。Androidで一般的なのはカレンダー型です。
iOSのユーザーは、日付や時間などをスライドして選択する、下図のようなスロットマシン型のデートピッカーを使い慣れているはずです。
マテリアルデザインガイドラインには2つのスタイルのボタンがあり、これらは状況に応じて使用されます。マテリアルデザインのボタンのテキストは、すべてが大文字となっています。
ネイティブiOSアプリにも大文字のものはありますが、ほとんどの場合はタイトルケース(はじめの一文字だけが大文字、その他は小文字)です。
名前こそ違うものの、同じような機能をもったボタンがそれぞれに存在しています。それがフローティングアクションボタン(Android)、またはコールトゥアクションボタン(iOS)です。フローティングアクションボタンは、メールの作成や投稿など、アプリケーションの主要なアクションで用いられます。コールトゥアクションボタンは、iOSアプリのタブバーの中心に配置されています。
Androidには、モーダルボトムシートと永続的なボトムシートという2種類のボトムシートがあります。そしてさらに、モーダルボトムシートには2つのコンテンツがあります。異なるアクションを含むものと、ユーザーがシェアアイコンをタップした際に表示されるアプリのリストです。
iOSのアクションシートとアクティビティビューにも、Androidと同種のコンテンツが見られます。しかし、これらのコンポーネントはAndroidのボトムシートとは外見が異なります。
マテリアルガイドラインは、すべてのエレメントを8dpの正方形のベースライングリッドに合わせることを推奨しています。タップターゲットのガイドラインは48dp×48pxです。
iOSの場合、タップターゲットのガイドラインは44px×44pxです。
標準のタイプフェイスはRobotoです。Chromeの場合や、その他Robotoがサポートしていない場合はNotoがカバーしています。
標準のタイプフェイスはSan Franciscoです。
それぞれのプラットフォームのタイポグラフィとレイアウトの違いには、細心の注意を払いましょう。
デザインという分野において、第一印象はとても需要なキーになります。だからこそまず、ユーザーの関心をひきつけることが重要なのです。そこで活用したいのが、マイクロインタラクションやアニメーションです。これらを使うことによって、ユーザーにとって非常に魅力的な体験を作ることができます。
マテリアルデザインガイドラインによれば、画面の移行の最中に変換されるインターフェイス要素は「アウトゴーイング」「インカミング」「パーマネント」の3種類に分類されます。
アニメーションを用いることによって、移行前後の要素の外観に連続性を持たせられます。
ナビゲーションの移行は、インターフェイスとのインタラクションにおいて重要な要素です。アプリの階層構造を表現することによって、ユーザーを手助けしてくれるのです。たとえば、エレメントが拡大されて全画面に表示される場合、この拡大という動きは新しい画面が子要素であり、展開される画面が親要素であることを示しています。
図のように、親画面に埋め込まれた子要素をタッチすると、子要素の画面が持ち上がって展開されます。この動作は親と子の関係を強化しながら、子画面に焦点をあてているのです。
アルバム内の写真など、同じ親を共有する画面においては、下図のように移動がスムーズに行われることによって関係が強化されます。
アプリの最上位の階層では、リンク先がタスクごとにグループ化されている場合があります。これらの画面は、不透明度や縮尺などの値を変化させることよって移行します。
iOSのユーザーは、なめらかな画面の移行やデバイスの傾きによる変化など、iOSで使用されている細かな技術・アニメーションに慣れています。そのため、動きが理にかなっておらず、物理法則に反していると、混乱する場合があります。たとえば画面を上から下にスライドさせてビューを表示した場合、ユーザーは下から上にスライドすることでビューを閉じることができると考えます。
このことから、ゲームなどの臨場感あふれるアプリを作る場合以外は、ビルトインアニメーションと類似のカスタムトランジションを作成することをおすすめします。
インタラクションはそれぞれの要素の関連性を示すという点において、とても重要な役割を果たします。画面間のなめらかな移行はユーザーの注意をひきつけ、モーションがアクションの実行方法を示してくれるのです。
ただし、インタラクションは本当に重要なことにユーザーの関心を集中させる目的で使いましょう。アニメーションを使いすぎると、ユーザーの気が散ってしまうことに繋がります。
マイクロインタラクションを使用するにあたっての基本的なルールはどちらも似ていますが、明確に異なる点もあります。ユーザーはそれぞれのプラットフォーム固有の動作に慣れており、それが当たり前のものだと考えている、という点を忘れないようにしましょう。
今回はネイティブアプリのデザインにおけるiOSとAndroidの違いと特徴をご紹介しましたが、その一方でそれぞれの特徴を全く無視したネイティブアプリがあることも事実です。
例えばiOSアプリの『Gmail』はGoogleのマテリアルデザインガイドラインに従っており、Androidアプリの『Instagram』はAppleのヒューマンインターフェイスガイドラインに則っています。
しかし、確実なことがひとつあります。それは、それぞれのOSでネイティブのコンポーネントを使用してモバイルアプリをデザインするほうがはるかに高速だということです。
Appleのヒューマンインターフェースガイドラインと、Googleのマテリアルデザインコンポーネントが混在するアプリをモックアップすることは、避けたほうが無難です。カスタム要素の開発に多くの時間を費やすよりも、デザインに時間を費やしましょう。
SteelKiwiは、ソフトウェア開発とアプリケーションデザインの会社です。ネイティブアプリの設計方法が知りたい場合は、ぜひご連絡ください。Androidデザインのベストプラクティスに従い、Appleのヒューマンインターフェイスガイドラインに準拠しています。
ネイティブエレメントとカスタムインターフェイスを使用したネイティブデザインアプリの例を見たい場合、DribbleとBehanceのページもぜひチェックしてみてください。
(著者:SteelKiwi Inc. 翻訳:Asuka Nakajima)