つながる帳 ど素人向けガイド
施設導入（運営）と、職員・家族のスマホ向けを1冊に · 2026年4月29日改訂（顔ログイン自動照合・言語🌐追記）

プログラムを書かない前提で読めます。医療診断・医学的助言ではありません。本番の URL・環境変数・SQL の詳細は SETUP_PRODUCTION.html（このページと同じ /docs/ にあります）を参照してください。

【ご本人・家族の方】いちばん大事なお願い
初めて使う方は、必ず施設（デイサービス等）からの説明に沿ってログインしてください。
アカウントの新規発行・「パスワードを教えて」といったお問い合わせは、利用中の施設の窓口へ。アプリの会社に直接メールしても、あなたがどの利用者さんのご家族か分からないため、代わりに作れないことが多いです。
このガイドの読み分け
施設用…デイサービスを運営する貴施設（導入元・管理者）がやること（URL・クラウド・配布物）。
現場の「私用」イメージ…職員・家族・本人がスマホやブラウザで触る画面の説明・よくある質問。説明会でそのまま読み上げ・印刷して使えます。

用語を10秒で

テナント（施設スラッグ）「どの施設か」を表す英数字のコード。URL の ?tenant= の後ろに付きます。利用者名ではありません。
ローカルデモパソコン1台のブラウザだけで動く試用モード。クラウド未設定時に表示されます。
Supabase本番の「ログイン・データベース・写真保存」などを担うクラウドサービス（開発者・担当者が設定）。
VercelWeb アプリをインターネットに載せるホスティング（本番 URL がここから発行されることが多い）。
デプロイ最新の画面を本番 URL に反映すること。
言語切替（🌐）主要画面の右上。🌐をタップして開き、言語を選ぶとメニューは閉じます。
スマホで開く（本番）ホーム右上のスマホで開くから、QR または URL コピーでスマホのブラウザへ（open-on-phone.html）。
本人・家族向け入口（本番の例）/family/ … 画面の雰囲気が「連絡帳・今日のサマリー」向け。ログインは /login.html?entry=family から。施設の担当から届く案内（メール）と一緒に進めてください。
事業所・職員向け入口/facility/ または /login.html?entry=facility。職員アカウントでログインすると、家族向けURLを開いても（仕組み上）事業所向けのホームに合わせて案内が切り替わることがあります。家族用の見た目で試したい場合は、施設の手順に従い家族用の別アカウントを使います。

【ご本人・家族】入り口と、施設の案内が先！

Web 上の見た目は、「事業所の人向け」と「ご本人・家族向け」で入口の案内文を変えています（中身のデータは、施設のルールとアカウントの種類で決まります）。

  1. 施設からの紙・メール・口頭の説明を先に読む。「URL を開く」「メールとパスワードを入れる」など、必ず施設の手順に従ってください。これが、本人・家族向けトップに書いてある 「施設からの説明に沿ってログイン」の意味です。
  2. 迷ったら窓口へ。「登録してない」「家族用のメールが来てない」などは、利用中の施設に聞くのが正解です（アプリ提供側に直接メールしても、誰の家族か分からず、代わりに新規登録を作れません）。
  3. 職員のメールでログインしていると、事業所の業務用ホーム（今日の記録の入力画面など）の流れになることがあります。家族向けの画面を見るには、施設が案内する 家族専用のメールアドレス（別登録）を使います。
家族向けの入口（本番の例）： トップ （ドメイン）/family/ → 青い 「ご本人・ご家族向けログイン」 → 続けて login.html?entry=family。施設の担当から案内が届いているのと同じ流れでOKです。
ログイン画面の「新規登録」は、主に施設のデモ・職員用の想定が多いです。家族用アカウントの発行は、原則として施設の窓口が行います。施設外で勝手に作っても、利用者さんと紐づかないことがあります（画面下の注釈のとおりです）。

【施設用】全体の流れ（何からやるか）

  1. 利用規約・個人情報の取り扱いが説明できる状態にする（社内・法務と調整）。
  2. 施設スラッグ（テナントID）を1つ決める（英小文字・数字・ハイフン推奨。メモに残す）。
  3. Supabaseでプロジェクトを作り、SQL（マイグレーション）を流す（手順は SETUP_PRODUCTION.html）。
  4. Vercelに本番を載せ、環境変数（VITE_SUPABASE_*・必要なら GEMINI_API_KEY）を設定して再デプロイする。
  5. 完成 URLの例: https://（本番ドメイン）/index.html?tenant=（施設スラッグ）
  6. 配布物の例… ①完成 URL ②QR 画像（任意）③このガイド（印刷可）④問い合わせ先
  7. 動作確認… スマホのブラウザで URL を開き、ホームと職員記録が開くか確認する。
環境変数の一覧・SQL の流し方は SETUP_PRODUCTION.html にピンポイントで書いてあります。

【施設用】URL・テナント・本番公開

職員・家族に配るリンクは、運用ルールに合わせて ?tenant=施設スラッグ を付けた URL を使うと、画面上の「施設」表示が分かりやすくなります（本番で Supabase にログインしている場合は、プロフィールの施設が優先される動きになります）。

