--- title: "スライダー形式のマルチステップフォームを作成する方法" date: 2021-11-18 modified: 2026-02-25 canonical_id: multi-step-form locale_slug: multi-step-form author: "osogovo" category: - blog - feedback - surveys summary: "わずか数クリックで、どんなWebサイトにもマルチステップフォームを作成する方法を解説します。コーディングの知識は一切不要です。" draft: false seo: og_image: "https://embedsocial.com/wp-content/uploads/2021/09/multi-step-form.jpg" og_image_alt: "マルチステップフォーム" og_image_width: 920 og_image_height: 480 title: "スライダー形式のマルチステップフォームを作成する方法" description: "わずか数クリックで、どんなWebサイトにもマルチステップフォームを作成する方法を解説します。コーディングの知識は一切不要です。" structured_data: article --- > **重要なお知らせ：** 現在この方法はご利用いただけません。新しいフォームビルダーを開発中で、近日中に公開予定です。詳細については、当社のカスタマーサクセスチームまでお問い合わせください。 詳細に入る前に、まずはスライダーレイアウトのマルチステップフォームとは何かを説明しましょう。 > 「私たちは **Slider** という新しいフォーマットを開発しました。これは縦長の長いフォームをマルチステップフォームへと変換するもので、フォームをよりインタラクティブにし、見た目をすっきり短くし、あらゆるランディングページに自然に溶け込ませることを主な目的としています」 > > Kate Bojkov、プロダクトオーナー マルチステップフォームの目的は、長いフォームを分割し、各質問を個別に表示できるようにすることです。ユーザーは「次へ」ボタンをクリックして質問を進めていき、「戻る」ボタンをクリックすれば前の質問に戻ることができます。このような質問表示の方法は、論理的な順序で情報を収集するのに役立ち、ユーザーの集中力を高め、現代的なWebサイトのレイアウトにもよく馴染みます。 Webサイトにマルチステップフォームを手早く簡単に作成して埋め込む方法をお探しの方のために、その手順を詳しいチュートリアルにまとめました。 まず、無料トライアルで EmbedSocial アカウントを作成し（まだアカウントをお持ちでない場合）、次の手順に従ってください。 1. フォームのページに移動します 2. 既存のフォームを選ぶか、新しいフォームを作成します 3. 左側のサイドバーで **Layout & Themes** をクリックし、**Slider** を選択します 4. **Save** をクリックし、**Publish** します フォームのリンクを共有すれば、ユーザーがスライダーフォームにアクセスできるようになります。また、インタラクティブな[フォームウィジェット](/ja/blog/form-widgets/)としてフォームを埋め込むこともできます。 ウィジェットを作成するには、次の手順に従ってください。 1. **Widgets** をクリックし、フォームの表示方法を選びます。inline section、floater、button、banner から選択できます 2. **Save** をクリックし、ウィジェットコードをコピーします 3. フォームを表示したいWebサイトの該当箇所にコードを貼り付けます これで完了です。さらに詳しいステップバイステップのチュートリアルは、以下の動画でご覧いただけます。 ご覧のとおり、フォーム全体を自分で一から作成する必要はありません。さらに、フォームのデザインをWebサイトのフロントエンドに完全に合わせたい場合は、EmbedForms のカスタムCSSオプションを使えば、例えばフォントを変更することもできます。その他のカスタマイズオプションを使って、送信ボタンの文言を変更したり、ロゴやレイアウトを追加したりすることも可能です。 **こちらがスライダーレイアウトのフォームのデモです：** このフォームは、チェックアウトページでもホームページでも、あらゆるランディングページに埋め込むことができ、WordPress、Duda、Wix といったどのWebビルダーで作られたサイトにも対応します。 しかもプラグインは一切不要です。 ## マルチステップフォームのベストプラクティス 「Testing 2-Step vs. 1-Step Conversion Forms（2ステップと1ステップのコンバージョンフォームの比較検証）」という調査によると、複数のステップに分かれたフォームは、1ステップの長いフォームに比べてフォームのコンバージョン率が14％高いという結果が出ています。 とはいえ、最も高いコンバージョン率を得るためには、マルチステップのオンラインフォームを作成する際に押さえておくべきシンプルな原則がいくつかあります。 ### 質問を論理的な順序で分ける 質問の順序は、回答者の答えに直接影響を与えることがあります。だからこそ、フォームを設計する際には、論理的な順序で質問を並べることが重要です。フォーム入力の過程で生じる摩擦を減らす最善の方法は、最も重要な質問を最初に尋ね、項目を論理的な順序でグループ化することです。 例えば、電話番号やメールアドレスといった連絡先情報を尋ねる項目が複数ある場合、それらの項目は優先度順に並べ、直感的に分かりやすい順序で続けて配置するとよいでしょう。多くのフォームビルダーには、質問を簡単かつ素早く並べ替えられるドラッグ＆ドロップ機能が備わっています。 ### 進捗状況を表示する あと何問残っているのか分からないという不安は、マルチステップフォームにおいて摩擦の原因になることがあります。経験則として、プログレスバーや何らかのインジケーターを使い、フォームを完了するまでにあとどれくらい残っているかをユーザーに示すとよいでしょう。 EmbedForms では、各質問に「15問中2問目」といった形で表示する機能があり、回答者にあと何問残っているかを知らせます。 ### サンキューページを用意する サンキューページは、感謝の気持ちを伝えるのに最適なだけでなく、送信が正常に完了したことをユーザーに安心して伝える役割も果たします。何らかの理由でフォーム送信後にユーザーを自社のサンキューページへ誘導したい場合は、リダイレクトリンクのオプションを利用できます。 ### フォームをA/Bテストする フォームビルダーは、技術的なトラブルのリスクなしにフォームをテストできる優れたツールです。フォームビルダーを使えば、A/Bテストも非常に簡単に行えます。フォームの長さ、デザイン、CTAボタンの文言などをテストし、どのフォームデザインがコンバージョンを高めるかを確認できます。EmbedForms では、同じフォームをデザインやウィジェットを変えて複製し、どちらがより多くの回答者を集めるかをテストできます。 ## マルチステップフォームを使うメリット ### 摩擦の低減 心理的に見て、マルチステップフォームは回答者がフォームを完了しようとする意欲によい影響を与えます。 まず、回答者が「次へ」ボタンをクリックするたびに、フォームを完了しようとする気持ちが少しずつ強くなっていきます。 次に、このようなフォームの入力方法では、一度に1つの質問に集中する必要があるため、集中力が高まります。 ### モバイルフレンドリー マルチステップフォームは、モバイル端末からでも入力しやすくなっています。シングルステップフォームと比べると、モバイル画面には一度に1つの質問だけが表示されるため、マルチステップフォームははるかに完了しやすくなります。これにより、ユーザー体験も大幅に向上させることができます。 ### エンゲージメントを高める マルチステップフォームは、ユーザーのエンゲージメントを高めるよう戦略的に設計されています。 このようなフォームは、ユーザーが一度に1つの質問にだけ答え、「次へ」をクリックして次の質問に進む形式のため、圧迫感が少なくなります。 ### 見た目の魅力 マルチステップフォームはWebサイト上で占めるスペースが少なく、ユーザーが入力する際に圧倒されるような感覚を与えません。 ## マルチステップフォームか、シングルステップフォームか ![マルチステップフォームとシングルステップフォームの比較](https://embedsocial.com/wp-content/uploads/2021/09/multi-step-form-vs-one-step-form.jpg) マルチページフォームか、シングルステップフォームか。どちらを選ぶべきでしょうか。 マルチステップフォームは、ユーザーから多くの情報を集めたいときに最適です。これまで見てきたように、長いフォームを質問ごとに分割することで、ユーザーのストレスを減らし、入力しようとする意欲を高めることができます。 しかし、ユーザーから集めるデータが少なく、シンプルなお問い合わせフォームやリード獲得用フォーム、登録フォームを埋め込みたいだけであれば、シングルステップフォームでも十分に目的を果たせます。 ## まとめ マルチステップフォームには、質問の表示方法が向上し、ユーザーの集中力が高まるというメリットがあります。 EmbedForms を使えば、誰でもわずか数クリックでマルチステップフォームを無制限に作成し、好きなWebページに埋め込むことができます。