マネーセミナーの集客LPと予約管理システムを2週間で構築

課題

ご依頼時にいただいた要件は、次のとおりです。 1. チラシのQRコードから遷移する申込ページが必要 　支給されたチラシにはQRコードと「詳細、お申込はこちらより」の案内が入っており、その遷移先となるページを用意する必要がありました。既存ドメインではWordPressが稼働していたため、ドメインの切り替えを含めた公開作業も範囲に含まれました。 2. 開催回ごとに定員を管理する必要がある 　1日に午前・午後の2回、それを複数日程で開催し、各回とも定員は15名。完全事前予約制のため、回ごとに残席を把握し、満席になった回は受付を止められる必要がありました。 3. 開催日程は今後も追加・変更される 　配布済みのチラシは書き換えられないのに対し、Web側は日程が変わっても追従できることが求められました。 4. 参加者層が50代以上 　セミナー自体が50代以上を対象としているため、申込フォームも同年代が迷わず入力できる作りにする必要がありました。 5. 複数の集客チャネルを併用している 　新聞折込チラシ・Facebook広告・Instagram広告・既契約者様のLINE・既契約者様のご紹介という5つの経路をお使いのため、どこから申し込まれたかを申込時に取得したいというご要望をいただきました。 6. 金融事業者としての表記配慮 　個人情報の取り扱いの明示、体験談への注記（個人の感想であり効果を保証するものではない旨）、事業所住所を掲載しない運用など、業種に応じた配慮が必要でした。

ご提案・対応

■ チラシの世界観を保ったままWebに再設計 支給されたチラシを紙面のまま再現するのではなく、配色（紺・マゼンタ・金）とタイトルの構成を引き継ぎつつ、スマートフォンで読める順序に組み直しました。チラシの補助線（各要素の座標指定）をいただいてからは、その面積比をそのままグリッドに落とし込み、紙面の印象を崩さずにレスポンシブ化しています。 ■ 開催日程を「読み物」から「予約できる導線」へ チラシでは固定文字だった開催日時を、データベース登録の内容から自動生成する仕組みに変更しました。 ・現在日時（日本時間）を過ぎた回は自動的に非表示になる ・「次回開催日」は登録済みの回から自動で選ばれる ・各回の残席に応じて「受付中／残りわずか／満席」を出し分ける ・日程カードの「この回に申し込む」から、その回を選択済みの状態でフォームに移動する 日程を追加・変更しても、サイト側の書き換えは不要です。 ■ 定員超過を起こさない申込処理 同じ回に複数名が同時に申し込んだ場合でも定員を超えないよう、空席の確認と登録を1つのSQL文で行う排他制御を実装しました。残り1席に2名が同時送信した場合、後発は満席として明確に拒否されます。実際のデータベースに対して、残席1・満席・受付終了の各パターンを検証済みです。 ■ 50〜70代向けのフォーム設計 ・本文16px以上、行間1.85、タップ領域56px以上を下限として設計 ・「入力 → 確認 → 送信完了」の3ステップ。確認画面で内容を見直せる ・エラーは項目のすぐ下に、何をどう直せばよいかの文言で表示 ・携帯キャリアメールでも届くよう、受信設定の注意書きをメール欄に併記 ■ 申込後の連絡を自動化 送信されると、申込者への受付完了メールと主催者への通知メールが自動で送られます。 ・申込者向け：件名は「【受付完了】〈セミナー名〉お申込みありがとうございます」。申込内容に加え、その回の日時・会場住所・アクセス案内・キャンセル方法を記載しているため、別途のご案内は不要です。 ・主催者向け：件名の時点で「【セミナー申込】〇〇様（2名）/ 9月19日」のように、誰が・何名で・どの回に申し込んだかが分かります。メールを開かなくても状況を把握できます。 ■ 主催者ご自身で運用できる管理画面 本件は「ページを作って終わり」ではなく、公開後の運用を主催者様だけで回せることを重視しました。制作側に依頼しなくても、管理画面から次のことが行えます。 【開催回の管理】 ・開催回の新規追加（会場名／都道府県／開催日／開始・終了時刻／定員／会場住所／アクセス案内） ・登録済みの開催回の編集。追加・変更した内容は公開ページに即時反映される ・回ごとの「受付中／受付停止」の切り替え。満席前でも任意のタイミングで受付を止められる ・開催前・終了済みの状態を自動判定して一覧に表示 ・会場住所とアクセス案内は、その回に申し込んだ方への確認メールにも自動で反映される。会場が異なる回を並行して募集しても、案内内容がずれない 【申込の管理】 ・申込一覧を、申込日時／開催回／お名前（同伴者名を含む）／人数／お住まいの地区・年代／電話・メール／流入経路／興味・ご要望／状態、の項目で確認できる ・開催回による絞り込み表示 ・申込のキャンセル処理。キャンセルすると残席が自動的に戻り、その席は再び申し込めるようになる ・押し間違えたときは「申込に戻す」で復旧できる（ただし満席の回には戻せない） ・CSV出力（氏名・同伴者・人数・地区・年代・電話・メール・申込日時）。開催回で絞り込んだ状態のまま出力でき、BOM付きのためExcelで開いても文字化けしない。当日の受付名簿としてそのまま使える 【セキュリティ】 管理画面はCloudflare Accessで保護し、許可したメールアドレス宛のワンタイムコード認証を通らないと到達できません。パスワードの管理・共有が不要で、担当者が増えても許可リストに追加するだけで対応できます。認証設定が未構成の場合は画面を表示せず拒否する設計（フェイルクローズ）としており、設定漏れで申込者情報が露出することを防いでいます。

