Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
マルチ ウィンドウに対応したデザイン
2016年6月6日月曜日
[この記事は
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
コメントを投稿
ラベル
#hack4jp
3
Addy Osmani
1
ADK
2
AdMob
1
ALPN
1
AMP
3
Analytics
4
Andorid
6
Android
148
Android Auto
1
Android Design Support Library
1
Android Developer Story
2
Android N
3
Android Studio
12
Android Support Library
3
Android TV
7
Android Wear
20
androidmarket
3
AngularJS
2
API
20
APIExpert
45
app engine
21
App Indexing
5
App Invites
5
AppCompat
2
Apps Script
6
aprilfool
3
ArtTech
1
Audio
2
Auth Code
1
Authentication
2
AuthSub
2
Autotrack
1
Beacons
5
BigQuery
6
BLE
4
Blink
1
blogger
1
Brillo
1
Brotli
1
Calendar
1
Cardboard
3
Career
1
Case Study
1
chrome
53
Chrome Custom Tab
1
chrome extension
2
Chrome for Android
1
Chrome for iOS
1
Chromecast
6
chromewebstore
6
Chromium
4
ClientLogin
3
Cloud
8
Cloud Test Lab
1
CocoaPods
1
codejam
5
codelab
2
compute engine
3
Dart
2
DataCenter
1
Deep Learning
1
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
3
Developer Preview
2
Developer Relations
2
DevFest
6
DevFestX
3
devtools
3
DirectShare
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
2
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
8
font
2
game
14
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
10
Geo
22
Gingerbread
1
GLIDE
5
Gmail
1
Go
1
golang
4
goo.gl
1
Google
5
Google Apps
1
Google Cast
6
Google Cloud Messaging
8
Google Cloud Platform
6
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
1
Google Drive
2
Google Fit
2
Google for Work
1
Google Maps
27
Google Play
27
Google Play Game Services
6
Google Play Services
18
Google Plus
14
Google Search
3
Google Sign-In
8
Google+
1
Googleapps
10
GoogleGames
1
GoogleI/O
26
GoogleLabs
1
GoogleTV
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
5
HTML5
17
HTML5Rocks
1
HTTP/2
3
HTTPS
2
ID Token
1
Identity
10
Identity Toolkit
1
Ignite
4
IME
10
intern
2
iOS
8
IoT
1
IPv6
1
JavaScript
4
K-12
1
Knowledge Graph
1
l10n
8
Lollipop
10
Machine Learning
1
Marshmallow
10
Material
1
Material Design
17
MDL
1
MIDI
1
Mobile
8
Mobile Bootcamp
4
Mobile Vision
3
mod_pagespeed
1
monetize
3
Mozc
14
Music
1
NativeDriver
2
Nearby
3
Nexus
1
Nexus S
1
NFC
1
NPAPI
2
NPN
1
oauth
6
OpenGL
3
OpenID
3
OpenID Connect
2
OpenSocial
1
opensource
11
Payment
1
People API
1
Performance
6
PersonFinder
1
Physical Web
2
Place Picker
1
Player Analytics
4
Policy
2
Polymer
6
Progressive Web Apps
4
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
publicdata
1
Push API
1
Push Notification
1
QUIC
1
RAIL
1
Remote Display API
1
Runtime Permission
1
Sample Code
2
schema.org
1
security
8
Service Worker
3
sketchup
1
SmartLock for Passwords
4
social
4
SPDY
3
speak2tweet
1
startup
3
streetview
3
Study Jams
3
techtalk
12
TensorFlow
1
test
2
ToS
1
Transliteration
1
Twitter
1
Udacity
14
Unity
2
UX
1
V8
2
VP9
1
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
2
Web Animations
1
Web Components
4
Web Manifest
1
WebAssembly
1
WebMusic
3
WTM
2
YouTube
14
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2016
6
5
4
3
2
1
2015
12
11
10
9
8
7
6
5
4
3
2
2014
12
11
10
9
8
7
6
5
4
3
2
1
2013
12
11
10
9
8
7
6
5
4
3
2
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
7
6
5
4
3
2
1
2010
12
11
Feed
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"