はじめに

カルーセルUIはこれまでたびたび議論の的になってきました。それだけ、この類のUIが多く採用されていることの証左かもしれません。開発者としては、使いやすくするために考慮しなければならないことも多く、実装上の手数がかかる一方で、ユーザーとしては、Webサイトの場合、それほど「なくてはならないもの」であるという実感が少ないのも特徴です。

この座談会では、開発者の視点から、カルーセルUIの特徴や機能、効果について考えてみます。クライアントから「カルーセルUIを実装したい」と言われたとき、考慮すべきことや、アドバイスのヒントになるかもしれません。

カルーセルの個人的な印象は？

ーー今日はカルーセルというUIについて、ピクセルグリッドのスタッフでお話します。ピクセルグリッドはフロントエンド開発をする会社なので、Web制作の相談を受ける側、作る側、デザインする側として、お話できればと思います。

これはどういうことかというと、たとえば、マーケティングを専門にしている方は、開発者とはまた別のカルーセルUIの効果の詳細なデータやその法則についての知見があると思います。ですが、ピクセルグリッドは開発者ということで、マーケティングとは異なる観点からカルーセルというUIについて話せるのかなと思います。

中村：はい。まずは自己紹介がてら、カルーセルに対する個人的な経験に基づいた意見を言っていきましょうか。

僕は、デザインはしないんだけど、テクニカルディレクター的な立場で、クライアント案件の画面やUIの相談にのることは多いです。そういった際に「じゃあカルーセルをどうするのか？」という話題が出てきたりします。個人的には、僕はカルーセルのUIは、できるだけ避けたほうがいいと思っています。

高津戸：僕もテクニカルディレクターとして動いてるので、「カルーセルを入れたいと、なんとなく思ってはいる」という要望をよく聞く立場ですね。その要望の裏にはクライアントとしても、いろいろあると思うんですけど。ディレクション目線でカルーセルを考えると、実装コストとかデザイン上で懸念しないといけないこととか多いのですが、そういうあれこれがお客さんの側からは漏れてることが多いなあ、って印象ですね。

外部のデザイナーと一緒に制作に関わることも多いんですけど、デザイナーもあまり深く突っ込んで考えてなかったりしますね。たとえばレスポンシブで、ちょっと狭いときはどうなるのか、広いときどうなるのか。ほかにも、カルーセルを作る場合は、キーボード操作はどうするとか、いつ再生するか、いつ止めるかとか、そういう細かいことをいろいろ決めないといけないですよね。まあ、既製品のプラグインを使って実装するとまた別なんですけど。

ピクセルグリッドは実装する側の会社なので、「実装側としてはけっこう大変なUIだし、技術的なハードルもあってコストもかかります。時間もかかります」っていう説明をするパターンがけっこうあるなって感じですね。

國仲：カルーセル自体は、昔は作るのは楽しかったですね。jQueryのプラグインみたいの作ったこともありますし。ただ、まあ今はできれば作りたくない（笑）。

僕自身が普段、いちユーザーとして使うときには、マウスとキーボード両方使ってブラウジングをするんですけど、カルーセルって、どうやっても、キーボードでいい感じに操作できないんですよ。

中村：アクセシビリティ的問題がある場合が多いということ？

國仲：そうですね。カルーセルで画像が並んでいる部分は、自分が普段実装するときには大抵、stageってクラス名にするんですけど、そのstageの後に、カルーセルを操作するボタン類がどうしてもきちゃうんで、stageとbuttonを行ったり来たりしないといけない。キーボードだと。

高津戸：あの黒いポッチみたいな部分ですか？

國仲：はい。まあ、そういうのもあって、どうやってもいい感じにならないなって思うので、あんまり好きではないです。なので、実装するときはできればないほうがいいですね。作れはしますけど。あと、使う側として、単純にカルーセルは見てないってのもあるんです。別にそんなに必要だと思ったことないんですよ。まあ、この後の話にも出ると思いますけど（笑）。

中村：じゃあ、この後の話にとっておきましょうか、いったん。みんな思いが溢れてくるね（笑）。ところで、小原さん、デザインする側としてどうでしょう？

小原：僕はUIデザイナーという立場ですが、クライアントから「カルーセルが欲しい」と言われた場合は、まあ、いろいろな背景を含み「じゃあやりますか」っていうのもあれば、「ちょっとこれ合わないんじゃないですかね」っていうのもありますね。

自分でUIを提案する場合だったら、カルーセルは積極的に採用する方向にはいかないですね。まあ、かといって、「カルーセル、ダメ絶対！ もう100パーやっちゃダメ！」とは思ってなくて（笑）。

