Wixで「トップに戻る」ボタンを追加する方法

あなたはインターネットで検索するとき、何を使っていますか。おそらくスマートフォンでしょう。StatCounterによると、2026年7月時点で、世界のウェブトラフィックに占めるモバイルの割合は52.57%で、デスクトップの45.93%を上回っています。しかし、モバイルでの閲覧には課題もあります。限られた画面スペースに長いページが詰め込まれてしまうことです。

先を見据えたウェブ開発者は、この問題を和らげるために「トップに戻るボタン」を活用してきました。ただ、Wixのようなサービスで自分のウェブサイトを運営している場合、ユーザビリティを高めるための重要な機能をすべて把握しているとは限りません。 

Watch on youtube

How to Add a Back-to-top Button in Wix

トップに戻るボタンの追加は、難しい作業ではありません。Wixでは、エディタの標準要素を使って手作業で作成する、Wixアプリマーケットからアプリをインストールする、無料のスマートなHTMLウィジェットを埋め込む、という3つの現実的な方法が用意されています。ここでは3つの方法すべてについて手順を順番に説明し、なぜウィジェットを使う方法が最もおすすめなのかも解説します。

方法1:Wix標準の固定ボタンを使う

Wixエディタなら、アプリもコードも使わずに、約2分でトップに戻るボタンを自分で作成できます。手順はシンプルです。矢印やアイコンの要素を追加し、ページの先頭にリンクさせ、画面に固定します。こうすると、訪問者がスクロールしてもボタンがついてくるようになります。このワークフローは、Wixのヘルプセンターでも紹介されています。

1. 要素を追加する:Wixエディタで要素を追加をクリックし、グラフィック、基本シェイプの順に開いて矢印を選択し、矢印をページにドラッグします。よりブランドらしさを出したい場合は、アイコンボタンやベクターアートでも同じように使えます。

2. ページの先頭にリンクさせる:要素を選択し、リンクアイコンをクリックしてページの上部/下部を選び、上部を選択して完了をクリックします。

3. 画面に固定する:要素を右クリックして画面に固定を選択します。位置のグリッドで右下のセルを選び、水平方向と垂直方向のオフセットのスライダーを使って、コンテンツと重ならないように微調整します。すべてのページに表示をオンにすると、サイト全体に表示されます。

これは無料で使える確実な方法ですが、大きな欠点があります。ボタンが常に表示されてしまうことです。Wixの固定要素にはスクロールのしきい値がないため、訪問者がすでにページの先頭にいても、矢印が何も指さないまま表示され続けます。Wixのドキュメントでも、固定要素は小さい画面でコンテンツに重なる可能性があると警告されています。ごちゃつきを最も避けたいのが、まさにそうした画面です。

訪問者がスクロールしたあとにだけボタンを表示させるには、Wixの開発者向け環境であるVeloでカスタムコードを書く必要があります。JavaScriptやイベントハンドラーの記述、デバッグ作業が必要になるため、多くのWixユーザーが期待していたノーコードの手軽さとはかけ離れています。

この方法を候補から外す前に、知っておきたい点が2つあります。

• モバイルでは、Wixに無料の組み込みツールがあります。モバイルエディタには、モバイルツールの中に専用の「トップに戻る」ボタンが用意されています。このボタンは、スタンダードレイアウトを使用していて、長さが1,380ピクセル以上あるページにのみ表示され、モバイルでのみ機能します。 
• Wix Studioのユーザーには、部分的な回避策があります。Wixでは、遅延付きの開始アニメーションを追加して、訪問者がスクロールを始めてから少し経ったところでボタンがフェードインするようにする方法を提案しています。 

方法2:Wixアプリマーケットの拡張機能をインストールする

ボタンが常に表示されてしまう問題を解決するために、多くのWixユーザーはアプリマーケットで「Scroll to Top」などのツールを探します。これらのアプリにはスクロール量に応じて表示を切り替える機能があり、訪問者がページを一定の距離まで進むまでボタンを非表示にできます。また、ほとんどのアプリでデスクトップとモバイルを別々に設定できます。

ただし、必要な設定が有料プランに含まれていることも少なくありません。特に目立つ2つのアプリを比較すると、次のようになります。

Tornadoのアプリでは、カスタムアイコンのアップロードやデバイス別の表示設定など、変更したくなる可能性が高い2つの機能がProプランに含まれています。PurpleBearのアプリはインストール自体は無料ですが、3日間のトライアル後は従量課金制に切り替わります。どちらも単体で見れば高額ではありません。問題は、毎月の支払い項目がもう1つ増え、サイトのすべてのページでサードパーティ製スクリプトが読み込まれることです。