成果

■ Webからの申込導線を新設 チラシのQRコードから遷移して、そのまま申込まで完結できる導線ができました。24時間受付が可能で、残席の計算と申込者への受付完了連絡は自動で行われます。 ■ 公開後の更新が主催者様だけで完結 開催回の追加・編集・受付停止、申込の確認・キャンセル・名簿出力のいずれも管理画面から行えるため、更新のたびに制作側へ依頼する必要がありません。開催日時を過ぎた回は公開ページから自動的に消え、「次回開催日」の表示も自動で切り替わります。 ■ 検証済みの品質 ・自動テスト24件が全件パス ・納品前の自動チェックはエラー0件・警告0件 ・同時申込時の定員超過を、本番同等のデータベースで検証済み ・申込から2種類のメール送信までを本番環境で疎通確認済み ・ページ本文をビルド時に生成（SSG）しているため、JavaScriptを実行しないクローラーやSNSのリンクプレビューにも本文とOGP画像が届く

納品物・成果物

・セミナー申込ランディングページ（トップ／個人情報の取り扱い／404ページ） ・セミナー予約システム（開催回ごとの残席管理・定員超過の防止・キャンセル対応） ・主催者向け管理画面 　－ 開催回の追加・編集、受付中／受付停止の切り替え 　－ 申込一覧の表示と開催回による絞り込み 　－ 申込のキャンセルと取り消し（残席は自動で増減） 　－ 受付名簿のCSV出力（Excel対応） 　－ Cloudflare Accessによるメール認証（パスワード管理不要） ・自動返信メール（申込者向け受付完了通知）／主催者向け申込通知メール ・OGP画像、ファビコン、ロゴのWeb用書き出し ・sitemap.xml / robots.txt / llms.txt（AIクローラー向けサイト要約）の自動生成

プロジェクト体制

■ ご依頼の流れ 財務コンサル Polaris 様から、LPのデザインと公開についてALGO KIDS ART-みつの似顔絵屋- 様へご相談。 ALGO KIDS ART-みつの似顔絵屋- 様より当方へ、デザインをもとにしたサイト構築・予約システム開発をご依頼いただきました。 ALGO KIDS ART-みつの似顔絵屋- 様（https://www.algokids32.com/） ■ 体制 ・LPデザイン：ALGO KIDS ART-みつの似顔絵屋- 様 ・サイト構築、予約システム開発、インフラ構築、テスト、公開作業：1名（当方） ・原稿・素材のご提供、掲載内容のご確認：財務コンサル Polaris 様・ALGO KIDS ART-みつの似顔絵屋- 様 ■ 使用素材 クライアント様支給のチラシ、講師写真、プロフィール資料

学び・再現ポイント

■ 「紙の再現」と「Webの再設計」は分けて合意する 当初はチラシの忠実な再現を目指しましたが、途中で「完全再現は不要。開催日時は予約できる形にしてほしい」と方針が変わりました。紙面のどこを引き継ぎ（配色・タイトル構成・情報の並び）、どこをWebの都合で組み替えるか（日程・写真配置・レスポンシブ）を早い段階で言語化しておくと、手戻りを減らせます。要素の座標を書き込んだ補助線入りの画像をいただけたことで、認識合わせが一気に進みました。 ■ 表示アニメーションの検証は「実際にスクロールして」行う スクロール連動のフェードイン（.reveal）で、APIの応答後に描画される日程カードが監視対象から漏れ、永久に非表示になる不具合を出しました。スクリーンショット撮影時に表示クラスを強制付与していたため、自分の検証では気づけませんでした。表示確認は必ず実際にスクロールし、opacityを実測すること。同種の不具合はReactのStrictMode（開発時のeffect二重実行）でも発生しうるため、監視済みの記録はDOM属性ではなくWeakSetで持つのが安全です。 ■ 定員管理はアプリケーション側で数えない D1（SQLite）には対話的トランザクションがありません。「空席を数える」→「登録する」を2回に分けると、同時アクセス時に定員を超えます。条件付きINSERTの1文にまとめることで、追加のロック機構なしに超過を防げます。 ■ 環境変数はSSRとクライアントで同じものを読ませる プリレンダリング時にViteのmodeを指定し忘れると、開発用の環境変数が読み込まれ、本番ビルドとの差分でハイドレーション不整合が起きます。今回はこれが原因でスパム対策ウィジェットが表示されなくなりました。 ■ 想定読者の年齢層は入力項目の設計に直結する 年代の選択肢を「70代後半以上」にまとめようとしたところ、金融商品の年齢上限が75歳であるため「80代以上」を独立させたいというご要望をいただきました。フォームの選択肢は見た目の整理より、業務上の意味を優先して決める必要があります。

制作イメージ