【徹底解説】Shopify アプリ「シンプルパララックス｜お手軽スクロールアニメーション」でできること

ストアのトップページを開いたお客様が、最初の数秒で目にするのは大きな写真と短いキャッチコピーです。そこに「動き」が少し加わるだけで、同じ写真でも受け取る印象は大きく変わります。スクロールした瞬間に写真が円形に広がっていく、暗い画面からふっと明るくなる、背景だけがその場に残って文字が上を流れていく。こうした見せ方は、ブランドサイトや雑誌風の LP ではすっかり定番になりました。

ところが Shopify のテーマで同じことをしようとすると、多くの場合はテーマのコードを開いて JavaScript と CSS を書き足すことになります。テーマを更新するたびに書き足した部分を移し替える必要があり、外注すればそのたびに費用もかかります。

この記事では、コードを書かずにスクロール演出を足せる Shopify アプリ「シンプルパララックス｜お手軽スクロールアニメーション」を、アプリの管理画面からテーマエディタの設定項目 32 個まで、実際の画面と一緒にすべて解説します。設定の「どこを触ると何が変わるのか」に加えて、画面には書かれていない挙動や、つまずきやすい組み合わせも開発元の立場からお伝えします。

シンプルパララックス｜お手軽スクロールアニメーションとは

「シンプルパララックス｜お手軽スクロールアニメーション」は、スクロールに連動して動くメディア（画像・動画）とテキストを、ストアの好きなページに追加できる Shopify アプリです。英語名は「UR:Parallax & Scroll Animation」で、日本の UnReact が開発・提供しています。

アプリが追加するのは、テーマエディタの「セクションを追加」から置ける 1 種類のブロックです。このブロック 1 つが「1 枚のメディア＋見出し＋サブテキスト＋ボタン」をひとまとまりとして表示し、お客様がそこまでスクロールしてきたタイミングで演出を再生します。

演出は次の 4 種類から選べます。

• 中央から広がる … 写真が中心の小さな円から、画面いっぱいに広がりながら現れます
• 真っ暗から明るく … 暗く沈んだ状態から、照明がついたように明るくなります
• 透明から色がつく … 色の抜けたグレーの状態から、フェードインしながら色が戻ります
• 背景固定（パララックス） … 写真が背景に残ったまま、見える範囲だけがスクロールに合わせて移動します

1 ページに置けるブロックの数に上限はありません。トップページに「ブランドの世界観」「商品のこだわり」「店舗の紹介」と 3 つ縦に並べれば、ページ全体を読み物のような構成にできます。ブロックごとに写真も演出も変えられるので、同じ動きが続いて単調になることもありません。

設定はすべてテーマエディタのブロック設定として保存されます。アプリ側のデータベースやメタフィールドには何も書き込まないため、テーマを複製すれば設定ごと複製され、ブロックを削除すれば跡も残りません。テーマの公開前にプレビュー用テーマで作り込み、仕上がったら公開する、という普段どおりの進め方がそのまま使えます。

シンプルパララックス｜お手軽スクロールアニメーションのメリット

コードを書かずにスクロール演出を足せる

最大の利点は、テーマのファイルに一切手を入れずに演出を追加できることです。演出の仕組み（画面に入ったかどうかの判定、スクロール量に応じた移動、動きの速さの制御）はすべてアプリ側の JavaScript と CSS にまとまっていて、ストア側では値を選ぶだけで済みます。テーマをアップデートしても、ブロックの設定がテンプレートに残っている限りそのまま動き続けます。

写真 1 枚から「見せ場」が作れる

演出付きのブロックに必要な素材は、写真か動画が 1 つと、短い見出しだけです。撮影済みの商品写真やルックブックの 1 枚を置くだけで、トップページの区切りや商品ページの途中に視線の止まる場所が生まれます。新しくバナー画像を制作しなくても、手持ちの写真で始められます。

文字の読みやすさまで面倒を見てくれる

写真の上に白い文字を置くと、明るい写真では文字が沈んで読めなくなりがちです。このアプリは「暗幕の濃さ」と「文字に影をつける」の 2 つで可読性を確保します。暗幕は、文字を上下どちらかに寄せたときには文字のある側だけを沈めるグラデーションになり、写真の主役まで灰色にしてしまうことを避けています。影も、輪郭を締める小さな影と背景から浮かせる大きな影の二段構えで、ぼかしが滲んで見える安っぽさを抑えています。

動画にもそのまま使える

メディアは画像だけでなく、Shopify にアップロードした動画と、YouTube・Vimeo の URL にも対応しています。動画を背景にして上に見出しを重ねる、いわゆる動画ヒーローも同じブロックで作れます。自動再生・ループ・ミュートの初期値は「背景として流す」使い方に合わせてあるので、URL を貼るだけでそれらしい見た目になります。