1. アプリマーケットを開く:Wixエディタの左サイドバーでアプリをクリックし、アプリマーケットを見るを選択して、「scroll to top」と検索します。

2. アプリをサイトに追加する:アプリの詳細ページを開き、料金とプランのセクションで、必要な機能がプランに含まれていることを確認してから、サイトに追加をクリックします。

3. ボタンを設定する:設定を開き、スクロール量のしきい値、画面上の位置、アイコン、デバイス別のルールなどを設定します。サイトを公開したら、デスクトップのブラウザとスマートフォンの両方でボタンの動作をテストしてください。

方法3:無料のトップに戻るウィジェットを使う(おすすめ)

月額のアプリ料金やVeloのコードなしで、スクロール量に応じて表示される浮動ボタンを設置したい場合は、無料の外部埋め込みが最適です。Jotformのトップに戻るウィジェットは、まさにこの用途のために作られています。ブラウザ上でボタンを設定し、埋め込みコードをコピーしてWixのHTML要素に貼り付け、画面に固定するだけです。

1. ボタンを作成する:トップに戻るウィジェットのページを開き、新しいウェブサイトウィジェットを作成をクリックします。一般パネルで、アイコンと一緒にテキストを表示したい場合はラベルを表示をオンにします。スクロール後に表示でボタンが表示されるタイミングを設定し、スクロールアニメーションを選択します。

2. 埋め込みコードをコピーする:ウェブサイトで無料で試すをクリックし、生成されたコードをコピーします。

3. Wixに埋め込む:Wixエディタで要素を追加をクリックし、埋め込みコード、HTMLを埋め込むの順に選択します。HTML欄にコードを貼り付けて更新をクリックします。HTML要素を右クリックして画面に固定を選択し、右下の隅に配置します。サイトを公開したら、デスクトップとモバイルの両方でスクロール時の動作をテストしてください。

この方法なら、本物のスクロールしきい値、完全なデザインの自由度、そして継続的なコストゼロのすべてがそろいます。スクロール距離を自分で設定できるので、ボタンが役立つタイミングでだけ表示されます。スタイルや画面上の位置も、スタイルのないデフォルトのまま使うのではなく、自由に選べます。さらに、ボタンをデスクトップ、モバイル、またはその両方に表示するかどうかも制御できます。

移植しやすいというメリットもあります。これはWixアプリではなく埋め込みなので、同じウィジェット設定がWordPress、Shopify、カスタムHTMLを受け付けるあらゆるサイトで使えます。将来Wixから移行することになっても、ボタンはそのまま引き継げます。スクリーンショット付きの詳しい設定手順は、ガイド「ウェブサイトにトップに戻るボタンを追加する方法」をご覧ください。

ノーコードの便利なウィジェットでWixサイトをさらに強化する

トップに戻るウィジェットは、Jotformのディレクトリにある150種類以上の無料ウェブサイトウィジェットのひとつで、どのウィジェットも設定方法は同じです。ブラウザ上で設定し、埋め込みコードをコピーして、WixのHTML要素に貼り付けるだけです。アプリの月額料金も、Veloも、開発者も必要ありません。これはWixサイトにとって重要なポイントです。アプリマーケットからインストールするたびに、スクリプトが1つ増え、多くの場合は月額料金も増えていきます。ウィジェットなら、そのどちらもなしで本格的な機能を追加できます。それが、サイトの速さを保てるかどうかの分かれ目になります。

スクロールの長いサイトで、トップに戻るボタンと組み合わせるのにおすすめのウィジェットをいくつかご紹介します。

• アクセシビリティウィジェット:訪問者がコントラスト、文字サイズ、間隔、動きを調整でき、その設定を記憶してくれます。
• FAQウィジェット:検索可能なアコーディオン形式で、長いサポートコンテンツをコンパクトにまとめられます。
• カウントダウンタイマー:ローンチ、セール、イベント登録のページなど、緊急感が行動を後押しする場面で役立ちます。
• ポップアップウィジェット:ニュースレター登録、お知らせ、離脱時のオファーに最適で、専用のポップアップアプリをインストールする必要はありません。
• QRコードウィジェット:レストランのメニュー、イベントのチェックイン、訪問者にアクセスしてほしいあらゆるコンテンツに便利です。

サイトをまだ構築中の場合は、サイト構成、テンプレート、デザインの選び方を解説したWixサイトの作り方ガイドもご覧ください。また、リード獲得、予約、支払いの受け付けを始める準備ができたら、JotformとWixの連携を使えば、先ほど使ったHTMLを埋め込む要素と同じ方法で、完全にカスタマイズしたフォームを埋め込めます。

Jotformの無料ウィジェットディレクトリで、パフォーマンスを損なうことなくWixサイトに追加できるその他のウィジェットもぜひチェックしてみてください。