スマート家電とAI

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

よろしくお願いします。原です。

最近、AIもよく触ってはいるんですけども。
はい。
自動化にも踏まっております。スマート家電です。
土日によくAI触ってるんですよ。
AI自身ももちろん試していろいろやってることも多いんですけども、
スマート家電だと、ドアの自動化とか、家に帰ってきたら、
今はもう大丈夫ですけども、ヘアコンがつくみたいな。
よくスマート家電でYouTube継続者が出てくるようなことをやってるんですけども。
AIで私の場合はDeFi使ったりするし、業務自動化できないから。
人がこういうふうに動いていって、このプロセスは自動化をするんじゃないかみたいな。
業務の流れみたいなことをどう自動化するかみたいなんですけど、それと非常に似てる。
だからAIで、スマート家でこういう自動化をしたいんだけど、

順番とメニューを書いてくるみたいな。
それをもってレシピとして設定したりとかする。
今何が自動化されてるんですか?

今かなり自動化されてるんですけど。

個人的によかったなと思ってるのは、ここは仕事部屋なんです。
部屋に入ったら電灯は自動でついて、パソコンがあっちあるみたいな。
えー。それ何がトリガーで動くの?

人感センサー。

人感センサーってすごいですね。

トリガーに電灯を。
あとスイッチで。
みたいなことをやったりとかしてる。
ただそれもエラーめっちゃ起こるんです。

毎回パソコンの電源を押したら終わりそうですよね。
UIデザインの競合分析

条件。
デザインとかも。
溶けるデザイン。
UIデザイン。

見えない。
このスマート化みたいには、溶けるデザインがポイントなんだろうな。

意識しなくても。
鍵をかける動作ってやっぱり、鍵を取り出して開けたり。
ああ、そうですね。工程が多いです。
めちゃくちゃ工程多いんだな。
こういうのって、それやるまではそんなのいらないと思うんですけど、
一回やっちゃうともうないと困る。
今日も言ってそうな話です。

そうなったらいいの?

そうなったらいいの。
ないと困る。
スマホもそうで、めちゃくちゃ曲がるんですけどね。
スマホなんか普通に見つけていけるんだけどね。
そうですね。

楽しいですね。

すみません、めっちゃ長くなっちゃいました。
さて、今日のテーマは何でしょうか。

今日のテーマはUIデザインの学習には競合分析が最適というテーマです。

いいですね。
なぜこういうテーマにしたいんですか。

今、私のデザイン組織改善事業部で、
SUGレビューをずっとやってますよ。
バージョンでもしてると思うんですけど、
最近SUGレビューを少しアップデートして、
競合分析という観点で、
サービスを新しくリリースしたんですね。
競合分析と聞くと、戦略レイヤーの話というか、
企画とか戦略のタイミングで、
同業の会社と企画して、
ターゲットがどうなのか、コンセプトがどうなのか、
マーケティング寄りというか、
あまりデザインというよりも、
責任者の方とか、企画なんか、
事実レイヤーの方が結構やる、
レイヤーの業務のイメージあると思うんですけど、
今回指している競合分析っていうのは、
UI、EX観点でも競合分析っていうのを指してまして、
結構同じサービスを企画したときに、
同じようなサービス、
類似したサービスを企画したときに、
結構違いがあったりとかするんです。
画面ごとに違いがあったりとか、
画面整理自体に違いがあったりとかっていうので、
UIとしての特徴が見えたりとか、
課題点が見えたりとかっていうのが、
比較をすると結構見えてきたりするので、
その辺を今サービスとしてやってるっていうところで、
実際には自分がサービス提供をする中で、
金融系のサイトとかの競合分析とかも
させてもらってるんですけど、
やってて、
意外とこれってジュニアのデザイナーの人とかが、
学習するときに役立つ作業なんじゃないかな、
っていうふうに思ったので、
テーマとして作ってきました。
ジュニアデザイナーへの影響

なるほど。
じゃあ具体的に、
戦略の競合分析と、
今回のUI、UXでの競合の分析の違いみたいな話だと思うんですけども、
具体的に何をするんですか。

