課題 ― SNSだけでは「応援したい気持ち」を受け取れない
全日本ロードレース選手権に参戦するレーサー・松岡玲。シーズンを戦い抜くには資金的なサポートが欠かせず、個人スポンサーの募集を始めたいという相談からこのプロジェクトは始まりました。
SNSでの告知だけでは応援する気持ちを「申込」という行動に変えることが難しく、個人情報や支援口数をDMでやり取りする管理負荷も大きな問題でした。「正式な申込窓口が欲しい」「スマホで完結してほしい」「選手自身がリアルタイムで申込状況を把握できるようにしたい」という3つの要件が出発点でした。WordPressは不要なセキュリティリスクと更新コストを避けたいという意向もあり、シンプルかつ堅牢な静的サイトが最適解でした。
実装内容 ― 「見た瞬間に理解して、数タップで支援完了」
設計の軸は「ITリテラシー不問、スマホ一台で申込完了」です。WordPressを使わない静的サイト（HTML / CSS / Vanilla JS）で構築し、高速表示・セキュリティリスク最小・サーバー維持コスト不要を実現しています。
- 静的サイト構築（HTML / CSS / Vanilla JavaScript — CMSなし・高速・低コスト）
- Fetch API による非同期フォーム送信（ページ遷移なし・スムーズな申込体験）
- 口数入力と連動したリアルタイム合計金額計算（¥5,000 × 口数を即表示）
- 口数別スポンサー特典の4段階表示（1口 / 2〜3口 / 4〜5口 / 6口以上）
- 6口以上でTシャツサイズ選択が動的に出現（条件付きUI・必須バリデーション連動）
- カスタム確認ダイアログ（名前・口数・合計金額を表示してから送信）
- 郵便番号自動入力（Yubinbango.js ― 7桁入力で都道府県〜番地まで自動補完）
- ハニーポット + reCAPTCHA v3 の二重スパム対策
- X（Twitter）内部ブラウザ検出・専用エラーメッセージ表示（SNS流入に対応）
- Google Apps Script + スプレッドシート連携（申込データ自動記録・申込IDの自動採番）
- 申込者・選手の双方への自動メール送信（振込先案内・受付完了通知）
- OGP / Twitter Card 設定（SNS シェアで見栄えのするサムネイル表示）
- picture 要素によるデスクトップ・モバイル画像の振り分け配信
- CSS3 + IntersectionObserver による軽量スクロールアニメーション
- 特定商取引法表記・返品ポリシーページを完備（信頼性の担保）
UX設計の工夫 ― 「応援したい」が「申込完了」に変わる体験
スポンサー申込は通常、個人にとってハードルが高い行為です。金額の大きさに加えて「本当に届くのか」「管理されているのか」という不安がボトルネックになります。フォームに送信前の確認ダイアログを実装し、「お名前・口数・合計金額」を画面で確認してから申込を確定できる設計にしました。「間違えたかも」という不安を解消し、安心してボタンを押せる体験をつくっています。
郵便番号を入力するだけで都道府県〜番地まで自動補完されるため、住所入力の手間が大幅に削減されます。モバイルでは口数セレクターをリール操作方式に切り替え、指一本でスムーズに選べるよう配慮しています。SNSから流入するユーザーが多いサイトの特性を考慮し、X（Twitter）アプリ内ブラウザからアクセスした場合は、フォーム送信エラー時に「外部ブラウザで開いてください」という専用案内を表示する対応も実装しています。
運用 ― 選手がスマホ一台で全申込を管理
申込データはGoogle スプレッドシートに自動集約され、選手本人がスマートフォンからリアルタイムで申込状況・支援口数・連絡先を一覧管理できます。申込IDは日付連番形式（例：20260124-0001）で自動採番されるため、入金確認・特典発送・個別連絡をスムーズに進められます。2026年シーズンの個人スポンサー窓口として稼働中。静的サイト構成により、サーバー維持費・更新コストを最小限に抑えながら、シーズン通じて安定した表示速度を維持しています。