見出し画像

「デザイナーよ。足を動かせ。頭を動かせ。手を動かせ。」 ー UI Crunch#14 スマートフォンを超えた体験を創る。導くUI

こんにちは!
渋谷でデザイナーをしているちょいちょい(@739nanak)です。
UI Crunch#14にnoteレポート枠で参加してきました✏️

長いので、ざっと読みたい方は太字だけ追っていくことをお勧めします!


1. かわいいが届くまで (FLOWER/ROLLCAKE)

🖥登壇者・サービス
- 木坂 名央さん(ROLLCAKE株式会社 デザイナー)
- FLOWER(「かわいい」が隔週で届く、お花のサブスクリプションサービス)
💡学びポイント
① タッチポイントごとに「かわいい」を設計
②「かわいい」にこだわる理由は「体験設計書」


① タッチポイントごとに「かわいい」を設計

FLOWERは「選ぶ → 届く→ 飾る」の3つのタッチポイントで成り立っています。
体験をシンプルに切り分けることによって、それぞれの場面で大切にしたいことが明確になっていると感じました。
ポイントごとのこだわりで、特に印象に残った部分を書いていきます。

🌷選ぶ
- 「選ぶ」ことに集中できるレイアウト
  - 縦長の写真で花の写真を見やすく
- ユーザーが自ら花を「選ぶ」
  - 自分の意思が入ることで納得感が生まれる
  - 選ぶストレスを減らすため、選択肢は2つだけ
- 花のセレクトには必ずデザイナーが関わる

🌷届く
- かわいい状態で「届く」ために
  - 保水キャップでお花が元気な状態を保つ
  - お花がかわいく見えるよう、箱の内側はグレーに
- 受け取り忘れがないように
  - ポストに届くとPUSH通知
  - ポストに入るよう箱は3cm以下

🌷飾る
- 花器を0から作っている
  - 花を「かわいく飾る」ことまでがFLOWERの価値
  - かわいい花 x かわいい花器 = だれでもかわいく飾れる


② 「かわいい」にこだわる理由は「体験設計書」

「かわいいものを作りたい!」と言った時、デザイナーがただ見た目にこだわっていると思われるのは悲しいことです。
FLOWERの場合、「体験設計書」という誰にでも見える形になっているからこそ、「かわいさ」がデザイナーのわがままではなく、サービスの軸として受け入れられているのだと感じました。
ブランドがユーザーに与えるイメージを、ユーザーの課題やサービスのコンセプトと結びつけ、言語化しておくこと、大切ですね!


2. ecboが導くUI(ecbo cloak/ecbo)

🖥登壇者・サービス
- ワラガイ ケン(ecbo株式会社 共同創業者 兼 CCO)
- ecbo cloak(荷物を預けるスペースがあるお店と、荷物を預けたいユーザーをつなぐサービス)

💡学びポイント
① まずは3次元のデザイン
② ユーザーテストでユーザーに干渉しない


① まずは3次元のデザイン

サービスの内容がガラッと変わり、作っていたデザインが不要になってしまった経験はありませんか?
ecbo cloakの場合、デザインがほぼFIXした段階でサービス内容がガラッと変わり、半年間で全く新しいプロダクトをつくることになったそうです。

そこで、限られたリソースで100%のクオリティーは100%無理!と割り切り、2次元のデザイン(UI、Web)ではなく、3次元のデザイン(一旦手動でユーザーのリアルな体験をつくる)からはじめたという話が印象的でした。

🎒MVPポイント
- UIではなく、「ユーザーが店舗に荷物を預ける」体験から始める
- 店舗のオーナー登録はGoogleフォーム
- ターゲットを外国人に絞り、英語のみでスタート


② ユーザーテストでユーザーに干渉しない

ユーザビリティテストでは、ユーザーが一人で荷物預かりを体験し、そのあとカフェで合流しインタビューの形式をとっているらしく、「バイアスを避けるため、できるだけユーザーに干渉しない」ことを強調していました。
(サービスの利用の仕方はノーヒントで行うそうです。)

プロトタイプのための空間でテストをするのではなく、できる限り実際の使い方に近い状況で、デザイナーが干渉せずにユーザーテストを行うことが理想だとあらためて認識しました。


3. みちびきをつなぐデザイン(MOV/DeNA)

🖥登壇者・サービス
- 久田 歩 / 向井 毅男(株式会社ディー・エヌ・エー デザイナー)
- MOV(次世代タクシー配車アプリ)

💡学びポイント
① 相手をよく知る
② 言葉をデザインする
③ 百聞は一見にしかず


① 相手をよく知る

乗務員の働き方、法律、規制...知らないことだらけのタクシー業界を理解するため、ひたすら現場に足を運んだそうです。
知らないことは理解するまで徹底的に調べる。ここに一番時間をかけたと言っていました。

その結果、タクシー乗務員は50~60代でスマートフォンに慣れていない方が多いことがわかったそうです。
例えば、文字サイズが十分大きいと思っても「全然読めない」と言われり、自分たちが全く触れたことのないシステムを使っていたり。

MOVのアプリは乗客用と乗務員用の2つが存在していて、両者全く違うトンマナになっています。それは、ターゲットにあわせたデザインを徹底した結果なのだと感じました。


② 言葉をデザインする

ユーザーを導くための要素はレイアウト・スタイリングだけではありません。人間がコミュニケーションする上で一番の媒体は「言葉」なので、言葉を丁寧に選ぶことはとても重要です。

