【要約】

株式会社ajike代表の梅本とサービスデザイナーの神田が、「カルーセルUIはなぜ絶滅しないのか」をテーマに語り合いました。かつてWebサイトのトップページで多用されたカルーセルですが、クリック数の9割が1枚目に集中し、それ以降はほとんど見られないデータがあります。実際、YouTubeやAppleのトップページなどの主要なサイトからは、メインビジュアルとしてのカルーセルは姿を消しつつあります。

しかし、カルーセルは完全に消滅したわけではありません。神田氏は、ユーザーが能動的に情報を探す場面、例えばECサイトの商品バリエーション選択や検索結果画面では、現在もカルーセルが有効活用されていると指摘します。受動的にコンテンツを眺めるトップページとは異なり、比較検討を行う場面では横スクロールが有用だからです。ユーザーのメンタルモデルに合わせて使い分けることで、カルーセルUIは今もなお重要な役割を担い続けています。

【本編】

オープニング：身近なAI活用術

梅本

デザインの味付け。

はい、始まりました「デザインの味付け」。

この番組は株式会社ajike代表の梅本と、その仲間たちがデザインについて雑談を交えながら話す番組です。

今日のお相手は、神田さんです。神田さん、よろしくお願いします。

神田

はい、神田です。よろしくお願いします。

梅本

最近、AI、神田さん何に使いましたか？

神田

AIですか。めっちゃ身近なところで言うと、LINEのAIって知ってますか？

梅本

いや知らない。何それ。

神田

なんかちょっと何かで使ったんですけど、返信が自動で出てくるっていう。

梅本

え？ それ奥さんに言うとこかな。

神田

危ない危ない（笑）。

梅本

「彼」自動でやってやりますよ。

神田

そんなとこまで出てきましたよ。

梅本

LINEのメッセージ返信のところであるんですか。

神田

それです。仕事でFigma（フィグマ）とかMake（メイク）とか、自分結構ちょこちょこ使ってみてるんです。めっちゃ便利なんですけども。

仕事の領域で結構AIを頑張って活用するっていうのをちょっとやってきてましたが、最近もう私生活にも起きてるんで。

梅本

いいですね。

神田

大丈夫ですかね。

梅本

大丈夫ですよ。

神田

大丈夫ですか。

梅本

絶対大丈夫だと思います。

わかりました。神田さんのAI事情を最初にアイスブレイクで聞いてみましたところで。さて、今日のテーマは何でございましょう。

カルーセルUIはなぜ絶滅しないのか

神田

今日のテーマは、「なぜカルーセルUIは絶滅しないのか」というテーマで話したいと思います。

梅本

めっちゃピンポイントやね。

神田

打って変わって、先週とは。

梅本

ほんまやね。先週は事業戦略フェーズの話とかね。

カルーセルUIはなぜ絶滅しないか。なぜこのテーマにしたのか教えてもらっていいですか。

神田

まず「カルーセルUI」っていうのも何のこっちゃっていうところかもしれないんですけども。皆さんが普段使われているサイトだったりアプリとかでも、必ずと言っていいほどあるかなと思うんですけども。

カルーセルっていうのは、複数のコンテンツをスライド形式でパッパッと切り替えて表示するUIのことです。

元々カルーセルっていうのは英語で「メリーゴーランド」とかのことを指す言葉らしいんですね。なのでパッパッと切り替えてくるくる回転してるみたいな感じじゃないですか。あれのことをカルーセルって呼ぶようになったみたいです。

昔は「スライド形式」みたいな言い方もよくしてたと思うんですけど。

梅本

いつからかカルーセルで統合されたよね、確かに。

神田

そうですよね。

左右の矢印でポチポチ押したら画面が見えたりとか、今何枚目見てるよみたいなところが分かるインジケーターが下にポチポチ、3個とか5個とかついていて、「今3枚目、4枚目見てる」みたいなのが分かったりする。あのUIのことです。

梅本

カルーセルですね。

神田

自分はいろんなサイトの記事とか、今までの流れとか、自分がしてきた仕事とかで、あのUIもいつか無くなるのかなって思ってたんですけども。そんなこともないみたいで、今回そのテーマで話したいなと思いました。

梅本

なるほど。確かに無くなりそうなUIではあるよね。たぶんこの後話されるからネタバレしちゃいけないと思うんで……なんで絶滅すると思ったんですか？

1枚目しか見られないという現実

神田

まず、他のサイトのUIの流れを振り返ってみました。

まず1個目がYouTubeなんですけども。YouTubeも覚えてるかわからないんですが、数年前このトップページの動画の一覧のところ、あれPCで見るとカルーセルで動かせるようになってたんですよ。