料金が手頃で、機能制限がない

料金プランは 1 種類だけで、プランによって使えない機能はありません。7 日間の無料体験があるので、まずは自分のテーマで実際に置いてみて、ストアの雰囲気に合うかを確かめてから判断できます。

シンプルパララックス｜お手軽スクロールアニメーションのデメリット

良いところだけでなく、導入前に知っておいてほしい点も正直に書いておきます。

ブロックの種類は 1 つだけ

用意しているのは「1 メディア＋テキスト」のブロック 1 種類です。左右に写真と文章を並べる 2 カラムや、複数の写真を順番に切り替えるステップ型のレイアウトはありません。複雑な組み方をしたい場合は、ブロックを縦に複数並べて構成することになります。

演出は 1 回だけ再生される

「中央から広がる」「真っ暗から明るく」「透明から色がつく」の 3 種類は、ブロックが画面に入ったときに 1 回だけ再生されます。一度通り過ぎてからスクロールで戻っても、もう一度再生はされません。何度も動かしたいという要望には合わない一方で、ページを行き来するたびに動いて落ち着かない、という状態にはならない設計です。

横幅の「フル幅」はテーマの置き場所に左右される

「横幅」をフル幅にしても、テーマがブロックを本文幅の中に入れる作りであれば、その幅までしか広がりません。画面の端から端まで写真を広げたいときは、テーマ側でセクション自体を全幅に設定する必要があります。この点は後ほど「レイアウト設定」で詳しく説明します。

細かな見た目の調整には CSS の知識が要る

角丸や見出しの字間など、設定項目にない部分を変えたい場合は「追加のCSS」に CSS を書きます。クラス名を調べる手間はかかるので、まったくコードに触れたくない方は、用意された設定の範囲で仕上げるのが無理のない使い方です。

料金プラン

料金は次のとおりです（金額は米ドル建て）。

• Basic Plan … 月額 $3.99
• 年払いの場合 … $39.99/年（月払いと比べて実質 2 か月分お得）
• 無料体験 … インストールから 7 日間
• 機能制限 … なし（すべての設定項目を使えます）

アプリを開くと最初に料金プランの選択画面が表示され、プランを承認するまでは設定画面に進めません。無料体験の期間中にアンインストールすれば料金は発生しないので、まずは開発用のテーマや非公開のテーマで試してみるのがおすすめです。最新の料金は Shopify App Store のアプリページでご確認ください。

インストール

インストールは Shopify App Store のアプリページから行います。「インストール」を押し、権限の確認画面で内容を確かめてもう一度「インストール」を押せば完了です。続いて料金プランの選択画面が開くので、プランを承認するとアプリの管理画面に移ります。

インストール手順や画面の一つひとつは、公式のご利用ガイド「Shopifyでスクロールアニメーションやパララックスを表示できるアプリについて徹底解説｜ご利用ガイド」でも写真付きで案内しています。この記事では手順の繰り返しは最小限にとどめ、各画面と設定項目の意味、組み合わせたときの挙動に重点を置いて説明します。

アプリ管理画面の構成

アプリの管理画面は「設定」の 1 画面だけです。商品や予約のような「データ」を登録する場所はなく、ここで行うのはブロックをテーマへ追加する操作と、管理画面の表示言語の切り替えだけです。写真や文字、演出の種類といった見た目の設定は、すべてテーマエディタ側で行います。

画面は上から順に、次の 4 つのカードで構成されています。

• テーマにスクロールアニメーションを追加（追加先のページとテーマを選ぶカード）
• 自動追加がうまくいかなかったときの注意書き
• 複数のレイアウトを組み合わせて使えることの案内
• 言語設定

各画面の説明

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

ブロックをテーマへ入れるための入口です。ここで選んだ内容をもとに、テーマエディタを「ブロックが追加された状態」で開いてくれます。

設定項目は 2 つ、ボタンは 2 つです。

• 追加先のページ … ブロックを置くページの種類を「トップページ」「商品ページ」「コレクションページ」「固定ページ」の 4 つから選びます。初期値はトップページです。
• テーマを選択 … 追加先のテーマを選びます。公開中のテーマには「（公開中のテーマ）」と付き、最初から選ばれています。一覧に出てくるのは公開中または未公開で、処理中ではないテーマだけです。
• テーマに追加 … 新しいタブでテーマエディタが開き、選んだページに新しいアプリセクションとしてブロックが 1 つ追加された状態になります。右上の「保存」を押すまではストアに反映されません。
• テーマをプレビュー … 選んだテーマでストアがどう見えるかを新しいタブで確認できます。保存前の確認に使います。

