UIデザインの改善事例
s-umemoto
デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は株式会社ajike代表の梅本と、
その仲間たちがデザインについて、雑談を交えながら話す番組です。
今日のお相手は、神田さんです。
神田さん、よろしくお願いします。
神田淳生
はい、今日もよろしくお願いします。
s-umemoto
最近、神田さん、新しい本なんか読みましたか?
神田淳生
本を読みたいなと思ったのは、映像からの発信なんですけど、
上尾さん見たかわからないですけど、地面詞タッチって見ました?
s-umemoto
いや、私は見てないですね。
神田淳生
見てないですか。もう面白すぎて。
s-umemoto
ほんと。
神田淳生
まじで。一気に見ちゃって。
映像がすごいんですけど、これちょっと原作読みたいなって思いました。
s-umemoto
原作も読んでないですね。
神田淳生
はい。すごい売れてる。
もちろん当然今もネットフリックスで話題になってすごい売れてると思うんですけども、
s-umemoto
面白いらしくて。
いいですね。妻が地面詞を見てました。
神田淳生
ほんとですか。見たほうがいいですよ。あんな面白いと。
もう笑っちゃいました。
s-umemoto
もう笑っちゃった?
神田淳生
もう笑っちゃいました。
ちなみにそれで笑うのは人間的に大丈夫って感じですか?
そうですね。危ないかもしれないですけど。ニヤニヤしながら見てました。
s-umemoto
えー、ほんと。ちょっとじゃあ見てみようかな。
最近自分なんか、資格の勉強を始めまして。
神田淳生
何の勉強ですか?
s-umemoto
ファイナンシャルプランなのかなって思います。
神田淳生
なんでなんですか?
s-umemoto
いや、全然関係ないです。
そろそろプログラムの勉強とかもやってはいるんですけども、
AIの進化とプログラミングって、エンジニアだったらもっと行きたいところまで行けるんじゃないかと思うんですけども、
ちょっと早すぎるなあみたいな、自分にとっては。
もうちょっとじっくりと思って。
なんか金融関係のやつやってるから、お金のやつやるかみたいな思って。
機器系とかは社内の決算書とか読んでるから大丈夫じゃないけど。
神田淳生
あんまり個人のお金の話とか、今まであんまり興味なかったんですけど。
s-umemoto
社内でもあるじゃないですか、社員に対する確定拠出年金の制度を入れましょうとか言っても入れたりしてますけど、
たまにそういうのがあるじゃないですか。
確定拠出年金の制度を入れましょうとか言っても入れたりしてますけど、
たまに社員からどうしたらいいんですかみたいな相談を受けるから、
なんかあんまり正しくない知識でアドバイスしてもなって思ってたんで。
たぶん2級ぐらいまでで終わっておこうかなと思うんですけど。
神田淳生
資格1級とかは洒落にならないじゃないですか。
そうですね。
1級とか2級とかのレベル感ちょっとわからないんですけども、
自分の資格とか興味代とかほとんど取ったことないんで、
自動車の免許ぐらいを今思い浮かべてるんですけども。
ほとんど覚えないといけない事柄が、9割ぐらいはほとんど出会わないようなシーンのことを覚えないといけないじゃないですか。
この評察なんか見ることないよみたいな。
s-umemoto
自動車の話ね。
神田淳生
このパターンのこんなシーンがあることはあるかんで。
そういうのを勉強してるときに、これやる意味あるのかなっていつも思っちゃうんですよ。
ないんじゃないですか。
s-umemoto
自分にとってはないと。
神田淳生
年収上げとかこの仕事についてとかは全くそういう気持ちはないんやけど。
s-umemoto
そりゃそりゃそうやね。そりゃないんやけど。
神田淳生
意外と知らんこと多いな。
一個目標を立てたら確かにいいですね。
そうですね。子どもらも勉強してるし。
えらいっすね。
s-umemoto
いやいや、撮ってからですね。
神田淳生
確かに。
s-umemoto
思ったよりもエコージョン盛り上がっちゃいましたけども。
神田淳生
では今日のテーマは何でしょうか。
s-umemoto
今日のテーマはですね、改善されて気持ちよかった超細かいUIデザイン参戦ということでお話ししたいと思います。
どういう意味ですかこれ。何ですかこれ。
神田淳生
意味わかんない。
これはですね。
職業柄っていうのもあるんですけども。
普段使ってるサービスとかで何気なくUIに慣れてるじゃないですか。
こういうもんだなと思って使い続けているものがある時アップデートされたり
ちょっと別のサービスが出てきたりして、
その当たり前に使ってたUI改善されてたりするじゃないですか。
はいはい。
その時ですね、確かに改善されてからわかるんですけども、
確かにこのUIちょっとストレスあったよなっていうのが結構あって。
s-umemoto
なるほど。
神田淳生
これ、改善した人えらいなって思うことがたまにあるんですね。
便利なリンク付け機能
神田淳生
なるほどなるほど。
s-umemoto
それをぜひ紹介したいなと思った話です。
面白そうですね。
問題に気づける人がいた。
いやそうなんですよ。ここ気づいたんすげえと思って。
神田淳生
それもしかして君のゼリフだったのかな。
そんなことないですよ。
わかりました。3線っておっしゃってましたもんね。
s-umemoto
じゃあその3線、3つ教えてもらっていいですか。
神田淳生
これはもう共感してもらえると思うんですけど、
まず前提としてめっちゃ細かいですよ。
s-umemoto
知らんわーってツッコミ用意しといたらいいんよね。
神田淳生
そうですね。お願いします。
知らんわーかめっちゃわかるかどっちかでお願いしたいんですけども。
s-umemoto
はい。了解しました。
神田淳生
まず一つ目がですね、
入力中のテキストにURLをコピペするだけでリンク付きのテキストになるっていうUI。
s-umemoto
めちゃくちゃいいよね。
神田淳生
知ってる知ってる。
そうなんですよ。
別に新しいとか数年前からこうなってることが多いんで、
皆さん普通に使ってる人も多いと思うんですけども、
これ普通じゃなかったんですよ。
s-umemoto
普通じゃない。
神田淳生
これスラックとかアサナで自分は使ってて、
このUIこう変わってるのを発見しましてですね。
多分自分が初めてそれを使ったアサナだったと思うんですけど、
よかったと思いました。
以前はですね、
メールとかでもしリンク、
メールとかパワポとか何でもいいんですけども、
リンク付きのテキストを作りたかったら、
そのテキストの箇所を選択して、
リンク付けるアイコンをクリックして、
URL貼り付けるっていうような作業をして、
それができるっていう感じで、
それが普通だったんで、
そうしなければいけないんだって、
そもそもそのように考えてました。
あるときからこのテキストに、
この入力中のテキストにURLをペコッとコントロールVで貼り付けたら、
リンク付きテキストになったっていうのを発見しまして、
これ気づいたデザイナーなのかエンジニアなのかわからないですけど、
この気づいた人めっちゃ偉いって思いましたね。
s-umemoto
賢いよね。
神田淳生
これほんとすごいですよね。
s-umemoto
すごいです。おっしゃるとおり。
神田淳生
そうなんですよ。本当に感動しました。
s-umemoto
今日まさに、どのツールって言っちゃうとあれですけど、
お客さんが使われているドキュメント系のツールで、
神田淳生
情報共有どうしましょうかねっていう相談を受けてたんですね。
そのアイディアをさっきバーッと書いてたんですけども、
s-umemoto
今のやつがまさにできなくてちょっとイライラしてた。
ああ、そうですよね。そうなんですよ。
同じノートにあるタイトルを引っ張ってくるのに、URLしか引っ張れなくて。
なるほど。
ノートと同じで、タイトルのテキストが入ってくれたらいいのにかもあるし。
今までどおりタイトルテキストを打ってからリンクを設定するみたいなことをやってたので、
神田淳生
まさに今日今やっていたことだからすごく共感してました。
それもスラックアサナーとかで出てこなかったときは、それが普通だと思ってたと思うんですよ。
s-umemoto
確かに。
なんで俺気づいた人すごいなと思って、本当に拍手です。
拍手。じゃあ1個目は拍手。
はい。
ありがとうございます。じゃあ2個目なんでしょうか。
神田淳生
2個目はですね、図形の種類を後から変更できるっていうUIです。
s-umemoto
どういうことですか。
神田淳生
これはミロなんですけれども、ミロ使ったときにこれも感動しました。
オブジェクトでですね、四角いオブジェクトとか丸とか角丸とかいろいろ作って、
その中にテキスト打ってみたいなのはやると思うんですけども、
そのオブジェクトを作ってから、後から四角を角丸に変えたりとか、四角を吹き出しに変えたりとか、
そういう工程ができるんですよね。
そうなの?
あれ?そうですそうです。わかりづらいですか。
s-umemoto
単純に知らないっていう。
神田淳生
本当ですか。
そうなの?すごい。
いや、たぶん使ってると思うんですけど、ちょっとこれ見てもらって。
ミロ使ってないのバレたの?
使ってますよね。
s-umemoto
私が操作してるシーンとかありました?
神田淳生
いやちょっとわかんないですけど、何を言ってるかっていうと、
今ちょっと使ってるんですけども、ここで。
s-umemoto
一応画面共有してます。
神田淳生
こんな感じで操作。今角丸のオブジェクトを作って、その中にテキストを打ってっていう作業をするじゃないですか。
その後に丸にしたりとか、吹き出しにしたりとか、固形を形変えれるっていう。
すごいねこれ。
これ知らなかったですか?
s-umemoto
知らなかったです。
本当ですか。
神田淳生
こんな機能あるんですね。
これがですね、今までこういう作業、固形を使ってオブジェクトを使って何かを作るみたいなんで、
例えばパワポでやったりとか、もしくはフォトショでとかイラレでとかやってたと思うんですけども、
これできなかったんですよ。
s-umemoto
見たことないですね。
神田淳生
そうなんですよ。なんで、ちょっと四角で作ってたけれども形変えたいなって思ったら、
s-umemoto
もう一回作り直さないといけなかったんですよね、ゼロから。
神田淳生
それが普通だったんで、当然そういうものだと思って今までは過ごしてきたんですけども、
このミロを後から変えれる。これすげえ。
あっぱれ。
本当あっぱれです。
これ気づいた人えらいな。
s-umemoto
気づいた人の名前ちゃんと教えてほしいですよね。
本当に教えてほしいです。もう拍手です。
ATMの時間差機能
s-umemoto
かっこいい名前の人やったらちょっと惚れてしまうかもしれないですね。
神田淳生
名前ですか。なんで名前で惚れるんですか。
これアレクサンダーさんが考えたのは、さすがやなみたいな。
勝手に代用イメージで話してしまった。
s-umemoto
出てきてほしいですね。すごい自慢してほしいですね。
誰かがいるわけですからね。
そうなんですよ。エンジニアですかね、これは。
確かに。デザイナーかものなんかめんどくさいよなっていうのがやっぱあったんやろうな。
神田淳生
そうですね。
なるほど。いい話です。
s-umemoto
続いて三つ目はないと思うんですけど、何ですか三つ目は。
三つ目はあります。
あるんですか。
すげえ細かいんですけども。
神田淳生
これはちょっと種類が違うんですけども。
コンビニのATMでカードと現金が時間差で出てくるっていう。
ATMの改善点
s-umemoto
なるほど。
神田淳生
これが最近体験しておおって思ったんですけども。
あるコンビニでキャッシュカード入れて現金を引き出しましたと。
このときに現金引き出したと最後カードと現金が出てくると思うんですけども。
まず初めにカードが返されました。
それを引き抜く、取り出してからバカッと現金の箱のところが蓋が開いて、
次は現金を取り出してくださいっていう順番になってたんですね。
これ超細かいんですけども。
大変改善されてるって思ったんですけども。
今まで両方同時に出てきてたと思うんですよ。
今も大体そうか。
いろんな種類のATMあるんでそれも多いかなと思うんですけども。
両方同時に出てきたときのあるあるが、
カード引っこ抜いて、カードを財布に入れてる間に
現金を取り出すタイミングが遅くなって、
ピコンピコンピコンってアラート鳴るじゃないですか。
あれ間に合わないですよね。
s-umemoto
いつもピコピコ鳴ってるんですよ。
確かに。
神田淳生
それがもう普通だったんで。
早く取り出さない人を頑張ってやってたんですけども。
それが改善されて、まずカード、次に現金っていう順番で出てくるようになったのが、
おおーって思って、これ思いついた人偉いって思いました。
優先順位の重要性
s-umemoto
やっぱり。
これすごいよね。
これ私も気づいてたんですよ。
神田淳生
気づいてますよ。
s-umemoto
気づいてたっていうのは、
神田淳生
そういうふうに仕様が変更されたなっていうことに対して聞いた。
s-umemoto
個人的にキャッシュカードを優先的に、
現金とカードどっちが大事だって言ったら、カードだなと。
そうですね。
カードを忘れられるのが一番クレームにつながるんじゃないか。
神田淳生
なるほどな。
s-umemoto
だから現金の前に先にカードをお客様に送っていただいて、
そこからお金を入れたら、
もちろん忘れ物が、さっきのアラートが消えてアラートになると思うんですけど引き続き。
忘れ物がなくなって、どっちのほうの忘れ物の問い合わせのリスクが減らせるかみたいなので、
神田淳生
カードからやってるんじゃないかなと思ってたんですよ。
s-umemoto
すごいですね、それ。本当はその通りだと思います。
神田淳生
UXリサーチとかやってるはずなんですよ、この話。
s-umemoto
現場に行って、たぶん高齢の方、スピード感みたいなのにかなり反応できないので、
神田淳生
高齢の方もスピード的にはできない。
s-umemoto
そこでピロピロってなっても、見てお客さんがどっか嫌な方を含めるようなシーンを見て、
気づかれたのかなとか。
神田淳生
あー、確かにそうかもしれないですね。
あのアラート音、鳴っちゃったら嫌なんですよね。
嫌よね。
s-umemoto
そのときにたぶん、ちゃんと落ち着いて出せるようにしましょうって言って、
神田淳生
その優先の話が出てきたんかなとか思ったりはする。
あと自分も思ったのは、やっぱり忘れ物多いっていうのはあったんかなと思ってて、
UIデザインの未来
神田淳生
どっちかは取り出すけれども、どっちかは忘れてたみたいな。
それも順番にすることによって解決できますよね。
s-umemoto
そうそうそう。
タスクのほうを、順番にしたら一回抜いて、
現金でアラートを鳴らしてもう一回って打ち出てくるじゃないですか。
賢いですね。気づいた人まじすごいですね。
神田淳生
そうなんですよ。そこも普通だったんで。
s-umemoto
自分は本当に全く意識してなかったんで、
神田淳生
気づけて、こう改善したらいいんじゃないかみたいなのは全然思いついてなかったですけども、
s-umemoto
その人たちすごいあっぱれだなと思いました。
これでもやっぱり、勉強をどうやって止めたらいいんでしょうね。
神田淳生
そうなんですよね。
確かに3番目のATMの件で言うと、先ほどメモクさんが言った通り、
もしかするとユーザーの観察をしていて、
ちょっとストレスを抱えている人がいるとか、
観察したらもしかしたら課題が見えてくるかもしれないなと思うんですけども。
テキストにコピペでURL付きのリンクにできるとか、
オブジェクトを後から形変更できるとか、
これちょっとあんまりどういうふうにしたら思いつくのか、あんまりイメージができなかったりする。
s-umemoto
確かに。全然できないですね。
どれも自分はできると思わないですけど、
もしかしたら3番目だけはギリギリ可能性あるかもしれないなとか。
たしかにリサーチすればあるかもしれないですね。
でも1、2はないな。
神田淳生
ちょっとあれですね。課題発信でもなさそう。
s-umemoto
課題発信なんかちょっと違うような気もするというか。
ダニエル・カーネマンのシステム思考1、2って話題になった。
結局1のところを2でいかなきゃいけない。
1っていうのは、赤信号だったら無条件に止まるみたいな。
神田淳生
なぜ赤は止まらないといけないのか考えない。
赤やから止まるみたいな。その認知負荷を下げるというか。
判断スピードを上げるみたいなのがシステム思考1みたいな話だと思うんですけど。
s-umemoto
それのモードの通常層じゃないですか。今も全部通常層だなって話をしてると思うんで。
神田淳生
リンク貼ってリンク貼るのはシステム思考1で当たり前みたいな。
s-umemoto
システム思考2もモードの切り替えで、もしくは領域広げるかも。
神田淳生
またはモノ使い方がっていう。
s-umemoto
めちゃくちゃ賢いよ、そんなんできるのかな。
結局。
神田淳生
何が出てくるのかなと思ったんですけど。めちゃめちゃ賢いな。
s-umemoto
もうこれ以上言語化できなかったわ。
いやでもほんまそうですよね。
これも小さなイノベーションじゃないですか。
神田淳生
そうなんですよ。
s-umemoto
いわゆる未来の当たり前を作る。
神田淳生
そうなんですよ、まさに。
s-umemoto
これが今後なくなったら不便に感じるぐらいだから、
未来の当たり前を作ることどうやるんですかと同じような問いなんで、
それが再現しやすくないような気がしますよね。
いや、そうっすね。
こういうことができるクリエイターに憧れ続けて、まだ憧れてますよ、私は。
尊敬してる。
憧れへんようになったときのほうが残念だと思うので、憧れ続けたいですね。
今日のテーマは、改善されて気持ちよかった超細かいUIデザイン3選。
1つ目はコピーでしたらリンク付きテキストになる。
2つ目は図形の種類を後から変更できる。
3つ目はコンビニのATMで時間差で操作ができる。
神田淳生
いい内容でした。
s-umemoto
もしこういうのもあったなっていうのがあればコメントいただきたいですね。
ぜひぜひお願いします。
ということで今日も聞いていただきましてありがとうございました。
神田淳生
ありがとうございました。
s-umemoto
編集後期、おつかれさまでした。
ありがとうございました。
神田淳生
この3つを聞いてる間、私も4つ目ないかなと思ったんですけど何も思いつきませんでしたね。
意外と盛り上がりましたね。
いやー面白い。
自分もう一個あったんですけども。
これだいぶ昔なんですけど、思い返すと。
覚えてるかわからないですけど、
Google Chromeのタブにスピーカーアイコンがつくようになったっていうのが後からで。
YouTubeとかタブってもう開きまくるじゃないですか。
YouTubeとかつけてたとき、どこのタブから音出てんのかわからなくなるっていうのがあって。
s-umemoto
あるとったらスピーカーアイコンつくようになったんですよ。
あるある。
神田淳生
これえらいと思いました。
s-umemoto
えらいなー。
気づかんわー。
今はオンラインミーティングとかしてるときのカメラついてるようなアイコンもつくようになって。
やっぱり状態をユーザーにお知らせする。
神田淳生
いやーそうですね。タブにつけちゃおうって思った人、すごいですね。
すごいなー。
むすびー。
これ誰のCやったかっていうの忘れました。
s-umemoto
雨にも負けずみたいな話。
神田淳生
素晴らしいございます。
s-umemoto
今日も聞いていただきましてありがとうございました。
神田淳生
ありがとうございました。
