マルチ ウィンドウに対応したデザイン

[この記事は Ian Lake、デベロッパー アドボケートによる Android Developers Blog の記事 "Designing for Multi-Window" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

Android N ではさまざまな役に立つ機能が追加されますが、UI のデザインと構築ということで最も注目すべき点は、マルチ ウィンドウに対する強力なサポートです。

ユーザーがマルチ ウィンドウを使用するのは、主に画面分割モードを使ってという形になります。このモードは小型モバイル デバイス、大型タブレットのどちらにおいても利用できます。画面分割モードでは、利用可能な画面スペースが 2 つのアプリによって分割される形になり、ユーザーは 2 つの分割画面の境界線をドラッグすることで、アプリのサイズを変えられるようになっています。ご想像いただけるかと思いますが、このモードにより、これまでは必要なかったデザインにおける固有の課題が出てきます。

さらにレスポンシブな UI

Android の従来バージョンや、モバイル ウェブ、デスクトップ環境から得られた教訓は、今も Android N に生かされています。レスポンシブ UIをデザインすることが、素晴らしいマルチ ウィンドウ エクスペリエンスを実現するための重要な第一歩であることに変わりはありません。



レスポンシブ UI とは、どんなデバイス上でも最高のユーザー エクスペリエンスを提供できるように、決められた画面サイズに合わせてコンテンツに最適な表示方法を判断したり、適切なナビゲーション パターンを選んだりする UI のことです。効果的なレスポンシブ UI をデザインし構築する方法について詳しく知るには、レスポンシブ UI の構築に関するブログ記事をお読みください。

レイアウトを調整する

画面の最大サイズや最小サイズ、さらにその中間のあらゆるサイズに対応したレイアウトをデザインする場合には、画面分割レイアウト ガイドラインにあるとおり、サイズ変更の際の遷移を滑らかで切れ目のないものにすることが大切になってきます。既にモバイルとタブレットで同じレイアウトを用意してあれば、必要な作業はそれほど多くないでしょう。

ただし、モバイルとタブレットのレイアウトが大きく異なっていて、どうしても滑らかに遷移できない場合は、画面サイズを変更する際にレイアウトを切り替えるべきありません。それよりも、同じレスポンシブ UI のパターンを使って、タブレット用の UI を縮小することに力を注ぎましょう。そうすれば、アプリのサイズを変更した際に、ユーザーがその UI の使い方を学び直す必要がありません。

minimalHeightや minimalWidthといった layout 属性を使えば、アクティビティに伝達する最小サイズを設定できますが、だからといって、ユーザーがアクティビティをそのサイズからさらに縮小できないわけではないことに気を付けてください。実際には、アクティビティはユーザーが希望するサイズにトリミングできるので、UI の要素が画面の外に出てしまう可能性があります。最小サイズは 220 x 220 dp までサポートするようにしましょう。

検討すべきデザイン構成

マルチ ウィンドウで可能なサイズやアスペクト比の多くは、既存のデバイスと共通しています（ランドスケープ モードにしたタブレットの画面サイズの 3 分の 1 が、既存のモバイル デバイスの画面サイズに相当します）。しかし、マルチ ウィンドウを検討する場合、さらに一般的な構成がいくつかあります。



その 1 つが、ポートレート モードのモバイル デバイスでの 16 x 9 レイアウトです。この場合、縦長のスペースはきわめて限られます。たくさんの固定要素（ツールバーやスクロール コンテンツ、サイト下部のナビゲーション バーなど）を互いに積み重ねるような場合には、最も重要な要素であるスクロール コンテンツを実際に設置するスペースが取れない可能性があります。

もう 1 つ考えるべきケースが、タブレットの 34.15% レイアウトです。デバイスをポートレート モードにしたときの幅や、ランドスケープ モードにしたときの高さは、既存のデバイスでは見られない極端なものになります。こうした構成では、自分のモバイル レイアウトをスタート地点として使うようにしましょう。

避けるべきパターン

マルチ ウィンドウでは、必ず避けてほしいパターンがいくつかあります。

1 つめは、画面のエッジからのスワイプ動作に依存した UI インタラクションです。これは、多くのデバイス（Nexus デバイスなど）でよく見られるオンスクリーン ナビゲーション バーで既に多少問題とされていますが、画面分割モードでは問題がさらに大きくなります。アクティビティが上下の画面、あるいは左右の画面のどちらで行われているのかという判断を（意図的に）不可能にすることになるので、アプリの機能にアクセスする手段をエッジ スワイプに限定するのは避けましょう。これは、そうしたスワイプを絶対に避けなければならないということではありません。ただ、スワイプ以外にアクセス方法をもう 1 つ用意しておきましょう。そうした方法として良いのが、一時的にナビゲーション ドロワーを表示する方法です。このドロワーは、エッジ スワイプで開きますが、ツールバーのハンバーガー アイコンをタップしても開くようにします。

避けるべき 2 つめのパターンは、マルチ ウィンドウを完全に無効にすることです。そうしたほうがいいケースも確かにありますが（たとえば、ゲームなどの基本的に没入型のエクスペリエンスなど）、自分のアプリのアクティビティや、そのアクティビティによって起動されたアクティビティでマルチ ウィンドウをサポートが必須であるケースもあります。マルチ ウィンドウの準備に関するブログ記事でも書いたとおり、外部アプリによって自分のアプリのアクティビティが起動されるようにしている場合、起動されたアクティビティは、呼び出す側のアクティビティのマルチ ウィンドウ設定を引き継ぎます。

あらゆるデバイスに対応したマルチ ウィンドウ デザイン

利用可能なスペースに対応するレスポンシブ UI の構築は、快適なマルチ ウィンドウ エクスペリエンスを実現するために不可欠ですが、そうした UI を構築すれば、Android デバイスの種類によらず、あらゆるユーザーの役に立ちます。

この機会を活かして #BulidBetterApps（より良いアプリを構築しましょう）。

さらに情報を得るには、Android Development Patterns Collectionをフォローしてください。


Posted by Yuichi Araki - Developer Relations Team