カルーセルによって、なんかこう、とある部分がうまくいくというか、丸く収まる部分もあって……。そういった採用の仕方をすることもなくはない、かな。

中村：なるほど。

小原：パッと見の絵を作るという部分だけで言えば、実はカルーセルは難易度は高くないというか。実装を含めてUIとして考えると、とても大変なんだけど。

中村：デザイナーとしては使いやすいってことですよね。

小原：そう、非常に楽できるUIではあるので。そういう意味では、そこにハードルは感じていない。

中村：ありがとうございます。

カルーセルUIの定義をしようとしたら……

中村：じゃあ、みんなの認識を合わせるために、一般的に「こういうのはカルーセルだよね」っていうのをまず確認しておきましょうか。左右にポッチがあって、画像が切り替わるUI？

國仲：画像なり、この1つのエリア内で、長いコンテンツが前後に切り替わって表示されるものっていう感じですかね。その表示されないものは、1個とは限らないよ、みたいな。

中村：たとえば、実装を担当させてもらったセゾンカードのサイトで言うと、一番上の部分はまさに「カルーセル」ですよね。

中村：その下にある「おすすめカード」もカルーセル？

國仲：「おすすめカード」も、個人的にはカルーセルとして実装してましたけど。はい。

中村：実装的にはカルーセルですよね。このまず、1番上の大画面が切り替わっていて、下にインジケーターがあって、みたいなこういうのはありますよね。で、左右に移動できる。これはカルーセルですよね？

高津戸：あ、カルーセルじゃないすかね。言葉で言うと、カルーセル（Carousel）って、「メリーゴーランド」みたいな意味ですよね。

中村：そうそう。でもこのセゾンカードの一番上にあるのは、画像が横に移動してないじゃないですか。横移動なしで、その場で、フェイドイン／フェイドアウトで切り替わってますよね。これだと「メリーゴーランド」じゃないから、カルーセルではないということ？

高津戸：まあ、そこは表現の方法の違いだから。切り替わって、1つの領域内に複数のコンテンツを順々に出すUIが、カルーセルかな。

中村：そうですよね。切り替えの方法や、自動再生されるかどうかは、カルーセルのオプションの1つであって、それがあってもなくても、カルーセルだなと思う。

高津戸：うん、うん。それは僕もそういう認識でした。

小原：なるほど。ということは、今の定義でいくと、Netflixはカルーセルの塊？ テレビで見たときじゃなくて、WebのUIで見ているんですけど。

高津戸：確かに。もうひたすらリストが横に移動できますよね。

中村：僕はカルーセルじゃないと思う。ただの横スクロールな気がする。

小原：1番上、ヒーロー部分は実はカルーセル？

中村：ああ、これは選んでる作品が1番上に表示されていますね。

小原：ログインしていない状態の「大画面で楽しめる」のところにあるテレビなどの大画面で見た場合のUIは、作品が自動的に切り替わってると思うんですよね。

中村：そうですね、確かに選んでいない状態だと自動的に切り替わっていて、選ぶとそれが上に大きく出る。

小原：そうすると、それはそれでカルーセルなのか？

高津戸：AmazonプライムビデオのWeb版だと、ひたすら横にナビゲーションされて、作品がバーっと並んでいる感じだ。

小原：Kindle本のマンガストアもカルーセルですよね、自動でも動くし。それ最悪なんですけど。切り替わるタイミングをユーザーの操作によって、リセットしてくれてないんですよね。完全にもう自分のタイマーでしか動いてないから。切り替わるタイミングの直前で横矢印を押すと、まだ見ることができていないのに、次の画像に行っちゃう。

國仲：リセットしてないんですね。作っていて、これたまに、やらかすやつです（笑）。

中村：これもカルーセル？

國仲：これもそうだと思いますけどね。

中村：現在地のポッチがあるかないかは、カルーセルのオプションのひとつなんですかね？

國仲：そうですね。ただまあ、この前後に移動するボタンか、現在地を示すインジケータのどちらかがないとカルーセルとしては使いにくいかなと。

中村：あるほど。こうやってちょっと見ただけでも、カルーセル、すごいバリエーションがありますよね。

國仲：そうですね。

多くの企業に採用されるのは、なぜ？

ーーカルーセルという定義はむずかしいですね。いろいろなバリエーションがあるし、「実装としてはカルーセル」でも、ユーザーとしては単なる横のスライドショーだったりする場合もありそうですし。

中村：カルーセルの定義は話が広がりすぎちゃう気がするので、まずはトップページでよく使われるカルーセルの形に絞ってやりますか。

