{"product_id":"back-to-top","title":"トップへ戻るボタン — 長いページでも離脱させない直感操作","description":"\u003ch2\u003e\u003cstrong\u003e長いページの最後まで読んだ訪問者を、迷わせずにもう一度トップへ——静かに効く回遊導線\u003c\/strong\u003e\u003c\/h2\u003e\n\n\u003cp\u003e\n  商品詳細、LP、ブログ記事——ページが縦に長くなるほど、訪問者は「戻るのが面倒」で離脱します。\u003cbr\u003e\n  画面の隅に小さく浮かぶ\"ページトップへ戻る\"ボタンがあるだけで、その一手間がゼロになり、他商品や関連情報への回遊が自然に続いていきます。\u003cbr\u003e\n  地味な存在ながら、ページ下部での離脱率・回遊率に確実に効くUIです。\n\u003c\/p\u003e\n\u003cp\u003e\n  このセクションは、表示位置・形状・色・アイコン・テキストまでテーマエディタから自由にカスタマイズできます。\u003cbr\u003e\n  設定したスクロール量を超えたときだけフェードイン表示、クリックでなめらかにトップへ戻る——訪問者の視界をさりげなく支える動きを標準装備。\u003cbr\u003e\n  テーマに直接組み込む形式なので、\u003cstrong\u003e外部アプリの月額費用がかからず\u003c\/strong\u003e、外部スクリプト読み込みによるページ表示速度への影響もありません。\n\u003c\/p\u003e\n\n\u003ch2\u003e\u003cstrong\u003e主な機能・特徴\u003c\/strong\u003e\u003c\/h2\u003e\n\n\u003ch3\u003e📍 表示位置を3パターンから選択\u003c\/h3\u003e\n\u003cp\u003e\n  右下・左下・下中央の3パターンから選択可能。\u003cbr\u003e\n  画面端からの距離（左右・下）もPC／モバイル個別にpx単位で細かく調整できるので、既存のチャットボタンやカートアイコンと干渉しない位置に配置できます。\n\u003c\/p\u003e\n\n\u003ch3\u003e🎯 スクロール量に応じた自動表示\u003c\/h3\u003e\n\u003cp\u003e\n  ページを開いた直後はボタンを隠し、指定したスクロール量（0〜2000px）を超えたタイミングでフェードイン表示。\u003cbr\u003e\n  ファーストビューの邪魔をせず、必要な場面でだけ静かに現れます。\n\u003c\/p\u003e\n\n\u003ch3\u003e🖱️ なめらかスクロールと瞬間移動を切替\u003c\/h3\u003e\n\u003cp\u003e\n  クリック時のスクロール動作を「なめらか」「即座に移動」から選択可能。\u003cbr\u003e\n  アクセシビリティ配慮として「モーション低減」設定のユーザーには自動で即時スクロールに切り替わります（prefers-reduced-motion対応）。\n\u003c\/p\u003e\n\n\u003ch3\u003e🎨 アイコン4種類＋テキスト併用に対応\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eアイコン：上向き矢印 \/ 山型 \/ 三角形 \/ 二重山型 \/ なし\u003c\/li\u003e\n  \u003cli\u003eボタンテキスト：空欄でアイコンのみ、「TOP」など任意の文字列を追加可能\u003c\/li\u003e\n  \u003cli\u003eテキストの太さ：標準 \/ 太字\u003c\/li\u003e\n  \u003cli\u003e読み上げ用 aria-label も自由に設定可能\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003e🟠 形状・サイズ・色の細やかなカスタマイズ（28の設定項目）\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e形状：円形 \/ 角丸（半径0〜30px） \/ 四角\u003c\/li\u003e\n  \u003cli\u003eボタンサイズ：PC 32〜100px \/ モバイル 32〜80px（個別設定）\u003c\/li\u003e\n  \u003cli\u003eアイコンサイズ・文字サイズもPC／モバイル個別に調整\u003c\/li\u003e\n  \u003cli\u003e背景色・アイコン／テキスト色・ホバー時の色をそれぞれ設定\u003c\/li\u003e\n  \u003cli\u003e枠線（0〜6px）・影の有無も切替可能\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003e📱 PC \/ モバイル別の表示切替\u003c\/h3\u003e\n\u003cp\u003e\n  PCのみ・モバイルのみ表示するといった切替にも対応。\u003cbr\u003e\n  デバイスごとに最適なUXを設計できます。\n\u003c\/p\u003e\n\n\u003ch3\u003e♿ アクセシビリティ配慮\u003c\/h3\u003e\n\u003cp\u003e\n  キーボード操作時のフォーカスリング表示、スクリーンリーダー向けの aria-label、モーション低減設定への自動対応など、すべての訪問者が迷わず使える設計です。\n\u003c\/p\u003e\n\n\u003ch2\u003e\u003cstrong\u003e🔧 開発・検証について\u003c\/strong\u003e\u003c\/h2\u003e\n\u003cp\u003e\n  Copilifyのセクションは、Shopify Plusパートナー企業に所属する現役エンジニアが開発しています。\u003cbr\u003e\n  月商5,000万円超のECサイト構築を手がける実案件と同じ基準で、コードの品質・表示速度・テーマエディタの使いやすさまで検証済みです。\n\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003eShopify標準のLiquid・CSS・JavaScriptのみで構築し、特定テーマの専用機能に依存しない設計。Online Store 2.0対応テーマであれば基本的にご利用いただけます\u003c\/li\u003e\n  \u003cli\u003e開発・表示確認はDawn系テーマで実施。世の中すべてのテーマでの検証はできているわけではないため、ご不安な場合はご購入前にテーマ名を添えてお問い合わせください\u003c\/li\u003e\n  \u003cli\u003e設定画面はすべて日本語ラベル、導入手順は動画付きガイドでご案内\u003c\/li\u003e\n  \u003cli\u003e導入でつまずいた場合は無料サポートで解決まで対応\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"Copilify","offers":[{"title":"Default Title","offer_id":52073502474523,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0882\/3678\/5947\/files\/compressed_5e1a98ef-0165-43f1-8c13-378ab938639e.gif?v=1776477638","url":"https:\/\/copilify.com\/products\/back-to-top","provider":"Copilify","version":"1.0","type":"link"}