Shopifyでスクロールアニメーションやパララックスを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/08/25

お客様がストアをスクロールしていくと、画像がふわりと現れる。背景だけが固定されて、その上を文字が流れていく。
そんな「動きのある見せ方」は、これまでテーマのコードを触らないと作れませんでした。

このガイドでは、コーディングなしでスクロール演出を追加できるアプリ
「シンプルパララックス｜お手軽スクロールアニメーション」の使い方を、
インストールから 32 項目あるすべての設定まで、実際の画面と一緒にご説明します。

はじめに
「シンプルパララックス」でできること
アプリのインストール
アプリの管理画面
テーマへの追加
- 自動で追加する（1 クリック）
- 手動で追加する（好きな位置に置きたいとき）
ブロックの設定
目的別・おすすめの設定
うまく表示されないときは
おわりに

はじめに

Shopify（ショッピファイ）は、世界中の商品販売者様にご利用いただいているネットショップ作成サービスです。
Shopify ストアの機能は、Shopify アプリストアで配布されている「Shopify アプリ」をインストールすることで、
コーディングなしに自由に広げることができます。

「シンプルパララックス｜お手軽スクロールアニメーション」は、
スクロールに連動して動くメディア（画像・動画）とテキストを、ストアの好きなページに追加できるアプリです。
ブランドの世界観を伝えたいトップページ、商品のこだわりを見せたい商品ページ、
読み物として見せたい固定ページ。どこにでも、テーマエディタから追加できます。

料金プラン

Basic Plan：$3.99/月
年払いの場合：$39.99/年（実質 2 ヶ月分無料）
インストールから 7 日間の無料体験あり
プランによる機能制限はありません

👉 Shopify アプリストアでアプリを見る

シンプルパララックスのメインビジュアル

「シンプルパララックス」でできること

このアプリでできることは、大きく分けて 3 つです。

スクロール演出付きのセクションをページに追加する（4 種類の演出から選択）
画像・動画・YouTube / Vimeo をメディアとして表示する
見出し・サブテキスト・ボタンをメディアの上に重ねる

アプリの主な特徴

背景固定のパララックスを含む4種類のスクロール演出から選べます。
画像・アップロード動画・YouTube / Vimeo の動画を表示できます。
見出し・サブテキスト・ボタンをメディアの上に重ねられます。
焦点を指定して、切り抜き時も主題が見えるようにできます。
テーマエディタから任意のページへコーディング不要で追加できます。

スクロール演出付きのセクション

お客様が画面をスクロールして、そのセクションが見えたところで演出が始まります。ページに動きが出て、読み進めてもらいやすくなります。

スクロールに合わせてメディアが現れる演出

テーマエディタだけで完結する設定

コードを書く必要はありません。テーマエディタの右側で値を変えると、その場でプレビューに反映されます。

テーマエディタから設定できる項目

メディアに重ねるテキストとボタン

見出し・サブテキスト・ボタンをメディアの上に重ねられます。配置は9方向から選べるので、被写体を避けて置けます。

メディアにテキストとボタンを重ねた表示

アプリのインストール

インストールは Shopify の管理画面から行います。所要時間は 1 分ほどです。

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
検索窓に「シンプルパララックス」と入力し、表示されたアプリをクリックします。
アプリの詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので、内容を確認して「インストール」を押します。

料金プランの選択について
インストール後にアプリを開くと、料金プランの選択画面が自動的に表示されます。
プランを選んで承認するまで設定画面には進めませんので、先にプランを選択してください。
無料体験期間中に解約すれば、料金は発生しません。

アプリの管理画面

アプリの管理画面は「設定」という 1 ページだけです。
休業日や商品のような「データ」を登録する場所はなく、テーマへの追加とアプリ自体の設定だけを行います。
実際の見せ方はすべてテーマエディタ側で調整します。

アプリの管理画面

テーマにスクロールアニメーションを追加

ストアにブロックを追加するための導線です。

追加先のページ：ブロックを追加するページを「トップページ」「商品ページ」「コレクションページ」「固定ページ」から選びます。
テーマを選択：追加先のテーマを選びます。公開中のテーマには「（公開中のテーマ）」と表示され、初期状態で選ばれています。
テーマに追加：クリックすると新しいタブでテーマエディタが開き、選んだページに新しいセクションとしてブロックが追加された状態になります。
テーマをプレビュー：クリックすると、そのテーマでのストアの表示を新しいタブで確認できます。

テーマの選択欄が空欄のときは
選択できるのは「公開中」または「未公開」のテーマだけです。
テーマのバージョンや状態によっては空欄になることがあります。
その場合は、後述の手動での追加をお試しください。

複数のレイアウトを組み合わせて使えます

画面には案内バナーが表示されています。このブロックは1 ページに何個でも追加できます。
たとえばトップページに「ブランドの世界観」「商品のこだわり」「使い方」と 3 つ並べる、といった構成が作れます。
それぞれ別の画像・別の演出を設定できます。

言語設定

アプリの管理画面の表示言語を切り替える設定です。
「言語を選択」で言語を選び、「変更する」をクリックすると切り替わります。