そうですね。スグレートでやってるのは、
まず業界的に同じ業界のサイトだったりとか、
サービスとかっていうところを絞って、
比較していくみたいな形なんですけど、
同じ業界で競合を選ぶときには、
例えば、
チェアを多く獲得してる大手の会社さんのサービスを
ピックアップして、
依頼のあったお客さんのサイトと、
UIX観点で強みを比較していくってことをやるんですけど、
その時には独自の仕様をさらにやる。
その仕様を使ってチェックをしていくっていうことをやります。
その結果、お客さんのサイトのチェック結果が出てくるのと、
あとは競合の2社分の結果が同じ指標で出てくるので、
同じ一定の好評価をしたときに、
どこかが高かったり低かったりっていうことの結果として見えたりするので、
その辺を見える化して、
あとは参考にできそうなところでも結構出てきたりするので、
この大手のサービスで使ってるこういうところを
振り入れたほうがいいですとか、
それを抽出してレポートカーをタイプしていくみたいな、
それがすぐレベルで提供してる時点の流れなんですね。
一応その作業の過程の中で、
実際に堂々と選定して、
企業のサービスとかサイトを触ったりとかする作業があるんですけど、
もちろん実際に触っていって、
同じ画面を見て作業していくという形で、
ちょっとイメージ、特定の何かサービスとか言うと、
やりすいかなと思うんですけど、
例えば講座解説の申込ページみたいなところを見ましょうといった時に、
例えばいろんな人口さんが講座解説の申込ページがあると思うので、
それをまず触っていくっていうのをやるんですね。
それを申込の開始から完了までを触っていった時に、
その辺りがどう違いがあるのかっていうのをまとめていくっていう、

そういうことをやるのが、一応その分析の過程の中にあるような作業になります。

なるほど。

結構この観点でUIをつまびらかにしていくっていうのは、
確かにあんまり聞かないですね。

そうですね。
実際に自分もあんまりやって、
特定のサービスとか特定の画面を比較してやってることはあんまりなかったので、
実際やってみたらこういう違いが出てくるんだとか、
こういう差があるんだなーみたいなのがかなり多かったので。

めっちゃいいな。なんか俺もやりたいな。

あ、俺って言った。

ぜひそういう話ですよ。

皆さんができるように。

なるほど。
さっきジュニアのデザイナーの学習にも役立つって言ってくれたんですけども、
その観点で言えばどういうことが言えるんですか?

そうですね。今回ジュニアのデザイナーっていうところで言うと、
ジュニアのデザイナーが学習とかいろいろしていくときに、
よくデザインの引き出しがやっぱりないので、
それを増やしていくためにいろいろ調査したりするってあると思うんですけど、
大体よくあるのはUIのトレースをするみたいなのがあったりすると思うんですよね。
それと結構同じような感覚かなと思っていて、
特定の企業とかサービス業界の同じ利用ケースで、
手の甲斐面を比較して調査していくというか、
確認していくみたいなことをやると結構インプットできる情報っていろいろあるなと思っていて、
その業界の例えば標準とか、よくこういうUIが使われてるんだなっていうのが見えたりとか、
単純に一貫性のデザイン的なセオリーも見えてきたりすると思って、
実際すごく勉強になるんじゃないかなと思ってますし、
デザイナーの方ではない方でも、
自分のサービス、自分の会社のサービスってどうなってんだろうっていうときに、
同じように多分他の会社さんの画面とか同じ利用シーンとかになっていくとすると、
何かしら絶対気づきがあると思うので、
デザイナーの方も面白いし、デザイナーじゃない方もやってみるとすごい面白いんじゃないかと。

なるほど。
これも具体的にどういうふうに始めたらいいと思いますか。
競合分析の手法

そうですね。具体的に例を出せればいいと思うんですけど、
まずやってもらうのは、業界とかサービスを絞ってもらうのが一つ。
このサービス、この業界のサイトを絞ってもらって、
利用の目的と利用シーンを明確にしてもらえればある程度できるんじゃないかと。
例えばアパレル系のインスタサイトを対象にしてやろうみたいなところをまず絞ったら、
利用の目的的には冬に向けて私のことが欲しいから、
買おうとしているユーザーがいるみたいな、そういう目的を持っているユーザーがいるっていう設定をして、
例えばシーンとしては広告を見るというのを続けて、
コートを買うっていうところまでの一連のシーンを見ようみたいな。
その辺りが決められていれば、その利用シーンに通る画面っていうのが見えてくると思うので、
その一連の流れをユーザー目線でひと通り触ってみるっていうのをやっていただくと、
多分違いが出てくるかなと思うと。
あとその時にはスクショです。
スクリーンショットをそれぞれ取っていっていただいて、
何かしら貼り付ける場所みたいなのにしたので、
スクリーンショットを左から右に画面を並べてもらって、
他の競合も同じように比較できるみたいなのを並べていくと、
多分比較がすごくしやすくなるなということ。
触っている時に気になるところが出てくると思うんですよね。
ここがすごくいいと思ったっていうところだったり、
ここはちょっと迷ったなとか分かりにくいなと思ったときに、
その辺を触りながらメモしていただいて、
そのスクリーンショットに最後貼り付けていただくと、
どの工程でどういうことが出たかっていうのを
俯瞰してみるような感じになると思うので、
そこから多分レポートというか分析ができると、
共通して入れることだったりとか、
ここが優れてるとか、なぜそれが優れてるのかと、
これ使いづらいけどどうやったら改善するのかなとか、
その辺が結構言語化できたり、
実際UIを検討したりとかもできたりすると思うので、
この一連の流れ自体はすごく充実した学びが
得られるんじゃないかなと思います。
競合分析の活用