1 回の「テーマに追加」で入るのは 1 ブロックです。同じページに 2 つ目、3 つ目を置きたいときは、テーマエディタの「セクションを追加」から手動で追加します。商品ページを選んだ場合は「商品ページのテンプレート」に入るので、そのテンプレートを使っているすべての商品に同じブロックが表示されます。特定の商品だけに出したいときは、テーマ側で別のテンプレートを作ってから、そのテンプレートを開いて手動で追加してください。

テーマの選択欄が空になるのは、テーマのバージョンや状態によっては起こりうることです。その場合も手動での追加は問題なくできます。

自動追加がうまくいかないときの注意書き

テーマ追加カードのすぐ下には、黄色いアイコン付きの注意書きがあります。「テーマに追加」を押してもブロックが入らなかった場合は、画面右下のご利用ガイドを見て手動で追加してください、という案内です。

自動追加は Shopify が用意している「テーマエディタを特定の状態で開くリンク」を使っています。テーマによってはこのリンクの受け口が想定と違い、エディタは開くのにブロックが入らないことがあります。アプリの不具合ではなくテーマ側の都合なので、慌てずに手動で追加すれば同じ結果になります。

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

青い帯の付いたカードは、ブロックを 1 ページに複数置けることの案内です。テーマエディタの「セクションを追加」からアプリブロックを選べば、どのページにも何個でも追加できます。

この案内は読み飛ばされがちですが、アプリを活かすうえでいちばん大事な一文でもあります。ブロック 1 つだけだと「動くバナー」で終わりますが、2 つ 3 つと重ねると、スクロールするほど次の場面が現れる「物語のあるページ」になります。

言語設定

アプリの管理画面に表示する言語を切り替えるカードです。「言語を選択」で言語を選び、「変更する」を押すと画面の表示が切り替わります。対応している言語は日本語・英語・ドイツ語・フランス語・中国語（簡体・繁体）・韓国語など 20 言語です。

ここで変わるのは管理画面の表示だけで、ストアフロントの文字は変わりません。見出しやサブテキスト、ボタンの文言はテーマエディタで入力したものがそのまま表示されます。テーマエディタのブロック設定の項目名は、Shopify 管理画面の言語設定に合わせて表示されます。海外のスタッフと一緒に運用する場合も、各自が読みやすい言語で設定できます。

テーマへの追加

自動追加を使わない場合や、ページの途中に差し込みたい場合は、テーマエディタから直接追加します。Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」と進み、上部のページ切り替えで目的のページを表示します。左のセクション一覧で「セクションを追加」を押し、「アプリ」タブに切り替えると、アプリのブロックが表示されます。

注意してほしいのは、このアプリが「アプリ埋め込み」ではないことです。テーマエディタ左側の「アプリ埋め込み」パネルを開いても、このアプリは出てきません。必ず「セクションを追加」の「アプリ」タブから選んでください。

追加したブロックはセクション一覧に並び、プレビューにもすぐ表示されます。一覧の行をドラッグすれば、ページ内の好きな位置へ移動できます。

Horizon のように、セクションの中にブロックを入れられるテーマでは、既存のセクションの中にこのブロックを複数並べることもできます。下の画面は、1 つのセクションの中にブロックを 5 つ並べた構成です。ブロックごとに別の写真・別の演出を割り当てています。

ストアフロントの見た目を変える

ブロックを選ぶと、テーマエディタの左側に設定パネルが開きます。設定は「メディア設定」「演出設定」「テキスト設定」「レイアウト設定」「リンク設定」「追加設定」の 6 グループで、全部で 32 項目あります。

ひとつ覚えておいてほしいのは、別の設定の値によって表示・非表示が切り替わる項目が 11 個あることです。たとえば動画まわりの設定は、メディアの種類を「動画」にするまで現れません。「説明にあった項目が見当たらない」というときは、たいていこの出し分けで隠れています。各項目の説明に表示条件も添えたので、見当たらないときは条件を確認してください。

メディア設定

ブロックに表示する写真や動画を決めるグループです。全部で 10 項目あります。

