StudioからmicroCMSへ移行したあと、お問い合わせフォームは何で作ればいいですか?

結論

microCMSにはStudioのようにフォームを画面に置く機能がないため、formrunやGoogleフォームなどの外部サービスを埋め込むか、POST APIやメール送信の仕組みを自前で組んで用意します。手間を減らしたいなら埋め込み、見た目や処理を細かく決めたいなら自前の実装が合います。

microCMSへの移行更新日

microCMSにはフォーム機能がありますか?

「Studioのように管理画面を開けば、最初からお問い合わせフォームの受信箱が用意されているのだろうか」と探してしまう人は少なくありません。しかし、microCMSには専用の受信トレイやフォーム管理機能が標準で組み込まれていません。microCMSは入稿された文章や画像をAPI経由で配信することに特化した仕組みだからです。ただ、フォームを作れないわけではありません。microCMSのお問い合わせフォーム案内では、POST APIで管理画面の外からコンテンツを登録できる仕組みを使い、送られた内容をmicroCMSに保存する方法が紹介されています。GoogleフォームやHubSpotのような外部サービスのコードを埋め込む方法も同じページにあります。

もっとも、microCMSの管理画面は顧客対応や問い合わせの進捗管理に向けて最適化された画面構成ではありません。問い合わせの件数が多く、未対応や対応中といったステータスを細かく管理したい場面では、POST APIによる自前運用は合わないことがあります。

ちなみに、Studioでフォーム回答をSlackに流していた人は、Googleスプレッドシートと Google Apps Script を間に挟んでいたはずです。移行後はその経路も作り直しになるので、通知先も一緒に洗い出しておくと抜けがありません。

microCMSのサイトに付けるフォームの選択肢は?

では、microCMSで構築したサイトにお問い合わせを設けるには、どのような選択肢があるでしょうか。どれを選ぶかは、サイトの作り、問い合わせの件数、かけられる費用と作業の時間で変わります。大きく分けると次の3つです。

選び方例向いている人
フォームサービスを埋め込むformrun、Googleフォームコードを書かずに早く置きたい
送信だけを外部に任せるFormspree見た目は自分で作り、受け取りは任せたい
送信処理を自前で書くCloudflare Workers と Resend処理やメール文面まで決めたい

埋め込み型は、サービス側で作ったフォームをiframeでページに貼る方法です。Studioのときの手軽さに近いですね。

2つ目は、Formspreeのようなフォーム処理サービスをAPIとして呼び出す方法です。Formspreeの料金プランでは、無料プランはテストや開発向けと案内されています。本番でまとまった件数を受け取るなら有料プランを視野に入れます。

3つ目は、Cloudflare Workersなどのサーバーレス環境からResendを利用してメールを送る仕組みを組む方法です。入力欄のデザインもエラーの出し方も自由になる一方、回答をどこに残すか、スパムをどう弾くかまで自分で決めることになります。

Studioのフォームを移すとき、何を決めておけばいいですか?

「Studioで動いていた項目をそのまま移行先へコピーすれば完了だろうか」と考える人は多いかもしれません。ところが実際には、回答の行き先や保存の扱いのほうがあとで困りやすい部分です。

まず、Studioのフォームでは、項目ごとに必須かどうかを選べ、テキスト、メールアドレス、電話番号といった入力の種類も分けていました。移す前に、項目名と必須の設定、入力の種類を一覧にしておきます。新しいフォームでも同じ入力規則を再現できるか、本当に必要な項目に絞り込めるかを見直します。

もうひとつ決めておきたいのが、回答をどこに残すかです。Studioでは回答の保存を無効にしてスプレッドシート連携も外していれば、回答は通知先のメールにだけ届いていました。2026年10月のStudioの不正アクセスに関するお知らせでは、保存を途中で無効にしても、それまでの回答は完全に削除するまで残り、流出した可能性のある範囲に入ると説明されています。保存を無効にしていた間の回答や通知メールの内容はStudioに残っていません。新サイトでも、回答データをデータベースへ溜めるのか、それともメール通知だけに留めて保存先を絞るのかを最初に決定しておきたいところですね。

さらに、スパム対策の設計も外せません。microCMSへブラウザから直接POSTする設計は、独自の防御処理を途中に挟めなくなるため通常は推奨されていません。どの組み方が正解という決まりはなく、要件と担当できる人の時間で選ぶことになります。

StudioからmicroCMSへ移行するとSEOに影響はありますか?

