00:02
デザインの味付けはい始まりましたデザインの味付け この番組は株式会社アジケ代表の梅本とその仲間たちがデザインについて雑談を交えながら話す番組です
今日のお相手は神田さんです。神田さんよろしくお願いします。はいよろしくお願いします。 いよいよニュースに国勝日がやってまいりました。
ああ いや今日はやばいですね
今日は関東やばいですか? 外にちょっとさっきお昼頃にちょっとだけ出たんですけれども
本当なんか 暑いっていうかなんか焼けるっていうなんかそんな感じがしますね
イエローモンキーの歌になりそうな なんかそうですね鍋の上に入れられているような感覚です
暑いね確かにその鍋の上に入れられていたのがちょっとよくわかるね 下からなんか照り返しのこうね
すごい熱を感じるよね はい危険ですよ
でもあのちょっと外出た時に近くにちょっとした 運動場というか練習施設みたいな見たらなんか大学生みたいな人がラクロスみたいな
練習してたの? もうやめた方がいいんじゃないって思いましたけどね
ちゃんと不審者代表として言うと変かないのかな? もうやめときって言いたくなりましたけどね
そうね、ほんま余計なお世話やーって感じかもしれないですけど
暑すぎますよ危険ですよね
ちょっと僕もこの後外行こうかなと思ってね もう夕方なんで多分大丈夫だと思いますけど
行ってきますわ お互い気をつけましょう
はいさて今日のテーマは何でしょうか 今日のテーマは絶滅しそうなUI確認画面というテーマで話したいと思います
はいありがとうございます確認画面あれですよね これでオッケーですかって言った時に最後確定とか承認みたいなのを押すような画面ですよね
そうですそれが確認画面って今言ってますけれども これもしかしたらなくなっちゃうんじゃないかなと思ったんで
出ましたカンナの考察
なんでこのテーマにしたんですか
はい今あるプロジェクトでですねワイヤーフレームの画面の設計をしていただいていて それの確認をしてたんですけども
編集確認完了っていうオーソドックスな画面遷移があると思うんですが
そのプロジェクトのワイヤーフレームを見ていたらその編集画面の中に 右横でプレビューのエリアがありまして
03:01
フォームに何かいろいろ入力して 入力したら右側の画面でプレビューできるっていうようなUIを作っていたんで
それはやりやすいと思うんですけども かつプラスその次のページに入力内容を確認する画面もあって完了っていうような設計だったんですね
それを見て最初のその編集画面で確認 プレビュー確認みたいなのも兼ねてるUIなんだったら
その確認画面独立したものって別にいらないんじゃないですかっていうような話をさせていただきました
ここらへんを話してた時にふとですね 確認画面があるっていうのは超普通のことというか
疑いもしないことだったんですけども もしかしてなんか昔に比べて確認画面って減っていってんじゃないかなってちょっと思ったんで
それをテーマに調べてみようかなっていうふうに思ったっていうところです
じゃあ今日実際に調べられたりとかしてるっていうことですか
そうですね 最新のUIってどうなってんのかなっていうところをちょっと調べたりしてます
なるほど 実際に減ってるかどうかっていう数の話というよりは最近どうなってるんだっけっていう話ですね
ということですね
なるほど じゃあちょっと具体的に教えていただいていいですか
はい 例えばですね ECサイトとかだったら 通常サイトを回遊してこの商品欲しいカートに入れるポチっていうのをやっていくと思います
複数買うなら複数カートに入れて 購入するときに確認画面でカートの中身っていうのをしっかり確認して購入するっていうような流れが普通だと思います
ちょっと変わっていってるかなって思ったのがAmazonでして Amazonで今すぐ買うボタンってあるの分かりますか
分かります
通常のカートに入れるっていうUIもあるんですけれども それの下に今すぐ買うっていうボタンも用意されていて
あれを押すと簡易的なドロワーモーダルみたいなんで出てくる確認の画面がちょっと出てきて そこでも確認済ませて購入するっていうようなUIの設計になっています
これがちょっと今すぐ買うっていうのが出てきたときに 何これってちょっと思ったんですけれども
最近個人的にもこれ使うことが多いんで あんまり深く考えずにとか絶対必要な生活必需品とかになると
今すぐ買うって押してそのまま購入しちゃうと これの使い方をしたりします
もう一個例を挙げると 例えば銀行のアプリとかだったら振り込みするときにですね
06:01
振り込み書きだったり金額とかを入力して 間違えられないんでしっかり確認して完了っていうような流れだと思います
なんですけども 例えばPayPayとかで送金する機能とかあると思うんですけども
PayPayとかだったら対象の人を選んで そこで5000円となら5000円数字を入力して送金ボタンを押すと
チャットのUIでそのまま送金完了できますよね 確認画面っていうのがないと思う
あとは一般的によくあるところで言うと 住所変更しますとか登録されている情報を編集しますみたいなのも
今まではちゃんと確認して完了するっていうUIが普通だったと思うんですけども
最近はそのまま編集して完了っていうのを押すと 確認画面挟まずにそのまま変更が適用されて
変更内容を登録しましたみたいな そういうようなメッセージが出たりして
それで完了しちゃうみたいなUIになってることも多いと思います
10年前とかと比べると 確認画面を一個挟むっていうのって
ちょっと減ってんじゃないかなっていうのが 自分の体感として感じるところです
どうですかね 梅本さん 確認画面減ってると思いますか
確かに減ってますよね これ何回か前のときに言ったかもしれないですけど
フロントエンドの技術のパーツ コンポーネントで処理が終わるみたいなのあるよねって話なんかあったと思うんですけど
ボタンを押したらそのボタンだけがクルクルって回って処理が完了するみたいな
ページ全体は変わらないけどみたいなのあるじゃないですか
ああいう技術もやっぱり進歩してるから
さっきのAmazonの今すぐ買うみたいなところが
画面とか切り替えなくても処理はちゃんとできるようになったみたいなのも
背景にあるような気がしますよね
そうですね そういう技術的な進化っていうところはもちろんあると思っていて
ここら辺の今までの事例から分かることとしては
確認画面っていうのは以前に比べてちょっと省略されるようになってるかなと思ってまして
この画面でしっかり確認させるっていうものから
ライトに見せるっていうような形になっているっていうのが傾向として言えるかなと思ってます
本当にちょっとプロジェクトで紹介した
この編集画面とプレビュー画面を兼ねているみたいな
そういうのも同じような形で言えるかなと思っていて
変更しましたよ しっかり確認してくださいねっていうよりかは
09:02
もう少し扱いが軽いというか
もうちょっとライトな形で見せてあげるみたいなのがトレンドなのかなと思ってます
確かに これじゃあなんでこんな形になってるっていうふうに神田さんは思いますか
そうですね 自分もちょっと事例とかを見ながら考えてたんですけども
この購入するとか予約するとか変更するみたいな
こういう体験をどんどん小さく細分化していってるっていうようなのが分かるなと思っています
商品購入とか送金とかも重いものじゃなくて
どんどんライトに扱うっていうような形にしていて
それをやるっていうことが特別なことではない
すごく大事だと思っているのは間違ってもキャンセルできるようにしているとか
例えば今まではECサイトで商品をいっぱいカートに入れて
購入しましたっていうふうに完了した後に
これちょっと2個買っちゃってたみたいになると結構な失敗として
体験として残ると思うんですけども
1回それが完了したときに間違っていても
もう1回やり直せるみたいな方が重視されているっていうことなのかなと思っていて
例えばペイペイとかも相手に振り込みするとか送金するって結構重大な行動だと思うんですけども
今やペイペイとかで例えば5000円を送るところが5万円にしちゃったみたいなので間違ったとしても
間違ったって言って4万5000円返ってもらったらいいじゃないですか
返してくれるかな
返してくれるかそれはまた別の話なんですけども
別の話はい
絶対間違えないようにねって確認させるっていう重要度はちょっと下がっていて
それよりもやり直せるっていうようなライトさが重要視するっていうことなのかなと思って
なるほど体験が小さくとか細分化されててすごいいい表現ですね
本当その通りだなと思って聞いてましたね
そうですよね
1個の体験を大きく扱ったり重く扱ったりするとやっぱり一定にストレスがかかったり
間違ったときのダメージがでかいっていう
確かに銀行振り込みよりもペイペイで送金の方が楽だもんねやってること同じだけど
なんか気持ち的にも楽ですよね
これを言語化するとおそらくすぐに送れる失敗しても取り返しが
12:05
ままにつくのかどうかっていうのはちょっと調べなきゃいけないかな
具体的にそういう事例なんかありそうな気がするじゃないですか
全く知らない人に5000円のところ5万円払ったら本当に返してくれるのかなっていうのは
ちょっとその辺どうなっているかわからないですけど
でも気持ちが楽っていうのはめっちゃわかりますね
そうですねペイペイとかのUI設計の思想とかはちょっとわからないんですけども
普段使っていても友達とかに割り勘機能とかあるじゃないですか
なんかああいうのを見ていても友達勘で財布から1000円渡してみたいなのと
似たような体験をさせて設計なのかなっていう風にも思ったりしますし
自分も今想像しながら言ってたのは友達同士の飲み会の割り勘みたいなんで
お金を送るみたいなのがすごくライトにできるなっていうところをイメージして言ってた
なんかそれで今まで銀行振込しますみたいなももちろんできるんですけれども
なんかちょっと重いし気軽さみたいなのはあんまり感じないなと思うんですけども
そういった部分がどんどんライトにしていくことによって
確認が省略されていってるっていうことなのかなと思います
なるほど確かになんかね銀行振込今までは基本手数料とか
もし失敗したら組み戻し手数料もかかりますけど
今はたぶんコトラ送金とかがね共通で
奨学は手数料無料でパンと振り込めると思いますけど
なんか時代に合わせていろんな機能とかサービスもできてきてるんだなっていうのも影響ありそうですよね
なるほどこういうのを踏まえると
例えばデザイナーが設計するときにこういうことを
こういうUI設計とかやっぱするタイミングも訪れると思うんですけども
重要なことっていうのは何ですかこれは
そうですね自分もプロジェクトのワイヤーフレームとかを見ていて
ここら辺は意識したいなと思ったんですけども
先ほども言ったこととも重なることはあるんですが
間違えない正確にするみたいなところと同じくらい
操作がライトだっていうところを重視すべきだなというふうに思っています
これはですね間違ったとしても後から取り戻せるUIっていうところが
すごくユーザーの心理を軽くしてあげるのに役立つなというふうに思っているので
不可逆じゃないというか
1回登録したらこれはもう絶対にやり直せないんだみたいなふうに思わせると
すごくストレスがかかってしまうと思うんで
15:00
登録したけれどもこれはもういつでも変更できますよとか
後から設定できますとかそういうことを言ってあげるような
UI設計とかも多いと思うんですけども
ああいったもののほうが好まれて受け入れられやすいのかなというふうに思っているので
設計するときにはそこら辺を重視したいなというふうに思います
なるほどね
やっぱこう最近ウェブアプリもそうですけど
コメントとかもすぐ編集できるようになったもんね
例えばテキストを入力してて確定させても
いや違うって言ったらすぐって編集できるじゃないですか
なるほど
ああいうのも影響してそうで間違っても後から取り戻せるというか変えられる
そうですねそこら辺はやっぱメールとかと比較するとすごく分かりやすいですよね
ちょっとねメール今送って10秒ぐらいだとすぐ戻せる機能とかね
Gmailでもあると思いますけど
ちょっとやっぱ失敗しちゃうときもあるもんねこれ送っちゃいけなかったみたいなとかね
ありますありますその時にちょっとねゾワッとやべえっていう気持ちになっちゃうみたいなのは今だ
スラックで誰かにメッセージ送ってるときに途中で送信してしまって
早く続きの文章書かなあかんみたいになるもんね
ああいうのもありますね
サブスクとかも今入会しやすくて
でも大会もすぐできるみたいなのとかもあると思うんですけど
なんでとりあえずちょっとライトに購入してみようと
入会してみようっていうところはあると思うんで
そういったこともライトにできるようになってるのかなと思うんですけども
ここ最近のネタで言うとダゾーンが年間プラスの見せ方が分かりづらいな
で炎上してたのがありましたけど
名前出しとるやないかい
もうこれ言いたい
あれは絶対炎上するなと思ってたんですけども
あれ、なんていうんですかね
他のサブスク界隈の設計の潮流からすると
やっぱ入りやすいし出やすいっていう
みんな慣れてきてたと思うんですが
入りやすそうに見えたけど間違ってたら年間払わされんのみたいな
結構な金額やったよね、あれね
あれはちょっとね、やっぱ怒っちゃいますよね
あれ大丈夫なんですかね、刑評法とかでね
いやそうですね、なんか世界中で炎上してたらしいですけどね
そうなんですよね
日本だけじゃなかったらしいです
なんでどちらかというと
18:02
日本のほうが本国に合わせて作ってたとかかもしれないですね
ちょっと正確なことはわかってないんですが
今回大きいイベントだったし
なんかFIFAもすごい経済効果があったみたいな
今日ニュースでやってましたけど
そうですね、影響力がすごいんで
そこにダゾーンも絡んでるんでしょうね
お金がかなり独占放送権、独占じゃないか
ほとんど過占みたいな感じだと思いますけど
はい、そうですね
なるほど、やはりダークパターンですよね
はい、なんでしっかり確認させるみたいなのは
ダークパターンはまた別の問題よりも大きかった
確認画面でしっかり確認させて
間違えないようにするっていうよりかは
ライトに完了できる代わりに後から取り返せるよ
っていうような設計がすごく重要かなというところです
今風なんでしょうね、そっちのほうがね
今風ですね
なるほどね
わかりました
今日のテーマはまとめます
まずタイトルが絶滅しそうなUIは確認画面ということで
なんで確認画面がなくなりそうかというと
確認をしなくても確定の状態が出来上がる
大事なことは失敗してもやり直せるっていう体験とか
UIを提供することが確認画面が不必要になってくる
っていうところにつながるということですかね
はい、私も今後確認画面を意識して見ていこうと思います
ということで今日も聞いていただきましてありがとうございました
ありがとうございました
編集後期、お疲れ様でした
昔、ダークパターンとかを集めたサイトって結構話題になってたんですけど
2年ぐらい見てないですね
どういうことですか
成功には再現性は少ないけど失敗は再現性が高いということで
結構こういう失敗パターンとかダークパターンのやつを集めた
リファレンスサイトとかってちょいちょい人気になるタイミングがあるんですけど
ちょっと私の観測範囲だけの話かもしれないですけど
ダークパターン集めたみたいなサイトって結構毎年見かけてた気がするんですけど
AIが流行りだしからあんま見にくくなったのかな
21:02
どんどんクリーンになっていってるんですかね、これは
でも絶対まとめたらあるはずだよね、こういうのってね
そうですね
でもやっぱ昔の方がひどかったようなイメージはありますけど、なんとなく
そうだね、変なサイトとかいっぱいあったもんね
そうですね、背景色と同じ色でテキストを実は書いてるとか
そういうのって今じゃあんま考えられないと思うんですけど
昔って結構ちらほらありましたよね
それがSEO対策だみたいなの言ってる人もおったしね
そうか
ブラウザめっちゃ出てくるみたいな、新しいブラウザ
そういうのもありましたね
バナーブラウザみたいな
今度ダークパターン調べてみようと思いました
ということで今日はそんなところで終わっておきましょう
ありがとうございました
ありがとうございました