MENU
  1. ホーム
  2. Column
  3. フォームのプレフィルって何？URLパラメータで入力欄を自動セットする仕組みと実装方法

フォームのプレフィルって何？URLパラメータで入力欄を自動セットする仕組みと実装方法

Column
目次

「また同じ情報を入力するの…？」フォーム入力のストレスを消す方法

名前、メールアドレス、会社名、部署名…。Webフォームに何度も同じ情報を入力するのって、地味にストレスですよね。特にイベント申込やアンケートで「あなたの情報を入力してください」と毎回求められると、「いや、もう知ってるだろ」と思ったこと、ありませんか？

実はこの問題、「プレフィル（prefill）」という仕組みで解決できます。フォームのURLにパラメータを付けるだけで、入力欄に最初から値がセットされた状態でページを開ける。ユーザーは確認して送信するだけ。入力ミスも減る、離脱率も下がる、運用側もデータが綺麗になる。いいことづくめです。

本記事では、プレフィルの基本概念から、Googleフォームでのノーコード設定、HTMLフォーム×JavaScriptでの実装、React/Next.jsでの実践例までを一気通貫で解説します。マーケターからエンジニアまで、フォームに関わる人なら知っておいて損はない仕組みです。

プレフィルとは？ ― フォームの入力欄を「最初から埋めておく」仕組み

プレフィル（prefill）とは、フォームの入力欄にあらかじめ値をセットした状態で表示する仕組みのことです。「pre（事前に）」+「fill（埋める）」で、そのまま「事前入力」という意味。

たとえば、ユーザーにアンケートを送るとき、普通のフォームURLだと入力欄はすべて空っぽです。でもプレフィルを使えば、名前やメールアドレスが最初から入った状態で開けます。

【通常のフォーム】
名前：[          ]  ← 空欄
メール：[          ]  ← 空欄
部署：[          ]  ← 空欄

【プレフィル済みのフォーム】
名前：[ 田中太郎    ]  ← 最初から入ってる
メール：[ tanaka@example.com ]  ← 最初から入ってる
部署：[ 開発部      ]  ← 最初から入ってる

ユーザーは内容を確認して、必要なら修正して送信するだけ。入力の手間が激減します。

プレフィルの実現方法は主に3つ

プレフィルを実現するアプローチは、大きく分けて以下の3つがあります。

方法 仕組み 対象ユーザー
URLパラメータ方式 URLの末尾に?name=田中のように値を付加 マーケター〜エンジニア
JavaScript方式 ページ読み込み時にJSでinput.valueをセット フロントエンドエンジニア
サーバーサイド方式 HTML生成時にサーバー側で値を埋め込む バックエンドエンジニア

本記事では、最もよく使われるURLパラメータ方式を中心に、JavaScript・React/Next.jsでの実装まで解説していきます。

どんな場面で使う？ プレフィルが活きる3つのシーン

「便利そうだけど、具体的にどこで使うの？」という方向けに、実務でよく出てくるユースケースを紹介します。

シーン1：メールからのアンケート誘導

顧客リストに対してアンケートを送る場面。メール本文にプレフィル付きURLを埋め込めば、受信者がリンクをクリックした時点で名前やメールアドレスが入力済み。「誰からの回答か」をフォーム側で自動的に紐づけられるので、匿名化を避けつつ回答のハードルを下げられます。

シーン2：イベント申込の多段階フロー

「まず概要ページを見て、その後に申込フォームへ」という動線で、概要ページで選択した参加日程やプランをフォームURLのパラメータに埋め込む。ユーザーがフォームを開いた時点で日程が選択済みになっているので、入力のステップが1つ減る。

シーン3：管理画面の編集フォーム

これはエンジニア寄りのユースケース。管理画面で「ユーザー情報を編集」ボタンを押した時に、既存データをフォームにプレフィルして表示する。新規登録と編集で同じフォームコンポーネントを使い回せるので、コードの重複を減らせます。React/Next.jsで開発しているなら、この設計パターンはよく出てきます。

Googleフォームでプレフィルを設定する方法（ノーコード）

まずはコードを書かずにプレフィルを体験してみましょう。Googleフォームには公式の事前入力機能があります。

手順

  1. Googleフォームで対象のフォームを開く
  2. 右上の「︙（三点メニュー）」をクリック
  3. 「事前入力したURLを取得」を選択
  4. フォームが新しいタブで開くので、プレフィルしたい項目に値を入力
  5. 下部の「リンクを取得」をクリック → URLをコピー

コピーしたURLを開くと、さっき入力した値が最初からセットされた状態でフォームが表示されます。公式ヘルプ（フォームを公開して回答者と共有する – Google ドキュメント エディタ ヘルプ）にも手順が記載されているので、確認してみてください。

生成されるURLの構造

Googleフォームのプレフィル付きURLは、こんな構造になっています。

https://docs.google.com/forms/d/e/FORM_ID/viewform
  ?usp=pp_url
  &entry.123456789=田中太郎
  &entry.987654321=tanaka@example.com

