トップに戻るボタンウィジェット:Webサイト向け

カスタマイズ可能なトップに戻るボタンを設置して、長いページでも快適に移動できるようにしましょう。Jotformのトップに戻るボタンウィジェットでは、アイコン、サイズ、色、位置、スクロール時の表示条件、端末ごとの表示・非表示を設定し、コードを書かずにWebサイトへ埋め込めます。 

今すぐ無料で作成!
Back to Top Widget for your website Hero Background image

トップに戻るウィジェットの作成方法

Customize your button design

ボタンのデザインをカスタマイズ

ボタンのスタイル、アイコン、サイズ、色、角の丸み、画面上の位置を選べます。余白やデザインを調整して、ウェブサイトのデザインに調和させましょう。

Get the embed code

埋め込みコードを取得

Jotformが生成したそのまま使える埋め込みコードをコピーします。設定やコーディングは不要です。

Embed it on your website

ウェブサイトに埋め込む

ボタンをプレビューし、生成された埋め込みコードをコピーして、カスタムHTMLまたは埋め込みブロックに貼り付けます。ページを公開し、デスクトップとモバイルの画面でボタンをテストしましょう。

長いウェブサイトページを快適に操作

訪問者がトップに戻れるようサポート

訪問者が手動でスクロールすることなく、先頭にすばやく戻れる方法を提供します。ボタンは操作しやすい位置に表示され、クリックするとページの先頭までスムーズに移動できます。 

Help visitors return to the top

訪問者のスクロール後にボタンを表示

訪問者がどれだけページを下にスクロールしたらボタンが表示されるかを設定します。ページ上部ではボタンを非表示にし、先頭に戻りたいタイミングで表示できます。  

Show buttons after visitors scroll

ボタンをデザインに合わせる

アイコン、サイズ、色、角の丸み、余白をカスタマイズして、ウェブサイトに合うトップに戻るボタンを作成しましょう。ページのレイアウトに応じて左側または右側に配置できます。

Match buttons to your design

パソコンとスマートフォンでの表示を設定

ボタンをパソコンとスマートフォンの両方、またはどちらか一方に表示するかを選べます。端末での表示と配置の制御により、重要なページコンテンツを隠さず、小さな画面でもナビゲーションを利用しやすく保てます。

Control desktop and mobile visibility

トップに戻るをWordPressに埋め込む方法

1埋め込みコードを取得

Jotformのホームページウィジェットをカスタマイズしたら、「無料で試す」をクリックし、生成された埋め込みコードをコピーします。

2ページエディターを開く

ウィジェットを表示したいWordPressの投稿または固定ページを開き、新しいブロックを追加します。

3カスタムHTMLブロックを追加

カスタムHTMLを選択し、Jotformホームページウィジェットの埋め込みコードをHTMLフィールドに貼り付けます。

4更新して表示

更新または公開をクリックし、ページを開いて埋め込まれたウィジェットを確認します。

Jotform ホームページウィジェットが選ばれる理由

Jotformのウィジェットは、ウェブサイトをよりインタラクティブにし、コンバージョンを高めます。星評価やお客様の声を表示するスライダー、ソーシャルプルーフのポップアップ、メディア埋め込みまで、多彩なツールが利用可能です。フォームやランディングページにウィジェットを追加して、データ収集、実績や信頼性のアピール、見込み顧客の獲得を実現できます。コーディングは不要です。

コーディングなしで埋め込む

シンプルな埋め込みコードで、Jotformウィジェットをウェブサイトに追加できます。ウィジェットをカスタマイズし、見た目をプレビューして、カスタムHTMLや埋め込みブロックに対応したあらゆるページに貼り付けるだけ。開発者は一切不要です。

よりインタラクティブなページを作成

Jotform ホームページウィジェットを使って、見込み顧客の獲得、お客様のフィードバックの表示、ソーシャルプルーフの活用、メディアの埋め込み、便利なウェブページツールの追加ができます。各ウィジェットは、訪問者がウェブサイトから直接あなたのビジネスとやり取りできるようサポートします。

必要なときにサポートを受けられる

ウィジェットの設定、カスタマイズ、埋め込み、トラブルシューティングでサポートが必要な場合、Jotformのカスタマーサポートチームが24時間年中無休で対応します。必要なときにいつでもサポートを受けられるので、安心してご利用いただけます。

トップに戻るボタンの活用シーン

訪問者が長いコンテンツや商品一覧、画像、補足情報をスクロールする必要があるページにトップに戻るボタンを追加しましょう。

ブログ記事や投稿で、読者が見出し、ナビゲーション、目次に戻れるようサポートします。

商品カテゴリーページで、購入者が絞り込み機能、並べ替え、カテゴリーナビゲーションに簡単に戻れるようにします。

ランディングページ・販売ページ:で、訪問者がページ冒頭の紹介内容や主要な申し込みボタンを簡単に確認し直せるようにします。

ドキュメントページで、長いガイド、手順、参考資料のナビゲーションを簡単にします。

ポートフォリオやギャラリーページで、訪問者が多数の作品を閲覧した後、再び閲覧を始められるようサポートします。

FAQやリソースページで、訪問者が複数のセクションを閲覧した後、簡単にページの先頭へ戻れるようにします。

Jotformのフォーム作成ツールで見込み顧客を顧客へと導く

Jotformで訪問者の関心を具体的なアクションにつなげましょう。見込み顧客の獲得、決済の受付、返信の自動化ができる高機能なフォームを、すべて一か所で作成できます。送信された回答はすべてJotformインボックスに届くため、フォローアップやお気に入りのアプリとの連携も簡単です。

無料で今すぐ始める
Convert leads into customers

よくある質問 (FAQ)

  • トップに戻るボタンウィジェットとは何ですか?

    トップに戻るボタンは、訪問者をページの先頭に戻れるフローティングボタンを追加します。長い記事、商品一覧、ドキュメント、画像ギャラリーなど、スクロール量の多いページで特に役立ちます。

  • ウェブサイトにトップに戻るボタンを追加する方法は?

  • トップに戻るボタンを作成するのにコードを書く必要はありますか?

  • トップに戻るボタンのデザインをカスタマイズできますか?

  • トップに戻るボタンはいつ表示されますか?

  • ボタンの表示位置を変更できますか?

  • トップに戻るボタンはスマートフォンでも使えますか?

  • Jotformのトップに戻るボタンは無料ですか?

  • WordPressやElementorにトップに戻るボタンを追加できますか?

  • トップに戻るボタンはどのウェブサイト作成サービスに対応していますか?