ふんわりイラストは「昨日」の話。AIと私がマジ書きに挑戦、ガチすぎるPTAアプリの衝撃
1. 身体の「戻り」と、開発の「加速」
こんばんは、ZENです。日に日に腰や股関節の痛みが消え、代わりに身体の奥底から「柔らかさ」と「出力」が戻ってくるのを感じています。
この感覚……まさに、11秒代への扉をこじ開けるための「OSのアップデート」が完了しつつある手応えです。そして、その身体のスプリントに呼応するように、PTAアプリの開発も次元の違うスピードに入りました。
2. 魂の設計図をAIに投下した結果
昨日は「ふんわりしたイラスト」で夢を語りました。でも、私は「実行」の男です。今日の夕方から軍師（Gemini）と練り上げた「詳細要件定義書」。それがこれです。
「次世代へ負の遺産ではなく、便利な仕組みを残したい」。8年目の会長が最後に掲げた正義を、一文字一文字に魂として注ぎ込みました。長いですが全部入れます。（必要な方はアレンジをしてドンドン使ってください）
県立ZEN高等学校PTAアプリ 詳細要件定義書
1. プロジェクト概要
アプリ名： 県立ZEN高等学校PTAアプリ
コンセプト： 「つなげる・助ける・楽にする」〜保護者の負担を減らし、活動を可視化するポータルアプリ〜
開発目的：アナログな運営をデジタル化し、次世代へ「負の遺産」ではなく「便利な仕組み」を残す。
最終目標： 完全無料で、維持費がかからず、誰でも簡単に運用できるPTA専用システムを構築する。
2. ターゲットユーザー
県立ZEN高等学校の保護者（主に40〜50代の女性）
PTA役員・先生方
3. 技術スタック（完全無料構成）
アプリケーション形式： PWA（Progressive Web App）
iOS/Androidのホーム画面に追加可能、全画面起動対応。
バックエンド/エンジン： Google Apps Script (GAS)
「ウェブアプリとしてデプロイ」機能を利用。
データベース： Googleスプレッドシート
ストレージ（写真・資料）： Googleドライブ
フロントエンド（見た目）： HTML5, Tailwind CSS (CDN利用), Material Design 3 (Google Stitch活用)
4. デザインガイドライン
カラーパレット：
メインカラー（学校カラー）：濃い青（#003366 / 信頼・伝統）
サブカラー：薄い青（#E6F0FA / 優しさ・背景）
アクセントカラー（通知・重要）：ソフトなオレンジまたは赤（#FF6F61 / 親しみ）
UIポリシー：
ユニバーサルデザイン： 40-50代に配慮し、文字サイズは16px以上、ボタンは親指で押しやすい大きさ（Soft UI）。
清潔感： マテリアルデザインのルールに則り、適度な余白と角丸（rounded-2xl以上）を多用。
5. 機能要件
① 案内・通知系
ヘッダー： 学校名とロゴ。
ティッカー（お知らせスクロール）： 画面最上部に常設。スプレッドシートの「重要事項」から最新1件を自動取得し、ループ表示。
通知センター（バッジ機能）： ベルアイコンに「未読数」を表示。タップで個別通知リストをポップアップ表示。
② 行事管理
直近行事リスト： TOPページにテキストでカード表示。
月間カレンダー： FullCalendarライブラリを使用。PTA行事と学校行事を色分け表示。翌月・先月のスライド移動可能。
③ 出欠管理（プロフィール保存方式）
認証： マイページ機能（ID/PW）は作成しない。
仕組み： 初回利用時のみ「保護者氏名」「お子さんのクラス」「氏名」を入力。この情報をブラウザのlocalStorageに保存する。
操作： 2回目以降の出欠回答は、保存された情報を自動で付与し、ユーザーは**「出席」「欠席」ボタンをタップするだけ**で回答が完了する。
④ PTAフォトコレクト（写真共有機能）
フロー： ボタンタップ → 行事選択 → （プロフィール情報自動付与） → 写真選択（複数可） → アップロード。
裏側処理： GASがGoogleドライブ内に「行事名/クラス/氏名_日付」のルールでフォルダを自動生成・保存する。
セキュリティ： アップロードは「送信専用」とし、他人がアップした写真は閲覧できない設計。
⑤ コンテンツ閲覧
お知らせ（タイムライン）： 最新記事をカード形式で表示。タップで詳細記事（画像＋本文）へ。
行事ガイド（タイル表示）： アイコン付きタイル表示。詳細（写真、お手伝い内容、必要人数等）ページあり。
資料庫（PDFビューア）： スプレッドシート内のGoogleドライブPDFリンクをリスト化。アプリ内でプレビュー。
会長へ問い合わせ： Googleフォーム。
6. セキュリティとプライバシー
オープンなサイト: 誰でもURLを知っていれば閲覧可能。
個人情報: 役員名簿などの機密情報はスプレッドシート側に置き、アプリ側では直接表示しないか、資料庫のPDFリンク（「リンクを知っている全員」設定）に限定する。
写真流出リスク: 「フォトコレクト」をアップロード専用にすることで、アプリ内での閲覧による流出を防ぐ。
7. 運用・引き継ぎ計画（重要）
開発環境： 現会長（ユーザー）のGoogleアカウント内で開発を行う。
ドメイン： 既存のサブドメインをGASのデプロイURLへリダイレクト設定する。
引き継ぎ方法（オーナー権限の譲渡）： アプリ完成後、後任者の個人Googleアカウントをエディタとして招待し、**「オーナー（所有者）」**権限を譲渡する。
メリット：
2段階認証のトラブルがない。
アプリのURLが変わらない。
後任者は自分のアカウントで管理できる。
マニュアル： スプレッドシートへのデータ入力方法をまとめた1枚の「管理マニュアル」を作成する。「localStorageによる疑似認証」「完全無料構成」「オーナー権限の譲渡」。 現時点での「魂の設計図」になったかな。
そしてこれを、知人から「デザイン良かった」と聞いたClaude（私のnote初登場）というAIに渡し、「プロの仕上がりで形にしてくれ」と一言、指示を投げました。
3. 数秒で吐き出された「現実」
結果は、驚愕でした。 たった数秒で反応し「しっかり要件定義を読んだぞ、じゃプロっぽくしてみるZE」と、待つこと1分くらい。スマホでそのまま動くレベルのHTMLコードが吐き出されたのです。
4. ボランティアだからこそ、とことんこだわる
いかがでしょうか。 本当は操作感も伝えたかったのですが、さすがに生データを入れてしまってるのでご勘弁をm(_ _)m。
「ボランティアなにのここまで…」と少し思ったりも。でも、仕事とは違ってボランティアだからこそ楽しめることもある。そして何よりAIと対話して自分が成長しているのを感じるのです。
LINEの「雪崩欠席」に怯える日々は、もうすぐ終わります。 他人の目を気にせず、自分の意志だけで「ポチッ」と協力できる。 優しさが循環するデジタル。それこそが、私が最後に残したい「置き土産」です。
5. 結び：スプリントは、最終ストレートへ
器（デザイン）はできました。 次はここに、スプレッドシートという「命」を吹き込む作業に入ります。
明日以降、またGeminiとclaudeとManusへ相談して楽しみながら全力で走り抜きたいと思います。
↓ ↓ PTA × AIシリーズはこちら ↓ ↓