一覧ページに横並びで3つとか4つとか動画のサムネイルが並んでてですね。右側に矢印ボタンがあって、それを押していったらコンテンツがスライドしていって、別の動画のサムネイルが出てくるみたいなのがあったんですけども、今はそれも無くなってますね。

コンテンツエリアの幅に合わせてサムネイルが配置されております。

梅本

縦にずっとね。

神田

次にAppleとかのサイトを見てもですね、昔はトップページのヒーローエリアとかキービジュアルのエリアですね。あそこにもカルーセルのUIが採用されてたことがあったんですけれども、それもずいぶん前からもうAppleのサイトはカルーセルのUI無くなってます。

この理由とかっていうのも結構記事出てるんですけれども、このカルーセルのUIの良くないところですね。これは単純に「1枚目以外ほとんど見てくれない」っていう、そういうデメリットがありまして。

クリック数がですね、1枚目が全体の90%を占めて、残りのカルーセルで隠れている部分全部合わせても10%ぐらいになっちゃうみたいな、そんなデータもあったりとかしました。

そこらへんの数字もファクトみたいなところで考えると、カルーセルで目立たせたいと思ったけれども見てもらえないっていうところだと思うんで、減っていってもいいのかなというふうにも思ってたところです。

梅本

確かに。1枚目しか見ないってことやもんね。自分で矢印を動かして選んで見るみたいなっていうのは、確かにあんまりやらないよなっていうのは思います。

神田

自分自身も昔、メディアのサイトのデザインをしていたときも、「注目記事」みたいなんでページの一番上部にですね、5枚、5記事分ぐらいカルーセルで配置して、そういうUIを作っていたこともあるんですけども。

Googleアナリティクスとかで分析してみると、実際数字もすごい減っていって、それよりもメインエリアじゃなくても、下のエリアに配置した記事のほうがクリックされてるじゃんみたいな、そういうようなのもあったんで。

自分もそこら辺の経験からカルーセルのUIみたいなのは、あんまりお勧めしてこなかったというか、そういうような経験もありました。

能動的な行動におけるカルーセルの有用性

神田

そこら辺から考えてたんですけれども、最近のサイトを改めていろいろ見ててもですね、合理的に考えると減っていってもいいのになと思いつつ、でもやっぱり結構残ってるんですよ。

Appleのサイトの話をしたんですけども、Heroのトップページの一番ファーストビューのエリアではですね、カルーセルっていうのは実際今も配置はされてなくて、使われてないんですけども、下層ページに入ったらあるんですよ。

それが何かというと、商品のリストの部分ですね。例えばこのiPhoneのページとかMacのページとか、そこら辺に遷移すると商品が横並びに配置されてて、ポチポチスライドしていって、商品を閲覧したり選んだりすることができると。そういうような形になっております。

梅本

ほんまや。すごい。このカルーセルもおしゃれやな。全然Appleサイト見たい。相変わらずおしゃれですね。

神田

久しぶりに見るとおしゃれですよね。

梅本

おしゃれでございます。

神田

ここから仮説なんですけども、「商品を選ぶ」とか、利用者自身が「能動的な行動をする部分」では、やっぱりカルーセルっていうのは生き続けているのかなと。そういう仮説です。

梅本

なるほど。

神田

配置されている部分っていうのは、結構事業側からユーザーにお勧めしているコンテンツとか、事業側から「こういうのを見てほしいな」っていう風に思って配置している。そういうものはカルーセルの効果っていうのはすごい薄くて、わざわざ矢印を動かして見てくれる人があんまりいないっていうことなのかなと思うんですけども。

興味持った人が実際その商品を選ぼうとか、見たい動画コンテンツを選ぼうとか、そういうようなシーンになるときには、カルーセルっていうのは結構有効、やっぱり有効なのかな。

梅本

その仮説めっちゃ面白いじゃないですか。

神田

あ、ほんとですか。当たってそうじゃないですか。

梅本

自分の仮説です？ 自分の頭で考えたチキリン？

神田

そうですよ。

梅本

まじでか。

神田

はいはいはい。

梅本

すごい。いや自分も今聞いてて、ほんまやなと思って聞いてました。

神田

そうですよね。ちょっと当たってそうじゃないですか。

梅本

なんか当たってそう。なんか調べたらあるかもしれないね。

神田

そうですね。

梅本

確かにパーって自動的に見るっていうのをYouTubeで探すっていうときは、そんなに何かを前のめりに探そうじゃなくて、「何かないかな」とか。何か欲しい場合は多分検索まで使うもんね、おそらく。

神田

そうなんですよ。

梅本

