デザイナーのためのユニバーサルアプリ実践ガイド【iOS向け】

コードの書き方を知る必要はないにせよ、デザイナーが開発に関する技術を理解していることは、プロダクトの質を高める上で非常に重要です。今日の市場競争に勝ち残るためにも、デザイナーはディベロッパーの言葉を理解し、プロダクトの実装に関わる全ての技術的な側面をある程度理解する必要があります。

私は5年以上デザインの仕事に関わってきましたが、そのほとんどはモバイル用アプリケーション制作の仕事でした。その過程で、多くのデザイナーがユニバーサルアプリケーションのコンセプトについて理解に苦しんでいることが判明しました。そこで本記事では、そんなデザイナーのために、ユニバーサルアプリケーションの定義とそのメリットをまとめます。

なお、今回はApple製品におけるユニバーサルアプリの実践ガイドをお届けします。

ユニバーサルアプリとは？そのメリット

ユニバーサルアプリとは、複数のデバイスに対応するアプリをさします。

ユーザー、デザイナー、ディベロッパーのそれぞれの視点からみた、ユニバーサルアプリの利点は以下の通りです

• 開発者の利点：全てのデバイスをサポートできる。ユニバーサルアプリが発明される以前は、各デバイス向けに、それぞれ独自の設計をする必要があった
• デザイナーの利点：ひとつのアプリケーションを維持することで、全てのデバイスで一貫したUXを保てる
• ユーザーの利点：異なるデバイスで同一アプリを複数ダウンロードでき、見た目もデバイスそれぞれに対応している

ユニバーサルアプリを意識する理由とは？Apple製品で考える

2018年9月25日から配信が開始されたMacOS Mojaveでは、今までiOSのみに対応していたアプリケーションが複数搭載されています。例えば、ニュースやボイスメモ、ホームなどの機能です。このようなアプリケーションの適応化は世界中のトレンドとなっており、これによってユーザーはiPhone、iPad、MacOSで同一のアプリを使用することが可能になります。今後、全デバイスに対応したこのようなアプリケーションはますます増えていくことでしょう。だからこそ、デザイナーは適応モデルのコンセプトについて理解をする必要があるのです。

iPhone SE、iPhone 8/8 Plus、iPhone XS、その他旧モデル、iPad、iPad Proなど、Appleは何億という数のモバイルデバイスを販売しています。これらのデバイスはサイズが異なるだけでなく、アプリケーションの動作の仕方も異なります。デザイナーとして、どのデバイスでも素晴らしく見えるアプリをデザインしたいものです。また、iPhoneとiPadの場合は、ランドスケープモード、ポートレートモードどちらでも適切に表示される必要があります。また、iPadではマルチタスク機能があり、ひとつの画面に2つのアプリを同時に開けるスプリットビュー機能があることも忘れてはなりません。Appleによれば、同じiOSアプリでもモバイルデバイス上では300以上の表示パターンがあると言われています。だからこそ、適応型モデルのユニバーサルアプリを生み出すことが大切になるのです。

iOSデバイス向け 分割表示と”サイズクラス”

より多くのデバイスが市場に登場した結果、AppleはiOS 8向けの適応型モデルを発表し、iOS 9では分割スクリーン技術を導入しました。

分割スクリーンとは、iPadまたはiPhone 8 Plus以上の端末で、複数のアプリを同時に表示する技術をさします。アプリケーションをスムーズに使用できるよう、通常は適応型レイアウトが導入されます。

アプリケーションが適応できるサイズには、16個の段階があります。Appleはそこで、どのサイズやオリエンテーションでも適応できる”サイズクラス（Size Classes）”の導入を推奨しています。

サイズクラスは、縦横のサイズをカテゴリー化し、それに合わせてアプリケーションの動作を予測するものです。コンパクト（Compact）、標準（Regular）、その他（Any）の3つのクラスがあります。コンパクトは限られたスペース、標準は拡大されたスペースを指します。

以下の表を見てもらえると分かりますが、iPadとiPad Proはポートレイト、ランドスケープモード共に標準サイズ、iPhone 6/7/8/XS Plus以外のiPhonesはコンパクトサイズということが分かります。iPhone 6/7/8/XS Plusのみ、ランドスケープモード上では横幅が標準となっています。

Sketch用に、サイズクラスのテンプレートも作成したので、参考にしてみてください。

iOSデバイス上におけるアプリナビゲーションとその見た目の依存性

ユニバーサルアプリのデザインは、モバイル中心のコンパクトビューを優先して作られるのが理想です。iPad上でのアプリの動作は、ナビゲーションスタイルに依存しています。

Appleはガイドライン上で、いくつかのナビゲーションスタイルを紹介しています。

1. 階層型ナビゲーションスタイル（設定、メールなど）
2. フラット型ナビゲーションスタイル（Appleミュージック、Appleストアなど）
3. コンテンツ/UX中心のナビゲーションスタイル（ゲームなど）

階層型ナビゲーションアプリ

階層型のナビゲーションスタイルはメールアプリなどで使用されています。アプリ画面の左側はメールリストによって構成されており、右側にはそれぞれのメール内容の詳細が配置されます。

フラット型ナビゲーションアプリ

フラットナビゲーションを採用したアプリは、サイズは適応されているものの、iPhone上とiPad上で同じ見た目を実現できます。Apple Music、App Storeなどがこのタイプに当てはまります。

またゲームのようなコンテンツ中心のアプリは、 iPad/iPhone上でそれぞれ見た目がほぼ同じようになります。

より複雑なナビゲーションを使用したアプリ

他にも、より複雑なナビゲーションを使用したアプリが数多く存在します。例えば、階層型、フラット型の2つのナビゲーションタイプを組み合わせたアプリも存在します。Dropboxはそうした複雑なナビゲーションを採用したアプリの一例です。

まとめ

ネイティブなアプローチでユニバーサルアプリを作成する際は、この記事で紹介したポイントに留意すると良いでしょう。

まずはどのタイプのナビゲージョンを使用するか決定し、iPhone向けにデザインを作り、その後にiPadへ適応させるというプロセスで作成するのがおすすめです。

その他にも、「なぜそうするのか？」ということを常に自問しながら、ユニバーサルアプリを作ってみましょう。

（著者：Katherine Misharina　翻訳：Mariko Sugita）