商品情報にスキップ
1 2

トップへ戻るボタン — 長いページでも離脱させない直感操作

トップへ戻るボタン — 長いページでも離脱させない直感操作

通常価格 0
通常価格 セール価格 0
セール 売り切れ
(税込)

長いページの最後まで読んだ訪問者を、迷わせずにもう一度トップへ——静かに効く回遊導線

商品詳細、LP、ブログ記事——ページが縦に長くなるほど、訪問者は「戻るのが面倒」で離脱します。
画面の隅に小さく浮かぶ"ページトップへ戻る"ボタンがあるだけで、その一手間がゼロになり、他商品や関連情報への回遊が自然に続いていきます。
地味な存在ながら、ページ下部での離脱率・回遊率に確実に効くUIです。

このセクションは、表示位置・形状・色・アイコン・テキストまでテーマエディタから自由にカスタマイズできます。
設定したスクロール量を超えたときだけフェードイン表示、クリックでなめらかにトップへ戻る——訪問者の視界をさりげなく支える動きを標準装備。
テーマに直接組み込む形式なので、外部アプリの月額費用がかからず、外部スクリプト読み込みによるページ表示速度への影響もありません。

主な機能・特徴

📍 表示位置を3パターンから選択

右下・左下・下中央の3パターンから選択可能。
画面端からの距離(左右・下)もPC/モバイル個別にpx単位で細かく調整できるので、既存のチャットボタンやカートアイコンと干渉しない位置に配置できます。

🎯 スクロール量に応じた自動表示

ページを開いた直後はボタンを隠し、指定したスクロール量(0〜2000px)を超えたタイミングでフェードイン表示。
ファーストビューの邪魔をせず、必要な場面でだけ静かに現れます。

🖱️ なめらかスクロールと瞬間移動を切替

クリック時のスクロール動作を「なめらか」「即座に移動」から選択可能。
アクセシビリティ配慮として「モーション低減」設定のユーザーには自動で即時スクロールに切り替わります(prefers-reduced-motion対応)。

🎨 アイコン4種類+テキスト併用に対応

  • アイコン:上向き矢印 / 山型 / 三角形 / 二重山型 / なし
  • ボタンテキスト:空欄でアイコンのみ、「TOP」など任意の文字列を追加可能
  • テキストの太さ:標準 / 太字
  • 読み上げ用 aria-label も自由に設定可能

🟠 形状・サイズ・色の細やかなカスタマイズ(28の設定項目)

  • 形状:円形 / 角丸(半径0〜30px) / 四角
  • ボタンサイズ:PC 32〜100px / モバイル 32〜80px(個別設定)
  • アイコンサイズ・文字サイズもPC/モバイル個別に調整
  • 背景色・アイコン/テキスト色・ホバー時の色をそれぞれ設定
  • 枠線(0〜6px)・影の有無も切替可能

📱 PC / モバイル別の表示切替

PCのみ・モバイルのみ表示するといった切替にも対応。
デバイスごとに最適なUXを設計できます。

♿ アクセシビリティ配慮

キーボード操作時のフォーカスリング表示、スクリーンリーダー向けの aria-label、モーション低減設定への自動対応など、すべての訪問者が迷わず使える設計です。

🔧 開発・検証について

Copilifyのセクションは、Shopify Plusパートナー企業に所属する現役エンジニアが開発しています。
月商5,000万円超のECサイト構築を手がける実案件と同じ基準で、コードの品質・表示速度・テーマエディタの使いやすさまで検証済みです。

  • Shopify標準のLiquid・CSS・JavaScriptのみで構築し、特定テーマの専用機能に依存しない設計。Online Store 2.0対応テーマであれば基本的にご利用いただけます
  • 開発・表示確認はDawn系テーマで実施。世の中すべてのテーマでの検証はできているわけではないため、ご不安な場合はご購入前にテーマ名を添えてお問い合わせください
  • 設定画面はすべて日本語ラベル、導入手順は動画付きガイドでご案内
  • 導入でつまずいた場合は無料サポートで解決まで対応

レビュー

レビュー投稿で [10%OFF] クーポンをプレゼント

使ってみた感想を投稿いただいた方に、有料セクションで使える割引クーポンをメールでお送りします。

詳細を表示する

導入手順

導入に必要な操作

動画を見ながら順番に操作してください。

セクション名をコピー
コードを直接見る
コードをコピー
閉じる
                  コードを読み込んでいます…
                

よくある質問

Q どのテーマでも使えますか?
A

セクション機能を持つ Online Store 2.0 対応テーマ(Dawn をはじめとする現行の公式テーマ・主要有料テーマ)でご利用いただけます。開発は Dawn 系テーマで検証しています。
お使いのテーマで動作するかご不安な場合は、テーマ名を添えてお気軽にお問い合わせください。

Q コードの知識は必要ですか?
A

ご安心ください、コードの知識は一切不要です。ファイルをアップロードして、テーマエディタで操作するだけで導入できます。CSSやLiquidを触る必要はありませんので、はじめての方でも安心してお使いいただけます。

Q 複数のストアで使えますか?
A

はい、もちろんです。複数のストアでご利用いただけます。
また、構築代行をされている方は、クライアント様のストアにもお使いいただけますので、案件ごとにご活用ください。

Q セクションが改善された場合、新しいファイルを受け取れますか?
A

はい。商品ページのダウンロードは常に最新版のファイルをご提供しています。
機能改善や不具合修正があった場合も、追加費用なしで再ダウンロードいただけます。

Q 導入後にサポートは受けられますか?
A

はい、もちろんです。日本語での導入サポートをご用意しており、動画付きのガイドもございます。
「自分で操作するのはちょっと不安…」という方には、導入作業を代行させていただくことも可能ですので、どうぞお気軽にご相談ください。

Q テーマをアップデートしても使えますか?
A

はい、基本的にそのままお使いいただけます。万が一うまくいかない場合も、サポートでお手伝いしますのでご安心ください。

Q ファイルを他の人に渡したり、再販できますか?
A

ご自身が運営するストア、および構築代行先のクライアント様のストアでは自由にお使いいただけます(ストア数の制限なし)。
ファイルそのものの配布・転売・共有はご遠慮ください。