小原：そうしましょうか。

中村：まあ、自動再生かそうじゃないかは別にして、日本のコーポレートサイトのトップページには、大体カルーセルがあるっていう現象が起きていて。いろんな会社のサイトがこうなってる。たとえば、通信事業会社で言えば、NTT ドコモも、auもそうですね。

國仲：銀行もそうですね。三菱UFJ銀行とか、三井住友銀行とか、みずほ銀行とか……。

中村：世の中の日本のサイトは、なぜ、みんなトップページにカルーセルなんだろう？

高津戸：でもそれって、別に日本だけじゃないかもしれない。

中村：なるほど、そうかもしれないですね。僕らエンジニアがよく見るような技術系の海外サイト、今、ぱっと思いつくのは、Netlifyとか、Cloudflare、Astroあたりです。こういうサイトではカルーセルはあんまり見かけないんですけど、カルーセルを使っているサイトといえば、どんなところがあるかな。

國仲：たとえば……Nokiaとか？ 今、確かめてみましたが、あー、カルーセルですね。

小原：Microsoftもカルーセルですね。

中村：国内だけかと思ったら、そうでもない？

小原：かもしれないですね。

カルーセルの「問題点」は提供側の利点？

高津戸：このカルーセル座談会の話が出たときに、（ピクセルグリッドのスタッフの）矢倉さんが、カルーセルの問題点を挙げているBrad Frost氏の記事を教えてくれましたよね。ちょっと古い記事だけど、この記事を読んで、世界的にそうなんだろうなって思いました。

中村：カルーセルの効果としてはいろんな人が調査してて、調査結果としては、「カルーセルはあまりクリックされていない。その中でも1枚目にほとんどのクリックが集中していて、2枚目以降見られていない」っていうのが多いですよね。ちょっと古いけど、たとえばErik Runyon氏の記事とか。

高津戸：そうですね、それも読みました。実際、僕が担当している案件でクライアントに聞いてみても、「カルーセルでは1番目がもっともクリックされてる」という測定の結果だと聞きますね。

中村：それが10年ぐらい前から言われているのに、ビジネスレイヤーの人たちはあんまり認識してないのか、いまだカルーセルは採用されていますよね。

國仲：カルーセルが採用される理由って、社内政治的なことがあるのかな、とは思うんですけど。多分「あれも見せたい、これも見せたい」っていうより、「見せないといけないけど、場所がないからここにまとめて表示しときました！」っていうことになるっていうのがありそうだなって思ったんですよね。

中村：よく言われますよね。部署が分かれていて、その各部署を両方立てなきゃいけなくて。じゃあ、トップページの1番大事なところに、どっちの部署のキャンペーンを置くか、みたいな社内政治的な何かがあったときに、カルーセルにしとけば、その瞬間スクリーンショット撮れば、両方トップに出ていることになるとか（笑）。

自分自身の経験で言うと、クライアントが最初に明確に「カルーセルにしたいです」って言ってくることは少ないんですよね。参考サイトがあって、そこのサイトがカルーセルになってると、それにつられてカルーセルになる可能性が上がる気がしています。

たとえば「ゲーム好きな人がよく見るサイトを作りたい」ってなったときに、参考にした任天堂のサイトがカルーセルになっていると、そうすると「これみたいにしたいです」っていうことになりがちというか。

小原：そうそう！ あとは、なんだかカルーセルって提供側からすると、とても使い勝手のいいショーウィンドウ的なものなんじゃないかと思いますね。型は決まってるし、表示する数を増やしたり減らしたりっていうのもできるし。なんなら表示する数は無限だし。

広告というか、ま、自社のメッセージですかね。「今、イチ押が5つあるんです」っていうんだったら、5つ入れられるっていう。その諸々都合がいい、提供側にとって。

カルーセルは運用次第

高津戸：そうですね、広告みたいな側面が強いから、僕は別にカルーセルに表示される2番目以降のコンテンツがクリックされてないとか言われても、僕たちの役割としてそこまで突っ込むことかな？ と思ったりしますけど。

中村：うん、うん。じゃあ、実際のそのサイトとしての効果を狙ってるわけではなくて、その社内的に見えてればいいみたいなところなんですかね。

高津戸：たとえば、新商品が発売されたら、その週はカルーセルで表示される1番目にそれを持ってくると思うんですよね。

中村：はいはい。

高津戸：その場合は、その期間はそれを1番見てもらいたいからそうすると思うし、実際運用していて、そうされてる気がする。だから、「『2番目以降クリックされてないから、カルーセルってちょっと微妙だよね』っていう意見はどうなの？」って思っているんじゃないかなと。運用している人たちとしては。

