LP多業種展開 - 新業種追加・composable化・フォーム改善

LPプロジェクトの3日目。新業種3つを追加して全8業種体制を構築し、コード重複をcomposable/utilで解消し、フォームに実運用向けの改善を加えた日。

新業種3つの追加

既存5業種に加えて法人向け3業種を追加し、全8業種のLP体制を構築した。既存が個人事業主中心だったのに対し、新業種は法人をメインターゲットにしている。industries.ts にエントリを追加し、サブドメインミドルウェアのマッピングを更新。

wrangler v4.63.0 対応

wranglerのアップデートで wrangler.toml に name フィールドが必須になった。各業種の設定に name を追加し、デプロイスクリプトで動的設定するように修正。

Resend APIキーの全業種設定

CLIで全8業種分のCloudflare Pagesプロジェクトにシークレットを一括登録した。

フォーム改善（4項目）

ハニーポット（スパム対策）

人間には見えない隠しフィールドを追加。値が入力されていたらボットと判定し、200 OKを返しつつメール送信しない（エラーを返すとボットが別の方法を試すため）。reCAPTCHAと違いUXへの影響がゼロ。

「営業メールではありません」チェックボックス

送信ボタン手前にチェック必須のチェックボックスを追加。営業メールの心理的ハードルを上げる狙い。

自動返信メール

問い合わせ者に受付確認の自動返信を送信。管理者向けメールの送信後に実行し、自動返信が失敗してもフォーム自体は成功扱いにした。

個人/法人ラジオボタン

法人向け業種の追加に伴い、フォーム冒頭で個人/法人を選択。法人選択時のみ会社名を必須にするようVuelidateのルールを動的切替。

ヘッダー固定化

• トップページ: ヒーロー上に透明ヘッダー → スクロールで白背景に切替
• サブページ: 最初から白背景固定

composable/util化リファクタリング（6個）

8業種分のコンポーネントが増えてコード重複が目立ってきたので共通化した。

composable化の判断基準: 「3箇所以上の重複」「変更が同時に発生する」の2条件。新業種追加時の変更ファイル数が8〜10 → 3〜4に減った。

デザインテンプレート

新業種にはそれぞれ異なるデザインテンプレートを適用した。ターゲット層に合わせてフォントや配色を調整。

各業種の記事作成

新業種向けに合計9本の記事を作成。frontmatterの industry フィールドで業種と紐付け。

学び

• ハニーポットはreCAPTCHAより実装が簡単でUX影響ゼロ。スパム量が増えたらreCAPTCHA追加の余地を残す
• composable化は「3箇所重複」「同時変更」の2条件が良い判断基準
• 新業種追加のワークフローが確立し、半日で1業種追加できる体制になった