• メディアの種類（初期値: 画像）… 画像を出すか、動画を出すかを決めます。ここで選んだほうの設定だけがパネルに表示されます。
• 画像（初期値: 未設定）… ストアにアップロード済みの画像から選びます。メディアの種類が「画像」のときだけ表示されます。未設定のままでも、ブロックの枠は Shopify 標準のプレースホルダー画像で保たれるので、レイアウトが崩れることはありません。
• 動画（アップロード）（初期値: 未設定）… Shopify にアップロードした動画ファイルを選びます。メディアの種類が「動画」のときに表示されます。
• 動画 URL（YouTube / Vimeo）（初期値: 未設定）… YouTube か Vimeo の動画 URL を貼り付けます。アップロード動画と同じく、メディアの種類が「動画」のときに表示されます。
• 動画のポスター画像（初期値: 未設定）… 動画を読み込んでいる間に表示する静止画です。設定しておくと、回線が遅いときでも真っ黒な枠が見えません。
• 自動再生（初期値: オン）… ページを開いたときに動画を自動で再生します。
• ミュート（初期値: オン）… 音を消して再生します。自動再生がオフのときだけ表示されます。ブラウザは音の出る動画の自動再生を許可しないため、自動再生がオンなら常にミュートで再生され、この項目は出てきません。
• ループ再生（初期値: オン）… 動画を最後まで再生したら最初に戻って繰り返します。
• コントロールを表示（初期値: オフ）… 再生バーや音量などの操作パネルを表示します。背景として流したいときはオフのまま、商品の使い方動画のように見てもらいたいときはオンにします。
• 画像の見せたい位置（初期値: 中央）… 枠に合わせて写真の一部が切り取られるとき、どこを優先して残すかを 9 方向（左上・上中央・右上・左中央・中央・右中央・左下・下中央・右下）から選びます。

メディアの種類を「動画」に切り替えると、上の画面のように動画用の項目がまとめて現れ、画像の欄は消えます。このとき自動再生がオンなので、ミュートの項目は表示されていません。

YouTube や Vimeo の動画は、ストアの中に埋め込みプレーヤーとして表示されます。自動再生・ミュート・ループ・コントロールの設定はプレーヤーにも引き継がれるので、アップロード動画と同じ感覚で使えます。ただし「画像の見せたい位置」は外部動画には効きません。埋め込みプレーヤーは、写真のように中身の位置を指定して切り取る仕組みを持たないためです。

「画像の見せたい位置」は、写真が枠に合わせて切り取られているときにだけ効きます。上の画面のブロックはレイアウト設定の「メディアの合わせ方」が「画像の比率に合わせる」になっているので、写真はそもそも切り取られておらず、右中央に変えても見た目は変わりません。人物が写真の端に写っている、商品が下のほうに置かれている、といった写真で、高さを指定して切り取るときに使ってください。

演出設定

スクロールしたときの動き方を決めるグループです。全部で 5 項目あります。

• アニメーションの種類（初期値: 中央から広がる）… 4 種類の演出から選びます。ブランドの雰囲気に合わせて選んでください。
• 演出の強さ（初期値: 0.6 / 0〜1 を 0.1 刻み）… 演出のかかり具合です。数字を上げるほど、動きや変化が大きくなります。
• 再生時間（秒）（初期値: 1.3 秒 / 0.2〜3 秒）… 演出が始まってから終わるまでの時間です。長くするとゆったりとした印象になります。アニメーションの種類が「背景固定（パララックス）」のときは表示されません。
• 開始遅延（秒）（初期値: 0 秒 / 0〜2 秒）… ブロックが画面に入ってから演出が始まるまでの待ち時間です。
• イージング（初期値: 終わりにかけて減速）… 動きの加速・減速のしかたを「標準」「終わりにかけて減速」「緩急をつける」「なめらか」から選びます。

演出の強さは 4 種類すべてに効きます。演出ごとの意味は次のとおりです。

• 中央から広がる … 最初に見えている円の小ささが変わります。1.0 にすると、ほぼ点の状態から広がり始めます
• 真っ暗から明るく … 最初の暗さが変わります。1.0 なら真っ暗から、0.3 なら少し暗い程度から始まります
• 透明から色がつく … 最初のモノクロの度合いが変わります。1.0 なら完全なグレーから色が戻ります
• 背景固定（パララックス） … スクロールしたときに写真が動く量が変わります

3 枚目の画面を見ると、パララックスに切り替えた時点で「再生時間（秒）」の欄が消えているのが分かります。パララックスは「スクロールした分だけ動く」演出で、時間で再生するものではないためです。同じ理由で、レイアウト設定の「メディアの合わせ方」もパララックスでは表示されず、常に枠に合わせて切り取る表示になります。パララックスは写真を少し拡大し、その余白の中で写真を動かしているので、比率ぴったりに合わせると動いたぶんだけ上下に隙間が出てしまうからです。以前に「画像の比率に合わせる」を選んでからパララックスへ切り替えた場合も、表示のうえでは自動的に切り取り表示へ戻ります。

見出し・サブテキスト・ボタンは、写真とは別に少しずつ時間差をつけて現れます。見出し、サブテキスト、ボタンの順に 0.1 秒ずつずらしているため、3 つが同時にぱっと出るよりも、読む順番に沿って目が動きます。開始遅延を設定した場合は、この時間差もまとめて後ろへずれます。

イージングの違いは文字では伝わりにくいので、迷ったら次の目安で選んでください。