ランダムでコンテンツが出てくるカルーセルも、それはそれでアリかなと思います。ですが、そうするとやっぱり表示順序がばらけるから、役割が変わってくると思う。だから、ひとくちに「カルーセルUI」って言っても、役割的にはいろいろなものを担ってるよなと思ったりします。

ーーカルーセルの役割はいろいろあるけれど、一番おすすめしたいのを見せたいという目的なら、カルーセルの1番はじめに表示することでその目的を果たせているのでは？ ということですね。

中村：そう、ずどさんが言うように、おすすめしたいのをトップに出したいっていうのはいいと思うんですよ。でも、そうなってくると、カルーセルじゃなくてもよくない？ っていう気もしてきていて。今発売されたものが、ひとつひとつコンテンツとして目立つところに出てればいいような気がするし。結局、くるくる動いてる意味はあんまりないんじゃないかな？

イチオシの見せ方はカルーセルじゃなくてもいい？

國仲：そうですよね。たとえばゲームソフト会社のElectric Artsは、ヒーローエリアにカルーセルを採用してなくて、1つのゲームがずっと表示されていますよね。「今、うちはこのゲームを推すぜ！」っていうのがわかりやすいです。

高津戸：うん、うん。

中村：「これがおすすめなんですよ」っていうのは、わかりやすいですよね。

國仲：これはわかりやすいですよね。ヒーローエリアのすぐ下に「注目のゲーム」が6枚並んで、わかりやすいですね。

中村：カルーセルがちらちら動かれるより、こうなってる方が、探してるゲームを見やすいですよね。

小原：なるほど、これをカルーセルでやったら、7枚入ってるような感じですね。1番目が上の大きく表示されている1枚で、それに続くのが下の6枚っていう。これらがカルーセルで言うと、2枚目以降ってことですよね。

國仲：さっき話していた、いわゆるコーポレートサイトのトップページでは、いろいろある中に全部詰め込もうとするから、カルーセルになるっていう。

小原：言いたいことがたくさんあるってことですね。

國仲：そうですね。EAだったら、まあ、ゲームの会社だからゲームを並べておくのがいいんでしょうけど、いろいろやってる企業のサイトだったらそうはいかないかもしれない。

中村：いろんなこと言いたいから。まあ、広告コーナーはできるだけスペース取りたくなくて、カルーセルになるって感じですかね。

國仲：まあ、そうですかね。

小原：そう考えると、やっぱり自社広告なんですな、ここは。そういうゾーンなんですね。カルーセルでやってることって。

中村：なるほど。

UIデザイナー曰く、自動再生の有無は大きい

小原：あと僕は、自動再生があるかないかは重要ではないかと思いますね。

高津戸：カルーセルのUIとしての役割というか、そういうものとして、そこに大きい違いが出てくるという話？

小原：うん。「カルーセルの機能としてやりたいことは全然変わってくるぞ」という。

高津戸：ユーザーが自分で選ぶためにポチポチクリックするか、それとも勝手に流れてるかで、性質が変わる。

小原：うん。ユーザーインターフェイスなのか、Ad（広告）なのかっていうのが変わるぐらい、大きなところかなと思いますね。受け身でいられるものじゃないですか、自動再生って。望むと望まざるを関係なく。

高津戸：確かに。別に見ようと思って切り替えてるわけじゃないし、っていうこと。

小原：だから、その主導権の違いがある気がしますね。うん。たとえば、Netflixの下段にずらーっと並ぶカルーセルは、利用者側に主導権があって純粋にUIとして作られていますよね。これ、画像の上にホバーした時だけインジケーターのポッチが出ますね、矢印とともに。

で、まあ自動再生ではないので、うん、そういうユーザーインターフェース、まあ扱いやすく、コンテンツを探しやすくする仕掛けとして使ってるって感じなんですかね。

ユーザーにとっての「カルーセルUIあるある」とは

ーー使う人にとって、カルーセルはどんなUIなんでしょう。

中村：自分の体験としてあるだろうっていうのは、そのカルーセルで気になったものがあってクリックしようとしたら、自動で切り替わって、次のやつをクリックしてみたいしまったみたいなパターンじゃないかな。

ーーああ、ありますね（笑）。

高津戸：スマホのカルーセルでいうと、昔よくあったのは縦スクロール途中に横スライドのカルーセルがあると、横に判定されちゃって……。

國仲：で、ジャックされるやつだ。

高津戸：そうそう。縦に移動できない。すごいイライラしますよね。最近は多分カルーセルを作るライブリもちゃんとしているから、あんまりないかもしれないですけど。

