Koe Hirobaの設計・技術選定・コミット履歴を解説

01 / 概要

プロジェクトの概要と目的

こえひろば 地域の困りごとに賛同・署名を集める、単一キャンペーン向けの署名サイトのMVPです。 voice.charity/campaign を参考に、SEO・AIO（回答エンジン最適化）・LLMO（LLM引用最適化）と、 署名者コメント（UGC）を軸に構成しています。 構成 Next.js（App Router）+ TypeScript、 output: "export" の静的サイト 署名の保存・カウントはSupabaseに委譲（ app/lib/supabase.ts ） 署名フォーム・署名者一覧は app/components/SignatureBoard.tsx キャンペーンの内容（タイトル・本文・FAQなど）はすべて app/data/campaign.ts に集約。 実際のキャンペーンに差し替える際はこの1ファイルを書き換えるだけで済みます セットアップ 1. Supabaseプロジェクトを作成 1. https://supabase.com でプロジェクトを作成 2. SQL Editorで supabase/schema.sql の内容を実行 3. プロジェクト設定から Project URL と anon public key を控える 2. ローカル開発 3. デプロイ（GitHub Pages） GitHub リポジトリの Settings → Secrets and variables → Actions → Variables に以下を登録してください。 NEXT PUBLIC SUPABASE URL NEXT PUBLIC SUPABASE ANON KEY NEXT PUBLIC GA MEASUREMENT ID （任意） NEXT PUBLIC GOOGLE SITE VERIFICATION （任意） CUSTOM DOMAIN （独自ドメインを使う場合のみ） main ブランチへのpush、または .github/workflows/refresh.yml （30分おきに署名数を再取得）が 差分を検知した際に自動でビルド・デプロ

本記事は公開されている構成と main ブランチのコミットを一次情報として整理しています。

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は です。

• 単一アプリケーション構成
• 機能単位の責務分割

04 / 変更履歴

コミットから見る実装の変遷

以下は既定ブランチの直近の変更です。リンク先で原文と一次情報を確認できます。

1. 2026/08/30
   サイトマップのURLに末尾スラッシュを付けるbe4873eをGitHubで確認 ↗
2. 2026/08/15
   支援・購入への導線を追加するcc7aba9をGitHubで確認 ↗
3. 2026/08/10
   機能・コンテンツを追加70b9d40をGitHubで確認 ↗
4. 2026/08/10
   機能・コンテンツを追加a073015をGitHubで確認 ↗
5. 2026/08/10
   機能・コンテンツを追加a545788をGitHubで確認 ↗
6. 2026/08/07
   プロジェクトの初期構成を作成0cdae73をGitHubで確認 ↗

05 / 学び

このプロジェクトから得られる学び

• 変更を小さく記録する

  コミット単位で目的を分けると、実装の意図を追跡しやすくなります。

• 構成と技術選定を結び付ける

  TypeScriptの採用理由と各ディレクトリの責務を説明できることが保守性につながります。

• READMEと実装を同時に育てる

  説明とコードを近い状態に保つことが、再利用と振り返りを助けます。

06 / よくある質問

よくある質問