Shopifyでカードカルーセルを簡単に作成できるアプリについて徹底解説｜ご利用ガイド

はじめに

Shopify は、世界中のストアオーナー様にご利用いただいているネットショップ作成プラットフォームです。Shopify アプリを使うことで、デザインの拡張や機能追加など、コーディングの知識がなくてもストアを自由にカスタマイズできます。

このたびは「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」をご検討いただきありがとうございます。本アプリは、Apple Store 風のおしゃれなカードカルーセルを、ストアのどのページにも追加できる Shopify アプリです。最大 6 枚のカードに画像・見出し・説明文を設定し、リンク付きで表示できます。画像レイアウトは 3 種類から選べ、カードの幅・比率・間隔・角丸・影・フォントサイズ・色もすべてカスタマイズ可能。自動再生や無限スクロールにも対応し、PC・タブレット・スマホで美しく表示されます。コーディング不要で、テーマエディタからワンクリックで追加できます。

料金：Basic Plan $4.99/月　７日間の無料期間あり　年払いで実質 2 ヶ月分無料でお得にご利用いただけます。

アプリストアはこちらからご確認いただけます。

👉 シンプルカードカルーセル｜お手軽テキスト付き画像スライダー｜Shopify App Store

---

「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」でできること

「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」は、Apple Store 風のスタイリッシュなカードカルーセルを、コーディング不要でストアに追加できるアプリです。新商品の紹介・キャンペーンバナー・ブランドストーリーの訴求など、さまざまなシーンで活用していただけます。最大 6 枚のカードに画像・サブタイトル・メイン見出し・補足テキスト・リンクを設定でき、画像レイアウトも 3 種類（標準・カードの下半分・カードの上半分）から選べるため、ストアのデザインに合わせて柔軟に表現できます。

主な特徴

1. Apple Store 風のおしゃれなカードカルーセルをどのページにも追加できます。
2. 最大 6 枚のカードに画像・見出し・説明文・リンクを設定できます。
3. 3 種類の画像レイアウトをカードごとに選択できます。
4. カードの幅・比率・間隔・角丸・影・色・フォントを自由にカスタマイズできます。
5. 自動再生と無限スクロールに対応しています。
6. PC・タブレット・スマホすべてでレスポンシブ表示できます。
7. コーディング不要、ワンクリックでテーマに追加できます。

---

ノーコードでカードカルーセルを挿入できる！

専門的なコーディングの知識は一切不要です。テーマエディタからアプリブロックを追加するだけで、Apple Store のような洗練されたカードカルーセルをストアに簡単に表示できます。トップページや商品ページ、コレクションページなど、設置したい場所に自由に配置していただけます。

---

様々なスタイルでカードカルーセルを表示できる！

カードの画像レイアウトは「標準（画像全面）」「カードの下半分」「カードの上半分」の 3 種類から、カードごとに自由に選択できます。商品の見せ方やキャンペーン内容に合わせてレイアウトを使い分けることで、訴求力の高い魅力的な売り場を演出できます。

---

ノーコードで見た目をカスタマイズできる！

カードの幅・比率・間隔・角丸・影の有無・フォントサイズ・テキストカラーなど、見た目に関するあらゆる項目をテーマエディタからノーコードで細かく調整できます。ブランドのデザインやストアの世界観に合わせた、こだわりのカルーセルを簡単に作り込んでいただけます。

---

1クリックでテーマに追加できる！

アプリの管理画面から追加したいテーマを選び、「テーマに追加」ボタンを押すだけで、すぐにカードカルーセルがテーマに反映されます。難しい設定は一切不要なので、はじめての方でも安心してご利用いただけます。

---

アプリのインストール

アプリのインストールは、以下のアプリストアページから行っていただけます。

👉 シンプルカードカルーセル｜お手軽テキスト付き画像スライダー｜Shopify App Store

料金：Basic Plan $4.99/月　７日間の無料期間あり　年払いで実質 2 ヶ月分無料でお得にご利用いただけます。

インストール手順

1. Shopify 管理画面の左下にある「設定」をクリックします。

2. 「アプリ」をクリックし、「Shopify App Store」へ移動します。

3. 検索窓に「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」と入力し、表示されたアプリをクリックします。

   

4. アプリ詳細画面で「インストール」をクリックします。

   

5. 権限の確認画面が表示されるので、内容を確認し「インストール」を完了します。

   

---

アプリブロックをテーマに追加

インストールが完了したら、テーマにカードカルーセルのアプリブロックを追加していきましょう。追加方法は 2 通りあります。