補足：横スライドのカルーセルがあると、縦にスクロールできなくなる

横にスワイプして次のアイテムへスライド切り替えするカルーセルの場合、縦にスクロールしながらWebページを閲覧しているときに、少しでも斜めに指を滑らせてしまうと、横スワイプの判定が発生します。その判定により縦スクロールが止まってしまったりするということがあります。（高津戸）

ーー縦に移動できなくなる不具合は、実装次第で回避できるんですね。

高津戸：そうです。あとは、僕が思うのはやっぱデスクトップブラウザで、カルーセルを移動させる場合に、たとえばボタン押したり、スワイプしたりすると思うんですけど、それってちょっと難しい操作だと思うんですよね。

まず、ブラウザのデフォルトの機能じゃないから、ユーザーは、そのサイト固有の機能であると認識した上で、ボタンを探して、横にスワイプするみたいのを学習して、ポチポチポチってクリックしないと、先のコンテンツが見れない。

だから、ぶっちゃけ、適当にネットサーフィンしてるだけだと、そこまでがんばって次の画像を見る気がしないというか。興味のあるものが、そこにあるってわかって想像できてないと。探してる時はあるのかなあ。でもそういうときも微妙ですよね、重要な項目をカルーセルに置くっていうのは。

だから、ユーザーとしては、あんまり使いやすいっていう感じにはないですけどね。基本的には。

ーー操作のためのUIとしては劣りそう、というかんじでしょうか。

中村：そうですよね、なにかを探してる時はカルーセルじゃなくて、普通に並んでてくれたほうが、探しやすいですからね。

高津戸：そう考えると、やっぱりカルーセルって広告っぽいのかなっていう気がしてきますけど。

デジタルサイネージはぼーっと見られるけれど

國仲：最近だと、駅とか電車にパネルついてるじゃないですか、電子パネル。あれでCM流れ続けてるじゃないですか。ああいうイメージでいいんじゃないですか。この同じ場所で、この場所にはずっと何か広告ていうか、キャンペーン的なとか、新商品がまあなんでも置けるみたいな。

高津戸：ああ、そうですね。

國仲：見られてない的な意味で言うと、カルーセルをぼーっと見てる人なんかいないと思うんですけどね、あんまり。

小原：目的がクリックじゃなければ、なんかこう少しチャンスがあるのかなってかんじ？ うん、自動でくるくる表示している時に、意外性っていうんですかね。たとえば、どこかの企業に、その会社のメインじゃない事業があるとして、「あ、こんなこともやってんだ」っていう出会いみたいなものを提供するみたいな。そういうのって、意外と少ない。なんか、こう目的にたどり着こうとしちゃってる人たちにとっては、多分そこにはいかないので。

という意味でのなんか偶発性みたいなものは含んでるのか……な？ ま、求めてない人にとっては、それは全然いらんものなのだと思うんですけど（笑）。

高津戸：広告。やっぱり社内広告。

自動再生の有無の意味、再び

ーーうん、でも、広告的な意味で使う場と言うと、カルーセルは自動再生がマストって感じもしちゃいませんか？

高津戸：まあ、そういう意味ではまあ確かに自動再生してくれないと、そもそもそう見られない可能性は高い。

小原：うん、そうだから、なんか僕は自動再生かどうかにこうこだわっちゃうというか、気になっちゃう。それによって使われ方が変わってきちゃう。型は一緒なんだけど、

高津戸：ま、多分ちょっとカルーセル微妙かなって思う要因の1つとして、さっき言ったみたいに、カルーセルで次に行こうとしたら2つ飛んじゃったとか、次に行っちゃったみたいのが、多分、みんな体験としてはあるからで。ただの画像リンクとカルーセルが並んでたら、画像リンクのほうが安心してクリックできる感じがあんじゃないかなとか、ちょっと今思いましたけどね。

中村：それはありそうな気がします。こいつ動いているから、そっちが動かないのがあるなら、こっちを押そう。と。

高津戸：ちゃんと実装考えてたりすると、マウス載せたら、止まったりしてくれるカルーセルもたくさんあるけど、そうじゃないカルーセルUIも現実的にはいっぱいあって。ま、わりとそれを考慮して実装するのもそこそこ大変だから。

なので、ナビゲーションみたいな視点で言うと、カルーセルは、「え、ちょっとなんか触るの躊躇する」というのは、若干なきにしもあらずかなっていうのはちょっと思いましたね。

ーーなるほど。ユーザーのクリックのしやすさについて、もうちょっと考えてみたいと思います。

（続く）