パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

こんにちは、小茅です。
私のモバイルUIのテーマは、サイトでよく使われているUIのひとつ「カルーセル」です。
よく見かけるのは、ページ上部にあるフィーチャー画像エリア。その他、商品一覧にも多く使われています。Googleの検索結果にカルーセル形式で表示されるAMP(Accelerated Mobile Pages)もそのひとつです。
最近では、文字主体のカテゴリメニューや商品キーワードなどが左右にスライドして、エリアを有効活用した例も出てきています。 (従来のカルーセルとは少し違った機能の部分も。)

第1回:「ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介」富川
第2回:「ハンバーガーメニューを押した際のナビゲーションの表現方法」沓掛
第3回:「カルーセルの事例と、設計・デザイン時に気をつけること」小茅
第4回:「フォームの事例と、UIを考えるときのポイント」久保田
第5回:「参考にしたいUIまとめ」飯山

今回の発表では、簡単なカルーセルの紹介と事例をまじえてご紹介しました。
また、カルーセルを導入することでサイトに良い効果があるのか、設計・デザインする前には何を気をつけたらいいか、実装に依頼する時などの注意点もあわせてまとめてみました。

どこで使われている? あるある編

ページのフィーチャー画像で使われている例。
「フィーチャー画像」「左右矢印」「現在地表示」の3つがセットになっているのは割とスタンダードですね。
カルーセルで気をつける点は、進捗インジゲーター(現在地)を提供すること。画像が何枚あるのかわからないと操作するのにユーザは不安になるものです。
また、あたり前ですがスマートフォンでは、画像内のテキストがきちんと読めるようフォントサイズの検証が重要です。

ギャラリー的に見せる例。フィーチャー画像を自動でスライドして見せることも多いです。
画像自体にクリックがなくテキスト情報もあまりない場合は、内容を読んだり理解する必要がないので、ギャラリー的にイメージを共有する時に適しています。
オートスライドで気をつける点ですが、画像にテキスト情報が入っている場合は3単語につき1秒程度はストップすること。何も読めずにどんどんスライドしてしまうと何も伝わりません。

カルーセルってなぁに?

さて改めてカルーセルって何でしょうか。
英単語だけでいうと、回転台、回転木馬、回転コンベア、回転棚などの意味を持ちます。
Web用語のweblio先生に聞いてみました。

カルーセルパネル
別名:カルーセル表示
【英】carousel panel
カルーセルパネルとは、Webデザインの一種で、画像などのコンテンツをスムーズに横にスライドさせる表示方法のことである。
カルーセルパネルを利用することで、狭いエリアに複数のコンテンツを表示させることができる。主にJavaScriptとCSSの組み合わせてなどによって実現される。
http://www.weblio.jp/content/カルーセルパネル

メリットはざっくりと「狭いエリアに複数のコンテンツを表示させることができる。」です。
スマートフォンのファーストビューに多くの情報を詰め込みたい場合、カルーセルを使うことが多くあります。
懸念としては、限られた領域に多くの情報を提示できますが、閲覧者がカルーセルであることに気づかなかったり、わざわざ操作しようと思わず最初に表示されているものしか見ないなど、必ずしも狙った効果が得られないことも多いと言われています。
モバイルでは、ユーザーがどんどんスクロールして閲覧していく無意識のクセもあるため、カルーセルであるという引っかかりを何で伝えるかは重要なポイントだと思います。

何%の人がカルーセル画像をクリックしている?

割と使われる人気のカルーセルですが、大学でWeb開発をしているErik Runyonさんの調査によると、1枚目以外はなかなかクリックされないようです。
モバイルではなくPCの調査のようですが、なかなか興味深い結果ですね。

引用: https://erikrunyon.com/2013/07/carousel-interaction-stats/

この調査では、訪問者の1%程度が1枚目をクリック、1%のうちの10%程度が2枚目以降をクリックしているという結果が出ています。
PCよりはモバイルの方がスワイプの学習もあり少しは効果的と言われていますが、カルーセルの設計には十分な検討を重ねたいなと思いました。
画像数も多くならないよう気をつけたいですね。

ここまでのまとめ

実例:どこで使われている?

いくつか実例をご紹介します。

Apple

サイトの各所にカルーセルが使われています。フィーチャー画像や、同梱物の写真、機種モデル一覧など、それぞれの内容に沿ったカルーセルが実装されています。
トップのフィーチャー画像では、次の画像にスライドするまで横ラインのインジケーターがアニメーションするため非常にわかりやすいです。

Microsoft

Microsoftのトップはフィーチャー画像の他、キャッチ&リード、「すぐに予約」ボタン、「もっと詳しく」ボタンなど、エリア毎スライドします。
また、進捗インジケーターの横にはオートスライドのON/OFF機能もついています。

au