entry.数字がフォームの各質問に対応するIDで、=の後ろがプレフィルする値。このパターンさえ分かれば、URLを手動で組み立てたり、スプレッドシートの数式で大量生成することも可能です。

質問IDの調べ方

事前入力URLを一度生成すれば、各質問のentry.xxxxxが分かります。もう一つの方法として、Chromeの開発者ツール（F12）でフォームのHTMLソースを見ると、name="entry.123456789"のようにIDが確認できます。

URLパラメータ方式の仕組みを理解する

Googleフォームの事前入力は、実は「URLパラメータ（クエリ文字列）」というWebの基本的な仕組みを使っています。ここを理解しておくと、自作フォームでも同じことができるようになります。

クエリ文字列の基本

URLの?以降にキー=値の形式でデータを付加する仕組みです。複数のパラメータは&で繋ぎます。

https://example.com/form
  ?name=田中太郎
  &email=tanaka@example.com
  &plan=premium

↑ベースURL  ↑パラメータ部分（クエリ文字列）

ブラウザでこのURLにアクセスすると、サーバーやJavaScriptからこれらの値を読み取れます。フォームのプレフィルでは、ページ読み込み時にパラメータの値を取り出して、対応する入力欄にセットするという流れです。

JavaScriptでパラメータを読み取る

ブラウザのJavaScriptにはURLSearchParamsという標準APIがあり、クエリ文字列を簡単に扱えます。

// 現在のURLからパラメータを取得
const params = new URLSearchParams(window.location.search);

// 個別の値を取り出す
const name = params.get('name');   // "田中太郎"
const email = params.get('email'); // "tanaka@example.com"
const plan = params.get('plan');   // "premium"

// 存在しないキーはnullを返す
const age = params.get('age');     // null

このURLSearchParamsはモダンブラウザすべてで対応しています（IE11を除く）。MDN Web DocsのURLSearchParamsリファレンスも参考にしてみてください。

HTMLフォーム × JavaScriptでプレフィルを実装する

ここからは、自分で作ったHTMLフォームにプレフィル機能を組み込む方法を見ていきます。フレームワークを使わない素のHTML+JSのパターンです。

完成形のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせフォーム</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <form id="contact-form" action="/api/contact" method="POST">
    <label>
      お名前
      <input type="text" name="name" id="field-name" />
    </label>

    <label>
      メールアドレス
      <input type="email" name="email" id="field-email" />
    </label>

    <label>
      プラン
      <select name="plan" id="field-plan">
        <option value="">選択してください</option>
        <option value="free">無料プラン</option>
        <option value="pro">Proプラン</option>
        <option value="enterprise">Enterpriseプラン</option>
      </select>
    </label>

    <label>
      お問い合わせ内容
      <textarea name="message" id="field-message"></textarea>
    </label>

    <button type="submit">送信</button>
  </form>

  <script>
    // URLパラメータからプレフィル
    document.addEventListener('DOMContentLoaded', () => {
      const params = new URLSearchParams(window.location.search);

      // プレフィル対象のフィールドを定義
      const fields = ['name', 'email', 'plan', 'message'];

      fields.forEach(field => {
        const value = params.get(field);
        if (value) {
          const element = document.getElementById(`field-${field}`);
          if (element) {
            element.value = decodeURIComponent(value);
          }
        }
      });
    });
  </script>
</body>
</html>

使い方

このHTMLをサーバーに置いて、以下のようなURLでアクセスすると、フォームに値がセットされた状態で表示されます。

https://example.com/contact
  ?name=田中太郎
  &email=tanaka@example.com
  &plan=pro
  &message=料金について相談したいです

ポイントはdecodeURIComponentで値をデコードしている点。URLに日本語を含めると自動的にエンコードされるため、表示時にデコードしないと文字化けします。

React / Next.jsでのプレフィル実装例

ここからはReact / Next.js（App Router）でのプレフィル実装を見ていきます。実務で最もよく出てくるパターンです。

Next.js App Routerでの実装

Next.js App Routerでは、useSearchParamsフックでURLパラメータを取得できます。

// app/contact/page.tsx
'use client';

import { useSearchParams } from 'next/navigation';
import { useState, useEffect, Suspense } from 'react';

function ContactForm() {
  const searchParams = useSearchParams();

  // URLパラメータから初期値を取得
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    plan: '',
    message: '',
  });

  // マウント時にURLパラメータでプレフィル
  useEffect(() => {
    setFormData({
      name: searchParams.get('name') ?? '',
      email: searchParams.get('email') ?? '',
      plan: searchParams.get('plan') ?? '',
      message: searchParams.get('message') ?? '',
    });
  }, [searchParams]);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
  ) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // API送信処理
    const res = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    });
    if (res.ok) {
      alert('送信しました');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        お名前
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>

      <label>
        メールアドレス
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>

      <label>
        プラン
        <select name="plan" value={formData.plan} onChange={handleChange}>
          <option value="">選択してください</option>
          <option value="free">無料プラン</option>
          <option value="pro">Proプラン</option>
          <option value="enterprise">Enterpriseプラン</option>
        </select>
      </label>

      <label>
        お問い合わせ内容
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
        />
      </label>

      <button type="submit">送信</button>
    </form>
  );
}

