SalonOne — One Platform. One Management.

サロン向けの 契約(申込書)・電子契約・請求書 作成・PDF出力・管理 ＋ Salon One の開発依頼・エラー進捗報告・進捗管理 アプリケーション。 Vercel + Supabase で動くフルスタック構成。申込と電子契約を1本のURLで完結させ、受注管理で請求開始・口座振替（NSS 日本システム収納）・導入までの抜け漏れを防ぎます。入金確認機能も備えます。担当者の日次オペレーションと、経営者の売上・入金俯瞰の両方に最適化した UI（ディープ・ティール × ゴールドのブランドカラー）です。

すぐ試せます。 Supabase を設定しなくても、npm install && npm run dev で デモモードが起動します（デモでもログインが必要です／ゲストアクセスなし）。 業務データは空の状態から始まります（自社情報・料金プラン・契約書テンプレートのみ初期投入。デモモードのデータはインメモリのため再起動でリセットされます）。

---

主な機能

領域	内容
進捗ホーム	アプリを開いて最初に出る画面。「いま急ぐこと」（期限超過の請求・未消込の入金・下書きの請求書・急ぎの開発依頼・自分への追加ヒアリング・自分の承諾待ち）を役割に応じて1枚にまとめ、続けて売上の進捗（今月の請求／入金／未収金／MRR・回収率バー・直近6ヶ月の推移）と開発の進捗（未完了の内訳・今月の完了/起票・長期滞留・急ぎの依頼 上位3件）を並べます。スマホ1画面ぶんのスクロールで全体を把握できます。
ダッシュボード	ロール対応（経営者＝売上・入金・MRR の俯瞰／担当者＝要対応タスク）。月タブで対象月を切替（請求額・入金額・入金内訳・推移が連動）、売上・入金推移グラフ、最近の動き。
申込・契約URL	お客様に渡す1本のURLで「申込内容の入力 → 料金の確認 → 契約書の確認 → 電子署名」まで完了します（ログイン不要・約5分）。発行時にプラン・オプション・店舗数・個別価格（初期費用／月額）・代理店を指定でき、料金の見込みと契約書が自動で作られます。送信と同時に顧客・締結済み契約書（証跡つき）が作られ、受注管理に「受注確認」として並びます。「URLをコピー」「案内文ごとコピー」「QRコード」で渡せます。料金が決まっていない場合だけ「申込のみ」URL（契約書は後から送付）も使えます。HPB / minimo / EPARK の連携情報は AES-256-GCM で暗号化して保存し、画面ではマスク表示（連携作業時に「表示する」で復号）。
紹介・問い合わせ	お客様からのご紹介と、代理店URLの「まずは相談したい」から届いた問い合わせを1つの一覧で受け付けます。常設の紹介フォームURL（/refer）・紹介者ごとのURL、連絡希望日時・連絡方法つき。連絡希望日を過ぎた案件は赤く表示。連絡後は各行の**「申込・契約URLを発行」で送ると、紹介者・代理店の紐付けと特典がそのまま契約・請求まで引き継がれます。特典は請求に自動反映： 紹介された側は初月の端数日数（日割り）＋2ヶ月無料**、紹介した側へは初期費用の25%（受注確定時に金額が確定）。
契約書 / 電子契約	契約書テンプレート管理（標準の利用契約書・全23条を同梱）、電子署名（申込・契約URLでの署名のほか、条文を変える契約は個別に作成して署名依頼メール または リンク＋QRコード ＋ アクセスコード）、締結証跡（監査ログ）、締結証明書のPDF出力。締結後は受注管理の**「受注を確定する」**で定期契約＋**初期費用・初月日割りの請求書（銀行振込）**を作成し、以降の月額は口座振替（NSS）へ自動切替。紙で締結した場合の手動登録にも対応。
請求書	作成（明細・税率別集計・インボイス対応）、下書き／送付、ステータス管理（下書き・送付済・入金待ち・一部入金・入金済・期限超過・引落失敗・取消）、発行後の支払方法の切替（口座引き落とし ⇔ お振込み） — 書面の案内文（引き落とし予定 / 【お振込先】）も自動で切り替わります、PDFで保存（ファイル名は「請求書_番号_お客様名」） — 請求書はメールでは送らず、PDFをお客様へお渡しします、未収金エイジング（期限超過日数別の残高）、CSVエクスポート（請求書・入金）。
受注管理	案件（お客様1件）を 申込・契約 → 受注確認 → 導入準備 → 運用中 で管理します（旧「顧客ステータス」で手で進めていた過去のお客様の記録も引き継ぎ、契約書が無いお客様は「請求を開始」で初回請求書・毎月の請求を設定）。ステージは実データ（締結・請求・入金・NSS登録・導入チェック）から自動で進むため、カードを動かす作業はありません。いちばん上に**「対応待ち」を担当別にまとめて表示**（受注確認待ち・初回請求書の送付・入金確認・口座振替依頼書の郵送／回収／NSS登録・初期設定・納品）。案件ページには**「次にやること」とボタン**、3つの手続き（初回請求・入金／口座振替（NSS）／初期設定・導入）の進み具合、遅れ（入金期限・依頼書の回収14日超など）を表示します。
LTV分析	顧客ごとの毎月の支払い額と累計LTV（生涯価値）をグラフで可視化（顧客詳細に月別バー＋累計ライン）。LTV分析ページでは全顧客のランキング（月額・平均月額・直近12ヶ月・継続月数・スパークライン）を俯瞰。
定期請求（サブスク）	月額プラン定義・加入管理、毎月の請求書を自動生成（Vercel Cron 対応。メールでは送りません）、MRR 集計。
NSS引き落とし	NSS（日本システム収納）での口座振替の月次作業。その月に引き落とせる請求と、NSS登録が終わっておらず引き落とせない請求を自動で振り分け（引き落とせない請求はワンクリックで振込に切替）、確認期間（請求書の発行から7日）の表示、NSS 登録用の一覧（CSV・確認用）、「NSSへ登録した」の記録、実際の振替結果の反映（済／不可＋理由。不可は「引落失敗」として要フォロー）。口座情報はこのツールでは持ちません。
入金確認	手動入金記録・消し込み、銀行明細 CSV の取込と自動照合（金額・名義）、初期費用など単発入金の確認。
顧客 / 会員	顧客管理（メモ＝特別待遇の理由等を一覧・詳細に表示）、口座振替（NSS）の手続き状況（依頼書の郵送・回収・NSS登録・振替開始月）、契約・請求・入金履歴、獲得代理店・代理店区分の紐付け。
代理店	代理店・営業マンの管理。区分は2つ： 取次型＝初期費用の50%／営業・初期設定型＝初期費用の100%（伴走型は今後追加予定）。代理店用の申込・契約URL（「まずは相談したい」「このまま申し込む」を選べる常設URL・QR・案内文）を発行して代理店に渡せます。受注確定で報酬（初期費用×区分の率）を自動計上し、お客様の初期費用の入金を確認した月の支払明細に入ります。月次明細のメール送付・印刷/PDF、営業マン別集計、支払済みの記録。
個別料金・店舗数	定期契約ごとの基本料金の個別価格（特別待遇・紹介割引）と契約店舗数。毎月の請求書に「単価 × 店舗数」で載り、MRR にも自動反映。顧客別料金ページで、どのお客様に毎月いくら請求しているか（プラン・基本料金・オプション・店舗数・月額（税抜／税込）・定価との差・初期費用）を1つの表で確認でき、定価と違う金額のお客様は色付きで表示。「個別価格のお客様」での絞り込み・同じ月額のお客様の件数（料金パターン）・検索・並び替えに対応。
開発進捗（開発依頼・エラー報告）	スプレッドシート運用を置き換える依頼管理。記載日・依頼者はアカウントから自動記録、分類（不具合/要望）・優先度（高/中/低）・ステータス（未対応/対応中/追加ヒアリング/対応完了）、エンジニアの完了日・開発対応内容。不具合を最優先に緊急度順で表示し完了は既定で非表示、要望は承認者（管理者）全員の承諾で「実行」（未承諾者を名指しでアラート）。日付での期限管理は行わず、順番はドラッグで入れ替えて決めます。スクリーンショット添付（Ctrl+V貼り付け対応）と画像への書き込み（ペン/矢印/枠/テキスト）、理想UIを伝えるAI画像モック生成にも対応。追加ヒアリングには依頼者が返信を追記でき、エンジニアへ通知＋一覧にバッジ表示されます。急ぎの依頼は /d/12 のような短縮URLで、端末の共有シート（LINE・メール等）へワンタップで渡せます（複数まとめて1通で共有／QRコードも可）。
開発スケジュール（中長期ロードマップ）	スプレッドシートの「カテゴリ / 機能 / 優先度 / 月」の表をそのままシステム化。横軸に月を並べた表で中長期の予定を俯瞰しつつ、今週進める分をいちばん上に出します（週が変わると自動で切り替わり）。1つの機能に開発進捗の不具合・要望を一覧から選んで複数まとめて連動でき、依頼のステータスは常に最新が反映されます（依頼一覧は畳んであり、件数だけを表示）。行はドラッグで並べ替え、カテゴリの色分け・当月列の強調・左2列の固定で見やすくしています。今週分はワンクリックでコピーして開発MTGにそのまま貼れます。閲覧できるメンバーは設定画面のチェックボックスで指定（既定は非表示・管理者は常に閲覧可）。
アプリ内通知	対応完了・新規依頼・追加ヒアリング・ヒアリング返信・実行判定をヘッダーのベルへ配信。対応完了は未読のあいだトップ（ダッシュボード/開発進捗）にバナー表示。
自社情報（発行元）	設定画面から事業者名・住所・電話番号・インボイス登録番号（適格請求書発行事業者の登録番号）・振込先（銀行名・支店名・支店番号・預金種別・口座番号・口座名義）・請求書番号の接頭辞・既定税率を編集（管理者のみ）。請求書（画面・印刷）／請求書メール・督促メール／代理店明細の発行元欄にそのまま記載されます。
アカウント管理	管理者が設定画面からアカウント作成・役割の複数割当（管理者/エンジニア/請求管理者/開発・修正管理者）。兼務と重複アカウントのチェック付き。
削除・復元（ゴミ箱）	請求書・顧客・入金・定期契約・銀行明細・NSS引き落としの一覧をデータを消さずに非表示にでき、ゴミ箱からいつでも復元。誰が・いつ・なぜ消したかの操作ログを追記専用で保持（テスト投入データの片付け用）。
ヘルプ	申込・契約 → 受注確認 → 導入準備 → 運用中、毎月の請求・NSS引き落とし、代理店・紹介制度の標準業務フロー（担当と画面の対応表、よくある抜け漏れと防ぎ方、旧運用からの置き換え表つき）。

