UIデザインの改善事例

デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は株式会社ajike代表の梅本と、
その仲間たちがデザインについて、雑談を交えながら話す番組です。
今日のお相手は、神田さんです。
神田さん、よろしくお願いします。

はい、今日もよろしくお願いします。

最近、神田さん、新しい本なんか読みましたか?

本を読みたいなと思ったのは、映像からの発信なんですけど、
上尾さん見たかわからないですけど、地面詞タッチって見ました?

いや、私は見てないですね。

見てないですか。もう面白すぎて。

ほんと。

まじで。一気に見ちゃって。
映像がすごいんですけど、これちょっと原作読みたいなって思いました。

原作も読んでないですね。

はい。すごい売れてる。
もちろん当然今もネットフリックスで話題になってすごい売れてると思うんですけども、

面白いらしくて。
いいですね。妻が地面詞を見てました。

ほんとですか。見たほうがいいですよ。あんな面白いと。
もう笑っちゃいました。

もう笑っちゃった?

もう笑っちゃいました。
ちなみにそれで笑うのは人間的に大丈夫って感じですか?
そうですね。危ないかもしれないですけど。ニヤニヤしながら見てました。

えー、ほんと。ちょっとじゃあ見てみようかな。
最近自分なんか、資格の勉強を始めまして。

何の勉強ですか?

ファイナンシャルプランなのかなって思います。

なんでなんですか?

いや、全然関係ないです。
そろそろプログラムの勉強とかもやってはいるんですけども、
AIの進化とプログラミングって、エンジニアだったらもっと行きたいところまで行けるんじゃないかと思うんですけども、
ちょっと早すぎるなあみたいな、自分にとっては。
もうちょっとじっくりと思って。
なんか金融関係のやつやってるから、お金のやつやるかみたいな思って。
機器系とかは社内の決算書とか読んでるから大丈夫じゃないけど。

あんまり個人のお金の話とか、今まであんまり興味なかったんですけど。

社内でもあるじゃないですか、社員に対する確定拠出年金の制度を入れましょうとか言っても入れたりしてますけど、
たまにそういうのがあるじゃないですか。
確定拠出年金の制度を入れましょうとか言っても入れたりしてますけど、
たまに社員からどうしたらいいんですかみたいな相談を受けるから、
なんかあんまり正しくない知識でアドバイスしてもなって思ってたんで。
たぶん2級ぐらいまでで終わっておこうかなと思うんですけど。

資格1級とかは洒落にならないじゃないですか。
そうですね。
1級とか2級とかのレベル感ちょっとわからないんですけども、
自分の資格とか興味代とかほとんど取ったことないんで、
自動車の免許ぐらいを今思い浮かべてるんですけども。
ほとんど覚えないといけない事柄が、9割ぐらいはほとんど出会わないようなシーンのことを覚えないといけないじゃないですか。
この評察なんか見ることないよみたいな。

自動車の話ね。

このパターンのこんなシーンがあることはあるかんで。
そういうのを勉強してるときに、これやる意味あるのかなっていつも思っちゃうんですよ。
ないんじゃないですか。

自分にとってはないと。

年収上げとかこの仕事についてとかは全くそういう気持ちはないんやけど。

そりゃそりゃそうやね。そりゃないんやけど。

意外と知らんこと多いな。
一個目標を立てたら確かにいいですね。
そうですね。子どもらも勉強してるし。
えらいっすね。

いやいや、撮ってからですね。

確かに。

思ったよりもエコージョン盛り上がっちゃいましたけども。

では今日のテーマは何でしょうか。

今日のテーマはですね、改善されて気持ちよかった超細かいUIデザイン参戦ということでお話ししたいと思います。
どういう意味ですかこれ。何ですかこれ。

意味わかんない。
これはですね。
職業柄っていうのもあるんですけども。
普段使ってるサービスとかで何気なくUIに慣れてるじゃないですか。
こういうもんだなと思って使い続けているものがある時アップデートされたり
ちょっと別のサービスが出てきたりして、
その当たり前に使ってたUI改善されてたりするじゃないですか。
はいはい。
その時ですね、確かに改善されてからわかるんですけども、
確かにこのUIちょっとストレスあったよなっていうのが結構あって。

なるほど。

これ、改善した人えらいなって思うことがたまにあるんですね。
便利なリンク付け機能

なるほどなるほど。