// useSearchParamsはSuspenseでラップが必要
export default function ContactPage() {
  return (
    <Suspense fallback={<p>読み込み中...</p>}>
      <ContactForm />
    </Suspense>
  );
}

Next.js App RouterではuseSearchParamsを使うコンポーネントに'use client'ディレクティブが必要です。また、Suspenseでラップしないとビルドエラーになるので注意。公式ドキュメント（useSearchParams – Next.js Docs）も確認しておきましょう。

プレフィルURLの生成ヘルパー

プレフィル付きURLをコード上で組み立てる場合は、こんなヘルパー関数が便利です。

// lib/prefill.ts

type PrefillParams = Record<string, string | undefined>;

export function buildPrefillUrl(
  baseUrl: string,
  params: PrefillParams
): string {
  const url = new URL(baseUrl);

  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined && value !== '') {
      url.searchParams.set(key, value);
    }
  });

  return url.toString();
}

// 使用例
const url = buildPrefillUrl('https://example.com/contact', {
  name: '田中太郎',
  email: 'tanaka@example.com',
  plan: 'pro',
});
// → "https://example.com/contact?name=田中太郎&email=tanaka@example.com&plan=pro"

URLオブジェクトとURLSearchParamsを使えば、エンコード処理を自分で書く必要がありません。日本語もちゃんと自動エンコードされます。

プレフィル実装時の注意点

プレフィルは便利ですが、雑に実装するとセキュリティやUXの問題を引き起こします。実装前に必ず押さえておきたいポイントをまとめます。

XSS（クロスサイトスクリプティング）に注意

URLパラメータの値をそのままHTMLに埋め込むと、悪意あるスクリプトが実行される可能性があります。プレフィルの値は必ずサニタイズ（無害化）してからDOMに反映してください。

// ❌ 危険：innerHTMLに直接挿入
document.getElementById('output').innerHTML = params.get('name');

// ✅ 安全：textContentを使う、またはinput.valueにセット
document.getElementById('field-name').value = params.get('name');

// ✅ さらに安全：サニタイズ関数を通す
function sanitize(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

Reactを使っている場合は、JSX内の{}で値を展開する限り自動的にエスケープされるので、dangerouslySetInnerHTMLを使わなければ基本的に安全です。

個人情報をURLに入れるリスク

URLパラメータはブラウザ履歴、サーバーのアクセスログ、リファラヘッダーなどに残ります。パスワードやクレジットカード番号のような機密情報は絶対にURLパラメータに含めないでください。

名前やメールアドレスをプレフィルする場合も、そのURLが第三者に漏れるリスクを認識した上で使いましょう。社内ツールやクローズドな環境での利用が安全です。

UXの落とし穴：プレフィルされていることをユーザーに伝える

最初から値が入っていると、ユーザーは「自分が入力した値」と勘違いすることがあります。特にセレクトボックスやラジオボタンは、気づかずにそのまま送信してしまいがち。プレフィルされた項目には「この値は自動入力されています。必要に応じて変更してください」のような案内を添えると親切です。

バリデーションはプレフィル後も必須

プレフィルされた値がバリデーションルールを満たしている保証はありません。URLパラメータは誰でも書き換えられるため、サーバーサイドのバリデーションは必ず実装してください。フロントだけのチェックでは不十分です。

プレフィルをさらに活用する関連記事

プレフィルの仕組みを理解したら、Webフォーム周辺の開発知識もあわせて強化していきましょう。

セキュリティ・安全な実装

API・Web開発の理解を深める

開発効率化・AI活用

まとめ：プレフィルは「小さな工夫」で大きなUX改善

本記事のポイントを整理します。

  • プレフィルとは、フォームの入力欄にあらかじめ値をセットして表示する仕組み
  • URLパラメータ方式が最も手軽。?name=値&email=値の形式でURLに付加するだけ
  • Googleフォームならノーコードで設定可能。「事前入力したURLを取得」から数クリックで完了
  • HTML+JSならURLSearchParamsでパラメータを取得し、input.valueにセット
  • React/Next.jsならuseSearchParamsフックで取得してuseStateの初期値に反映
  • セキュリティに注意：XSS対策、個人情報のURL露出リスク、サーバーサイドバリデーションは必須

プレフィルは、実装としては数行のコードで済む「小さな工夫」です。でも、ユーザーにとっての体験の差は大きい。「また同じこと入力するのか…」というストレスが消えるだけで、フォームの完了率は確実に上がります。

次にフォームを作るとき、あるいは既存のフォームを改善するとき、「これ、プレフィルできないかな？」と考えてみてください。メールのリンクにパラメータを足すだけで、ユーザーの手間が1つ減る。その積み重ねが、プロダクト全体のUXを底上げしていきます。

Column
Googleフォーム JavaScript Next.js prefill React URLパラメータ UX改善 Web開発 フォーム プレフィル
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次