Shopifyで動画スライドショー・動画カルーセルを表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
Shopify は、ネットショップを自分で作って運営できるサービスです。足りない機能は「Shopify アプリ」を入れて追加します。
「シンプル動画スライドショー｜お手軽動画カルーセル表示」（アプリストア上の名前は「UR: Video Slider & Carousel」）は、ストアの好きなページに、動画を並べて自動で送る全幅のスライドショーを置くアプリです。
テーマ標準のスライドショーは画像しか敷けません。このアプリなら、Shopify にアップロードした動画や YouTube・Vimeo の動画を最大 5 本並べ、それぞれの動画の上に見出しとボタンを重ねられます。設定はすべてテーマエディタの中で完結し、コードを書く必要はありません。
- 料金: 月額 $3.99（年額プランは $39.99）
- 無料体験: 7 日間
- アプリストア: シンプル動画スライドショー｜お手軽動画カルーセル表示
シンプル動画スライドショー｜お手軽動画カルーセル表示でできること
動画を「並べて、送って、見せる」ためのブロックを 1 つ追加するアプリです。主な特徴は次の 5 つです。
- Shopify・YouTube・Vimeo の動画を最大 5 本まで並べられる
- スライドごとに、スマホ用の縦向き動画を別に設定できる
- 動画の上に、小見出し・大見出し・アクセント色の見出し・ボタンを重ねられる
- ページネーション 6 種類（なしを含む）と矢印 3 種類から見た目を選べる
- お客様は矢印・ページネーションのほか、指やマウスで掴んで横に動かして切り替えられる
動画の上に見出しとボタンを重ねたヒーローを作れる
動画の上に「小見出し → 大見出し → アクセント色の見出し → ボタン」の順で文字を重ねられます。文字を入れたスライドには自動で暗幕がかかり、明るい動画の上でも読みやすくなります。
スマホには縦向きの動画を出し分けられる
スライドごとに「PC 用」と「スマホ用」の 2 本を設定できます。横長の動画は PC に、縦長の動画はスマホに、と出し分けるとどちらの画面でも動画が大きく映ります。画面幅 750px 未満がスマホ扱いです。
動画が終わったら次のスライドへ送れる
自動送りは「一定時間ごと」ではなく、動画を最後まで再生したら次へが基本です。長い動画を途中で切り上げたいときだけ、1 枚あたりの上限秒数を決められます。
ページを重くしない再生のしかた
再生するのはいま画面に出ている 1 枚だけです。隠れているスライド、画面の外にスクロールしたとき、別のタブに切り替えたときは止まります。YouTube・Vimeo の動画も、そのスライドが表示されるまで読み込みません。
シンプル動画スライドショー｜お手軽動画カルーセル表示をインストールする
Shopify アプリのインストール手順は、どのアプリでも同じです。
- Shopify 管理画面の左下にある「設定」を開きます。
- 「アプリと販売チャネル」を開き、「Shopify App Store」を押します。
- App Store の検索欄に「シンプル動画スライドショー」または「UR: Video Slider」と入力します。または アプリストアのページ を直接開きます。
- アプリの詳細画面で「インストール」を押します。
- 権限の確認画面が出るので、内容を確認してインストールを完了します。このアプリが求める権限は「テーマの読み取り」だけです（テーマの一覧を出すために使います）。
インストールが終わると料金プランの選択画面に進みます。7 日間の無料体験から始められます。
まず最初にやる設定 ─ 3 ステップでストアに動画を出せる
インストールしただけでは、ストアには何も表示されません。テーマにブロックを追加して、動画を 1 本入れて、保存する。この 3 つで表示されます。
- アプリの「設定」画面で、追加先のテーマを選んで「テーマに追加」を押します。
- 新しいタブでテーマエディタが開き、ホームページに「シンプル動画スライドショー｜お手軽動画カルーセル表示」が追加されます。右の設定パネルの「動画設定」で、動画1 の「選択」から動画を選びます。
- 右上の「保存」を押します。
🚨 「テーマに追加」で追加される先は、いつもホームページです。 商品ページやコレクションページに置きたいときは、テーマエディタで手動で追加します（後述「ホームページ以外に追加できる」）。
🚨 追加しただけでは保存されていません。 テーマエディタの「保存」を押すまで、お客様が見るストアには反映されません。
追加した直後の設定パネルはこうなっています。初期値は「高さ：動画に合わせる／矢印の種類：なし／ページネーションの種類：ダッシュ（動画に重ねる横棒）／暗幕の濃さ：20%」です。
動画をまだ 1 本も入れていない間は、テーマエディタのプレビューにだけ案内の枠が出ます（日本語のストアでは「スライドに動画を設定すると、カルーセルが表示されます。」）。お客様が見るストアには何も出ませんので、作業途中で保存しても見た目が崩れることはありません。
テーマエディタの左パネルでは、追加したブロックが「セクション」の中に入っています。あとから設定を変えるときは、ここのブロック名か、プレビュー上の動画をクリックします。
管理画面の「設定」でできること
管理画面は「設定」の 1 画面だけです。ここでできるのは、テーマへの追加と管理画面の言語の切り替えです。スライドの中身（動画・文言・見た目）は、すべてテーマエディタで設定します。
テーマに動画スライドショー機能を追加できる
テーマを選択
追加先のテーマを選びます。初期状態では、いま公開中のテーマが「（公開中のテーマ）」付きで選ばれています。公開前の別テーマで先に作り込みたいときは、そのテーマを選んでください。
テーマのバージョンによっては選択欄が空になることがあります。その場合は、テーマエディタから手動で追加してください。
「テーマに追加」ボタン
押すと、新しいタブで選んだテーマのテーマエディタが開き、ホームページの新しいセクションとしてブロックが追加されます。そのあと「保存」を押すまでは反映されません。
「テーマをプレビュー」ボタン
押すと、選んだテーマのテーマエディタがホームページを開いた状態で新しいタブに開きます。ブロックは追加しません。追加済みのスライドショーを見直したり、設定を直したりするときの近道です。
注意バナー（日本語表示のときだけ）
「テーマに追加」を押してもブロックが自動で追加されないことがある、という案内です。その場合は、下の「ホームページ以外に追加できる」と同じ手順で手動で追加してください。
言語設定で管理画面の表示言語を変えられる
「言語を選択」で言語を選び、「変更する」を押すと、アプリの管理画面の表示言語が切り替わります。日本語・英語・ドイツ語・フランス語など 20 言語から選べます。
- 選んだ言語はこのブラウザにだけ保存されます。別のパソコンや別のスタッフの画面には影響しません
- 切り替わるのはアプリの管理画面だけです。テーマエディタの表示言語は Shopify アカウントの言語設定に従います
- 注意バナーと、右下の「ご利用ガイドは こちら」のリンクは、日本語表示のときだけ出ます
テーマエディタでできること（ブロックの設定）
ブロックの設定パネルは、上から スタイル設定 → アニメーション設定 → 動画設定 → 余白設定 → 追加設定 の順に並んでいます。先に「どう見せるか」を決めてから動画を入れていく並びです。
ホームページ以外に追加できる
このブロックは、テーマのどのページのセクション領域にも置けます。商品ページの下に使い方動画を並べる、コレクションページの上に世界観の動画を流す、といった使い方ができます。
- テーマエディタ上部のページ選択で、追加したいページ（商品ページなど）を開きます。
- 左パネルの「セクションを追加」を押します。
- 「アプリ」タブを開き、「シンプル動画スライドショー｜お手軽動画カルーセル表示」を選びます。
- 右上の「保存」を押します。
同じページに 2 つ以上置くこともできます。設定はブロックごとに別々に持ちます。
スタイル設定で見た目を決められる
高さ
スライドショーの高さです。初期値は「動画に合わせる」です。
| 選択肢 | 高さ |
|---|---|
| 動画に合わせる | 1 枚目の動画の縦横比に合わせる。YouTube・Vimeo の動画は 16:9 として扱う |
| 小 | 420px |
| 中 | 560px |
| 大 | 720px |
縦横比の違う動画を混ぜると、「動画に合わせる」では 2 枚目以降の上下や左右が切れることがあります。高さを揃えたいときは小・中・大を選ぶのがおすすめです。
矢印の種類
左右の送り矢印です。「なし／スタイル1／スタイル2／スタイル3」から選べます。初期値は「なし」です。スタイル1 は細い山形、スタイル2 は塗りつぶしの三角、スタイル3 は丸で囲んだ矢印です（下の「こんなときはこう設定する」に見本があります）。
ページネーションの種類
何枚目かを示す目印です。初期値は「ダッシュ（動画に重ねる横棒）」です。
| 選択肢 | 表示 | 置き場所 |
|---|---|---|
| なし | 出さない | ─ |
| ドット | 枚数ぶんの丸 | 動画の下 |
| ダッシュ（動画に重ねる横棒） | 枚数ぶんの横棒。今の動画がどこまで再生されたかを棒が塗りつぶして示す | 動画の上に重ねる |
| カウンター | 「1 / 3」の形 | 動画の下 |
| 数字 | 1・2・3 の数字ボタン | 動画の下 |
| プログレスバー | 1 本のバー。全体の何枚目まで進んだかを示す | 動画の上に重ねる |
ドット・カウンター・数字は動画の下に並ぶので、そのぶんブロックが縦に伸びます。動画だけを見せたいならダッシュかプログレスバーが向いています。
矢印とページネーションの色
矢印とページネーションの色です。初期値は薄いグレー（#DDDDDD）です。動画の上に重なるダッシュ・プログレスバー・矢印には合いますが、動画の下に出るドット・カウンター・数字は、白い背景だとほとんど見えません。これらを選んだときは濃い色に変えてください。
暗幕の濃さ
動画の上にかける黒い幕の濃さです。0〜80% の範囲を 5% 刻みで選べます。初期値は 20% です。文字が読みにくいときは上げてください。
暗幕がかかるのは、小見出し・大見出し・アクセント・ボタンのどれかを入れたスライドだけです。文字の無いスライドは動画がそのまま映ります。
大見出しの文字サイズ／小見出しの文字サイズ
「小／中／大」から選べます。初期値はどちらも「中」です。ブロック全体に効き、スライドごとには変えられません。大見出しのサイズは、アクセントにも同じく効きます。
文字は画面幅に合わせて伸び縮みします。たとえば大見出しの「中」は、スマホで 30px、広い PC 画面で最大 84px です。スマホで文字がはみ出しにくい作りです。
文字色
小見出しと大見出しの色です。初期値は白（#FFFFFF）です。
アクセント色
「大見出しのアクセント」に入れた文字の色です。初期値は黄緑（#C6F24E）です。矢印とページネーションの色とは別の設定です。
ボタンの背景色／ボタンの文字色
ボタンの色です。初期値は背景が白（#FFFFFF）、文字が黒（#000000）です。
アニメーション設定で送り方を決められる
1枚あたりの最長表示時間（秒）
1 枚を表示しておく上限です。0〜15 秒を 1 秒刻みで選べます。初期値は 0 です。
- 0 のとき: 時間では送らず、動画が最後まで再生されたら次へ送ります（おすすめ）
- 1 以上のとき: 動画が終わる前でも、その秒数で次へ送ります。30 秒の動画を 8 秒だけ見せたい、といったときに使います
切り替えにかける時間（秒）
次のスライドへ切り替わる動きの長さです。0.1〜3 秒を 0.1 秒刻みで選べます。初期値は 0.4 秒です。「1枚あたりの最長表示時間」より長い値を入れた場合は、その秒数に丸められます。
切り替え方
「なし／スライド／フェード」から選べます。初期値は「スライド」です。
- なし: パッと切り替わる
- スライド: 横に流れて切り替わる
- フェード: その場でふわっと入れ替わる
どれを選んでも、お客様は指やマウスで掴んで横に動かして切り替えられます。
動画設定でスライドの中身を入れられる
スライドは「動画1」〜「動画5」の 5 枚ぶんの枠があり、どれも同じ項目が並んでいます。動画を 1 つも入れていない枠は自動で飛ばすので、3 本だけ使いたいときは 3 枠だけ埋めれば大丈夫です（1 枚目と 4 枚目だけ、のような歯抜けでもかまいません）。
リンクを新しいタブで開く
オンにすると、「動画1のリンク先」〜「動画5のリンク先」に入れたリンクが新しいタブで開きます。全スライド共通の設定です。初期値はオフです。
🚨 ボタン（「ボタンのリンク先1」など）には効きません。ボタンはいつも同じタブで開きます。
動画1
Shopify にアップロードした動画を「選択」から選びます。PC とスマホの両方で使う、基本の動画です。
動画1（スマホ用）
スマホ（画面幅 750px 未満）でだけ出す動画です。空のときはスマホでも「動画1」を出します。縦向きの動画を入れるとスマホで画面いっぱいに映えます。
| 動画1 | 動画1（スマホ用） | PC | スマホ |
|---|---|---|---|
| あり | あり | 動画1 | スマホ用 |
| あり | なし | 動画1 | 動画1 |
| なし | あり | スマホ用 | スマホ用 |
動画1の URL（YouTube / Vimeo）
YouTube か Vimeo の動画の URL を貼り付けます。「動画1」が空のときだけ使われます（アップロードした動画が優先です）。PC とスマホで同じ動画が出ます。
動画1のポスター画像
動画が再生されるまで表示する画像です。アップロードした動画は Shopify が作るサムネイルを自動で使うので、空でもかまいません。YouTube・Vimeo の動画では必ず設定してください。 外部の動画は読み込みに時間がかかり、ポスター画像が無いとその間は黒い画面になります。
動画1のリンク先
スライド全体をリンクにします。動画のどこを押してもこのページへ移動します。空ならリンクになりません。
小見出し1
大見出しの上に出る小さな文字です（例: NEW IN）。
大見出し1
大きな見出しです（例: EVERY）。
大見出しのアクセント1
アクセント色で表示する見出しです（例: DETAIL）。大見出しの次の行に、アクセント色で表示されます。アクセントは常に大見出しのあとに来るので、見出しの途中の 1 語だけ色を変えることはできません。1 行に収めたいときは、大見出しだけに全部書いてください。
ボタンの文言1
ボタンに表示する文字です（例: SHOP NOW）。空ならボタンを出しません。
ボタンのリンク先1
ボタンを押したときの移動先です。🚨 文言だけ入れてリンク先が空だと、ボタンは表示されますが押してもページの先頭に戻るだけです。
文言の位置1
文字を置く場所を「左／中央／右」から選びます。初期値は「左」です。スライドごとに変えられるので、動画の被写体と重ならない側を選ぶと読みやすくなります。
余白設定で上下のすき間を調整できる
| 設定 | 範囲 | 初期値 |
|---|---|---|
| 上部余白（PC） | 0〜100px（1px 刻み） | 0 |
| 上部余白（スマホ） | 0〜100px（1px 刻み） | 0 |
| 下部余白（PC） | 0〜100px（1px 刻み） | 0 |
| 下部余白（スマホ） | 0〜100px（1px 刻み） | 0 |
ヘッダーの直下に全幅で敷くなら 0 のまま、ページの途中に置くなら上下に 40px 前後あけると、前後のセクションと詰まって見えません。
追加設定で CSS を足せる
追加のCSS
見た目をさらに細かく変えたいときに CSS を書く欄です。書いた CSS はこのブロックの中にだけ効き、ページのほかの部分には影響しません。安全のため < の文字は取り除かれます。
クラス名はブラウザの検証機能で確認できます。たとえばボタンを角丸にするなら次のように書きます。
.ur-vc__button { border-radius: 999px; }
こんなときはこう設定する
設定の組み合わせで、見た目の印象は大きく変わります。よく使う 3 パターンです。
動画を主役にして、何も邪魔させたくないとき
初期値のままがおすすめです。「矢印の種類：なし」「ページネーションの種類：ダッシュ」「高さ：動画に合わせる」「1枚あたりの最長表示時間：0」。動画の下端に細い横棒が出るだけで、今の動画の残り時間も棒の塗りで分かります。
操作できることをはっきり見せたいとき
「矢印の種類：スタイル3」「ページネーションの種類：ドット」「高さ：中」。丸い矢印とドットで、スライドが複数あることがひと目で伝わります。ドットは動画の下に並ぶので、「矢印とページネーションの色」を濃い色に変えてください。
全体の進み具合を見せたいとき
「矢印の種類：スタイル2」「ページネーションの種類：プログレスバー」。動画の下端に 1 本のバーが出て、全体のうち何枚目まで進んだかが伸びて示されます。
ページの途中に控えめに置きたいとき
「高さ：小」「矢印の種類：なし」「ページネーションの種類：カウンター」。高さ 420px に抑えて、下に「1 / 3」と出します。初期の薄いグレーだと数字が見えにくいので、色を濃くして使ってください。
うまく表示されないときは
ストアにスライドショーが何も出ない
- 動画が 1 本も入っていない: 動画1〜動画5（スマホ用・URL を含む）がすべて空だと、お客様のストアには何も出ません
- 保存していない: テーマエディタ右上の「保存」を押したか確認してください
- 別のテーマに追加している: 「テーマを選択」で選んだテーマが、公開中のテーマか確認してください
- 別のページに追加している: 「テーマに追加」はホームページに追加します。ほかのページは手動で追加します
矢印やページネーションが出ない
動画が入っているスライドが 1 枚だけのときは、矢印もページネーションも出ません（送る先が無いため）。2 枚目にも動画を入れてください。
ドット・カウンター・数字がほとんど見えない
初期の色（#DDDDDD）は、白い背景の上では薄すぎます。「矢印とページネーションの色」を濃い色に変えてください。
動画から音が出ない
仕様です。動画はいつも音なし・繰り返し再生・操作ボタンなしで再生します。ブラウザは音の出る動画の自動再生を許さないため、音ありにすると自動で再生されなくなるからです。
なかなか次のスライドに進まない
送りは「動画が終わったら」です。長い動画は最後まで待ちます。途中で切り上げたいときは「1枚あたりの最長表示時間（秒）」に秒数を入れてください。
また、パソコンやスマホで「視差効果を減らす」「動きを減らす」の設定をオンにしている方には、自動では送りません（矢印・ページネーション・スワイプでは動きます）。
YouTube の動画で、最初にタイトルや一時停止ボタンが出る
YouTube のプレイヤーの仕様で、再生が始まってから約 6 秒間、動画のタイトルや操作ボタンが表示されます。繰り返しで先頭に戻るたびにも出ます。アプリからは消せません。出したくないときは、動画を Shopify にアップロードして「動画1」などで設定してください。
YouTube・Vimeo の動画が、最初しばらく黒い
外部の動画は、スライドが表示されてから読み込むため、その間は何も映りません。「動画1のポスター画像」などに画像を設定すると、読み込み中はその画像が出ます。
文字が動画に溶けて読めない
「暗幕の濃さ」を上げるか、「文言の位置」を動画の暗い側に変えてください。
テーマを切り替えたらスライドショーが消えた
設定はテーマごとに保存されます。新しいテーマでは、もう一度ブロックを追加して設定してください。
よくある質問
動画は何本まで並べられますか？
1 つのブロックにつき最大 5 本です。もっと並べたいときは、ブロックをもう 1 つ追加してください。
YouTube・Vimeo 以外の動画サイトは使えますか？
使えません。外部の動画は YouTube と Vimeo だけに対応しています。それ以外の動画は Shopify にアップロードして使ってください。
商品ページやコレクションページにも置けますか？
置けます。テーマエディタでそのページを開き、「セクションを追加」の「アプリ」タブから追加してください。
動画だけを流して、文字は出さなくてもいいですか？
大丈夫です。小見出し・大見出し・アクセント・ボタンの文言を空にすると、暗幕もかからず動画だけが映ります。
動画を 5 本入れるとページが重くなりませんか？
再生するのは、画面に表示されている 1 本だけです。隠れているスライドや画面の外にあるときは止まり、YouTube・Vimeo の動画はそのスライドが表示されるまで読み込みません。
PC とスマホで別の動画を出せますか？
出せます。「動画1（スマホ用）」などにスマホ用の動画を入れると、画面幅 750px 未満ではそちらを出します。
設定はどこに保存されますか？
テーマの中に保存されます。アプリのサーバーには動画も設定も保存しません。
おわりに
「シンプル動画スライドショー｜お手軽動画カルーセル表示」は、Shopify のストアに動画のスライドショー・動画カルーセルを手軽に置けるアプリです。
- Shopify・YouTube・Vimeo の動画を最大 5 本、好きなページに並べられる
- スマホには縦向きの動画を出し分けられる
- 見出しとボタンを重ねて、動画をそのまま売り場の入口にできる
料金は月額 $3.99（年額 $39.99）で、7 日間の無料体験があります。動画でブランドの空気を伝えたいストアは、ぜひ試してみてください。
シンプル動画スライドショー｜お手軽動画カルーセル表示をアプリストアで見る
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