CMSをStudioからmicroCMSへ切り替えると、検索順位や流入数にどのような変化が起こるでしょうか。影響は出ます。サイトを大きく作り替えると、Googleがページを読み直して登録し直すまでの間、順位が上下することがあります。URLや文章をそのまま残しても、順位が保たれる保証はありません。

ページのURLが変わるなら、旧URLから新URLへの301リダイレクトを用意します。GoogleのURL変更を伴うサイト移転の手順のとおり、すべての旧ページをトップページへ一括で飛ばすような処理は避け、対応する個別ページへ転送しましょう。ただし、複数の古いページを1本の濃い記事へ集約した場合は、その統合先URLへリダイレクトを束ねても問題ありません。リダイレクトはできるだけ長く、目安としては1年以上残すよう勧められています。Studioで設定していた転送が新しいホスティングでも動いているかは、公開後に旧URLを開いて確かめてください。

新サイトを本番公開した後は、開発環境で設定していたアクセス制限やクロール拒否の記述が残っていないかを点検し、Search ConsoleのURL検査ツールでGooglebotが正常に到達できているかを確かめます。

また、microCMSのようなヘッドレスCMSでは、ページをどう作って配信するかを自分で選びます。ビルド時にHTMLを作るのか、アクセスのたびに作るのか、ブラウザで組み立てるのか。この選び方も検索での見え方に関わるので、制作を頼むなら最初に聞いておきたいところですね。

microCMSのサイトでSEO対策はフロントエンド側で何をすればいいですか?

たとえばNext.jsで作るなら、ページのtitleやdescriptionは metadata か generateMetadata で設定します。後者を使えば、microCMSから取ってきた記事タイトルや抜粋をもとに、記事ごとのメタ情報を出せますね。microCMSはサイトの表示部分を持たないので、こうしたメタ情報はすべて使うフレームワーク側で書くことになります。

重複コンテンツによる評価の分散を防ぐため、正規URLを示すrel="canonical"タグの出力も欠かせません。Next.jsであればalternates.canonicalの項目から指定できます。GoogleのJavaScript SEO基本方針でも警告されている通り、canonicalタグが競合していたり複数記述されていたりすると検索エンジンが意図しない解釈をしてしまいます。

検索に載せたいページでは、最初に返すHTMLに noindex を入れないでください。Googleは noindex を見つけるとJavaScriptの実行を飛ばすことがあり、あとからスクリプトで消しても効かない場合があります。

サイトマップについては、Astroであれば公式のsitemapインテグレーションを組み込むことで、動的ルーティングで生成された記事ページも含めてビルド時にxmlファイルを出力できます。構造化データのJSON-LDも画面側で正しく埋め込み、テストツールで構文を確認しましょう。

こんな聞き方も

  • Studioのフォームは、microCMSへ移行したあと何で作ればいいですか?
  • microCMSで作ったサイトに問い合わせフォームを付けるにはどうしますか?
  • microCMSにはフォーム機能がないのですか?代わりはどうしますか?
  • microCMSにはフォーム機能がありますか?
  • microCMSで作ったサイトにformrunのフォームを組み込めますか?
  • StudioからmicroCMSへ移行するとSEOに影響はありますか?
  • microCMSのサイトでSEO対策はフロントエンド側で何をすればいいですか?
  • microCMSに移行するとSEOは弱くなりますか?

あわせて知りたい(関連する疑問)

QformrunのフォームはmicroCMSのサイトでもそのまま使えますか?

Studioのサイトに埋め込んでいたformrunのフォームは、microCMSで新設したサイトでもそのまま活用できるでしょうか。使えます。フロントエンドの実装がiframeや外部スクリプトの埋め込みに対応していれば、同じフォームを継続して設置できます。microCMSとformrunが直接つながるわけではなく、ページの中にフォームを置く形です。

とはいえ、コードを貼り直しただけでは送信できないことがあります。formrunの埋め込み設定では、サイトに接続するときのURLをすべてformrun側に登録するよう求めています。移行でドメインやパスが変われば、登録の見直しが必要です。httpsの有無、wwwの有無で別のURLとして扱われる点にも気をつけてください。ステージング環境やローカルの開発サーバーで動作確認を行う際も、その接続先URLが登録されていないと正しく送信できません。