決済方針（振込 × 口座振替）

お支払いは 銀行振込 と 口座振替（NSS 日本システム収納） の2つだけです。

• 初期費用・初月（場合により翌月まで）は銀行振込。入金は「入金確認」で記録するか、銀行明細 CSV の照合で消し込みます。
• それ以降の月額は口座振替（NSS）。NSS への金額登録・振替結果の反映は「NSS引き落とし」画面で行います（口座情報は NSS 側で管理し、このツールには保存しません）。NSS の登録が間に合わない月の請求は、同じ画面から振込に切り替えます。
• クレジットカード決済（Stripe）は使いません（連携は削除済み。過去のデータを表示するための区分だけ残しています）。

---

技術スタック

• Next.js 15（App Router / Server Components / Server Actions）+ TypeScript
• Tailwind CSS v4（ライト／ダーク対応、検証済みのアクセシブルなグラフ配色）
• Supabase（PostgreSQL / Auth / RLS）
• メール送信は SMTP（nodemailer）/ Resend の差し替え可能なアダプタ
• グラフは依存ライブラリ無しの自作 SVG（軽量・デザイン統一）

---

クイックスタート（デモモード）

npm install
npm run dev
# http://localhost:3000 を開く（サンプルデータで全機能が動作）

デモモードは Supabase 未設定時に自動で有効化され、インメモリのデータで動作します（データはプロセス内のみ・再起動でリセット）。

ゲスト（未ログイン）でのアクセスはできません。 デモモードでもログイン画面でデモアカウント（管理者／エンジニア／請求管理者＋開発・修正管理者の兼務／開発・修正管理者）を選んでログインします。ログイン後は右上の「デモ」セレクトでアカウントを切り替えられます。

本番セットアップ（Supabase 連携）

