Amebaのクリエイティブディレクターが徹底考察！
UI/UXがイケてる！おすすめスマホアプリ
第7回 Delectable Wines2015年6月25日
TEXT：佐藤洋介（株式会社サイバーエージェント）
より良いユーザー体験を提供するうえで、スマホアプリにおけるUIの工夫やユーザーの心的効果を考慮したデザインなどを、サービスの機能ごとに紹介していく本連載。第7回目ではDelectableの公式アプリ、Delectable Winesを取り上げる。
Delectable Winesとは、ワインのラベルを撮影するだけで銘柄や収穫年などの情報を膨大なデータベースと紐付け、他ユーザーのレビューや産地など、詳細な情報を簡単に知ることができる、いわゆるソムリエ的なアプリだ。
ワイン好きなユーザーだけでなく、ふだんワイン選びに悩まされるユーザーにもうってつけのDelectable Wines。これまでに何度もUIの変更を行い、OSの特性を考慮した最適化を繰り返してきたこのアプリの設計思想と、そのすぐれたユーザー体験をひも解いてみよう。
Delectable Wines
iOS版 https://itunes.apple.com/jp/app/delectable-wines-wine-scanner/id512106648?mt=8
Android版 https://play.google.com/store/apps/details?id=com.delectable.mobile&hl=ja
ユーザーの行動を見据えたデザイン
写真系のサービスにおいてフィード画面をデザインする際、我々デザイナーが特に気を遣うべき要素に、写真の大きさとそれに付随する文字情報とのバランスがある。できるだけダイナミックに写真を美しく訴求したい半面、写真だけでは補えない細かな情報に対して「いかに詰め込むべきか」という葛藤を日々繰り返すことになる。
写真を活かす最適なレイアウト
Delectable Winesというサービスは冒頭でも紹介した通り、ユーザーの撮影したワインラベルが重要になるため、おのずと写真の中央に重要な情報が集まる仕組みとなっている。そのため、銘柄のテキストは写真の下部にさりげなく明記し、ワインラベルのじゃまをしないよう考慮されている。
実際にフィードを眺めていると、上図のようなラベルに寄って撮影されたワインの写真が大半を占めている。そのサービスにおいて「どのような写真が多く撮影されるか」ということを念頭に置いてレイアウトを検討し、「ユーザーの行動を見据えていかに最適な答えが出せるか」ということも、我々デザイナーの役割として大きなところである。
マテリアルデザインを用いた物理的なインタラクション
昨今のデバイスの進化に合わせて、我々デザイナーがつねに頭を悩ませる事象のひとつに「UIの表現手法の変化」がある。Delectable WinesではiOS版・Android版ともにフラットデザイン、マテリアルデザインを踏襲したベーシックなつくりとなっているが、今回はマテリアルデザインをみごとに踏襲しているAndroid版に注目し、そのシームレスなインタラクションについて掘り下げてみる。
詳細画面からフィードへ戻る際のインタラクション
Android版の詳細画面では、他ユーザーのレビューや購入動線がカード型のUIによって表現されている。これは、マテリアルデザイン的であると同時に、ひとつひとつの情報が個別に認識しやすい表現だ。下へスクロールすると、写真がボケながらフェードアウトしていくインタラクションが施されているが、ここで注目すべきは、Backキー押下時のインタラクションである。
通常、元の画面（この場合はフィード）に遷移する際のインタラクションといえば、本文を消しつつ画像が元の位置にFixするか、詳細画面の一式が左右にスライドして消えるようなつくりが一般的だ。しかしDelectable Winesは、カードをそのまま消すのではなく、下に落ちるような演出を加えている。これは、フィードから詳細画面へ遷移した際のインタラクションをそのまま逆にした演出であり、物理的な法則に従ってシームレスな遷移を演出している例である。
マテリアルデザインにおいて「物理的な法則」に従うことは、ユーザーに自然な体験として受け入れてもらうための心的効果をもたらし、使い勝手の面で非常に重要な役割をもっている。
タブUIの矛盾につじつまを合わせる工夫
サービスUIをデザインするなかで、タブによる表示の切り替えを検討する際、さまざまな問題が起こるケースがある。タブの種類には「ページを切り替える」ものと、「ページ内での情報の切り替える」ものと2種類があるが、特に後者はUI的な矛盾が起きやすい。
つじつまを合わせる工夫
上図はAndroid版Delectable Winesのプロフィール画面だが、上部の大きな領域にプロフィール情報を配置し、下部には3つのタブによって情報が同列に表現されている。これは、「マイページのなかに主要な情報が3つある」という情報設計になっているのだが、プロフィール情報がコンパクト化するまで項目をスクロールしたのち左右へスワイプすると、不都合が起きることになる。つまり、プロフィール情報がコンパクト化したままだとスワイプ時のコンテンツの開始位置に矛盾が生じ、同じページ内にあるはずの情報がまるで別画面のように認識されてしまうおそれがあるわけだ。
そこでAndroid版Delectable Winesは、スワイプ時にコンテンツの開始位置を確認し、必要に応じてプロフィール情報を最適な高さで出現させることにより、あくまでも「マイページ内で遷移している」ということを直観的に意識させるつくりとしている。
このようなUIにおける矛盾に関しては、タブだけに限らずさまざまなシチュエーションで起こりうる問題であるが、「ユーザーに対してどう認識させるのか」ということをつねに考えながら、ケースバイケースで最適な設計を行っていくべきである。
Delectable Winesから学ぶべきこと
「ワインのラベルを撮る」というシンプルなサービスコンセプトに対して、最適化されたUIや、細かなインタラクションを配慮することにより、心地よいユーザー体験を提供しているDelectable Wines。
OSの特性や、各プラットフォームが求める「美意識」について考慮することは、我々デザイナーがつねに意識することが必要であると同時に、ユーザーに対してどれだけ寄り添えるUIに落とし込んで提案できるかということも重要である。
この先、デバイスの進化に伴う「UIの表現手法の変化」に対してどれだけ真摯に向き合えるかが、我々デザイナーにとって重要な資質となってくるであろう。
【著者プロフィール】佐藤 洋介（さとう ようすけ） ／チーフ・クリエイティブディレクター
スマホブログ「Simplog（http://simplog.jp）」や、新感覚コミュニティ「きいてよ！ミルチョ（http://mirucho.me）」の立ち上げを経験したのち、「Ameba」のスマートフォン向けサービスのデザイナーを統括し、クリエイティブ責任者として各サービスのUIデザインを監修。最近では、「Ameba Ownd（https://www.amebaownd.com/go）」の立ち上げに参加。
●1pixel：スマホデザインにおける、忘れがちな5つのルール
http://ameblo.jp/ca-1pixel/entry-11591358238.html
●1pixel：スマホブログ「Simplog」のUIデザイン
http://ameblo.jp/ca-1pixel/entry-11376905441.html
@sugaar
