2018年のトレンドを取り入れたUXデザイン。10のプロトタイピングでケーススタディ

多くの人がUX（ユーザーエクスペリエンス）というデザインの意味を理解し、企業ではUXデザイナーの雇用が進んでいます。クライアントや社内に、UX向上のためのアプリ改善施策を提案するような場面も増えてきているはず。

UXデザインはグラフィックだけで伝わりづらいものですから、精緻なプロトタイピングが必要となる場面もしばしば。はこの記事では、2018年のデザイントレンドを取り入れつつデザインされたアプリのプロトタイピングを10個紹介します。

UXデザインのケーススタディ集

1. チャットアプリ

メッセージ機能、またはチャットは、日常生活の中で無くてはならないものです。オランダのデザイナーであるダニエル・コーパイ（Daniel Korpai）氏は、『Parallel Chat』というアプリのプロトタイピング作成の過程で、ふたつの問題に焦点を当てました。

ひとつ目は、メッセージがが連続で来た場合、どちらに答えているかわからなくなること。そしてふたつ目は、複数人とメッセージのやりとりをしている時に、スムーズに他のチャットに移動できないことです。

この問題を解決するために、まずは送信するメッセージをドラッグアンドドロップできるようにしました。そして他のチャットを画面上部にまとめて表示することで、使いやすさを向上させています。完成したプロトタイプは次のようなものでした。

Daniel Korpai / dribbble

2. 映画チケット予約アプリ

このケーススタディーでは、映画チケットの購入アプリが使いづらいという現状を踏まえて、ユーザーのニーズに合わせた使いやすいアプリをデザインしました。

映画を観たい人には二つのタイプがあります。ひとつ目は、観たい映画が既に決まっていて、自分の予定にあった上映時間を探したい人。ふたつ目は、観たい時間が決まっていて、その時間に上映している映画を探したい人です。

イスラエルのデザイナーアリエル・バーバー（Ariel Verber）氏は、それぞれのニーズに合わせて、時間別と映画別に検索できるようデザインしました。

下の画像は、映画のチケットを予約するアプリのUIです。左から、タイトルによる検索ができるページ、座席選択ページ、時間による検索ができるページです。

さらに、空席状況を直感的に伝えられるようなアイコンを設置。座席選択画面に進むまでもなく、自分の希望の席が空いているかどうかだいたい把握できるようになったのです。

支払いの機能もGooglePayを導入するなどしてアップグレードし、より良いユーザーエクスペリエンスを目指しています。

3. テストを繰り返して完成した駐車場アプリ

移動手段としての車は、日常生活に欠かせないものとなっています。より快適で乗りやすいように設計されていますが、大きな問題がひとつあります。それは駐車場を探すことです。ニューヨークのデザイナージョン・ヴィノ（Johny vino™）氏は、このケーススタディーで、どの年齢層でも簡単に使うことができる駐車場を探すアプリをデザインしました。

設計段階で入念なインタビューを繰り返しました。質問事項は以下の通り。

1. 人々が駐車場のアプリを使い始める必要性は何ですか？
2. このアプリの目的を理解しましたか？
3. スポット選択のモデルはどのように見えますか？
4. あなたはこれをプロのアプリとしてあなたの友人に伝えましたか？
5. あなたはアプリを使用した後満足している感じですか？
6. 個人的には、あなたがアプリの使用を制限した要因は何ですか？

結果を図示し、設計に用いました。

そうしてひとつめのプロトタイプが完成。目的地周辺の駐車場空き状況を、値段別などで見ることができて、気に入ったものがあればアプリで予約することができます。

Johny vino / dribbble

上記のプロトタイプを出した後に、再びインタビューを行ったところ、多くのユーザーが横画面状態で使っていることがわかりました。ジョン・ヴィノ氏は、すぐにプロトタイプを作り直しました。

最終的に、日常的に使える、見やすいデザインに仕上がっています。

4. プレイリストを半円盤型にデザインした音楽アプリ

私たちの日常生活には音楽が溢れています。モバイル機器のアプリで毎日音楽を聴く人も多いのではないでしょうか。世界中で、常に28,000のプレイリストが再生されていると言われています。

ニューヨークのデザイナージョン・ヴィノ（Johny vino™）氏は、レコード盤の円形の形に着目して、より使いやすい音楽アプリの開発を行いました。

下の写真にある5つの『E』でユーザーを分析したり、「フィッツの法則」を参考にして使いやすいアプリとは何かを検討しました。

フィッツの法則とは、対象物まで移動する時間が、そこまでの距離と大きさの関数になることを表したものです。モバイル機器を片手で使うときの、使いやすさの指標になります。

プロトタイプをみると、円盤状のUIがまるでレコード盤のように回転し、ユーザーの注意を歓喜しています。

Johny vino / dribbble

5. フルーツ専門のECアプリ

健康志向な人にとって、果物の摂取は欠かせないことだと思います。

しかし、何かと忘れがちになってしまいます。このケーススタディーでは、そんな果物を日常生活に無理なく取り入れる方法をテーマにしてアプリをデザインしました。プロトタイを作ったのは、ニューヨークのデザイナージョン・ヴィノ（Johny vino™）氏。

果物を種類や色ごとに分けて、気分に合わせて選べるようなデザインにしています。そして欲しい果物が決まったらカートに入れます。

Johny vino / dribbble

“Fruit app by Johny vino“

6. サービスデザイン: 自転車アプリ

“Citiバイク”という自転車レンタルサービスが、アメリカの大きな都市を中心に広がっています。

日々の移動を、車ではなく自転車で行おうという人が増えつつあります。それも健康の為や環境の為など、人々の意識が高くなっていることが伺えます。