「乗車地を乗客に伝えてもらう」ための言葉選びを例にとり、実際にMOVのデザイナーがどうやって言葉を磨いているのかを聞くことができました。

①「乗車地の近くに何がありますか?」
→ 🌀Whatが不明確(ユーザーは何を入力すれば良いのかよくわからない)

②「乗車地の近くに目印はありますか?」(「入力」ボタン)
→ 🌀Howが不適切(任意の項目なのに、「入力」の文言だと強制されているように感じる)
→ 🌀Whatが不明確(はじめよりはましだが、目印って何を入力すればよいのかわからない)

「建物や服装など、お迎えの目印になるものはありますか?」(「はい」「いいえ」の2択ボタン)
→ ⭕️例を入れることによってWhatが明確に
→ ⭕️「はい」「いいえ」の2択によってHowの強制感がなくなったの強制感がなくなった


③百聞は一見にしかず

デザイナーの強みは作れること。がんがんプロトタイプつくっていこう、というお話しでした。
打ち合わせで要件すりあわせるより、作った方が早かったり、デザインがしっくりこない時にプロトタイプをつくると課題がすんなり見えたり...
実際にものがあると、議論が空中戦にならずに前に進むことが多いです。

さらに、プロトタイプの目的を明確にするため、プロトタイプを3段階にわけて説明していました。

① 全体設計
- その機能がどの文脈で使われるか?が重要- 遷移図
② 詳細設計
- 前後の文脈が重要
- ここから、sketchやinvisionなどのプロトタイプツールを使う
③スタイリング
- インタラクション含めて最終的なデザインを作成


4. リアルとデジタルを繋ぐサービスデザインの観点(東急ハンズのセミセルフレジ/Goodpatch)

🖥登壇者・サービス
- 國光 俊樹(株式会社グッドパッチ UXデザイナー)
- 東急ハンズ セミセフルレジ(支払いから顧客がセルフで行うレジのアプリ)

💡学びポイント
① 本質的な課題を捉え、そこからブレない
② フローを分解し原因を発見
③ インタラクションする対象は、全てデザインの対象


① 本質的な課題を捉え、そこからブレない

当初の依頼は「ピークタイムにレジ待ちの列が常態化していて、従業員がレジの対応以外の業務ができない」でしたが、國光さんはここから「顧客が本当に困っていること、成し遂げたいことは何か?」を考えました。

結果、「レジに時間がかかっていることによって、ハンズらしい接客を顧客に提供できていない」という課題を見つけます。

東急ハンズのいいところは、「店員さんの専門知識が豊富」なところです。しかし、ピークタイムにはレジの対応で手一杯で、ハンズらしさを接客に活かすための時間が取れていませんでした。

課題が明確になると、それを反転したものが価値になります。「レジの回転率が上がる→店員がハンズらしい接客に時間が避ける→顧客の体験向上」という目指したい価値のサイクルが明確になりました。

② フローを分解し原因を発見

💵レジのフロー
① 商品をスキャン
② お支払い
③ 買ったものをもって退店

レジのフローを上記の3つに分解し行動を観察した結果、②の支払いの部分がめちゃくちゃ時間かかることが判明したそうです。
(①のスキャンを顧客に任せると、慣れていない操作で逆に時間がかかるそうです。セルフレジを導入した店舗では、その後セミセルフレジに置き換えることが多いそう👀)

数値改善に取り組む際、なんとなく「ここを減らせばよさそう」とあたりをつけたものは、ただの「思い込み」である可能性があります。
実際にユーザーの行動を観察したり、客観的なデータを得ることによって、本当は何が課題なのか、事実を知ることが大切だと思いました。

③インタラクションする対象は、全てデザインの対象

「デザイナーはエンドユーザーだけではなく、サービスに関わる全ての人のユーザー体験をデザインしなければいけない」という発表の内容でした。

東急ハンズさんの事例でいうと、インタラクションの関係性は以下の4つがあります。

① 顧客⇄店員
② 顧客⇄セミセルフレジ
③ 店員⇄店員
④ 店員⇄セミセルフレジ

中でも③が印象的で、Goodpatchでは、店員同士がアプリの障害に対応する時など、アプリに関連する店員同士の関係性までデザインしているそうです。

インタラクションの全体像を把握するためのツールとして「サービスブループリント」を紹介していました。
サービスを提供する全ての人がユーザー体験全体を見れることによって、同じ目的に向かって議論したり問題点を事前に明らかにしながら相互に協力し合える、という利点があるそうです。

Goodpatchさんの当日のスライドはこちら👇

まとめ. 「デザイナーよ。足を動かせ。頭を動かせ。手を動かせ。」

タイトルのこの言葉は、MOVさんの発表から引用させていただきました。
今回のイベントで特に印象に残った言葉であり、4社全ての発表に通じる言葉だと思います。

デザインには正解がありません。だからこそ、どれだけ自ら動いて正解に近づけるか?の努力をひたすら重ねることが大切です。
とにかくターゲットユーザーのところに足を運ぶ。細部まで頭を動かす。とにかく手を動かし、プロトタイピングし、場数をふむ。

ものすごく素敵な言葉だったので、しばらくこれを頭に刻んで生活しようと思います🧘‍♀️
素敵なイベントに参加させていただきありがとうございました!

この記事が参加している募集

イベントレポ

この記事が気に入ったらサポートをしてみませんか?