なるほど。

これもすごくいいやり方です。
ジュニアの方も多少分かってる人じゃないかなと。

そうですね。ちょっとやってみるといいかなと思うんですよ。
俯瞰してみると。

いわゆるユースケースをちゃんと設定。
ユーザーテストじゃないけどユースケースをちゃんと設定して、
ある程度タスクを限定してやっていったら、
使いやすさとかもっと達成できるかみたいな。

そうですね。
普通に触るだけじゃなくて、
スクリーンショットと目に見える形で並べると、
それはそれでまた気づくことが結構あって。
ユーザーのとき触ってるときってあんまり
タップ数とか画面繊維の対数とかそんなに
ゆっくり触ったりじゃないと思うんですけど、
長いなと思ったりすることがあると思うんですけど。
それでも並べると、このサイトすごい速いじゃんっていうのが分かったりとか、
サイトすごいグルグル回せることがあったりとか。
それもまたひとつ面白いのが、監視テレビでね。
私がデザインスタンプハウスってやってるんだけど、

競合のサイトをステップ数レベルでちゃんと確認してかどうかっていうのはあんまりできてないもんね。

そうですね。

大体こんな狙いだなみたいな。

そうですね。

細部までなかなか分析することないと思うんで。
たしかにフォームの部分は何画面かキャプチャしたってこともありますけど、

そこまでは意識し抜けばやんない。

そこはめちゃくちゃわかるだろう。

実際やってみたらすごい明らかにステップ数が分かりやすいんだとか。

すぐ目的達成できたんだなっていうのが分かった。
やっぱり競合の工夫とかステップ数とか開発者の原因っていうのが分かったから、
お客様にはこうやったほうがいいよみたいな提案をしやすくなったって感じですね。

そうですね。それを参考に話をしたりとか。
目に見える形で実際にどれだけあるもので、お客様のイメージがしやすい。
これを取り入れようと思ってる。

わかります。
あと最後に何か。
いつもこのラジオを聞いてくださってる方がいるとしたら気づくと思うんですけど、
原さんからお伝えしたいことはありますか。

最後に宣伝をさせてもらいたいんですけど。

次で言うのは、情報分析というサイトを9月からリリースしてまして、

サイトのほうにメールマーク登録したら無料のモニタの募集とかで情報をお知らせしますってところを用意してますので、
そういう競合分析に興味がかかっている方はぜひ概要欄に貼ってると思いますので、
サイトに登録して情報を取得してみたいなと思います。

わかりました。無料モニターの募集もたまに出してるんですかね。
そうですね。メールマガで限定でシェアしてたりするので。
チェックしてみてくださいと。
今は原さんがすごく細かく競合の知りたいところを調査して、
日本に立ち向かうサービスが使いやすくなるようにという非常にいいアドバイスをしてもらえると思いますので、
この機会にぜひご利用ご検討いただければと思います。
ということで、今日のテーマはUIデザインの学習には競合分析が最適というお話でした。
聞いていただきましてありがとうございました。

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

編集後期、お疲れ様でした。

お疲れ様です。

今までで一番滑らかに宣伝いけたんじゃないですか。
本当ですか。
そこはやっぱり溶けるデザインできてなかったですか。

かけてました。浮いてませんでした。

溶けるように宣伝がいけたらなと思ったんですけど、だめでしたか。
入りからも宣伝入ってたと思う。提供してもらってた。
本当にいいサービスだと思います。絶対使ってほしいなと思いますけどね。
今日はそのところで終わっておきましょうかね。
どうも終わります。ありがとうございます。