テーマへの追加

このアプリは、テーマエディタの「セクションを追加」から入れるタイプのブロックです。
ページの好きな位置に、何個でも置けます。

自動で追加する（1 クリック）

アプリの管理画面を開きます。
「追加先のページ」と「テーマを選択」を選びます。
「テーマに追加」をクリックします。
新しいタブでテーマエディタが開き、ブロックが追加された状態になります。
右上の「保存」をクリックします。

手動で追加する（好きな位置に置きたいとき）

自動追加がうまくいかないときや、ページの途中に差し込みたいときはこちらです。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
上部のページ切り替えで、追加したいページを表示します。
左側の「セクションを追加」をクリックします。
「アプリ」タブに切り替えます。
「シンプルパララックス｜お手軽スクロールアニメーション」を選びます。

「セクションを追加」の「アプリ」タブ

「アプリ埋め込み」ではありません
テーマエディタには「アプリ埋め込み」という別の場所もありますが、このアプリはそこには出てきません。
必ず「セクションを追加」→「アプリ」から追加してください。

追加すると、左側のセクション一覧にブロックが並び、プレビューにも表示されます。
ドラッグで並び順を変えれば、ページ内の好きな位置に移動できます。

テーマエディタに追加されたブロックとプレビュー

ブロックの設定

ブロックを選択すると、テーマエディタの左側に設定パネルが開きます。
設定は 6 つのグループに分かれ、全部で 32 項目あります。

設定が見当たらないときは、条件で隠れています
このブロックには、別の設定の値によって表示・非表示が切り替わる項目が 11 個あります。
たとえば動画まわりの設定は「メディアの種類」を「動画」にするまで出てきません。
各項目の「表示条件」の欄をご確認ください。

メディア設定

メディア設定のパネル

設定名	何が変わるか	初期値	表示条件
メディアの種類	画像を出すか動画を出すかを決めます。ここで選んだ方の設定だけが下に表示されます。	画像	常に表示
画像	表示する画像を選びます。ストアにアップロード済みの画像から選べます。	未設定	メディアの種類が「画像」のとき
動画（アップロード）	Shopify にアップロードした動画ファイルを選びます。	未設定	メディアの種類が「動画」のとき
動画 URL（YouTube / Vimeo）	YouTube または Vimeo の動画 URL を貼り付けます。	未設定	メディアの種類が「動画」のとき
動画のポスター画像		未設定	常に表示
自動再生	ページを開いたときに動画を自動で再生します。	オン	メディアの種類が「動画」のとき
ミュート	音を消して再生します。	オン	メディアの種類が「動画」で、自動再生がオフのとき
ループ再生	動画を繰り返し再生します。	オン	メディアの種類が「動画」のとき
コントロールを表示	再生バーなどの操作パネルを表示します。背景として見せたいときはオフのままにします。	オフ	メディアの種類が「動画」のとき
画像の見せたい位置	枠に合わせて切り取られるときに、画面に残したい位置を9方向から選びます。人物や商品が端に写っている写真で効きます。	中央	常に表示

メディアの種類 の選べる値：画像 / 動画
💡 ミュート：自動再生を有効にしている場合は、ブラウザの制限により常にミュートになります。
画像の見せたい位置 の選べる値：左上 / 上中央 / 右上 / 左中央 / 中央 / 右中央 / 左下 / 下中央 / 右下
💡 画像の見せたい位置：枠に合わせて切り取られるとき、この位置を優先して残します。外部動画（YouTube / Vimeo）では効きません。

演出設定

設定名	何が変わるか	初期値	表示条件
アニメーションの種類	スクロールしたときの見せ方を4種類から選びます。ブランドの雰囲気に合わせて選んでください。	中央から広がる	常に表示
演出の強さ	演出のかかり具合です。数字を上げるほど動きや変化が大きくなります。	0.6（0〜1 / 0.1刻み）	常に表示
再生時間（秒）	演出が始まってから終わるまでの時間です。長くするとゆったりした印象になります。	1.3s（0.2〜3 / 0.1刻み）	アニメーションが「背景固定（パララックス）」以外のとき
開始遅延（秒）	セクションが見えてから演出が始まるまでの待ち時間です。	0s（0〜2 / 0.1刻み）	常に表示
イージング	動きの加速・減速のしかたです。「なめらか」は最も落ち着いた動きになります。	終わりにかけて減速	常に表示

アニメーションの種類 の選べる値：中央から広がる / 真っ暗から明るく / 透明から色がつく / 背景固定（パララックス）
イージング の選べる値：標準 / 終わりにかけて減速 / 緩急をつける / なめらか

テキスト設定

テキスト設定のパネル