一方で商品サイトとかだと、カルーセルじゃないけど、目的の商品を見つけてカラーバリエーション見たいとか、例えばカバンだったらつけてるときどんな感じなのかなっていうのを見たいっていうときは、ピッピッってもしかしたら右左右に動かすっていうのはあるもんね。そのときは能動的やもんね。

神田

そうなんですよ。めちゃくちゃいいこと言ってくれましたね。

YouTube出たんですけども、YouTubeのスマホのアプリとか見てほしいんですが、トップページっておすすめじゃないですか。リコメンドのコンテンツ。このトップページにカルーセルUIないんですよ。

梅本

ないね。

神田

全部縦に並んでるだけだと思うんですね。でも一個検索するじゃないですか。何でもいいんですけども。一個検索して検索結果一覧のところではカルーセルのUI出現するんですよ。

梅本

一覧のところでは。一覧？

神田

何かのワードで検索するじゃないですか。検索結果一覧ですね。そこも基本縦に並んでるんですけれども、縦に並んでるのと横にスライドするのと組み合わせたUIになってるんですね。

梅本

横のやつはあれ？ ショートとかの話じゃなくて。

神田

ショートとかもありますし、最近の最新動画みたいなのとかもあったりしますね。多分これ検索のワードによって違うような気がするんですけど。

梅本

本当。ちょっと今そういうの自分見つかってなくて、「ツートライブ」で検索しましたけどこれが出ないですね。

神田

出てなかったですか。

梅本

ツートライブとショートしか出てこなかったです。

神田

例えば「サッカーの日本代表」とかで検索してたんで、それで検索したり。

梅本

したことのない検索ワードでした。

……出てきた出てきた。トップニュースで出てきた。はいはいはい。

神田

これは横のスライドのUIが採用されていて、メンタルモデルとして「探そうとしてる人」なんで、トップページとはちょっとユーザーの心情が違って、見たいコンテンツを探すっていうときには横スライドがあったとしてもこんなに数字が減らないっていうことなのかなっていうのは、そういうふうに思ってました。

梅本

確かに。だから縦は種類で、横は似たような属性のものを出すみたいな、より詳細になってるのかね、これ確かにメンタルモデルとしては。

神田

はい。そのように思います。

梅本

確かに言われてみたらそうだね。すごいね。

神田

なんで結構このカルーセルのUI一個取っても使い方変わってきてるし、今までの改善の積み重ねみたいなんで、今のところの最適化みたいなのが出てるのかなと思います。

梅本

確かに今までだと企業サイトでもそうだけど、トップページの一番上に4つの回転のエリアを作ってくださいみたいな感じだったもんね。

神田

そうですそうです。

梅本

4枚目誰が見んねやろうみたいな感じの。

神田

そうですそうです。ここら辺は今のAmazonとかAppleとかUI参考にしたほうがいいと思いますね。

結構大きなエレメントで、ビッグUIみたいな感じで、ドーンドーンドーンと配置されてるようなのが、今一番主流というか。

梅本

Amazonもだっけ。

神田

Amazonもカテゴリがドーンドーンドーンと並んでるようなUIになってる。

梅本

Appleですかね。

神田

Appleは確かにそうですね。

Webデザインの変遷とトレンド

梅本

最近もスクロールに対してのアクションとか多いよね。スクロールでクリエイティブに見せるというか、縦に一周。ちょっとずつ変化をしてみたいなところでクリエイティビティを競ってるような表現がよく見えますけど。

あれはなくなるのかなくなるのかどっちなのかいつも見てますけど。

神田

確かに。

梅本

昔一番出てきたときはパララックスみたいなんで。Flash（フラッシュ）のパララックスとかで。10年以上前ですかね。

神田

そうね、みんなこぞってパララックスにして。視差効果ですね。レイヤー構造でデザインのレイアウトして、スピードを変えることで臨場感あるような表現なんですけど。

梅本

パララックスが懐かしいな、言葉的に。

神田

よく出てきましたね。

梅本

よく出てきたね。自分らもFlashとかやってたときもよー作ったもんね、パララックスみたいな。

神田

そうですね。本当にFlashのときも作りました。Flashが廃止されてからも、奥行きのある表現ができるのが新しく出たみたいな感じで結構流行ってましたよね。

梅本

流行ってたね。

神田

今も結構流行ってはいると思いますけどね。流行ってきてる感じはしますけどね。

梅本

なるほど。すごいピンポイントなカルーセルUIの話でしょうけども。

神田

珍しいですね。我々がこんな1個のUIに対してあーだこーだ言うのは。

梅本

そうかもね。私もなんか考えときますわ、企画とかテーマとか。

神田