• 標準 … 軽快で、少しだけ動き出しがなめらかになります
• 終わりにかけて減速 … 最初に大きく動き、最後にゆっくり止まります。迷ったらこれ
• 緩急をつける … 始まりと終わりがゆっくりで、真ん中が速くなります
• なめらか … 最も落ち着いた動きで、高級感を出したいブランド向きです

テキスト設定

写真の上に重ねる文字を決めるグループで、全部で 11 項目あります。

• 見出し（初期値: 空欄）… 写真の上に大きく重ねる文字です。空欄のままなら見出しは表示されません。
• 見出しの文字の大きさ（初期値: 40px / 16〜96px）… 見出しのサイズです。
• 見出しの文字の色（初期値: #ffffff）… 写真の上に置くことを想定して、初期値は白です。
• 見出しの文字の太さ（初期値: 太字）… 「標準」「中太」「太字」から選びます。
• サブテキスト（初期値: 空欄）… 見出しの下に置く説明文です。改行すれば複数行にできます。
• サブテキストの文字の大きさ（初期値: 18px / 12〜48px）… サブテキストのサイズです。
• サブテキストの文字の色（初期値: #ffffff）… サブテキストの色です。
• サブテキストの文字の太さ（初期値: 標準）… 見出しと同じく 3 段階から選びます。
• 文字に影をつける（初期値: オン）… 文字に影をつけ、明るい写真の上でも読みやすくします。
• テキストの配置（初期値: 左下）… 見出しとサブテキストを置く位置を 9 方向から選びます。
• 暗幕の濃さ（初期値: 0.2 / 0〜0.8）… 写真の上にかける黒い幕の濃さです。上げるほど写真が暗くなり、文字が浮き上がります。

見出しの大きさは PC で見たときの値です。スマートフォン（画面幅 749px 以下）では、ブロックからはみ出さないように見出しとサブテキストが自動で縮小されます。PC で 80px の大きな見出しにしても、スマートフォンで先頭が切れてしまうことはありません。とはいえ文字数が多い見出しは改行が増えるので、テーマエディタ右上のアイコンからモバイル表示に切り替えて、一度は確認しておくと安心です。

テキストの配置を変えると、暗幕のかかり方も変わります。文字を上側か下側に寄せたときは、文字のある側だけが濃くなるグラデーションの暗幕になり、写真の反対側は明るいまま残ります。中央に置いたときは、写真全体に均一な暗幕がかかります。中央に置いた文字のまわりだけを明るく抜くと、白い文字が背景に溶けて読みにくくなるためです。

左上に置いた画面と右下に置いた画面を比べると、文字の揃え方も配置に合わせて変わっているのが分かります。右側に置いたときは右揃え、中央なら中央揃えになるので、配置を変えるたびに揃え方を調整し直す必要はありません。スノーボーダーのように被写体が画面の片側にいる写真なら、反対側に文字を寄せると、人物と文字が重ならずに両方がしっかり見えます。

サブテキストの行間は、詰まって見えないよう広めにとっています。1 行の長さも読みやすい範囲に抑えているので、横長の画面でも文章が端から端まで伸びて読みにくくなることはありません。

レイアウト設定

ブロックの大きさと、写真の収め方を決めるグループです。全部で 3 項目あります。

• メディアの合わせ方（初期値: 高さに合わせて切り取る）… 「高さに合わせて切り取る」と「画像の比率に合わせる（高さは自動）」から選びます。パララックスを選んでいる間は、この項目自体がパネルに出てきません。
• 高さ（vh）（初期値: 80vh / 30〜200vh を 5 刻み）… ブロックの高さを画面の高さに対する割合で指定します。100 でちょうど画面 1 つ分です。「画像の比率に合わせる」を選んでいるときは表示されません（パララックスでは常に表示されます）。
• 横幅（初期値: フル幅）… 「フル幅」と「コンテナ幅」から選びます。

「高さに合わせて切り取る」は、高さを先に決めて、はみ出した部分を切り取る方式です。全画面のヒーロー画像のように、ブロックの高さを揃えたいときに向いています。切り取られる位置は、メディア設定の「画像の見せたい位置」で調整します。

「画像の比率に合わせる」は、写真の縦横比をそのまま保ち、高さは横幅から自動で決まる方式です。商品写真のように、一部でも切れると困る写真に向いています。高さを決められないので、高さ（vh）の項目は画面から消えます。高さを変えたのに見た目が変わらないときは、たいていこちらが選ばれています。

切り取り表示では、表示される大きさに合わせて十分な解像度の画像が読み込まれます。縦に長いブロックでは横幅以上の解像度が必要になるため、その分も計算に入れて画像を選んでいます。大きな写真を置いても、表示サイズに対して粗く見えることはありません。