https://（本番ドメイン）/index.html?tenant=demo_facility
ローカルで試すだけのときは、PC で npm run dev を実行し、表示された http://localhost:5173 を開きます（file:// で HTML を直接開くと、一部の機能が動きません）。
スマホで同じ Wi‑Fi から見る（開発時）: ブラウザで /dev-smartphone.html を開くと、実際の LAN URL と QR が表示されます（192.168.x.x を手で入れる必要はありません）。

【施設用】契約企業向け（ブランディング・QR・文書）

実運用では、施設ごとに表示名・注意書き・AI免責文を揃え、配布用QRと現場向け紙を渡せると安全です。

本番のセキュリティHTTPヘッダ（X-Frame-Options など）は Vercel 設定（vercel.json）で付与しています。音声入力を使う画面ではマイクをブラウザ許可してください。

ロール（誰が何を見るか）のイメージ

設計上は、職員・家族・管理者・ケアマネ・保健師・主治医（閲覧）など役割で見える範囲を分ける前提です。実際のログインと権限は Supabase の設定とアカウント付与で決まります。

家族アカウントを新規登録した直後は、profiles.resident_id を利用者に紐づける必要がある場合があります。詳細は SETUP_PRODUCTION.html 末尾の説明を参照してください。

【現場】画面の歩き方（ボトムナビ）

スマホ幅の画面の下に、次の4つが並びます（2026年4月時点の表記）。

ホーム内の「その他」から、本人自由欄・アルバム・職員連携（チーム） などに進めます（self.html / album.html / team.html など）。

【現場】主要ページの役割

index.htmlホーム。今日の流れ・各機能への入口。
staff-record.html職員が1日の記録を入力。音声入力・写真・Gemini による申し送り案（本番設定時）。写真付き保存後、設定と前回記録が揃えば画像の変化検知（ブラウザ内の比較・職員の「問題なし／要観察／医療連絡」）が動くことがあります。
family.html家族向け。今日の要約・タイムライン・メッセージ送信。
summary.htmlデータ閲覧・印刷・PDF。主治医へのお持ち帰り用イメージ。
login.htmlログイン・新規登録。?entry=family / ?entry=facility で上の案内文が切り替わります（中身の権限はアカウントのロールで決まります）。顔認証でログインは1タップでモーダルが開き、カメラ準備後に自動で照合が始まります（詳細は 顔認証説明書・職員ログイン画面）。右上🌐で表示言語を切り替えられます。
team.html多職種の連絡メモ（権限により見え方が変わります）。
self.html本人の自由欄（短文・絵文字）。
album.html記録に紐づく写真の一覧イメージ。
admin.html利用者ごとの記録件数の目安（管理者向け）。

Gemini（申し送り案）について

職員記録画面の「Gemini で申し送り案」は、フォームに入れた内容をもとに文章案を出す機能です。API キーはサーバー側（Vercel の環境変数 GEMINI_API_KEY）だけに置き、ブラウザに埋め込みません。Gemini は有料プランで運用（2026-05-06 移行済）。無料プランでの運用は禁止。

出力は参考文案です。必ず職員が内容を確認し、施設の記録ルールに合わせて修正・承認してください。

プライバシーと記録の扱い（要点）

困ったとき

家族用のURLを開いたのに、事業所の画面っぽいログインしているアカウントが職員用の場合、仕組み上、事業所のホームに合わせることがあります。家族用の画面を見るには、施設が発行した家族用アカウントでログインし直してください。別のメールアドレスの登録が必要なことが多いです。
localhost:5173 が開かないターミナルでプロジェクトフォルダに移動し、npm run dev を実行したか確認する。ターミナルを閉じるとサーバーも止まります。
HTML をダブルクリックしたら変file:// ではモジュール読み込みが失敗することがあります。必ず npm run dev の URL を使ってください。
ログインできないSupabase の Auth 設定・メール確認・環境変数が Vercel に入っているか確認。SETUP_PRODUCTION.html を参照。
顔認証ログインが通らない（職員）顔を登録したのと同じ端末・同じブラウザか確認。明るさ・距離を整え「再試行」。それでもダメなら顔登録し直し、またはメールログイン。顔認証説明書（職員ログイン画面）を参照。
Gemini が動かないGEMINI_API_KEY と GEMINI_PAID_PLAN_CONFIRMED（true/1）が Vercel にあるか、再デプロイしたか確認。
この統合版（本ページ）URL 例: /docs/beginner-guide-ja.html … 印刷・説明会配布用の要約1冊
本番セットアップ（環境変数・SQL）SETUP_PRODUCTION.html
プロジェクト READMEリポジトリ直下の README.md（開発・デプロイの入口・Git で管理）
本人・家族向けトップ（静的説明ページ）/family/ — 施設向けのLPとは別の、家族向けの入り口。オレンジ枠の「お願い」に施設案内の前提が書いてあります。
アプリのトップ（実行時）index.html（npm run dev または本番 URL から開いてください）
契約・導入（運営者）オンボーディング詳細 · QR発行 · 施設向け運用
顔認証システム ど素人取扱説明書face-auth-guide-ja.html — 同意・登録・職員ログイン画面の顔認証・来所退所・服薬・自由欄・写真タグ・困ったときQ&A

改訂の記録（版数・社内承認）は貴施設内メモで管理してください。