--- title: "カルーセルとリストの選択: レイアウト、切り替え効果、自動再生" description: "Vitextra Announcements Carousel Web パーツの表示方法を選択して構成する方法について説明します。カルーセルとリストのレイアウト、スライドとフェードの切り替え効果、間隔を設定できる自動再生、ページネーション ドット、ナビゲーションを取り上げます。" url: https://vitextra.com/ja/support/kb/10577 language: ja published: 2026-11-13 modified: 2026-11-14 products: - "Announcements Carousel" author: "Līga Ozola" tags: ["Announcements Carousel", "カルーセル レイアウト", "リスト レイアウト", "スライド切り替え", "フェード切り替え", "自動再生", "自動再生の間隔", "ページネーション ドット", "SharePoint カルーセル", "SharePoint お知らせ Web パーツ", "Vitextra"] --- # カルーセルとリストの選択: レイアウト、切り替え効果、自動再生 Vitextra Announcements Carousel Web パーツの表示方法を選択して構成する方法について説明します。カルーセルとリストのレイアウト、スライドとフェードの切り替え効果、間隔を設定できる自動再生、ページネーション ドット、ナビゲーションを取り上げます。 ## はじめに 同じお知らせのセットでも、さまざまな方法で表示できます。ホーム ページでは、場所を取らないコンパクトなカルーセルが最適です。一方、幅の狭いサイド列や部署のページでは、すべてが一度に見える一覧のほうが便利な場合があります。[Announcements Carousel](https://vitextra.com/ja/products/announcements-carousel) Web パーツは、どちらのシナリオにも対応しています。 この記事では、お知らせの表示方法と閲覧者の操作方法を制御する、プロパティ ペインの **表示** (外観) グループと **動作** グループのオプションについて説明します。 ## レイアウトの選択 **表示** グループの **レイアウト** オプションには、2 つのモードがあります。 ### カルーセル 一度に 1 枚のカードが表示されます。閲覧者は、後述のコントロールを使用してお知らせを切り替えます。このモードが既定です。 次の場合は **カルーセル** を選択します。 - Web パーツをホーム ページの目立つ場所に配置していて、あまり場所を取りたくない場合。 - お知らせが複数あり、それぞれがカード全体を使って表示するほど重要な場合。 - 自動再生を使用したい場合。 ![カルーセル レイアウト](https://static.vitextra.com/articles/10577/carousel-layout-ja.png) *カルーセル レイアウト* ### リスト (**最大アイテム数** の上限内の) すべてのお知らせが、カードの縦方向の一覧として一度に表示されます。ナビゲーション コントロールや自動再生はなく、閲覧者はページをスクロールするだけです。 次の場合は **::リスト::** を選択します。 - Web パーツをページの幅の狭い列に配置している場合。 - 閲覧者が何もクリックせずに、現在のすべてのお知らせを見る必要がある場合。 - お知らせが少なく、内容も短い場合。 ![リスト レイアウト](https://static.vitextra.com/articles/10577/stacked-layout-ja.png) *リスト レイアウト* 💡 **ヒント** リスト レイアウトでは、Web パーツがページを長くしすぎないよう、**最大アイテム数** を 3～5 などの小さな値に設定してください。[KB10575. 表示するお知らせと表示順序の制御](https://vitextra.com/ja/support/kb/10575)を参照してください。 ## 切り替え効果 **切り替え効果** オプションは、カルーセル レイアウトでカードを切り替えるときのアニメーションを定義します。 - **スライド** (既定) - 従来のスライダーのように、カードが水平方向に動きます。 - **フェード** - 現在のカードがフェード アウトし、次のカードがなめらかにフェード インします。 **スライド** はお知らせの順序を強調し、**フェード** はより落ち着いた印象を与え、控えめなデザインのページに適しています。このオプションは、リスト レイアウトでは無視されます。 ## ナビゲーション カルーセル レイアウトでは、閲覧者はいくつかの方法でお知らせを切り替えられます。 - Web パーツのヘッダーにある**前へ/次への矢印**。最初のカードでは [前へ] ボタン、最後のカードでは [次へ] ボタンが使用できません。 - カードの下にある**ページネーション ドット**は、現在の位置を示し、任意のお知らせに直接移動できます。これは **動作** グループの **ページ送りのドットを表示** (ページネーション ドットを表示) オプションで制御します (既定でオン)。 - **キーボード** - カルーセルにフォーカスがあるときは、←/→ キーでカードを切り替えられます。 - **スワイプ** - タッチ デバイスでは、カードを左右にスワイプします。 ![カルーセルのナビゲーション コントロール](https://static.vitextra.com/articles/10577/navigation-controls-ja.png) *カルーセルのナビゲーション コントロール* 📝 **注** 表示するお知らせが 1 件のみの場合、切り替える対象がないため、カルーセルには矢印、ドット、再生/一時停止ボタンが表示されません。右から左に記述する言語 (アラビア語、ヘブライ語) のサイトでは、矢印、キー、スワイプの方向が自動的に反転します。 ## 自動再生 自動再生はお知らせを自動的に切り替えるため、閲覧者は何もクリックせずにすべてのニュースを確認できます。**動作** グループで構成します。 - **自動再生** - 自動切り替えのオンとオフを切り替えます (既定ではオフ)。 - **自動再生の間隔 (秒)** - 各カードを表示する時間で、2 秒から 30 秒、既定は 5 秒です。スライダーは、自動再生がオンの場合にのみ使用できます。 ![プロパティ ペインの 動作 グループ](https://static.vitextra.com/articles/10577/behavior-group-ja.png) *プロパティ ペインの 動作 グループ* 自動再生は、閲覧者にとって使いやすいように設計されています。 - 最後のカードの後は、カルーセルが最初のカードに戻ります。 - ポインターが Web パーツの上にある間、またはキーボード フォーカスがある間は、切り替えが**一時停止**するため、閲覧者は落ち着いて読み終えることができます。 - 自動再生がオンの場合、ヘッダーに**再生/一時停止**ボタンが表示され、閲覧者が切り替えを停止または再開できます。 - スライドが自動的に切り替わっている間、スクリーン リーダーはすべての変更を読み上げないため、ユーザーの操作が妨げられることはありません。 ❗ **重要** 自動再生は、カルーセル レイアウトで、かつお知らせが 2 件以上ある場合にのみ機能します。リスト レイアウトでは、自動再生のオプションは無視されます。 💡 **ヒント** 間隔は、テキストの長さに応じて選択してください。短い見出しと 1～2 文の本文なら 5～8 秒で十分ですが、長めのお知らせには 10～15 秒が必要です。カードの切り替えが速すぎるという声が閲覧者から寄せられた場合は、自動再生をオフにするのではなく、間隔を長くしてください。 ## 推奨される構成 | シナリオ | レイアウト | 切り替え効果 | 自動再生 | 最大アイテム数 | | --- | --- | --- | --- | --- | | ホーム ページ、全幅のセクション | カルーセル | スライド | オン、8～10 秒 | 5～10 | | ホーム ページ、3 分の 2 幅のセクション | カルーセル | フェード | オンまたはオフ | 5 | | サイド列、部署のページ | リスト | - | - | 3～5 | | ::Microsoft Teams:: のタブ | カルーセル | スライド | オフ | 10 | ## まとめ レイアウト、切り替え効果、自動再生を組み合わせるだけで、ページ上のどの場所にも Web パーツを適応させることができます。ホーム ページには動きのあるカルーセル、サイド列にはコンパクトな一覧といった具合です。どちらを選んでも、閲覧者は完全に操作を制御できます。切り替えを一時停止したり、キーボードを使用したり、カードをスワイプしたりできます。Web パーツのすべてのオプションの概要については、[KB10221. Announcements Carousel: SharePoint お知らせ Web パーツの機能](https://vitextra.com/ja/support/kb/10221)を参照してください。