自動でテーマに追加（1 クリック追加）

アプリの管理画面から、ワンクリックでカードカルーセルを既定の位置に追加できる方法です。難しい操作なくすぐに設置したい方におすすめです。

1. アプリの管理画面を開きます。

   

2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。

   

3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

   

手動でテーマに追加（任意ページに設置したい場合）

任意のページや位置にカードカルーセルを設置したい場合は、テーマエディタから手動で追加していただくのがおすすめです。

1. Shopify 管理画面で「オンラインストア」→「テーマを編集する」を開きます

   

2. テーマエディタ上部のプルダウンから、追加したいページに移動します。

   

3. 「セクションを追加」または「ブロックを追加」をクリックし、「アプリ」タブから「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」のアプリブロックを選んで追加します。

   

4. 表示を確認し、問題なければ「保存する」をクリックします。

   

---

カードカルーセルブロックのアプリカスタマイズ

カードカルーセルブロックは、見た目や挙動をテーマエディタから自由にカスタマイズできます。ここでは設定項目をグループごとにご紹介します。

見出し設定

カルーセルの最上部に表示される、セクションタイトルに関する設定です。「Featured」「新着商品」「ピックアップ」など、カルーセルの内容を一目で伝えるテキストを設定する場面で使用します。

設定名	説明
見出しテキスト	カルーセルの上部に表示される見出しのテキストです。空欄にすると見出し自体が非表示になります。「Featured」「新着」「おすすめ商品」など、カルーセルの内容に合わせて入力するのがおすすめです。
見出しの大きさ（px）	見出しテキストのフォントサイズです。16〜48px の範囲で 2px 刻みに調整できます。ストアの世界観に合わせて、控えめにするか、大きく目立たせるかを選んでください。
見出しテキストの色	見出しテキストの文字色です。ブランドカラーに合わせて指定すると、ストア全体の統一感が高まります。
見出しの配置	見出しの表示位置を「左揃え」または「中央揃え」から選べます。ヒーローセクション風に大きく見せたいときは「中央揃え」、商品一覧的に控えめに見せたいときは「左揃え」がおすすめです。
上の余白（px）	カルーセルセクションの上側に取る余白の量です。直前のセクションとの間隔を調整するときに便利です。
下の余白（px）	カルーセルセクションの下側に取る余白の量です。直後のセクションとの間隔を調整するときに便利です。

---

自動再生設定

カードカルーセルを自動で動かすかどうか、また端まで進んだときに先頭へ戻すかどうかを設定するグループです。来店されたお客様の目を引きたいトップページのヒーローエリアなどで活用すると効果的です。

設定名	説明
自動再生を有効にする	チェックを入れると、ページが表示されたときにカードが自動で 1 枚ずつスライドします。お客様の操作がなくてもカルーセル全体を見てもらえるため、複数のキャンペーンを順番にアピールしたい場合に効果的です。
自動再生の間隔（秒）	自動再生のスライドが切り替わる間隔を 3〜10 秒の範囲で設定できます。短くすればテンポよく、長くすればじっくりと見てもらえます。テキスト量が多い場合は長めに設定するのがおすすめです。
無限スクロールを有効にする	チェックを入れると、最後のカードまで進んだあと先頭のカードへループします。常にどちらかの矢印が押せる状態になり、お客様が最後まで操作したあとも自然に閲覧を続けられます。

---

カードスタイル設定

カードカルーセル全体の見た目（カードのサイズ・形・余白・文字サイズなど）を整える設定グループです。ブランドのデザインや表示するコンテンツの量に合わせて細かく調整できます。

設定名	説明
カードの横幅（px）	カード 1 枚あたりの横幅を 200〜500px の範囲で 10px 刻みに設定できます。横長で迫力を出したい場合は大きめ、コンパクトに複数並べて見せたい場合は小さめがおすすめです。
カードの比率	カードの縦横比を「4:5」「3:4」「1:1」「3:2」「16:9」から選べます。4:5 や 3:4 は商品やビジュアルを縦長で魅せたい場合、16:9 はキャンペーンバナー的に使いたい場合に向いています。
カードの角丸（px）	カードの角の丸みを 0〜30px の範囲で 1px 刻みに設定できます。0 にするとシャープで直線的な印象、大きくするほど柔らかく親しみやすい印象になります。
カードの間隔（px）	カードとカードの間隔を 0〜40px の範囲で 2px 刻みに設定できます。狭くすると一覧感が、広くすると 1 枚 1 枚を引き立てる印象になります。
カードの影を表示	チェックを入れると、カードの周囲にやわらかな影がつき、立体感のある Apple Store 風の見た目になります。シンプルでフラットなデザインにしたい場合はオフにしてください。
サブタイトルの文字の大きさ（px）	カード上部の小さなタグ的テキスト（サブタイトル）の文字サイズです。8〜20px の範囲で調整できます。「NEW」「LIMITED」など、補足的な情報に使用するのがおすすめです。
メイン見出しの文字の大きさ（px）	カードの主役となるメイン見出しの文字サイズです。14〜48px の範囲で調整できます。商品名やキャッチコピーなど、最も伝えたい言葉を強調するときに調整します。
補足テキストの文字の大きさ（px）	カード内の補足テキストの文字サイズです。10〜24px の範囲で調整できます。読みやすさを優先するなら 16〜18px 程度、控えめに表示するなら小さめがおすすめです。