横幅の「フル幅」は「置かれた場所の幅いっぱい」という意味です。テーマがセクションを本文幅の中に置く作りなら、フル幅を選んでも本文幅までしか広がりません。逆に、上の画面のようにセクション自体が全幅になっている場合は、コンテナ幅を選んでもプレビューの見た目がほとんど変わらないことがあります。画面の端まで写真を広げたいときは、ブロックを入れているセクションの「幅」の設定もあわせて確認してください。

リンク設定

ブロックを押したときの遷移先を決めるグループです。全部で 2 項目あります。

• リンク先 URL（初期値: 空欄）… ブロックを押したときに移動するページです。商品・コレクション・固定ページなどをストア内から検索して選ぶこともできます。
• ボタンの文言（初期値: 空欄）… 写真の上に表示するボタンの文字です。リンク先 URL を設定したときだけ表示されます。

リンク先 URL だけを設定すると、ブロック全体がリンクになります。写真のどこを押してもリンク先へ移動しますが、見た目にはボタンがないので、押せることに気づかれにくくなります。「新作を見る」「詳しくはこちら」のように行き先が伝わる文言をボタンの文言に入れると、見出しの下にボタンが表示されます。

ボタンの文言だけを入れて、リンク先 URL を空欄にした場合、ボタンは表示されません。押しても何も起こらない飾りのボタンを置かないための仕様です。先ほどの 2 つ目のブロックの画面がまさにこの状態で、リンク先が空欄なのでボタンが出ていません。

追加設定

設定項目にない見た目を CSS で調整するためのグループです。項目は 1 つです。

• 追加のCSS（初期値: 空欄）… 独自の CSS を追記して、細かな見た目を調整できます。ブラウザの検証機能でクラス名を確認してから上書きしてください。

ここに書いた CSS は、自動的にそのブロックだけに効くよう囲まれて出力されます。たとえば次のように書くと、このブロックの見出しだけが大きくなり、同じページにある別のブロックや、テーマのほかの見出しには影響しません。

.ur-sa__heading { font-size: 90px; letter-spacing: 0.04em; }
.ur-sa__media-wrap { border-radius: 16px; }

1 行目は見出しの文字の大きさと字間を変える指定、2 行目は写真の枠の角を丸める指定です。角丸は、外側の要素ではなく写真を切り抜いている内側の枠（.ur-sa__media-wrap）に指定するのがポイントです。外側を丸めても、写真自体は四角いまま残ります。

安全のため、入力した CSS から < の文字だけは取り除かれます。そのため @media (width < 600px) のような新しい書き方は使えません。画面幅で切り替えたいときは @media (max-width: 599px) のように従来の書き方を使ってください。

スマートフォンでの見え方

テーマエディタ右上のスマートフォンのアイコンを押すと、プレビューがモバイル表示に切り替わります。ブロックの設定は PC とスマートフォンで共通なので、PC で作った見た目がスマートフォンでも崩れていないかをここで確かめます。

スマートフォンでは画面の縦横比が PC と逆になるため、横長の写真を「高さに合わせて切り取る」で表示すると、左右が大きく切り取られます。被写体が中央にない写真では、画像の見せたい位置で残す側を指定しておくと、スマートフォンでも主役が画面に残ります。

演出がきちんと再生される仕組み

画面には出てこない部分ですが、安心して使っていただくために、演出の再生タイミングについても触れておきます。

演出は、ブロックの 2 割ほどが画面に入ったときに始まります。画面の下端ぎりぎりで始めると、お客様が演出の始まりを見逃してしまうので、少し画面の中に入ってから始めています。

難しいのは、ブロックがページの最後のほうにあり、その下に高いフッターがある場合です。このときページを一番下までスクロールしても、ブロックの 2 割が画面に入らないことがあります。さらに、ページの一番下でリロードした、フッターへのリンクで飛んできた、End キーで一気に最下部へ移動した、といった操作では、ブロックの途中を通過せずに着地します。単純に「2 割入ったら再生」とだけ判定していると、ブロックが透明のまま永久に表示されないという事態が起こります。

このアプリでは「ブロックがすでに画面の上へ通り過ぎている」場合も再生の条件に含めているので、どんな経路でたどり着いても、ブロックが消えたままになることはありません。テーマエディタでは選んだブロックを自動で画面内へ送るため、この問題は再現しにくく、実際のストアでだけ起きがちです。自作する場合にいちばん見落としやすいところなので、次の章でも取り上げます。

コードで自作する場合

アプリを使わずに、テーマのコードへ直接スクロール演出を書き足すこともできます。ここでは「透明から色がつく」に近い演出を、セクションファイル 1 つで作る例を紹介します。