それをぜひ紹介したいなと思った話です。
面白そうですね。
問題に気づける人がいた。
いやそうなんですよ。ここ気づいたんすげえと思って。

それもしかして君のゼリフだったのかな。
そんなことないですよ。
わかりました。3線っておっしゃってましたもんね。

じゃあその3線、3つ教えてもらっていいですか。

これはもう共感してもらえると思うんですけど、
まず前提としてめっちゃ細かいですよ。

知らんわーってツッコミ用意しといたらいいんよね。

そうですね。お願いします。
知らんわーかめっちゃわかるかどっちかでお願いしたいんですけども。

はい。了解しました。

まず一つ目がですね、
入力中のテキストにURLをコピペするだけでリンク付きのテキストになるっていうUI。

めちゃくちゃいいよね。

知ってる知ってる。
そうなんですよ。
別に新しいとか数年前からこうなってることが多いんで、
皆さん普通に使ってる人も多いと思うんですけども、
これ普通じゃなかったんですよ。

普通じゃない。

これスラックとかアサナで自分は使ってて、
このUIこう変わってるのを発見しましてですね。
多分自分が初めてそれを使ったアサナだったと思うんですけど、
よかったと思いました。
以前はですね、
メールとかでもしリンク、
メールとかパワポとか何でもいいんですけども、
リンク付きのテキストを作りたかったら、
そのテキストの箇所を選択して、
リンク付けるアイコンをクリックして、
URL貼り付けるっていうような作業をして、
それができるっていう感じで、
それが普通だったんで、
そうしなければいけないんだって、
そもそもそのように考えてました。
あるときからこのテキストに、
この入力中のテキストにURLをペコッとコントロールVで貼り付けたら、
リンク付きテキストになったっていうのを発見しまして、
これ気づいたデザイナーなのかエンジニアなのかわからないですけど、
この気づいた人めっちゃ偉いって思いましたね。

賢いよね。

これほんとすごいですよね。

すごいです。おっしゃるとおり。

そうなんですよ。本当に感動しました。

今日まさに、どのツールって言っちゃうとあれですけど、
お客さんが使われているドキュメント系のツールで、

情報共有どうしましょうかねっていう相談を受けてたんですね。
そのアイディアをさっきバーッと書いてたんですけども、

今のやつがまさにできなくてちょっとイライラしてた。
ああ、そうですよね。そうなんですよ。
同じノートにあるタイトルを引っ張ってくるのに、URLしか引っ張れなくて。
なるほど。
ノートと同じで、タイトルのテキストが入ってくれたらいいのにかもあるし。
今までどおりタイトルテキストを打ってからリンクを設定するみたいなことをやってたので、

まさに今日今やっていたことだからすごく共感してました。
それもスラックアサナーとかで出てこなかったときは、それが普通だと思ってたと思うんですよ。

確かに。
なんで俺気づいた人すごいなと思って、本当に拍手です。
拍手。じゃあ1個目は拍手。
はい。
ありがとうございます。じゃあ2個目なんでしょうか。

2個目はですね、図形の種類を後から変更できるっていうUIです。

どういうことですか。

これはミロなんですけれども、ミロ使ったときにこれも感動しました。
オブジェクトでですね、四角いオブジェクトとか丸とか角丸とかいろいろ作って、
その中にテキスト打ってみたいなのはやると思うんですけども、
そのオブジェクトを作ってから、後から四角を角丸に変えたりとか、四角を吹き出しに変えたりとか、
そういう工程ができるんですよね。
そうなの?
あれ?そうですそうです。わかりづらいですか。

単純に知らないっていう。

本当ですか。
そうなの?すごい。
いや、たぶん使ってると思うんですけど、ちょっとこれ見てもらって。
ミロ使ってないのバレたの?
使ってますよね。

私が操作してるシーンとかありました?

いやちょっとわかんないですけど、何を言ってるかっていうと、
今ちょっと使ってるんですけども、ここで。

一応画面共有してます。

こんな感じで操作。今角丸のオブジェクトを作って、その中にテキストを打ってっていう作業をするじゃないですか。
その後に丸にしたりとか、吹き出しにしたりとか、固形を形変えれるっていう。
すごいねこれ。
これ知らなかったですか?

知らなかったです。
本当ですか。

こんな機能あるんですね。
これがですね、今までこういう作業、固形を使ってオブジェクトを使って何かを作るみたいなんで、
例えばパワポでやったりとか、もしくはフォトショでとかイラレでとかやってたと思うんですけども、
これできなかったんですよ。