設定名	何が変わるか	初期値	表示条件
見出し	メディアの上に大きく重ねる文字です。空にすると見出しは出ません。	（空欄）	常に表示
見出しの文字の大きさ	見出しの文字の大きさです。	40px（16〜96 / 1刻み）	常に表示
見出しの文字の色	見出しの文字の色です。写真の上に置くため、初期値は白です。	`#ffffff`	常に表示
見出しの文字の太さ	見出しの文字の太さです。	太字	常に表示
サブテキスト	見出しの下に置く説明文です。改行して複数行にできます。	（空欄）	常に表示
サブテキストの文字の大きさ	サブテキストの文字の大きさです。	18px（12〜48 / 1刻み）	常に表示
サブテキストの文字の色	サブテキストの文字の色です。	`#ffffff`	常に表示
サブテキストの文字の太さ	サブテキストの文字の太さです。	標準	常に表示
文字に影をつける	文字に影をつけて、明るい写真の上でも読みやすくします。	オン	常に表示
テキストの配置	見出しとサブテキストを置く位置を9方向から選びます。被写体を避けて配置できます。	左下	常に表示
暗幕の濃さ		0.2（0〜0.8 / 0.1刻み）	常に表示

見出しの文字の太さ の選べる値：標準 / 中太 / 太字
サブテキストの文字の太さ の選べる値：標準 / 中太 / 太字
テキストの配置 の選べる値：左上 / 上中央 / 右上 / 左中央 / 中央 / 右中央 / 左下 / 下中央 / 右下

レイアウト設定

レイアウト設定・リンク設定・追加設定のパネル

設定名	何が変わるか	初期値	表示条件
メディアの合わせ方	メディアを枠に合わせて切り取るか、画像本来の比率のまま表示するかを選びます。	高さに合わせて切り取る	アニメーションが「背景固定（パララックス）」以外のとき
高さ（vh）	セクションの高さを画面の高さに対する割合（vh）で指定します。100 でちょうど画面 1 つ分です。	80vh（30〜200 / 5刻み）	「画像の比率に合わせる」以外のとき（パララックスでは常に表示）
横幅	セクションの横幅です。「フル幅」は画面いっぱい、「コンテナ幅」はテーマの本文幅に揃います。	フル幅	常に表示

メディアの合わせ方 の選べる値：高さに合わせて切り取る / 画像の比率に合わせる（高さは自動）
💡 メディアの合わせ方：「画像の比率に合わせる」を選ぶと高さの設定は使われません。背景固定（パララックス）では常に切り取りになります。
横幅の選べる値：フル幅 / コンテナ幅

リンク設定

設定名	何が変わるか	初期値	表示条件
リンク先 URL	メディアやボタンを押したときの遷移先です。	（空欄）	常に表示
ボタンの文言		（空欄）	常に表示

💡 ボタンの文言：リンク先 URL を設定したときだけ表示されます。空にするとボタンは出ません。

追加設定

設定名	何が変わるか	初期値	表示条件
追加のCSS	独自の CSS を追記して細かな見た目を調整できます。ブラウザの検証機能でクラス名を確認してから上書きしてください。	（空欄）	常に表示

💡 追加のCSS：検証機能でカスタマイズしたい要素のクラス名を確認して CSS を上書きしてください。

目的別・おすすめの設定

設定が多いので、作りたい雰囲気ごとに「ここだけ変えれば形になる」組み合わせをご紹介します。

ブランドの世界観を見せたい（トップページ）

設定	おすすめ
アニメーションの種類	背景固定（パララックス）
高さ（vh）	100〜150
横幅	フル幅
暗幕の濃さ	0.3〜0.4（文字を読みやすく）
テキストの配置	中央

背景が固定されたまま、その上を文字が流れていく見せ方になります。
ページの一番上に置くと、ストアに入った瞬間の印象が変わります。

商品のこだわりを伝えたい（商品ページ）

設定	おすすめ
アニメーションの種類	中央から広がる
演出の強さ	0.4〜0.6（控えめに）
高さ（vh）	60〜80
横幅	コンテナ幅
テキストの配置	左下

商品説明の途中に差し込むと、読み進めるリズムが生まれます。
商品ページでは演出を控えめにしたほうが、商品そのものに目が向きます。

写真を切り取りたくない

メディアの合わせ方を「画像の比率に合わせる（高さは自動）」にします。
画像がそのままの比率で表示され、上下が切れません。

このとき「高さ（vh）」の設定は画面から消えます。高さは画像の比率で決まるためです。

動画を背景として見せたい

設定	おすすめ
メディアの種類	動画
自動再生	オン
ループ再生	オン
コントロールを表示	オフ
動画のポスター画像	設定する（読み込み中の見た目が整います）

「メディアの種類」を「動画」にすると、動画まわりの設定がまとめて現れます。

人物や商品が端に写っている写真を使う

画像の見せたい位置を、被写体のある方向（左上・右中央など）に合わせます。
枠に合わせて切り取られるときに、その位置が優先して残ります。

うまく表示されないときは

設定したい項目が画面に見当たらない

条件によって隠れている項目があります。 次の3つが代表的です。

見えない項目	出す方法
動画・動画 URL・自動再生・ループ再生・コントロールを表示	「メディアの種類」を「動画」にする
高さ（vh）	「メディアの合わせ方」を「高さに合わせて切り取る」にする
再生時間（秒）・メディアの合わせ方	「アニメーションの種類」を「背景固定（パララックス）」以外にする