まずはセクションの本体です。テーマのコード編集画面で sections フォルダに scroll-reveal.liquid を新規作成し、次の内容を貼り付けます。画像と見出しを設定できるだけの最小構成です。

<div class="sr-block" data-sr>
  {%- if section.settings.image -%}
    {{ section.settings.image | image_url: width: 2000 | image_tag: class: 'sr-media', loading: 'lazy' }}
  {%- endif -%}
  <h2 class="sr-heading">{{ section.settings.heading }}</h2>
</div>

{% schema %}
{
  "name": "Scroll reveal",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "画像" },
    { "type": "text", "id": "heading", "label": "見出し" }
  ],
  "presets": [{ "name": "Scroll reveal" }]
}
{% endschema %}

data-sr という目印を付けた要素を、後で JavaScript から探します。presets を書いておくと、テーマエディタの「セクションを追加」に表示されるようになります。

次に見た目です。最初はモノクロかつ透明にしておき、is-visible というクラスが付いたら色と不透明度を戻すようにします。同じファイルの末尾に追記します。

{% style %}
  .sr-block { position: relative; overflow: hidden; height: 80vh; }
  .sr-media { width: 100%; height: 100%; object-fit: cover;
    opacity: 0; filter: grayscale(1); transition: opacity 1.2s ease-out, filter 1.2s ease-out; }
  .sr-block.is-visible .sr-media { opacity: 1; filter: grayscale(0); }
  .sr-heading { position: absolute; left: 5%; bottom: 10%; color: #fff; }
{% endstyle %}

transition に書いた 1.2 秒が、このアプリでいう「再生時間」にあたります。ease-out は「終わりにかけて減速」と同じ動きです。

最後に、画面に入ったらクラスを付ける JavaScript です。これも同じファイルの末尾に置きます。

<script>
  (function () {
    var els = document.querySelectorAll('[data-sr]:not(.is-visible)');
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        var passed = e.boundingClientRect.top < 0;
        if (e.intersectionRatio >= 0.2 || (e.isIntersecting && passed)) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: [0, 0.2] });
    els.forEach(function (el) { io.observe(el); });
  })();
</script>

IntersectionObserver は、要素が画面に入ったかどうかをブラウザが教えてくれる仕組みです。ポイントは 2 つあります。1 つは threshold に 0 を含めていることで、これがないと 2 割に届かずに止まった場合にコールバックが一度も呼ばれません。もう 1 つは、上端が画面より上に出ている（passed）場合も表示する条件に入れていることです。前の章で説明した「ページ最下部に着地するとブロックが消えたままになる」問題を、この 2 点で防いでいます。

ここまでで、写真 1 枚と見出しを持つ「透明から色がつく」演出が動くようになります。ただ、アプリと同じところまで仕上げるには、さらに次の作業が必要です。

• 演出の種類を増やす（円形に広がる clip-path、明るさの filter、スクロール量に応じたパララックスの移動）
• 演出の強さ・再生時間・遅延・イージングを、テーマエディタから変えられるよう設定項目にする
• 動画（アップロード・YouTube・Vimeo）に対応し、自動再生やミュートを外部プレーヤーの引数にも渡す
• 文字の配置 9 方向、暗幕のグラデーション、二段構えの影、スマートフォンでの文字の縮小
• テーマエディタでブロックを追加・削除したときに、再初期化と後片付けをする
• テーマの更新時に、書き足した部分を新しいテーマへ移し替える

とくに最後の作業は、一度きりでは終わりません。テーマを新しいバージョンに上げるたびに、自作したセクションを移し替えて動作を確かめ直す必要があります。社内にコードを書ける人がいて、演出を 1 種類だけ使えれば十分な場合は自作も選択肢になりますが、複数の演出を試しながらページを作り込みたい場合は、アプリのほうが手間と保守の負担を大きく減らせます。

ページビルダー型アプリやテーマ標準セクションとの使い分け

スクロール演出を加える手段は、このアプリのほかにもあります。Shogun や PagePilot のようにページ全体を組み立てるビルダー型のアプリ、Scroll Studio のように演出に特化したアプリ、そしてテーマ自身が持つヒーローやスライドショーのセクションです。ここでは比較表を作るのではなく、このアプリと併用するときの組み立て方と、どちらを先に入れるべきかの判断材料をまとめます。

テーマ標準のヒーローセクションと組み合わせる

多くのテーマは、ページの最上部に置く「ヒーロー」や「画像バナー」のセクションを標準で持っています。いちばん無理のない組み合わせは、ファーストビューはテーマ標準のヒーローに任せ、その下からこのアプリのブロックを並べる構成です。

手順は次のとおりです。

