マルチデバイスUI設計で注目したい５つの要素

2011年 UI/UX トレンドという記事で、モバイルWebデザインのノウハウがデスクトップにも影響し始めているという指摘をしました。Mac OSX Lion や Windows 8 のような OS だけでなく、Web サイトにも変化が見られています。スクリーンの大きさを活用してモバイル環境では再現が難しいダイナミックで動きが多いレイアウトも出て来ている一方、モバイルアプリの血を受け継いだかのような目的にフォーカスしやすく、目的までのステップと選択肢が少ない Web サイト / アプリケーションも次々と出て来ています。

今後デスクトップOS がモバイルOSのようになり、利用者がシンプルな操作と体験を求めやすい環境になれば、Web サイトも次第にシンプルになる可能性がありますし、そうしなければならない状況も出てくるでしょう。デバイスが変わっても同じような体験を作ることが必要になれば、デスクトップはシンプルになるでしょうし、モバイル向けは単純化ではなくデスクトップで見られるようなダイナミックさが必要になるでしょう。

お互いが影響し合いながら進化を続けているデスクトップとモバイル。これらを分けて考えるのではなく、どちらでも使える同じ UI を開発するようになるかもしれません。スクリーンの大きさから考えると、タブレットとデスクトップは同じように扱える可能性があります。

実はその傾向は既に見ることができます。Amazon が提供している iPad 向け公式アプリ ショーケース。これと同じ UI を Google Chrome アプリ で採用しています。Chrome を使っていない方も windowshop.com から確認することが出来ます。キーボードを矢印キーを使わなければ横移動が出来ませんが、iPad 版とほとんど変わらない UI とインタラクションを実現しています。

このように、タブレットの UI をそのままデスクトップへもってくるという場合もありますが、兼用できる UI は今のところ難しいと考えています。ショーケースのように製品観覧のフローがシンプルで機能が絞られているのであれば、兼用で使える場合もありますが、以下の違いが異なるデバイスで同じ UI は難しくしています。

マウス vs. 指

タップのしやすさという程度であれば GUI の調整でどうにでもなりますが、操作のきめ細かさの度合いや、操作をしている際の感覚はそれぞれ異なります。

設置型 vs. 手持ち型

デスクトップのように机の上に設置してあるタイプと、片手、又は両手を使ってデバイスを支えなければならない場合では、インプットの仕方や制限が異なります。親指での操作が中心になるものと、10本の指をインプットに使えるのでは大きな違いです。

先述したショーケースはデスクトップでも満足度の高い操作性を実現していますが、疑問点もあります。例えば、製品の詳細ページの左側に縦にならぶメニュー。タブレットであれば、左手の親指で簡単に操作できることを目的にしてこうした UI にしたというのが分かりますが、デスクトップだとなぜこの位置に縦に並んでいるのかという意図が伝わってきませんし、横に並べても良いのでは？と感じると思います。

Netflix の映画のブラウジング画面。左から Web、XBOX、iPad、Android。

インプットの仕方によって UI を調整している一例として Netflix があります。Netflix は Web サイトだけでなく、ゲーム機、セットトップボックス、Blu-Ray プレーヤー、モバイル機器など様々なデバイスで専用アプリケーションを開発しています。利用者がマウスを使うのか、リモコンを使うのか、ゲーム機のコントローラーを使うのか、指なのかによって「複数の映画をブラウジング」というタスクの UI を変えてみせています。インプットの仕方が同じであれば、メーカーが違っても UI が似たような雰囲気になりますが、インプットが変わると見せ方は大きく変わるのが Netflix の例を見ると分かります。

今後、モバイル（特にタブレット）とデスクトップの UI デザインが似たような雰囲気になるのかというと、答えは「YES」であり「NO」です。ショーウィンドウのように同じ UI にしてもサービスとして十分提供できるものもあれば、Netflix のように最適化をして提供したほうが望ましい場合もあます。今後、マルチデバイスへ向けた UI デザインを考えいく上で以下の図は参考になると思います。

マルチデバイスになるものの、共通しているのは「体験」「ブランドイメージ」です。Webサイトやアプリケーションから期待されている体験を提供すること、達成したい目的は、デバイスが変わっても同じです。また、ブランドイメージも一貫性が保たなくてはいけません。色、タイポグラフィ、グラフィックがブランドを反映し、それがすべてのデバイスで同じように印象付けすることが出来るかがポイントになります。

以上２点はすべてにおける共通点ですが、「システム」「入力方法」「文脈」がデバイスによって異なる変数です。ブランドイメージに一貫性を保たなければいけませんが、システムに合わせたルック＆フィールを採用したほうが良い場合があります。先述したようにインプットの仕方によって UI は最適化したほうが良いですし、どのような環境・体勢でデバイスと向き合っているのかでも変わります。

２つの共通要素と３つの変化要素を考慮した上ではじめて最適化されたインターフェイスが作れるわけですが、これはあくまで理想的な組み合わせです。現実はコスト（人・時間）、ターゲット、制約・拘束、リテラシーなど様々な考慮項目が出来上がるインターフェイスに影響します。Netflix にしても今は膨大な数のデバイスに最適化していますが、最初は Web オンリーでした。どこから出来るかを検討してみて、少しずつマルチデバイスへの対応をすれば良いでしょう。そのときに、ちょっと違うけど一貫性があるように見せるためにも今回紹介した２つの共通要素と３つの変化要素は頭の片隅に置いておきたいところです。