1. Supabase でプロジェクトを作成。
2. supabase/migrations/*.sql を順に実行（SQL Editor もしくは Supabase CLI）。

   # Supabase CLI の例
   supabase link --project-ref <your-ref>
   supabase db push        # migrations を適用
   # 初期データ（自社情報・料金プランのみ。テストデータは含まない）
   psql "$SUPABASE_DB_URL" -f supabase/seed.sql
   # 既存DBのテストデータを空にする場合（取り消し不可・実行前に要確認）
   psql "$SUPABASE_DB_URL" -f supabase/cleanup_test_data.sql
   

3. .env.example を .env.local にコピーし、値を設定。

   cp .env.example .env.local
   

   最低限:

   NEXT_PUBLIC_SUPABASE_URL=...
   NEXT_PUBLIC_SUPABASE_ANON_KEY=...
   SUPABASE_SERVICE_ROLE_KEY=...   # cron/webhook 用（サーバー専用）
   APP_ENCRYPTION_KEY=...          # 申込で預かる ID・パスワードの暗号化鍵（`openssl rand -base64 32`）
   

4. 最初のユーザーを Supabase Auth で作成してログイン。管理者がまだ1人もいない場合、設定画面に「自分を管理者にする」ボタンが表示されるので押すだけで初期セットアップ完了です（SQL は不要）。以降のアカウント作成・役割変更・パスワード再設定・削除はすべて設定画面から行えます。
5. 設定 → 自社情報（請求書の発行元） で電話番号・振込先などを入力（管理者のみ）。インボイス登録番号は初期データで投入済みです。ここで入力した内容が請求書・代理店明細にそのまま記載されます。
6. npm run dev（または npm run build && npm start）。

環境変数の全項目は .env.example を参照してください。

---

申込・契約URL（申込と電子署名を1本で）

メニュー「申込・契約URL」（/applications）・「受注管理」・各代理店の画面・「紹介・問い合わせ」の各行から、お客様にお渡しする申込・契約URLを発行できます。お客様はログイン不要で、申込内容の入力から契約内容の確認・電子署名までを1本のURLで完了します（以前の「申込を受けてから契約書を別に作って送る」二度手間と送り忘れをなくしました）。

URLの種類

種類	使う場面
申込＋契約（標準）	お客様ごとに渡すURL。プラン・オプションの初期選択・店舗数（指定 or お客様が入力）・個別価格を決めて発行します。
代理店URL	代理店がお客様に渡す常設のURL。「まずは相談したい」（→ 紹介・問い合わせへ）と「このまま申し込む」（→ 申込＋電子署名）を選べます。何件でも受け付け、代理店・営業担当・区分が自動で記録されます。
紹介から	紹介・問い合わせに連絡したあとに送るURL。紹介者・代理店の紐付けと特典を引き継ぎ、お名前・連絡先も入った状態で開きます。
申込のみ	料金がまだ決まっていない場合だけ。届いた申込は受注管理の対応待ちに出るので、「顧客として登録」→ 契約書を作成して送ります。すぐに請求する場合は、届いた申込の「顧客登録して請求書を作成」で、申込内容のまま顧客を登録して請求書（区分「初期費用」・銀行振込）を作れます。

フロー

1. URLを発行 — 宛先メモ（例: ○○サロン様）、プラン、オプション、店舗数、必要なら個別価格（初期費用・月額基本料金）、代理店経由なら代理店・営業担当・区分、有効期限を指定。発行画面で料金の見込みが確認できます。「URLをコピー」「案内文ごとコピー」（LINE・メールにそのまま貼れる文面）「QRコード」でお渡しします。メール送信の設定は不要です。
2. お客様が入力（4ステップ） — /apply/<token> で ①お客様情報（法人名・登記住所・代表者・ご担当者・電話・メール）②プラン・料金（オプション・店舗数を選ぶと初期費用・月額（税込）と支払いの流れを表示）③連携情報（任意。HPB / minimo / EPARK の ID・PASS、LINE連携の希望）④契約書の確認と電子署名（氏名の入力＋同意）。
3. 自動で作られるもの — 申込・顧客・締結済みの契約書（閲覧・同意の日時、IPアドレス、端末情報、内容の SHA-256 ハッシュの証跡つき）を作成し、受注管理に「受注確認」として並びます。お客様へ受付完了メール（契約書の控えのリンクと今後の流れ）、社内へ「受注確認待ち」の通知メールを送ります（メール設定がある場合）。
4. 受注確認・受注確定 — 請求管理者が受注管理で内容を確認し「受注を確定する」。契約書第3条のとおり、契約は当社の承諾（受注確定）で成立します。

送信時にテンプレートが更新されていた場合は送信を止め、最新の契約内容で確認し直していただきます（確認した内容と署名した内容が食い違わないようにするため）。

預かった認証情報の取り扱い

お客様の外部サービスの ID・パスワードは、平文で保存しません。

• 保存時に暗号化 — src/lib/crypto/secrets.ts で AES-256-GCM（v1:iv:tag:data 形式）により暗号化して保存します。鍵は環境変数 APP_ENCRYPTION_KEY（未設定時は SUPABASE_SERVICE_ROLE_KEY）から導出し、DB には保存しません。
• 既定はマスク表示 — 申込詳細では lu•••••• のようにマスクされ、平文はページの HTML にも含まれません。連携作業を行う担当者が「表示する」を押したときだけサーバー側で復号して返します。
• 顧客の備考には残さない — 「顧客として登録」で作成される顧客メモには、代表者と希望連携のみを引き継ぎます（ID・パスワードは暗号化された申込レコードにのみ保持）。
• 鍵の変更に注意 — 鍵をローテーションすると、それ以前に保存した認証情報は復号できなくなります（画面には「復号できません」と表示されるため、お客様に再入力を依頼してください）。

申込フォームは認証ゲートの対象外（公開ルート）で、アクセス制御は暗号乱数トークン（48桁）＋受付停止＋有効期限で行います。フォームからの読み書きはサーバー側のサービスロール経由のみで、トークンを知っていても DB を直接読むことはできません。 申込の閲覧・URL 発行は請求管理の権限（管理者・請求管理者）が必要です。

紹介制度

既存のお客様からのご紹介を受け付け、特典を請求まで自動でつなげる仕組みです（メニュー「紹介・問い合わせ」／/referrals）。代理店URLの「まずは相談したい」から届いた問い合わせも同じ一覧に「代理店経由」として並びます。

特典の設計

対象	特典
紹介した側	ご紹介いただいた方の**初期費用の25%**をお支払い
紹介された側	初月の端数日数（日割り分）＋2ヶ月無料

率と月数は src/lib/domain/constants.ts の REFERRAL_REWARD_RATE / REFERRAL_FREE_MONTHS で変更できます。

フォーム（お客様が入力する）

• 常設URL: https://＜サイト＞/refer — ログイン不要で誰でも開けます。このURLをそのまま配れます（紹介・問い合わせの画面からコピーできます）。
• 紹介者ごとのURL: https://＜サイト＞/refer/＜トークン＞ — 紹介・問い合わせの画面から「紹介者を指定したURLを発行」で作ります。開くと「どなたのご紹介ですか？」がその方の名前で固定表示され、入力ミスなく紹介元をたどれます。受付停止・有効期限は申込URLと同じ扱いです。
• 入力項目: どなたのご紹介か / 店舗名・法人名（任意）/ お名前 / 電話番号 / メールアドレス / 連絡してほしい方法（電話・メール・SMS・LINE） / 連絡希望日 / 希望の時間帯（いつでも・午前中・12〜15時・15〜18時・18時以降）/ ご相談内容。
  • 必須の連絡先は選ばれた連絡方法にあわせて変わります（メール希望ならメールアドレス、それ以外なら電話番号）。
  • フォームの先頭に特典（初月の端数日数＋2ヶ月無料）を明記しています。

管理（紹介・問い合わせの画面）

• 連絡すべき順に並びます（未対応→連絡済、連絡希望日が早い順、同じ日なら希望の時間帯が早い順）。連絡希望日を過ぎたものは赤く表示され、上部に件数が出ます。
• 「どなたのご紹介か」は、同じ名前の顧客が1件だけ見つかれば自動で紐付きます。違っていればプルダウンで選び直せます（紐付けが謝礼のお支払い先になります）。
• 連絡して申込の意向が固まったら、その行の「申込・契約URLを発行」で送ります。お客様が申し込むと、紹介者との関係（referredByCustomerId）・代理店・特典が自動で引き継がれます（URLを使わずに「顧客として登録」することもできます）。

既存機能との連携

• 受注確定 → 請求: 紹介から申し込んだお客様の受注を確定すると、特典が自動で適用されます。
  • 初回請求の初月日割りが0円になります（月額利用料 初月日割り（9月3日〜月末・28日分）※ご紹介特典により無料 のように、何が無料になったか分かる明細として残します）。
  • 定期請求の初回請求日を2ヶ月先送りします（例: 9/3 開始なら通常は10/27→12/27。9月の日割り・10月・11月が無料）。
  • 紹介した側へのお支払い（初期費用の25%）が確定し、紹介・問い合わせの画面に「お支払い待ち」として出ます。お支払いしたら「お支払い済にする」で記録します。
  • 契約書の証跡にも ご紹介特典により初月日割り 28,000円を無料 / ご紹介者へのお支払い 50,000円(初期費用の25%)を計上 / 2026/09/03 〜 2026/11/30 は無料 のように残ります。
• 顧客: 紹介された側の顧客メモに、紹介者・特典・連絡希望が記録されます。
• 最近の動き: フォームからの受付がダッシュボードの活動履歴に流れます。

契約書・電子契約

通常の契約は申込・契約URLでお客様が申込と同時に署名します。条文を変える契約や、アクセスコードで本人確認を強めたい場合は、「契約書」メニューから 作成 → 編集 → 電子署名依頼 → 締結 → 受注確定 までを個別に行えます。

フロー

1. テンプレートから作成 — 標準の「SalonOne サービス利用契約書（全23条）」テンプレートを同梱。契約作成時に内容がコピーされるため、顧客ごとに料金表・条文を自由に編集できます（テンプレート変更は既存契約に影響しません）。
2. プラン連携 — プランを選ぶと申込条件（初期費用・月額・オプション・店舗数）が自動反映され、「プランから料金表を生成」で契約書の別表を自動作成できます。
3. 署名依頼 — 渡し方を選べます。送付時に契約内容の SHA-256 ハッシュを固定化し、以降の内容変更は DB トリガーでも拒否されます。
   • メールで送る — 契約者のメールアドレスへ専用リンクを送付します。
   • リンクを発行して自分で渡す（メールを送りません） — 署名リンクとQRコードを画面に表示。LINE・SMS・対面（お客様のスマホで読み取り）でお渡しできます。メール送信が未設定の環境ではこちらが既定になります。
4. 契約者の署名 — 契約者はリンクから内容を確認し、氏名の記入＋同意チェックで電子署名。締結証跡（閲覧・同意の日時、IPアドレス、端末情報）が記録され、双方に締結完了メールが届きます。
5. 締結後 — 受注管理の「受注を確定する」（契約書の画面の「受注を確定（請求を開始）」でも可）で定期契約と初期費用請求書を自動作成。締結証明書付きのPDF出力が可能です。

電子署名の法的リスク低減のための設計

本機能は 事業者署名型（立会人型）電子署名 の考え方に基づき、以下を実装しています。

• 本人性の担保（2要素）: 契約者本人へ渡す専用リンク（暗号乱数トークン・有効期限付き）に加えて、6桁アクセスコード（リンクやメールに記載せず、電話等の別経路で伝達）を推奨設定。誤入力の試行回数制限つき。リンク発行（メールなし）で渡す場合も、リンクの経路とコードの経路を分けることで2要素になります。
• 非改変性の担保: 送付時に契約内容の正規化 JSON を SHA-256 でハッシュ化して固定。署名時にハッシュを再計算・照合し、送付後の内容変更は DB トリガー（contracts_freeze_content）でサービスロールを含む全経路で拒否。
• 証跡の保全: 作成・送付・閲覧・コード検証・署名・辞退・取消の全イベントを 追記専用の監査ログ（UPDATE/DELETE を DB トリガーで禁止）に IP・UA・時刻付きで記録。締結証明書として書面化・PDF保存可能。
• 電子帳簿保存法への配慮: 締結済み契約は削除不可（取消は状態として記録）、契約一覧は取引先・日付・金額で検索可能。訂正削除の防止措置を DB レベルで実装。

注意（法務向け）: 本実装はいわゆる認定タイムスタンプ（TSA）や当事者型電子証明書は使用しません。多くの SaaS 利用契約はこの方式（立会人型）で実務上広く運用されていますが、 訴訟リスクの高い高額契約等では、締結証明書PDFの長期保管、アクセスコードの別経路伝達の徹底、必要に応じた外部電子契約サービスの併用をご検討ください。 運用ルール（誰が送付できるか、コードの伝達方法等）を社内規程として定めることを推奨します。

紙の契約書にも対応

書面で締結した場合は「書面締結を登録」から締結記録（署名者・締結日・原本保管場所）を登録でき、電子・紙どちらの締結経路でも契約管理を一元化できます。

受注管理

メニュー「受注管理」（/orders）。申込から運用開始までを、案件（お客様1件）ごとに抜け漏れなく進めるための画面です。

ステージ	状態	主な担当
申込・契約	URLを渡し、お客様の申込・電子署名を待っている	お客様（営業・代理店がフォロー）
受注確認	締結済み。内容を確認して「受注を確定する」を押す	請求管理者
導入準備	初回請求・入金／口座振替（NSS）／初期設定・導入 の3つを並行で進める	請求管理者・導入担当（代理店）
運用中	すべて完了。毎月の請求・NSS引き落としへ	—

• ステージは自動: 締結・初回請求・入金・NSS登録などの実データと、導入のチェック（初期設定・納品など）から判定します。手で動かす必要はなく、ずれることもありません。
• 対応待ち: 「届いた申込の確認（顧客登録がまだ）」「契約書の作成・送付」「受注確認待ち」「初回請求書の送付」「入金確認」「依頼書の郵送・回収・NSS登録（不備の再提出を含む）」「初期設定・納品」のように、やることごとに担当別でまとめて表示します。遅れ（入金期限の超過・依頼書の回収が郵送から14日超など）は赤く表示し、ホームの「いま急ぐこと」にも出ます。
• 受注を確定する: 利用開始日を選ぶと、初回請求書（初期費用＋初月日割り・銀行振込・期限14日）、毎月の定期請求（店舗数・個別価格も契約書どおり）、支払方法の口座振替（NSS）への切替、紹介特典・代理店報酬の計上をまとめて行います。確定画面で金額を確認できます。初回請求書は案件ページの「PDFを保存」でPDFにしてお客様へお送りし、「完了にする」を押します。
• 口座振替（NSS）の記録: 案件ページで「郵送した」「回収した」「NSSへ登録した」「登録完了（振替開始月を記録）」「不備あり」「再提出した」を記録します。
• 休止・見送り: 理由を残して案件を閉じられます（再開も可能）。旧「顧客ステータス」（/pipeline）を開くと受注管理へ移動します。
• 過去のお客様（契約書が無い・旧画面で管理していたお客様）: 旧「顧客ステータス」で手で進めていた記録（最後に置いていたステージ・「締結を確認」「初回請求書を発行」「初回振込の入金を確認」のチェック）を引き継ぎ、システムに記録が無い手続きは「済み」として表示します（違っていれば「取り消す」で直せます）。契約書が無いお客様は「書面・旧運用で締結済み」→ **「請求を開始」**で、初回請求書（このシステムで作成／作成済みの請求書を初回請求書にする／システムの外で発行済み／なし）と毎月の請求（定期契約。このシステムで請求を始める月を指定し、請求済みの月までさかのぼらない）をまとめて設定できます。システムの外で発行した請求書は「入金を確認済みにする」で入金確認を記録します。定期契約が無い案件は「毎月の請求（定期契約）を登録」が対応待ちに残ります。

代理店

メニュー「代理店」（/agencies）。

区分	代理店が担当する範囲	報酬
取次型	お客様のご紹介（取次）まで。商談・お申込み手続き・初期設定は当社	初期費用（税抜）の50%
営業・初期設定型	営業（商談〜お申込み手続き）と初期設定まで	初期費用（税抜）の100%

伴走型（導入後の運用支援まで担当）は今後追加予定です。率は src/lib/domain/constants.ts の AGENCY_DEAL_TYPES で管理しています。

1. 代理店を登録 — 区分（既定）を選んで登録し、営業マンを追加します。案件ごとに区分を変えたいときは顧客の「代理店区分（この顧客）」で上書きできます。
2. 代理店URLを発行 — 代理店の画面の「URLを発行」。営業担当ごとに分けると担当別の実績が出ます。「案内文ごとコピー」で使い方つきの文面を代理店へ送れます。
3. お客様が相談 or 申込 — 「まずは相談したい」は紹介・問い合わせに代理店経由として届き、「このまま申し込む」は申込＋電子署名まで完了して受注管理に並びます。
4. 報酬の計上 — 受注確定で初期費用 × 率を計上（同じ請求に二重計上しません）。お客様の初期費用の入金を確認した月の支払明細に入ります（それまでは「初期費用の入金待ち」）。計上時の区分・率で固定されるため、後から代理店の区分を変えても計上済みの報酬は変わりません。
5. 毎月の支払い — 月を選んで明細をメール送付・印刷/PDF。支払ったら「支払済みにする」。未払いは月をまたいで残ります。

NSS 口座振替（日本システム収納）

口座振替は NSS のみを利用する前提で、このツールの口座振替機能を整理しました。口座情報（銀行・口座番号・名義）はこのツールに保存しません（旧運用で保存していたものは顧客・案件ページの「口座情報を消去」で削除できます）。

項目	NSS で行うこと	このツールで行うこと
口座情報	登録・保管	持たない
登録の進み具合	—	依頼書の郵送 → 回収 → NSSへ登録 → 登録完了・振替開始月 を記録し、遅れを知らせる
毎月の金額	収納リンクへ確定金額を登録	引き落とせる／引き落とせない請求の振り分け、登録用の一覧（CSV・確認用）
引き落とし	実行（毎月27日予定）	—
結果	振替結果を提供	請求へ反映（済＝入金済／不可＝引落失敗・要フォロー）

毎月の流れ（メニュー「NSS引き落とし」／/direct-debit）:

1. 請求書の自動作成 → 確認期間（発行から7日）。修正があれば請求書を訂正します。
2. その月の対象を確認。**NSS の登録が終わっていない（振替開始月より前を含む）請求は「引き落とせない請求」**に出るので、「振込に切り替える」で請求書の案内を振込に変えます。
3. 「NSS登録用の一覧を作る」→ 一覧（CSV）を見ながら NSS へ金額を登録 →「NSSへ登録した」。
4. 引き落とし日のあと、NSS の振替結果を見ながら「結果を反映する」（不可は理由を選ぶ）。不可は振込に切り替えて請求書のPDFを送ります。

以前の「登録状態だけで成功／失敗を自動判定する処理」と「汎用の収納代行向けCSV」は廃止しました。結果は必ず NSS の実際の振替結果を反映します。

定期請求の自動生成（Cron）

/api/cron/generate-invoices が、次回請求日（next_billing_date ＝ 引き落とし日・支払期限）がその月のうちに来る稼働中の定期契約について、月初（発行日＝1日）に請求書を生成します（billing_period 単位で二重生成を防止）。引き落とし日（27日）の前に、お客様の確認期間（約7日）と NSS への金額登録の時間を確保するためです。請求書はメールでは送りません（お客様に渡す場合は請求書の画面の「PDFを保存」を使います）。

• Vercel Cron: vercel.json に日次スケジュールを定義済み。Vercel が Authorization を自動付与します。
• 手動実行:

  curl -H "Authorization: Bearer $CRON_SECRET" https://<your-app>/api/cron/generate-invoices
  

• アプリの「定期請求」画面の 「定期請求を今すぐ生成」 ボタンからも実行できます。

---

メール送付

契約書の署名依頼・締結完了通知、申込の受付通知、代理店の支払明細はすべて同じメール設定を使います。請求書・督促はメールでは送りません（請求書は PDF で保存してお渡しします）。

• 既定（未設定）: 実送信せずプレビュー（サーバーログ出力のみ）。画面には「メールは送信していません（プレビューのみ）」と表示されます。
• 実送信にする: 次のどちらかを設定すると、自動的に実送信モードになります。
  • SMTP（推奨） — MAIL_HOST / MAIL_PORT / MAIL_ENCRYPTION / MAIL_FROM_ADDRESS。Google Workspace の SMTP リレー（smtp-relay.gmail.com:587）や Gmail の SMTP 送信に対応します。自社ドメインのアドレス（例: [email protected]）から送れます。
    • 認証方法は2通りで、リレー側の設定に合わせます。
      • SMTP 認証 — MAIL_USERNAME + MAIL_PASSWORD（Google のアプリ パスワード16桁。通常のログインパスワードは不可）。Vercel から送る場合はこちらが必須です。
      • 送信元IPの許可のみ — MAIL_AUTH=none を設定し、認証情報は使いません。固定グローバルIPのサーバーからのみ送れます（Vercel はサーバーレスで送信元IPが変わるため不可）。
    • 疎通確認は npm run mail:test（送らずに接続だけ確認。許可リストに登録する送信元IPも表示）、npm run mail:test [email protected]（1通送る）、または 設定 → メール送信 の「接続確認 / テスト送信」。
  • Resend — RESEND_API_KEY と EMAIL_FROM。EMAIL_FROM は Resend で認証済みドメインのアドレスにしてください。
  • メール内のリンク（署名URLなど）を正しくするため、NEXT_PUBLIC_APP_URL に公開URLを設定してください。
  • 意図的にプレビューへ戻す場合のみ EMAIL_PROVIDER=console を設定します。
• 確認方法: アプリの 設定 → メール送信 で現在のモード・送信元・不足している設定を確認でき、全体管理者はテスト送信で実際に届くか試せます（お客様には送信されません）。

---

プロジェクト構成

src/
├─ app/
│  ├─ (app)/                 認証後のアプリ本体（ホーム/受注管理/申込・契約URL/代理店/請求書/顧客/定期/NSS引き落とし/入金/設定）
│  ├─ actions/               Server Actions（受注・申込・請求書・入金・NSS引き落とし・代理店・顧客・定期・認証）
│  ├─ api/                   Cron・NSS登録用CSV などの Route Handler
│  ├─ apply/[token]/         申込・契約フォーム（お客様向け・認証不要。申込＋電子署名／代理店URLの問い合わせ）
│  ├─ login/ , print/        ログイン / 印刷用（PDF）
├─ components/               UIキット・アプリシェル・グラフ・請求書ドキュメント
├─ lib/
│  ├─ crypto/                預かった認証情報の暗号化（AES-256-GCM）
│  ├─ data/                  リポジトリ抽象（demo=インメモリ / supabase=本番）
│  ├─ domain/                型・計算（税/合計/番号採番/料金）・受注の進み具合・代理店報酬・NSS・指標・定数
│  ├─ orders/                受注の業務処理（申込＋署名の受付・受注確定・受注一覧の読み込み）
│  ├─ email/ bank/           メール・銀行CSVの各アダプタ
│  ├─ supabase/              Supabase クライアント（ブラウザ/サーバー/管理者/middleware）
supabase/
├─ migrations/               スキーマ・RLS・関数
└─ seed.sql                  初期データ

データアクセスの抽象化

すべての画面・アクションは getRepository() を介してデータへアクセスします。Repository インターフェイス（src/lib/data/repository.ts）を、デモ（インメモリ） と Supabase の 2 実装が満たします。ダッシュボード指標などのロジックは src/lib/domain/metrics.ts に集約し、両実装で共有しています。

---

アカウントの役割（ロール）

1つのアカウントに複数の役割を兼務させられます（例: 請求管理者 ＋ 開発・修正管理者）。

ロール	表示名	できること
admin	管理者	全機能 ＋ アカウント管理。**要望の実行を承認する「承認者」**になります。
engineer	エンジニア	開発進捗の対応担当。完了日・開発対応内容を入力します。
billing	請求管理者	請求書・顧客・契約・入金などの請求業務。
dev_manager	開発・修正管理者	不具合報告・要望の起票と進捗管理。請求管理者との兼務が可能。
owner / staff / dev	旧種別（後方互換）	owner→管理者、staff→請求管理者、dev→エンジニアとして動作。役割変更で新しい役割へ移行します。

• 役割は profiles.roles（配列）で管理します（profiles.role は主ロールとして後方互換のため保持）。設定画面（管理者のみ）からアカウントの作成・役割変更（複数選択）・名前変更・パスワード再設定・削除ができます。
• 兼務の重複チェック: 設定画面のアカウント管理に、複数の役割を持つアカウントの一覧と、同じメールアドレスで二重登録されているアカウントの警告が表示されます。
• 初期セットアップ: 管理者が1人もいない場合、設定画面に「自分を管理者にする」ボタンが表示されます（SQL 不要でアプリ内完結）。
• アカウントを削除しても、過去の開発依頼・実行判定の履歴は名前付きで残ります（requester_name を保持）。
• アカウントの作成・パスワード再設定・削除には SUPABASE_SERVICE_ROLE_KEY（サービスロール）が必要です。
• デモモードではログイン画面でデモアカウントを選んでログインし、ログイン後は右上の「デモ」セレクトで切り替えられます。

ログイン必須（ゲストアクセスなし）

• URL を開いた時点でログイン状態を確認します。未ログインで /dashboard などを開くと /login?redirect=... へ送られ、ログイン後に元のページへ戻ります。
• 匿名（ゲスト）でアプリを閲覧することはできません。デモモードでもログインが必要です。
• 認証ゲートは src/middleware.ts と、各ページの requireUser()（src/lib/auth.ts）の二段構えです。
  • ⚠️ middleware は src/ 配下に置く必要があります（src/app を使う構成でプロジェクト直下に置くと Next.js が読み込まず、認証ゲートが働きません）。ビルド出力に ƒ Middleware の行が出ることで確認できます。
• ログイン不要で開けるのは、ログイン画面・決済の戻り先（/billing/*）・トークンで保護された電子契約の署名ページ（/sign/*）・**申込フォーム（/apply/*）**のみです。
• サインアウトは設定画面から行えます（デモモードでも利用可）。

削除・復元（ゴミ箱）

テストで投入したデータを、記録を残したまま片付けられます。メニュー「ゴミ箱」。

• 対象: 請求書 / 顧客 / 入金 / 定期契約 / 銀行明細 / NSS引き落としの一覧
• 削除してもデータは消えません — deleted_at を立てて一覧・集計・ダッシュボードから外すだけです。定期請求の自動生成対象からも外れます。
• 復元: ゴミ箱の「復元」でいつでも元に戻せます。
• 操作ログ: 誰が・いつ・何を・どんな理由で削除／復元したかを data_deletions に記録します。追記専用で、更新・削除は DB トリガーで拒否されます。
• 削除時には理由の入力欄が出ます（例:「テストで登録したデータのため」）。

締結済みの契約書は電子帳簿保存法の観点から削除対象に含めていません（取消は状態として記録します）。

開発進捗（開発依頼・エラー進捗報告）

スプレッドシートで運用していた「開発対応表」をそのままシステム化したものです（メニュー「開発進捗」）。

• 記載日・依頼者はアカウントから自動記録 — 入力工数を削減。
• 依頼側の入力項目: 課題名 / 詳細 / 分類（不具合・要望）/ 優先度（高・中・低）。
• エンジニア入力: ステータス（未対応・対応中・追加ヒアリング・対応完了）/ 対応完了日 / 開発対応内容。
• 完了希望日・完了予定日は扱いません。日付を出し合って擦り合わせる運用は負担が大きかったため廃止し、急ぎ具合は「分類・優先度・並び順」で表す方針にしています。
• 手動の並び替え — 「並び順: 手動（ドラッグで入替）」に切り替えると、行をつかんで上下にドラッグして対応の順番を入れ替えられます（矢印ボタンでも移動可）。並び順はそのまま保存され、全員に共有されます。
• 緊急度順に表示: 一覧は 不具合 → 要望、優先度 高 → 中 → 低、古い依頼ほど上の順で並びます。長期滞留（7日以上）の依頼は経過日数を赤く表示します。
• 完了した依頼は既定で非表示: 開いた直後は「未完了」タブです。完了した依頼は消えず、「完了」「すべて」タブから確認できます。
• 追加ヒアリングのやり取り（返信の追記と共有）: ステータスを「追加ヒアリング」にすると、詳細画面にやり取りのスレッドが出ます。
  • 依頼者は確認事項への返信を追記でき、追記するとエンジニアへ通知が届きます（エンジニアからの追いヒアリングは依頼者へ届きます）。
  • 各返信には**「エンジニアへ通知済み」＋通知した相手の氏名**がバッジで付き、誰に共有できたかがその場で分かります。
  • 一覧・詳細には状況バッジが出ます。「ヒアリング返信あり」＝エンジニアが確認する番（返信が届いた依頼は緊急扱いで強調）、「ヒアリング返信待ち」＝依頼者が答える番。
  • エンジニアがステータスを「対応中」などに戻すと、これらのバッジは自動で消えます。
• 役割ごとの督促バー: 画面上部に、いま急ぐことだけを出します。
  • 承認者（管理者）→ 「あなたの承諾待ちが N件あります」
  • それ以外 → 「承諾待ちの要望が N件（◯◯さん・△△さん の確認待ち）」
  • 依頼者本人 → 「あなたへの追加ヒアリングが N件あります」
  • エンジニア → 「追加ヒアリングに返信が N件届いています」
• 実行有無（管理者のみ編集可）: 要望は承認者（管理者ロール）全員の承諾で「実行」、1名でも停止で「実行なし」。未承諾の承認者は名前付きで一覧・詳細に表示され、本人が見ると「あなたの承諾待ちです」と強調されます。管理者は「実行有無を直接変更」から承諾を待たずに確定もできます（誰がいつ設定したかを記録し、「承諾状況からの自動判定に戻す」で解除）。
• 通知: 対応完了で依頼者・管理者に通知（未読のあいだトップにバナー表示）。新規依頼・追加ヒアリング・ヒアリング返信・実行判定も通知されます。
• スクリーンショット添付: 依頼フォーム・詳細画面へドラッグ&ドロップ、ファイル選択、または画面上で Ctrl+V（⌘+V）貼り付け。画像は自動で縮小してアップロードされます（本番は Supabase Storage・非公開バケット＋署名付きURL）。
• 画像への書き込み: 添付画像にペン・矢印・枠・テキストで注釈を入れ、別画像として保存できます（元画像は残ります）。
• 急ぎの項目をワンタップで共有（短縮URL）: 依頼の詳細・一覧カードにある「共有」から、端末の共有シート（LINE・メール・Slack・AirDrop など）へそのまま渡せます。
  • 共有されるのは https://＜サイト＞/d/12 のような依頼番号だけの短いURLです（UUID の長いURLを貼らなくてよく、口頭でも伝えられます）。開くと該当の依頼へ転送されます。
  • 共有シートが無い環境（PCブラウザなど）では、URLコピー / 本文つきコピー / QRコード / 別タブで開くを選べます。本文には「#12 課題名（不具合・優先度高・対応中）」のような要約が入り、相手はリンクを開く前に急ぎ具合が分かります。
  • まとめて共有: 一覧の「選択して共有」で急ぎの依頼を複数タップして選ぶと、番号つきの一覧＋短縮URLを にして送れます。

進捗ホーム（売上と開発を1画面で）

「売上はどこまで来ているか」「開発はどこで止まっているか」を、アプリを開いた直後の1画面で掴めるようにした画面です（メニュー「進捗ホーム」／トップ / とホーム画面に追加した PWA の起動先もここ）。

• いま急ぐこと — 売上側と開発側の要対応を1つのリストに混ぜて、赤（止まっている）→ 黄（急ぐ）→ 青（手番が来ている）の順に並べます。タップでその画面へ直行します。
  • 請求: 期限超過の請求（未収額つき）／未消込の入金明細／下書きのままの請求書
  • 開発: 急ぎの開発依頼（うち7日以上 滞留している件数）／あなたへの追加ヒアリング／ヒアリングに届いた返信（エンジニア）／あなたの承諾待ちの要望（管理者）
  • 何も無ければ「いま急ぎの対応はありません」とだけ出ます。
• 売上の進捗 — 今月の請求・入金（前月比・回収率）・未収金・MRR の4指標、回収率バー（入金 / 請求）、直近6ヶ月の推移グラフ。詳細はダッシュボードへ。
• 開発の進捗 — 未完了・対応中・今月の完了（今月の起票つき）・7日以上 滞留の4指標、未完了の内訳バー（未対応 / 対応中 / 追加ヒアリング＝どこで止まっているか）、急ぎの依頼 上位3件（急ぐ理由を「返信あり」「N日 経過」「承諾待ち」のバッジで表示）。
• 役割で出し分け — 請求権限が無いアカウントには売上セクションを表示しないだけでなく、売上データの取得自体を行いません。開発権限が無いアカウントも同様です。

開発スケジュール（中長期ロードマップ）

週1回の開発MTGで「今週なにを進めるか」を共有するための表です（メニュー「開発スケジュール」／/dev/schedule）。 スプレッドシートで管理していた中長期スケジュールを、開発進捗と連動する形でシステム化しています。

表の作り

• 1行＝1つの機能（スプレッドシートの1行と同じ）。カテゴリ / 機能名 / 優先度（★1〜5）/ 対応する月 / 目安日 / メモを持ちます。
• 横軸は月。当月から先の月が列になり、登録した項目のある月まで自動で伸びます。**当月の列は色付き＋「今月」**で強調されます。
• セルの印はスプレッドシートと同じ意味です。★＝日程が確定 / ☆＝未確定 / チェック＝完了。見送りにした機能は取り消し線で静かに残ります。凡例は表の見出しに常時表示しています。
• 見やすさ: カテゴリは領域ごとに色分け、優先度は★＋数字、確定した日程は色付きのバッジで表示します。横スクロールしても**「カテゴリ」「機能」の2列は左に固定**されるので、どの行を見ているか見失いません（スマホでも同じです）。
• 並べ替え: 管理者は行をつかんで上下にドラッグすると順番を入れ替えられます（タッチ操作用に**↑↓ボタン**も併設）。並び順は保存され、全員に共有されます。

開発進捗との連動

• 1つの機能に開発進捗の依頼を複数ぶら下げられます。連動先はいま挙がっている不具合・要望の一覧から直接選ぶ方式です（番号を打ち込む必要はありません）。
  • 「すべて / 不具合 / 要望」で絞り込み、課題名や番号で検索して、チェックを入れるだけで連動します。
  • 選んだ依頼は入力欄の上にチップで一覧表示され、×でそのまま外せます。
  • 既定では未完了の依頼だけが候補に出ます（完了・実行なしのものも、チェック1つで候補に加えられます）。
• 連動した依頼のステータスは常に最新が出ます（依頼側で「対応完了」にすれば、スケジュール表の進捗もその場で進みます）。
• 依頼の一覧は畳んであり、既定では「開発進捗 6件」という件数と進捗バーだけを表示します。エンジニアが最初に見るのは「今週は機能◯件」という粒度で、依頼の件数が並んで圧を与えないようにしています。開きたいときだけ展開でき、各依頼は #143 から詳細へ飛べます。

今週の共有

• 今週に進める分が画面のいちばん上に出ます（目安日がその週に入っている機能、または状況を「今週対応」にした機能）。
• 見出しの「◯/◯週」は自動で更新されます。ページは常にサーバーで描画し、開いた日時から「月曜はじまりの今週」を計算するため、週をまたぐと表示中の週と対象の機能が自動的に切り替わります（手動の操作は不要です）。
• 先週までの予定で終わっていないものは「先週までの予定で、まだ終わっていないもの」として、督促ではなく今週に載せ直す候補として静かに並びます。
• 「今週分をコピー」で、・勤怠管理（9/7） #143 #156 のような機能ごとに番号をまとめた文面をコピーできます。開発MTGやチャットへそのまま貼れます。

閲覧できるメンバー（設定画面のチェックボックス）

• 設定画面の「開発スケジュールを見られるメンバー（全体管理者のみ）」で、メンバーごとにチェックを付け外しします。
• スケジュール表は既定では表示されません。チェックを入れた人だけが開けます（メニューにも出ません。URLを直接開いても開発進捗へ戻されます）。
• 管理者は常に閲覧・編集できます（自分でチェックを外して締め出される事故を防ぐため、チェックの対象外です）。
• 初期状態では「酒井」「若林」の2名にチェックが入ります（移行 0019 が profiles.schedule_visible を立てます）。以降は設定画面で増減できます。
• 表の編集（機能の追加・変更・削除・並べ替え）は管理者のみです。閲覧を許可されたメンバーには編集ボタンもドラッグ操作も出ません。

スマートフォン対応（モバイル UI / UX）

現場・移動中でもそのまま使えるよう、スマートフォン表示を前提に作っています。

• アプリのように使える: viewport / テーマカラー / Web アプリマニフェストを設定済み。ブラウザの「ホーム画面に追加」でアドレスバーのないフルスクリーンのアプリとして起動できます（iOS 用アイコンも生成）。ノッチ・ホームバーのセーフエリアにも対応。
• 下部タブバー: よく使う画面（ホーム＝進捗ホーム、役割に応じて 受注管理 / 請求書 / 開発進捗 / 不具合 / 設定 など）へ 1 タップで移動。5つ目の「メニュー」で全メニューのドロワーを開けます。ドロワーは左へスワイプ、または背景タップで閉じられます。
• ヘッダーに現在地: サイドバーが見えないスマホでも、いまどの画面かがヘッダーに出ます。
• 一覧は「1件 = 1カード」: 横スクロールしていた表を、スマホでは項目名つきのカードに積み替えて表示します（見出しの文言を各項目のラベルとして自動で引き継ぐため、すべての一覧に適用されます）。開発進捗の一覧は、分類・優先度・ステータス・対応完了日まで1画面で読める専用カードです。
• 受注管理はスマホでも1列: 対応待ち・案件一覧はカードで縦に並び、案件ページの「次にやること」のボタンからそのまま手続きを記録できます。
• 入力しやすさ: 入力欄は 16px / 高さ 44px 以上（iOS がフォーカス時に画面を勝手に拡大するのを防止）。電話番号・郵便番号・口座番号などは端末のキーボードを最適化し、氏名・住所・メールは自動入力に対応。
• ダイアログはボトムシート: 画面下から出て、上部のハンドルを下へスワイプすると閉じられます。背面のページはスクロールしません。
• 不具合報告がその場でできる: 開発依頼のスクリーンショットは、写真の選択に加えてカメラ撮影からも添付でき、画像への書き込み（ペン・矢印・枠・テキスト）は指で操作できます。
• お客様向けページ: 申込・契約フォームは「次へ／署名」ボタンを画面下に固定し、長い入力でもすぐ進めます。契約書・請求書のドキュメント表示もスマホ幅に最適化しています。

スクリプト

npm run dev        # 開発サーバー
npm run build      # 本番ビルド（型チェック込み）
npm start          # 本番起動
npm run typecheck  # 型チェックのみ

デプロイ手順は DEPLOYMENT.md を参照してください。