見たことないですね。

そうなんですよ。なんで、ちょっと四角で作ってたけれども形変えたいなって思ったら、

もう一回作り直さないといけなかったんですよね、ゼロから。

それが普通だったんで、当然そういうものだと思って今までは過ごしてきたんですけども、
このミロを後から変えれる。これすげえ。
あっぱれ。
本当あっぱれです。
これ気づいた人えらいな。

気づいた人の名前ちゃんと教えてほしいですよね。
本当に教えてほしいです。もう拍手です。
ATMの時間差機能

かっこいい名前の人やったらちょっと惚れてしまうかもしれないですね。

名前ですか。なんで名前で惚れるんですか。
これアレクサンダーさんが考えたのは、さすがやなみたいな。
勝手に代用イメージで話してしまった。

出てきてほしいですね。すごい自慢してほしいですね。
誰かがいるわけですからね。
そうなんですよ。エンジニアですかね、これは。
確かに。デザイナーかものなんかめんどくさいよなっていうのがやっぱあったんやろうな。

そうですね。
なるほど。いい話です。

続いて三つ目はないと思うんですけど、何ですか三つ目は。
三つ目はあります。
あるんですか。
すげえ細かいんですけども。

これはちょっと種類が違うんですけども。
コンビニのATMでカードと現金が時間差で出てくるっていう。
ATMの改善点

なるほど。

これが最近体験しておおって思ったんですけども。
あるコンビニでキャッシュカード入れて現金を引き出しましたと。
このときに現金引き出したと最後カードと現金が出てくると思うんですけども。
まず初めにカードが返されました。
それを引き抜く、取り出してからバカッと現金の箱のところが蓋が開いて、
次は現金を取り出してくださいっていう順番になってたんですね。
これ超細かいんですけども。
大変改善されてるって思ったんですけども。
今まで両方同時に出てきてたと思うんですよ。
今も大体そうか。
いろんな種類のATMあるんでそれも多いかなと思うんですけども。
両方同時に出てきたときのあるあるが、
カード引っこ抜いて、カードを財布に入れてる間に
現金を取り出すタイミングが遅くなって、
ピコンピコンピコンってアラート鳴るじゃないですか。
あれ間に合わないですよね。

いつもピコピコ鳴ってるんですよ。
確かに。

それがもう普通だったんで。
早く取り出さない人を頑張ってやってたんですけども。
それが改善されて、まずカード、次に現金っていう順番で出てくるようになったのが、
おおーって思って、これ思いついた人偉いって思いました。
優先順位の重要性

やっぱり。
これすごいよね。
これ私も気づいてたんですよ。

気づいてますよ。

気づいてたっていうのは、

そういうふうに仕様が変更されたなっていうことに対して聞いた。

個人的にキャッシュカードを優先的に、
現金とカードどっちが大事だって言ったら、カードだなと。
そうですね。
カードを忘れられるのが一番クレームにつながるんじゃないか。

なるほどな。

だから現金の前に先にカードをお客様に送っていただいて、
そこからお金を入れたら、
もちろん忘れ物が、さっきのアラートが消えてアラートになると思うんですけど引き続き。
忘れ物がなくなって、どっちのほうの忘れ物の問い合わせのリスクが減らせるかみたいなので、

カードからやってるんじゃないかなと思ってたんですよ。

すごいですね、それ。本当はその通りだと思います。

UXリサーチとかやってるはずなんですよ、この話。

現場に行って、たぶん高齢の方、スピード感みたいなのにかなり反応できないので、

高齢の方もスピード的にはできない。

そこでピロピロってなっても、見てお客さんがどっか嫌な方を含めるようなシーンを見て、
気づかれたのかなとか。

あー、確かにそうかもしれないですね。
あのアラート音、鳴っちゃったら嫌なんですよね。
嫌よね。

そのときにたぶん、ちゃんと落ち着いて出せるようにしましょうって言って、

その優先の話が出てきたんかなとか思ったりはする。
あと自分も思ったのは、やっぱり忘れ物多いっていうのはあったんかなと思ってて、
UIデザインの未来

どっちかは取り出すけれども、どっちかは忘れてたみたいな。
それも順番にすることによって解決できますよね。