---

カード 1〜3 / カード 4〜6 の設定

カルーセルに表示されるカード（最大 6 枚）の中身を 1 枚ごとに設定するグループです。「カード 1〜3」「カード 4〜6」の 2 つのヘッダーに分かれており、それぞれのカードに画像・テキスト・リンク・レイアウトを設定できます。

カード 1 枚あたり、以下の項目を設定できます。

設定名	説明
画像	カードに表示する画像をアップロードします。Apple Store 風の見た目を活かすため、横長でも縦長でも構いませんが、伝えたい主役が中央付近に来る写真がおすすめです。
画像レイアウト	画像の見せ方を「標準（画像全面）」「カードの下半分」「カードの上半分」から選べます。「標準」はビジュアルを大きく見せたい場合、「カードの下半分／上半分」はテキストと画像をはっきり分けて見せたい場合に向いています。
サブタイトル	カード上部に表示する小さなテキストです。「NEW」「期間限定」「春の新作」など、商品やキャンペーンの属性を伝えるラベルとして活用できます。
サブタイトルの色	サブタイトルの文字色を変更できます。ブランドカラーやアクセントカラーで設定すると、視線を集めやすくなります。
メイン見出し	カードの主役となる大きめのテキストです。商品名やキャッチコピーなど、最も伝えたいメッセージを入力します。
メイン見出しの色	メイン見出しの文字色を変更できます。背景画像とのコントラストを意識して読みやすい色を選んでください。
補足テキスト	カード内に表示する説明文です。リッチテキスト（太字・リンク・リストなど）に対応しているため、価格表示や注釈、特徴の箇条書きなど自由に表現できます。
補足テキストの色	補足テキストの文字色を変更できます。本文として読みやすい落ち着いた色味（グレー系など）がおすすめです。
リンク URL	カードクリック時の遷移先 URL を指定します。商品ページ・コレクションページ・特集ページなどへ誘導することで、カルーセルから直接コンバージョンにつなげられます。空欄の場合はクリックできない通常のカードとして表示されます。

💡 ワンポイント：画像と「メイン見出し」のいずれかが入力されているカードのみ表示されます。表示したくないカードは画像と見出しを空欄のままにしておくと、自動的にカルーセルから除外されます。

---

追加設定（カスタム CSS）

標準の設定では実現できない細かなデザイン調整を行いたい場合に使用するグループです。CSS の知識がある方向けの上級者向け設定です。

設定名	説明
追加の CSS	カードカルーセルブロック内に直接適用するカスタム CSS を記述できます。フォントの変更、特定の要素の色調整、レスポンシブ時の細かな表示調整など、より高度なカスタマイズを行いたいときにご活用ください。記述ミスがあるとレイアウトが崩れる可能性があるため、変更後は必ずプレビューで確認してください。

---

おわりに

「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」は、ストアの魅力を最大限に引き出すためのカードカルーセルアプリです。

• おしゃれなデザイン：Apple Store 風のスタイリッシュなカードカルーセルを、コーディング不要で簡単に設置できます。
• 柔軟なカスタマイズ性：3 種類の画像レイアウト・自動再生・無限スクロール・色やサイズの細かな調整など、ブランドの世界観に合わせて自由にカスタマイズできます。
• すべてのデバイスに対応：PC・タブレット・スマホのいずれでも美しく表示される、レスポンシブ対応のカルーセルです。

料金：Basic Plan $4.99/月　７日間の無料期間あり　年払いで実質 2 ヶ月分無料でお得にご利用いただけます。

ぜひこの機会にお試しいただき、ストアのデザインをワンランク上のものにしていきましょう。

👉 シンプルカードカルーセル｜お手軽テキスト付き画像スライダー｜Shopify App Store