設置作業を終えた後は、実際の入力画面で必須項目を抜かした際のエラー表示や、送信完了画面への遷移が意図通りに動くかテスト入力を行います。必須項目を空にして送ると、エラー表示が出た分だけフォームの縦の長さが変わり、iframeの枠からはみ出したり下が切れたりすることがあります。スマホ表示でも同じ操作を試しておくと、公開後に問い合わせが届かないという事態を防げますね。

QGoogleフォームで代用してもいいですか?

「費用をかけずに手早くフォームを用意したいので、Googleフォームで代用できないか」と検討するケースも珍しくありません。実際、Googleフォームは個人なら無料で使え、作ったフォームをサイトに埋め込めます。埋め込み方は、フォームの編集画面にあるその他メニューから「HTML を埋め込む」を選び、表示されたHTMLをコピーしてページに貼るだけです。色や画像、フォントを変えられるので、ある程度はサイトの雰囲気に寄せられます。

気をつけたいのは公開の設定です。回答者がフォームを開けるように公開する必要があり、回答できる人の範囲も選べます。特に組織用アカウントで作成した場合、初期設定でドメイン内ユーザーのみに制限されていることがあるため、組織外からの送信を許可する設定へ切り替えましょう。

あわせて、「回答を1回に制限する」をオンにすると、回答者はGoogleアカウントにログインしないと入力できなくなります。企業の問い合わせ窓口でログインを求められると、送信を諦めて離脱してしまう人が増えかねませんね。回答はGoogleのスプレッドシートに集まるため、誰がそのシートを見られるかも合わせて決めておきます。

QStudioのフォーム回答は新しいサイトに引き継げますか?

Studioのフォームダッシュボードにたまっている過去の問い合わせデータは、新しいサイトへ自動で引き継げるのでしょうか。新しいフォームへ自動で移る仕組みはありませんが、手元に取り出すことはできます。Studioのフォーム回答のダウンロードにあるとおり、回答一覧画面の右上にある3点メニューから、すべての回答をCSVで落とせます。このCSVデータには送信時の回答日時が含まれているため、過去ログの控えとしてローカルやクラウドストレージへ保管しておく形が基本です。なお、Studioのスプレッドシート連携では回答日時が直接送信されない仕様だったため、日時が揃った完全な記録を残す上でもCSVの出力が役立ちます。新しい保存先へ取り込めるかどうかは、移行先のサービスや自前のデータベースの形式次第で、取り込み前に列の並びを合わせる作業が出ることもあります。

そもそも全部を移すべきかも考えたいところです。個人情報保護法では、使う必要がなくなった個人データは遅滞なく消すよう努めることになっています。返信が済んで二度と使わない問い合わせまで新しい環境へ運ぶと、名前やメールアドレスを置く場所が増えるだけかもしれません。過去の問い合わせ履歴を無差別に新しいデータベースへ移し替えるのではなく、対応が完了した古いデータは整理し、保管先の閲覧権限を厳密に定めた上で必要な分だけを取り扱う姿勢が大切ですね。取り込みが終わったら、Studio側の回答とダウンロードしたファイルをどう消すかまで決めておくと、移行のあとに古いデータが残りません。

Qフォームのスパム対策は何を使えばいいですか?

Studioでは、有料プランならGoogle reCAPTCHA v3をつなぐだけで送信を守れました。一方、microCMSで作る新しいサイトでは、この守りを自分で用意し直すことになります。自前のフロントエンドやAPIでフォームを組むなら、Cloudflare TurnstileやGoogle reCAPTCHAのAPI連携が代表的な候補。

中でもCloudflare Turnstileは、画像選択のようなユーザーへの負担を減らしつつボットを検知できる仕組みです。サイト全体がCloudflareのCDNを通っていなくても単体で利用できます。Cloudflare Turnstileの導入手順に記載されている通り、ブラウザ側の画面にウィジェットを表示させるだけでなく、送信時に発行されたトークンをサーバー側でSiteverify APIへ渡して検証する工程が必須です。このトークンは発行から300秒で失効し、一度しか検証できません。

reCAPTCHAを自前のフォームに入れる場合も、考え方は変わりません。reCAPTCHAのトークン有効期限は2分間と定められており、使い回しを防ぐために検証は1回のみ受け付けられます。Turnstileより期限が短いので、入力に時間がかかる長いフォームでは、送信の直前にトークンを取り直す作りにしておきましょう。

逆に、formrunやGoogleフォームを埋め込むなら、スパム対策はそのサービスの仕組みに任せる形になり、自前の検証は書かずに済みます。

出典

この内容をChatGPTで相談

無料診断