そうですよ。あれは原さんの回はどうですか？

梅本

原さんの回は、原稿むちゃくちゃ書いてきてますね。

神田

さすが。いいですね。

梅本

そこでも置物スキル発動してますから。ラジオなのにほぼ置物。

神田

すごいですね。

梅本

原さんに質問ちょこちょこっと言ったら、わーっと話してくれるのを聞いて、ちょこちょこっと質問するぐらいです。

神田

あらら。これでいけるんですか？

梅本

それでいきます。

神田

自分の時と全然パワーのかけ方が変わりますね。めっちゃ疲れるじゃないですか。

梅本

原さんのとき、自分もしっかり喋らなあかんやんみたいな。

神田

そのほうが楽しいかな。

梅本

もちろん、そのほうが楽しい。またちょっとニッチなテーマ持ってきたいと思います。

神田

わかりました。

梅本

そんなこんなで、今日は以上で終わりましょうか。

神田

はい。

梅本

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

神田

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

編集後記：ロボット掃除機の進化

梅本

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

神田

お疲れ様でした。

梅本

最初にAIの話聞いたじゃないですか。

神田

はいはいはい。

梅本

私最近、ロボット掃除機を買い替えました。

神田

ルンバみたいなやつですか？

梅本

ルンバみたいなやつか。ちょっとメーカー変えたんですけど。

神田

はい。

梅本

めちゃくちゃそのAIでの性能すごいですね。

神田

えー、そうなんですか。

梅本

前のやつはですね、家を走りながらマッピングっていって、だいたいここはこういう家の部屋の構造ですよみたいなのを把握しながら地図を作っていくんですね。

神田

はい。

梅本

それがちょっと精度が甘かったりとかするなと思って見てるんで、たまに玄関のところでガコーンと落ちたりとかしてて。

神田

えー、そうですか。

梅本

うん、してたんですけど。

買い替えてからマッピングの精度がむちゃくちゃ上がってて、たぶんAIとカメラがめっちゃうまく動いてるのかなと。ちょっと怖いですけどね、変に使われてて怖さはあるんですけど。

神田

はい。

梅本

なんか稼働時間もめっちゃ短くなって、ちゃんとマッピングできてるから、何回も何回も行き来せんでも、しっかりこの地図に沿ってやりましたよみたいな感じの精度が上がって。4、5年前の機種だったかもしれないですけど、めっちゃ精度上がってるなと思ってびっくりしましたね。

神田

いや進化すごいですよね、ロボット掃除機も。

梅本

すごい。

神田

それ海外のメーカーですか？

梅本

中国のメーカーなんですけど。シェアで言うとナンバーワンのところなんですけどね。ルンバが抜かされたんですよね、確か。

神田

すごいですね、AI。

梅本

確かにこう、よく言われてますけど、画像認識とかそこの精度でうまく使えたらむちゃくちゃ便利になるとかよく言うじゃないですか。

神田

そうですね。ディープラーニングの話だと思うんですけど。

梅本

はい。怖いですよ、やっぱり家の中が見られるっていうのは怖いですけど。データが取れるのは怖いですけど。便利さと引き換えに魂売ったなという感じがありますけど。

神田

でもちょっと感動体験だったってことですか？

梅本

そうですね。びっくりしてめちゃくちゃ綺麗になったんですよ。

神田

そんなに違いますか？

梅本

いやそうなのよ。めっちゃ何回もあったり自分で掃除機かけたりとかしてて。いまいち綺麗にできてないなみたいなあったんですけど。たまに玄関から落ちて転がってたり。たまに玄関から落ちて、なんだこいつはと思いながら。

そういうのがなく、いまむちゃくちゃ可愛くなってきて。僕ちょっと掃除機好きなんですけど。

神田

はいはいはい。

梅本

めちゃくちゃ可愛くていま掃除機が。

神田

へー、言うこと聞く。賢いなってことですか？

梅本

そう。ペットロボットぐらい可愛くなってますね。

神田

そんなんすか。それはなかなかすごいですね。そんなことまで思えるなんて。

梅本

めっちゃ可愛い。めっちゃ掃除してるもんなら掃除機の掃除してるもんね。可愛いな。メンテナンスして。

神田

いやそれは素晴らしい。そんなにすごいなんて。自分も全然5、6年今のロボット掃除機使ってるような気がするんで。なんかちょっといま新しいのに変えたら全然違いそうですね。

梅本

いやそうよ。可愛いわ。

神田

いやすごい。

梅本

そんな愛情表現をしたところで終わりましょうか。

神田

はい。

梅本

はい。ということで、きょうも聞いていただきましてありがとうございました。

神田

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