合同会社QUEST

千葉・東京・埼玉の観光地やアミューズメント施設にクレーンゲーム機をレンタル設置されている企業様の、コーポレートサイトを新規で制作しました。

設置先の開拓（BtoB）と採用の両方をサイトで受け止める必要があったため、お問い合わせフォームは種別ごとに通知先の担当者を自動で振り分ける設計に。受注確定から6日間で本番公開まで完了しています。

・全4ページ（トップ／取扱業務／会社概要／お問い合わせ）＋お知らせ＋管理画面
・お知らせCMS（Tiptapエディタ・画像アップロード・下書き／公開の切替）
・管理画面の2段階認証（パスワード＋メール6桁コード）
・お問い合わせフォーム（種別×通知先の自動振り分け・スパム3重防御）
・会社概要にGoogleマップ埋め込み
・SEO基本設定（メタタグ・OGP・robots.txt・XMLサイトマップ自動生成）

【ご依頼の背景】
設置先となる観光地・お土産店・アミューズメント施設へ会社の信頼性を示す場所がなく、商談のたびに口頭で説明されている状態でした。加えて中野ブロードウェイでの物販店オープン、今後のゲームセンター事業といった動きもあり、「今の会社の姿を一箇所にまとめて見せられるサイト」が必要というご相談でした。

【デザイン】
ご希望の参考サイトのトーンを軸に、同業他社をリサーチしたうえでクレーンゲームをデザインの中心に据えました。写真素材はロゴ以外すべて自社で生成し、素材待ちによる工期の延びを回避しています。

【ブランド演出（提案範囲外・無償対応）】
画面上のクレーン爪がスクロールに連動して動き、内部リンクをクリックするとキャッチする演出を全ページに実装。404ページも「つかめなかった…」というメッセージとクレーンのアニメーションで世界観を統一しました。BtoBサイトでありながら、この会社が扱っている商売の楽しさが伝わることを狙った設計です。

【お問い合わせの振り分け】
「クレーンゲーム機の設置・取引について」「業務提携・パートナーシップ」「採用・求人について」「その他」の種別を用意し、種別ごとに通知先メールアドレスを切り替えて送信。営業の問い合わせと採用の応募が同じ受信箱で混ざらない設計です。通知メールは種別バッジ・送信者情報・送信元IPを整形したHTMLメールで届くため、受信後すぐに内容を把握できます。

【セキュリティ】
管理画面はパスワード＋メール6桁コードの2段階認証。パスワードは5回失敗で15分ロック、ワンタイムコードは5回失敗でセッション破棄。お問い合わせフォームはハニーポット・時間トラップ・IPレート制限の3重でスパムを防いでいます。CSP・HSTS・X-Frame-Optionsなどのセキュリティヘッダーも本番環境に設定済みです。

【技術構成】
Next.js 16（App Router）＋ React 19、Tailwind CSS v4、Vercel（グローバルCDN）、Tiptap（CMSエディタ）、Resend（メール送信）。

【検収】
主要4ブラウザ（Chrome／Safari／Edge／Firefox）での表示・動作確認、PC（1920px）／タブレット（768px）／スマートフォン（375px）での表示崩れ確認、フォームの本番実受信確認、CMSの投稿・更新・削除・画像アップロード確認、リンク切れ確認を実施したうえでご報告しています。

・受注確定から6日間で本番公開（弊社の最短記録）
・設置先開拓と採用の問い合わせが自動で担当者ごとに振り分けられ、受信後すぐ対応できる体制に
・お知らせは管理画面から社内で更新できるため、新店舗オープンや新規設置の情報を都度発信できる状態に
・提案範囲を超えて、クレーン爪のスクロール演出・404カスタムページ・記事ごとのOGP自動生成・関連記事の自動表示・構造化データ（Organization／LocalBusiness）を追加費用なしで実装
・公開後は保守プランで継続対応中（SSL管理・稼働監視・セキュリティ更新・軽微な修正）

受注が決まってすぐ、初回の打ち合わせに動くモックをお持ちしました。図や仕様書ではなく実際に触れるものを見ていただくと、話が一気に具体的になります。この案件では初回でデザインの方向性がほぼ固まったため、6日間という工期につながりました。

BtoBのサイトだからといって固く作る必要はないと考えていて、クレーン爪がスクロールに合わせて動く演出は、この会社が街に届けているものそのものを表現したかった部分です。設置先の担当者様が見たときに「この会社と組んだら面白そうだ」と思ってもらえることを狙いました。