ユーザーのターゲット層は、旅行者、健康の為やレクリエーション的に自転車に乗りたい人、タクシー以外の乗り物を求める人などです。

シンプルなデザインのインターフェイスで、近くのレンタルショップから選ぶことができるようになっています。また、一度使ったお店は優先的に表示されるようになっています。

借りたい場所が決まったら、その場ですぐに予約ができます。また、他のお店との比較も簡単に行うことができ、最終確認ページで借りる日付や時間の確認を行えます。

燃料を一切必要としない自転車は、環境にとても良いだけでなく、不健康になりがちな都市部の人たちに運動する機会を与え、よりスムーズな移動を可能にします。

Johny vino / dribbble

このデザインも、ニューヨークのデザイナージョン・ヴィノ（Johny vino™）氏によって行われました。

7. シェフボックスアプリ: UXデザイン

『chef box』とは、食材のオンライン配達とレシピ検索を組み合わせたものです。プロトタイプの作成を手がけたのは、シンガポールのデザイナーであるレオー・ホー・テン（Leow Hou Teng）氏です。

ユーザーは、食べたいレシピを探してそれをオーダーします。するとレシピに合った材料が送られてくるので、ユーザーはレシピを見ながら調理をするという流れです。

このケーススタディーは、ユーザーのインタビュー、リサーチ、全体の流れの作成、プロトタイプの開発という流れで行われました。

今回着目した問題点は、料理したいレシピがあっても、その食材を見つけられない場合があることです。普段作らない料理だと、調味料を持っていなかったり、使う量によっては食材が余ってしまうことがあります。それを、レシピに合わせた食材を配達することで解決しています。以下は一連の『chef box』のストーリーボードです。

上記を、ユーザーフロートいう形で落とし込みました。

ユーザフローを作成した次のステップは、アプリのワイヤフレームをスケッチすることでした。これを作ったことで、プロジェクトの次の段階であるプロトタイプを確立するのに役立つフィードバックがもらえました。

8. レストラン予約アプリ

家族や友人と行くレストランでの外食は楽しい時間であってほしいですよね。

特にお祝い事であればなおさらです。また、仕事先のクライエントと行くこともあるでしょう。しかし、楽しい雰囲気を台無しにしてしまうのが待ち時間です。

このケーススタディーでは、外食をストレスフリーで行う為のアプリをデザインしました。スムーズで簡単な予約を実現する為に、現在地、人気店、お気に入り店などをシンプルなインターフェイスで表示しています。

プロトタイプのデザインは、ニューヨークのデザイナージョン・ヴィノ（Johny vino™）氏によって行われました。

9.引っ越しアプリ

「引っ越し」と聞いて、皆さんはどういう印象を持つでしょうか。持ち物が多いほど移動は大変になりますよね。このケーススタディーでは、そんな家の引っ越しや事務所の引っ越しをもっと手軽なものにできないか検証しています。

引っ越しで人手を借りたい時や、車のレンタルを簡単に行えるアプリの開発を行ないました。

問題は、異なる地域でのサービスを可能にすること、そしてそれぞれのサービスにお給料を発生させることです。

画像のように、車両、手伝いの数、日付などを簡単に選択することができます。また、ここでもフィッツの法則が使われています。

最後は合計金額が表示され支払いを済ますことができます。

プロトタイプから最終的な製品の完成まではおよそ18週間かかると開発者は予想しています。

Johny vino / dribbble

10. UI/UX ケーススタディー: メッセンジャーでのタイムゾーン拡張機能

テクノロジーの発達によって、世界中の人と簡単に連絡を取れるようになりました。「Skype」「Googleハングアウト」「Face-Time」などが有名ですね。

ここで問題となるのが、異なるタイムゾーンにいる人と連絡をとるのは簡単ではないことです。

時差の計算を毎回しなければなりませんし、時には計算を間違えてミーティングを逃してしまうこともあるかもしれません。

これを解決できるアイディアをプロトタイピングに落とし込んだのが、ダニエル・コパイ（Daniel Korpai）氏の「Time Zone Messenger Exension」です。

アプリがデバイスの位置情報を読み込み、タイムゾーンを割り出してます。そして、カレンダーの予定を組み込んで、合う時間を探してくれます。

このように、自分と相手のスケジュールをもとに通話に最適な時間を見つけることで、離れた国にいても簡単にコミュケーションを取ることができます。

Daniel Korpai / dribbble

おまけ: iPhone XのWebナビゲーションコンセプト

ハンバーガーメニューは皆さん知っていると思います。これは通常画面上部に設置されているのですが、画面が大きいと指が届かないという問題がありました。

そこで、モバイル機器ではハンバーガーメニューを画面下に設置することで、簡単にアクセスできるようにしていました。

しかし、iPhone Xは例外で、ホームボタンがない代わりにバーがあるのですが、このせいで見た目が悪く使いづらくなってしまいます。

そこで解決策として、画面下に浮いているようなメニューを設置しました。こうすることで、左右どちらの手からも、片手のみで操作することができます。

そしてプロトタイプが完成しました。

Daniel Korpai / dribble

“iPhone X Web Navigation Concept by Daniel Korpai“

まとめ

ケーススタディからは、次のようなことがわかりました。

1. UXデザインのテクニックや手順をケースバイケースで使い分ける。
2. デザイナーはそれぞれが独自のやり方を見つける。
3. ユーザー層を決めて予想される問題点を見つけ、それを解決する方法を提供する。
4. 実機で行うアプリシミュレーションによって、完成品を簡単にイメージできる。
5. デザインの特徴は視覚的に説明すると良い。

皆さんも究極のUXを求めて、アプリのプロトタイピングデザインに挑戦してみては？

（翻訳：July Ando）