auでは、フィーチャー画像以外にも一覧パーツはほぼカルーセルです。
情報量は多めですが、カルーセルのUIがすべて統一されているため、わかりやすく、操作がしやすい印象がありました。

楽天

同じように楽天でもページ全般にカルーセルが使われています。
かなり情報量が多いですが、こちらもカルーセルのUIを統一しているので操作はしやすかったです。 カルーセルが統一されていると、ユーザーも自然と操作を学ぶのだなと思いました。

ライブドア、BLOGOS

ライブドアでは、ニュース一覧のカテゴリブロックごとスライドします。
1行タイトルの集まりなので、まるごとスライドしても操作に何も問題がありませんでした。

設計・デザインする時に

上の事例では各企業ごとにサイト特性にあわせて、うまくカルーセルを活用できていました。 私たちも、何のためにカルーセルを使うのか、下記のようにしっかりと検討を重ねて設計したいと思います。

カルーセルを使う目的をしっかり考える

→ 本当にカルーセルを使って見てもらえる? 効果がある? カルーセルである必要性は? 見てもらった次のアクションは何?

同じ役割を持ったカルーセルはUIを揃える

→ 変えてしまったらユーザーは混乱するのでは?

カルーセルを有効に使ってもらう設計・デザイン

→ 左右矢印や現在地はいるの? 表現はどうする?

情報を詰め込みすぎていないか

→ 一枚の画像にどれだけ情報を詰め込む?

実装を依頼する時には

設計・デザイン時に、どう実装するか、何の機能をもたせるか考える必要があります。 やりたいことを実装者にも事前に共有し、できれば一緒になって仕様を固めていくのが後々の工程にとってスムーズな進め方かなと思います。

検討サンプル

  • 何をクリックするとどうなるのか → ページ遷移? / 拡大表示?
  • 枚数表示いるか → その表現は? わかりやすいか?
  • ●●◯のような現在地を入れる場合、最大枚数はいくつ? 1枚の時には現在地を表示OFFにする?
  • スワイプはつける?
  • オートスライドは? スワイプのjsと干渉しない?
  • スクラッチで作る? ありものから作る?

仕様を固めないまま、デザインだけ渡して実装をお願いする「丸っと依頼」はないように気をつけましょう。

最後に

次回はデザイナー久保田にバトンタッチし、「フォーム」についてお話していきます。

この記事をシェアする
小茅 奈美
小茅 奈美
テレビ局のデザイン部門、大手プロダクション数社を経てシナップ設立に参加。安定した品質を保ちながら新技術との親和性にも優れたデザインと、絶えない笑顔で創業からシナップを支える。福岡在住。

関連記事

Webサービスを成功に導くシナップのUXリサーチ

2023.10.04
  • UXデザイン

一見良さそうに見えるデザインにも問題点が… デザイン4大原則から考えるUIデザインの完成度を高める方法

2023.06.06
  • UXデザイン
  • UI/UX

カスタマージャーニーマップは何で作る?カスタマージャーニーマップを作るツール3選

2022.10.25
  • UXデザイン

UXリサーチとは?今日からスモールスタートで始めるUXリサーチ

2022.06.14
  • UXデザイン

成長するサービスに必要不可欠なデザインシステム4つのメリット

2021.11.09
  • UXデザイン

成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

いますぐできる利用者のネガティブな感情を取り除き、 ポジティブな感情をもたらすUXデザインのヒント

2021.04.13
  • UXデザイン

春のスタートダッシュを決めよう!~2021年度版:Web業界の新人さんにオススメの書籍10選~

2021.04.07
  • UXデザイン

この3つだけはおさえておきたい。明日から作業効率が大幅アップする!この半年で行われたAdobeXDの新機能(2020年6月-12月)

2021.01.14
  • UXデザイン

2020年春からおさえておきたいデザイントレンド 7選

2020.04.14
  • UXデザイン

参考にしたいデザインシステムまとめ 10選

2019.04.11
  • UXデザイン

簡単に作れて見栄えする!CSSで作るリッチなhover演出

2018.06.21
  • UXデザイン

パーツごとに見るモバイルUI:参考にしたいUIまとめ

2017.09.12
  • UXデザイン

パーツごとに見るモバイルUI:フォームの事例と、UIを考えるときのポイント

2017.09.06
  • UXデザイン

パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介

2017.08.09
  • UXデザイン

視覚で伝わるインフォグラフィック!面白い事例も作ってみました!

2017.06.01
  • UXデザイン

初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

よくわかるIoTの仕組み 「モノ」とインターネットを接続するには

2015.11.19
  • UXデザイン

記事をページ分割するメリット・デメリット(モバイルフレンドリー対応)

2015.08.07
  • UXデザイン

モバイルフレンドリー対応:スマホで読まれる文字数は?

2015.07.30
  • UXデザイン

スマホサイトの「続きを読む」は必要か?(モバイルフレンドリー)

2015.05.28
  • UXデザイン

人気記事

このサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。