そうそうそう。
タスクのほうを、順番にしたら一回抜いて、
現金でアラートを鳴らしてもう一回って打ち出てくるじゃないですか。
賢いですね。気づいた人まじすごいですね。

そうなんですよ。そこも普通だったんで。

自分は本当に全く意識してなかったんで、

気づけて、こう改善したらいいんじゃないかみたいなのは全然思いついてなかったですけども、

その人たちすごいあっぱれだなと思いました。
これでもやっぱり、勉強をどうやって止めたらいいんでしょうね。

そうなんですよね。
確かに3番目のATMの件で言うと、先ほどメモクさんが言った通り、
もしかするとユーザーの観察をしていて、
ちょっとストレスを抱えている人がいるとか、
観察したらもしかしたら課題が見えてくるかもしれないなと思うんですけども。
テキストにコピペでURL付きのリンクにできるとか、
オブジェクトを後から形変更できるとか、
これちょっとあんまりどういうふうにしたら思いつくのか、あんまりイメージができなかったりする。

確かに。全然できないですね。
どれも自分はできると思わないですけど、
もしかしたら3番目だけはギリギリ可能性あるかもしれないなとか。
たしかにリサーチすればあるかもしれないですね。
でも1、2はないな。

ちょっとあれですね。課題発信でもなさそう。

課題発信なんかちょっと違うような気もするというか。
ダニエル・カーネマンのシステム思考1、2って話題になった。
結局1のところを2でいかなきゃいけない。
1っていうのは、赤信号だったら無条件に止まるみたいな。

なぜ赤は止まらないといけないのか考えない。
赤やから止まるみたいな。その認知負荷を下げるというか。
判断スピードを上げるみたいなのがシステム思考1みたいな話だと思うんですけど。

それのモードの通常層じゃないですか。今も全部通常層だなって話をしてると思うんで。

リンク貼ってリンク貼るのはシステム思考1で当たり前みたいな。

システム思考2もモードの切り替えで、もしくは領域広げるかも。

またはモノ使い方がっていう。

めちゃくちゃ賢いよ、そんなんできるのかな。
結局。

何が出てくるのかなと思ったんですけど。めちゃめちゃ賢いな。

もうこれ以上言語化できなかったわ。
いやでもほんまそうですよね。
これも小さなイノベーションじゃないですか。

そうなんですよ。

いわゆる未来の当たり前を作る。

そうなんですよ、まさに。

これが今後なくなったら不便に感じるぐらいだから、
未来の当たり前を作ることどうやるんですかと同じような問いなんで、
それが再現しやすくないような気がしますよね。
いや、そうっすね。
こういうことができるクリエイターに憧れ続けて、まだ憧れてますよ、私は。
尊敬してる。
憧れへんようになったときのほうが残念だと思うので、憧れ続けたいですね。
今日のテーマは、改善されて気持ちよかった超細かいUIデザイン3選。
1つ目はコピーでしたらリンク付きテキストになる。
2つ目は図形の種類を後から変更できる。
3つ目はコンビニのATMで時間差で操作ができる。

いい内容でした。

もしこういうのもあったなっていうのがあればコメントいただきたいですね。
ぜひぜひお願いします。
ということで今日も聞いていただきましてありがとうございました。

ありがとうございました。

編集後期、おつかれさまでした。
ありがとうございました。

この3つを聞いてる間、私も4つ目ないかなと思ったんですけど何も思いつきませんでしたね。
意外と盛り上がりましたね。
いやー面白い。
自分もう一個あったんですけども。
これだいぶ昔なんですけど、思い返すと。
覚えてるかわからないですけど、
Google Chromeのタブにスピーカーアイコンがつくようになったっていうのが後からで。
YouTubeとかタブってもう開きまくるじゃないですか。
YouTubeとかつけてたとき、どこのタブから音出てんのかわからなくなるっていうのがあって。

あるとったらスピーカーアイコンつくようになったんですよ。
あるある。

これえらいと思いました。

えらいなー。
気づかんわー。
今はオンラインミーティングとかしてるときのカメラついてるようなアイコンもつくようになって。
やっぱり状態をユーザーにお知らせする。

いやーそうですね。タブにつけちゃおうって思った人、すごいですね。
すごいなー。
むすびー。
これ誰のCやったかっていうの忘れました。

雨にも負けずみたいな話。

素晴らしいございます。

今日も聞いていただきましてありがとうございました。

ありがとうございました。