1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="Y884SIwMUo"><a href="https://uxdaystokyo.com/articles/googlemapleran/">Googleマップから学ぶ、ユーザー動線を踏まえたデザイン・UI実装</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/googlemapleran/embed/#?secret=Y884SIwMUo" width="600" height="338" title="“Googleマップから学ぶ、ユーザー動線を踏まえたデザイン・UI実装” — UX TIMES" data-secret="Y884SIwMUo" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2020/04/gmap-flowline.png12461056UX DAYS TOKYOの定期ワークショップでは「UX視点でのサイト改善検定講座 ユーザーフロー編」を開催しています。ユーザーの行動やフローに沿ったUI設計手法はとっても大切で重要です。 ユーザーの行動に沿ったデザインをすると、当然ながらユーザーは操作しやすくなります。今回は、Googleのページデザインを参考に、ユーザーの行動に沿ったUIとは何かをご紹介します。 Googleマップでの行動デザイン 2019年3月にGoogleで開催させていただいたUX DAYS TOKYOの「UXと進化するVUI（音声UI）のコレカラ」というイベントで「GoogleサービスのUIからUXを紐解く」というセッションを行い、そこで披露したものを紹介します。 検索ワードに付随したユーザーが知りたい情報とユーザーが次に行う行動がデザインされている （2019年の画像ですが）「輪島」と検索すると以下のデザインになりました。地名を検索しただけなのにも関わらず、ユーザーが知りたいと思われる情報が掲載され、次に行動したいUIが実装されています。 Googleフライトがローンチされた2020年現在のUIとは異なりますが、説明をするために2019年のUIとなっています 同じマップでもデバイスによってUIを変化 パソコンでの検索したページにはスマホに送信ボタンがある 同じマップを利用していても、ユーザーが使っているデバイスによってUIを変化させています。 パソコンで「ららぽーと」と検索すると、「スマートフォンに送信」という機能はありますが、スマホで検索すると当然不要なので表示されません。このようにデバイスというコンテキストを見極めてUIを設計しています。 スマホで検索した結果：2019年の画面でも見当たらないちなみに、2019年時点では「他の端末に送る」という文言だった ユーザーの状況によって表示させるUIを変える マップを利用して目的地に行く場合、「経路」ボタンからナビゲーションを利用します。「車」「電車」「徒歩」「タクシー」などの手段を選ぶことができます。車の場合は、どの道を通るべきかナビゲートしてくれますが、電車の場合は、何線でどのくらい乗れば到着できるかが明記されています。手段によって表示されているものが異なります。 たまたまだったのかも知れませんが、車に乗ってマップを利用していた時に、到着地に近くなったら、マップがズーム表示になり、駐車場の「P」が目に入ることがありました。 目的地に行けば、駐車しなくてはならないので、ユーザーの次の行動を見て実装していたならば、「これは凄い！」と感じました。実際には、ズームインすれば駐車場を示す「P」は表示されますが、近くになったことで自動ズームインされなくても、ユーザーは目的地が近くなれば自分でズームインさせる行動に移るので、そこではじめて「P」が表示されても問題ないありません。 目的地までの道で、ズームアウト（俯瞰）している場合は、すべての情報が掲載されていてもユーザーにとっては不要です。ズームアウトして閲覧している時は、どのような状態なのか、ユーザーの状況や次の行動を踏まえて、デザインすることで、欲しい時に欲しい情報を提供するができます。 また、実際に駐車すると、何時に駐車したかが表示されます。時間貸しで何時に止めたかわからなくなって焦るという状況を上手にコントロールしています。 より便利に行動をサジェストする機能 ユーザーがマップを検索するのは、マップを利用している時や、直前ということはありません。数日前であったり、前日に明日の予定をするために検索することもあります。 それらを見越して、Googleマップでは、日時をカレンダーに登録できるように連携されています。 検索した結果を予定にいれたり、通知させることができる ユーザー行動を把握することでデザインが可能になる ウェブサイトもアプリ化されていますが、アプリ機能がないウェブサイトでもユーザーの行動を踏まえてデザインすることは当たり前とされていました。 しかし、実際の制作の現場ではテンプレートやフレームワーク・競合他社サイトを参考に作っているケースがあり、実際に使うユーザーを対象に作られていないことがあるようです。現場で活躍しているというUX DAYS TOKYOのスタッフや、イベント参加者へヒアリング、コンサルティングを通して、この様な現場が多いことを知りました。 たまたま、使ったテンプレートがサービスにフィットしてうまくいくケースもあるかも知れませんが、それはかなりの軌跡です。USP（Unique selling proposition）の考え方からも、テンプレートで済まされることはありえません。 自分たちが構築しているサービスやプロダクトの本当のユーザーを正しく把握して、行動までを見据えた設計をしていきましょう。頭でわかっているだけで、現場と学びに乖離がある人が日本ではまだまだ多いです。アカデミックは使えないと考える思考は学びの邪魔です。 ＞関連記事：「UXを勉強するには、まず自分の殻を破るべし」 今回は、ビジネスで成功しているGoogleの事例を元に「行動とUI」について記載したのは、現場とアカデミック（学び）がリンクしていることを理解していただきたいと思ったからです。ただし、本質を知っている本物から学び、現場で広げる気持ちを強くもってデザインしていきましょう。 日々進化しているGoogleマップUIから学ぶもの 2019年3月に作ったスライドで利用したGoogleのUIのキャプチャー画像が、現在のUIと大きく異なっているところを見て、改めてGoogle凄いな。と感じました。実際には、2019年5月くらいにサービスの統合も含め、ネイティブアプリとウェブアプリの境がなくなってきた頃に大きなUIの変化がありました。 UIを大きく変えるのは抵抗がある。と現場で良く耳にします。それはメンタルモデル的に当然と言えますが、だからと言って進化させない訳にはいきません。そして、使いやすさが保たれていれば、UIが変化しても、ユーザーは気がつくことなかったり、不満に思うことはありません。 しかし、何を持って使いやすいかなどの見極めは知識・知見と経験が必要になります。学ばず自分の主観や主張だけでは良いものは作れません。何が問題になっているか、次にユーザーが欲しいと思っているものは何か？を見定める視点と、ユーザビリティテストを含めたテストの実施からの学びを得て改善していきましょう。改めて、UXerは広い知識と何からも学ぶ姿勢が必要だと感じました。