1. テーマエディタでトップページを開き、テーマ標準のヒーローセクションで最初の 1 枚を作ります
2. 「セクションを追加」の「アプリ」タブから、このアプリのブロックをヒーローの下に追加します
3. 1 つ目のブロックは「透明から色がつく」か「真っ暗から明るく」にし、演出の強さを 0.4〜0.6 に抑えます
4. 2 つ目以降のブロックで「背景固定（パララックス）」を使い、ページの中ほどに見せ場を作ります

ファーストビューは、ページを開いた瞬間に表示されるべき場所です。そこへ時間をかけて現れる演出を置くと、お客様は一瞬何もない画面を見ることになります。演出のブロックはスクロールした先に置き、「読み進めると何かが起きる」ページにすると、このアプリの持ち味が活きます。

ページビルダー型アプリと併用する

ビルダー型のアプリで LP を作っている場合、そのアプリが作るページの中には、テーマのアプリブロックを置けないことがよくあります。その場合は、ページごとに役割を分けて使います。

• キャンペーン用の LP … ビルダー型アプリで作り込む
• トップページ・商品ページ・コレクションページ・固定ページ … テーマのテンプレートにこのアプリのブロックを置く

商品ページは、多くのストアでテーマの商品テンプレートを使っています。商品説明の途中にこのアプリのブロックを差し込めば、ビルダーで商品ページを作り直さなくても、こだわりを伝える場面を追加できます。商品ページで使うときは、演出の強さを控えめにし、横幅をコンテナ幅にして、商品写真よりも目立ちすぎないようにするのがコツです。

どちらを先に入れるか

判断の目安は、「作りたいのが 1 ページ丸ごとか、既存のページへの 1 場面か」です。

• 新しい LP を一から作る予定があるなら、先にビルダー型アプリを検討します
• いまのテーマのデザインを気に入っていて、そこへ動きを足したいだけなら、このアプリから始めます
• 両方必要になった場合も、テーマのテンプレートとビルダーのページで置き場所が分かれるので、設定がぶつかることはありません

このアプリはテーマのブロックとして動くため、テーマのフォントや配色、ヘッダー・フッターをそのまま引き継ぎます。ストアの雰囲気を変えずに、場面を 1 つずつ増やしていけるのが、ほかの手段にはない使いやすさです。

まとめ

「シンプルパララックス｜お手軽スクロールアニメーション」は、テーマのコードに触れずに、スクロールに連動した演出をストアの好きなページへ追加できるアプリです。

• 4 種類の演出から選び、強さ・時間・遅延・イージングで動きを調整できます
• 画像・アップロード動画・YouTube・Vimeo を、文字とボタン付きで表示できます
• 写真の切り取り方、文字の配置と暗幕、スマートフォンでの縮小まで、写真の上に文字を置くときに起こりがちな問題を設定と仕組みの両方で受け止めます
• 1 ページに何個でも置けるので、スクロールするほど場面が変わる、読み物のようなページを作れます

写真 1 枚と短い見出しがあれば、今日から始められます。まずはトップページの真ん中あたりにブロックを 1 つ置き、背景固定（パララックス）を選んでスクロールしてみてください。手持ちの写真が、ストアの見せ場に変わるはずです。

アプリの詳細と無料体験は Shopify App Store から、設定の手順は公式のご利用ガイド「Shopifyでスクロールアニメーションやパララックスを表示できるアプリについて徹底解説｜ご利用ガイド」からご覧いただけます。

おすすめ Shopify アプリ

UnReact では、ストアの見た目を手軽に整えるアプリをほかにも提供しています。スクロール演出と組み合わせやすいものを紹介します。

シンプルスライドショー｜お手軽画像スライダー

複数の写真を自動で切り替えて見せたいときのアプリです。ファーストビューにスライドショーを置き、その下にスクロール演出のブロックを並べると、動きの種類が重ならずにページにメリハリが出ます。

シンプルスライドショー｜お手軽画像スライダー

シンプル動画埋め込み｜お手軽どこでも動画挿入

動画を演出なしで、ページの好きな場所へそのまま埋め込みたいときに向いています。商品の使い方動画のように、最初から最後まで見てほしい動画はこちら、雰囲気づくりの背景動画はスクロール演出のブロック、と使い分けられます。

シンプル動画埋め込み｜お手軽どこでも動画挿入

シンプル読み込み中表示｜お手軽ローディングアニメーション

ページの読み込み中にアニメーションを表示するアプリです。ページを開いた瞬間の待ち時間と、スクロールしたときの演出の両方に動きを持たせると、ストア全体に統一感のある体験を作れます。

シンプル読み込み中表示｜お手軽ローディングアニメーション

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

写真と短い説明文をカード状に並べ、横にスライドして見せるアプリです。スクロール演出のブロックで世界観を伝えたあと、カードカルーセルで具体的な商品やキャンペーンへつなぐ流れが作れます。

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