- GPT-6 Astra 軽で実装
15年前の東日本大震災で欲しかったDR/BCPコミュニケーションサイトを5分で作成できました
コロナ禍や大地震、ガス爆発などの災害が起きた時にお客様、取引先、従業員と会社やテナント間でどのように意思疎通できるか、どこでするか困ったことはありませんでしたか？中小企業ではあまり困らなくても中堅〜大企業になると大変です。会社PC(メール)にアクセスできるとも限らなかった。15年前のあの日、私がいた場所は天井が崩れ落ち停電が続きVPNは機能せず。PCは原則持ち出し禁止。こういうサイトが欲しかったと想像していたものがありました。それが15年後の今、5分で実現できるようになりました。今ならTeamsやSlackがスマホであるでしょと指摘を受けそうですが貸与スマホ持っていない、リモートワークができない現業系や取引先との進捗配信をどうしようかという問題があるのです。お客様への情報発信も課題です。PCも持ち出し禁止もしくはデスクトップでできない職場がまだ多いですし旅先でPCを持っているとも限りません。コーポレートサイト上でのコンテンツに適しているとも言い難い内容でもありこういうサイトのニーズは事業会社運営上今でも存在しうるものです。
作成してみたChatGPTサイト(追加発生費用無し)の要件
⚫️DR/BCP用公開サイトを設置して会社から伝達したい内容についてお客様/取引先向けはログイン無し、従業員向けは従業員に共有した共通のログイン情報で閲覧可能とする
⚫️投稿はそれぞれ100件表示し古いものから削除される
⚫️アクセスカウンターをそれぞれ設置する
⚫️ChatGPTサイト所有者を管理者として新規投稿、投稿編集、情報カテゴリ編集ができるようにする。管理者以外は閲覧のみ可能である。
⚫️PC、スマホからネットさえあればアクセス可能
※上記はあくまで例ですので管理者をどうするかとか双方向コミュニケーションを許可するかとか個別要件は企業ごとに容易に変えられます。これが生成AIによるWEBサイト作成の強みです。
※現時点ではWEBサーバー、DBサーバー、認証基盤の追加費用がかかりません。これらの設定も自然言語でなされ変更もできChatGPTのサブスク料金(PlusかPro相当以上)だけです。プロンプトを流し込むとシステム開発、テストが自動実行されその際にcodex/work枠が消費されます。サイトの利用自体に枠の消費はありませんが保存されていくデータ量は他と共通で契約容量が上限となりますのでトランザクション処理システムとしては向きません。
サイトはこちらです(現時点のURL):
https://dr-bcp-communication.mnoda1979.chatgpt.site
※ChatGPTを出さない自ら取得したドメイン名のURLと連携も可能です
作成されたサイトのスクショ(使える😆)
初期状態:
初期投稿後:
カテゴリメンテ:
新規投稿入力画面:
従業員専用ログイン:
従業員ログイン後:
管理者認証:
閲覧数:
ChatGPT Sites 開発事例集
2026/9/17更新:こちらの記事内容も対象とする開発事例集をまとめました。
https://first-success-development-portfolio.mnoda1979.chatgpt.site/
Sites作成した時に利用したプロンプト(ChatGPTによる自動生成です)
@Sites
DR/BCP Communication Site を新規作成してください。
既存Siteの改修ではなく、新規Siteとして構築してください。
このSiteは、災害・障害・事業継続上の緊急情報を、
1. お客様・取引先など一般外部向け
2. 従業員向け（Employees Only）
の2系統で公開・管理するためのコミュニケーションサイトです。
最優先事項は、見た目の作り込みではなく、
* 一般公開
* 従業員向け認証
* Site所有者向け管理者認証
* 日英2カ国語表示
* 投稿管理
* カテゴリ管理
* 表示回数カウンター
* 権限制御
* データ永続保存
* 最大100件管理
* 古い投稿の自動削除
* セキュリティ
を実際に利用可能な完成状態まで実装することです。
不要な追加機能や過剰なデザイン調整は避けてください。
⸻
0. 最重要：言語仕様
Site全体は、初期状態から
日本語・英語の2カ国語併記
としてください。
すべての画面、見出し、ボタン、項目名、説明文、カテゴリについて、
日本語を先、その後に英語
の順で表示してください。
原則：
日本語 / English
例：
* お客様・取引先向け / Customers & Business Partners
* 従業員向け / Employees Only
* 管理者 / Admin
* 投稿日時 / Posted
* 最終編集日時 / Last Updated
* 部門 / Department
* 投稿者 / Author
* カテゴリ / Category
* 内容 / Message
* 表示回数 / Views
* 新規投稿 / New Post
* 編集 / Edit
* 削除 / Delete
* ログイン / Sign In
* ログアウト / Sign Out
日本語と英語の順序を逆にしないでください。
サイト全体で、
日本語 → 英語
の順に統一してください。
投稿本文についても、日本語本文と英語本文を別々のフィールドとして保存してください。
⸻
1. Site全体構成
トップページ名称：
DR/BCP Communication Site
トップページには以下の2つの入口を表示してください。
① お客様・取引先向け / Customers & Business Partners
認証不要で誰でも閲覧可能。
② 従業員向け / Employees Only
認証後のみ閲覧可能。
従業員向けログイン情報：
* ユーザーID / User ID: emp
* パスワード / Password: only
ログインした一般従業員は読み取り専用としてください。
従業員ユーザーには以下を許可しません。
* 新規投稿 / New Post
* 投稿編集 / Edit Post
* 投稿削除 / Delete Post
* カテゴリ編集 / Category Management
* 管理画面 / Admin
⸻
2. トップページ
トップページには以下を表示してください。
DR/BCP Communication Site
日本語：
「災害、システム障害、その他の事業継続上の重要情報をお知らせするサイトです。」
英語：
“This site provides important information regarding disasters, system outages, and other business continuity events.”
その下に、
* お客様・取引先向け / Customers & Business Partners
* 従業員向け / Employees Only
へのリンクまたはボタンを設置してください。
Employees Onlyを選択した際、未認証の場合はログイン画面へ遷移してください。
⸻
3. お客様・取引先向け / Customers & Business Partners
ログイン不要で誰でも閲覧可能としてください。
外部向けとして登録された投稿のみ表示してください。
表示形式は表形式を基本とします。
表示項目：
項目 内容
投稿日時 / Posted 最初に投稿した日時
最終編集日時 / Last Updated 最後に編集した日時
部門 / Department 手入力
投稿者 / Author 手入力
カテゴリ / Category カテゴリマスタから選択
内容 / Message 日本語本文 → 英語本文
新しい投稿を上に表示してください。
投稿日時の降順としてください。
最大100件まで保持・表示してください。
⸻
4. 従業員向け / Employees Only
以下の認証後のみ閲覧可能としてください。
* ユーザーID / User ID: emp
* パスワード / Password: only
ログイン後の一般従業員は読み取り専用です。
表示項目：
項目 内容
投稿日時 / Posted 投稿日時
最終編集日時 / Last Updated 最終編集日時
部門 / Department 手入力
投稿者 / Author 手入力
カテゴリ / Category カテゴリマスタから選択
内容 / Message 日本語本文 → 英語本文
投稿本文は必ず、
1. 日本語
2. 英語
の順で表示してください。
新しい投稿を上に表示してください。
最大100件まで保持・表示してください。
⸻
5. 表示回数カウンター / View Counter
以下の2つのサイトについて、それぞれ独立した表示回数カウンターを設けてください。
1. お客様・取引先向け / Customers & Business Partners
2. 従業員向け / Employees Only
各画面の目立ちすぎない場所に、
表示回数 / Views: 123
のような形式で現在の累計表示回数を表示してください。
日本語を先にしてください。
例：
表示回数 / Views: 1,234
⸻
6. 表示回数カウンターの重要仕様
表示回数カウンターは、
ブラウザキャッシュ、localStorage、sessionStorage、JavaScript変数だけに依存する実装にしないでください。
カウント値はサーバー側またはChatGPT Sitesで利用可能な永続データストアへ保存してください。
ページを再読み込みしてもカウント値が失われないようにしてください。
異なるPC、スマートフォン、ブラウザから閲覧しても、同一の累計値が表示されるようにしてください。
例えば、
* PC Aで100回
* PC Bで1回
閲覧した場合、
PC Bでも原則として
表示回数 / Views: 101
のように全体の累計値を取得できる構成にしてください。
⸻
7. カウントタイミング
お客様・取引先向け
Customers & Business Partnersページのコンテンツが正常に取得・表示されたときに、
externalViewCount + 1
としてください。
従業員向け
Employees Onlyの場合は、
emp / only
による認証が成功し、Employees Onlyのコンテンツが正常に取得・表示された場合のみ、
employeeViewCount + 1
としてください。
ログイン画面を表示しただけではカウントしないでください。
認証失敗時もカウントしないでください。
⸻
8. キャッシュに依存しないカウンター
特に重要です。
静的HTMLにカウンター値を書き込むだけの方式や、CDN・ブラウザキャッシュされたHTMLに古いカウンター値が残る構成は避けてください。
カウンター値は可能であれば、
1. ページ表示
2. サーバー側でカウンターを原子的に +1
3. 最新カウンター値を取得
4. 画面へ表示
の流れとしてください。
キャッシュされたページ自体が表示される場合でも、表示回数部分については別途サーバー側から最新値を取得できる設計を優先してください。
表示回数取得APIについては、
* Cache-Control: no-store
* または同等のキャッシュ抑止方法
が利用可能であれば使用してください。
⸻
9. カウンター更新の競合対策
複数ユーザーが同時にアクセスしてもカウント欠落が起きにくい構成としてください。
例えば、
「現在値を取得 → ブラウザ側で+1 → 上書き」
のような競合しやすい方式は避けてください。
可能であれば、
* atomic increment
* database transaction
* SQL UPDATE ... SET count = count + 1
* ChatGPT Sitesで利用可能な同等の原子的更新処理
を使用してください。
例えば、同時に10人がアクセスした場合に、本来10増えるべきところが1しか増えないような実装は避けてください。
⸻
10. カウンターデータ
最低限、以下のようなデータを永続保存してください。
* externalViewCount
* employeeViewCount
* updatedAt
または、
* id
* siteKey
* viewCount
* updatedAt
のような汎用構造でも構いません。
例：
siteKey viewCount
external 1254
employees 738
CustomersとEmployeesのカウンターは完全に分離してください。
⸻
11. カウンターと個人情報
今回必要なのは、
累計表示回数
です。
原則として、表示回数集計のためだけに、
* 氏名
* メールアドレス
* IPアドレス
* User Agent
* 端末情報
などを恒久保存する必要はありません。
不要な個人情報収集は行わないでください。
ユニークユーザー数ではなく、
ページの正常表示回数
をカウントしてください。
同じ人がページを再読み込みした場合も、新しい正常表示としてカウントして構いません。
⸻
12. Site所有者向け 管理者 / Admin
Site内の目立たない場所に、
管理者 / Admin
リンクを設けてください。
管理者機能は、このSiteのChatGPT Site所有者だけが利用可能としてください。
可能であれば、
Sign in with ChatGPT
またはChatGPT Sitesが提供するSite所有者認証を利用してください。
固定管理者ID・パスワード方式は使用しないでください。
emp / only の従業員ユーザーにはAdminへのアクセスを許可しないでください。
⸻
13. 管理画面 / Admin Dashboard
管理画面も日英2カ国語表示としてください。
メニュー：
* 投稿一覧 / Posts
* 新規投稿 / New Post
* カテゴリマスタ / Category Master
* サイト統計 / Site Statistics
* ログアウト / Sign Out
⸻
14. サイト統計 / Site Statistics
管理画面にも現在の累計表示回数を表示してください。
最低限、
サイト 累計表示回数
お客様・取引先向け / Customers & Business Partners XXXX
従業員向け / Employees Only XXXX
を表示してください。
カウンターのリセット機能は現時点では不要です。
管理画面を開いたこと自体は、CustomersまたはEmployeesのカウンターには加算しないでください。
⸻
15. 投稿一覧
管理者の投稿一覧には以下を表示してください。
* 公開先 / Audience
* 投稿日時 / Posted
* 最終編集日時 / Last Updated
* 部門 / Department
* 投稿者 / Author
* カテゴリ / Category
* 内容 / Message
* 編集 / Edit
* 削除 / Delete
公開先：
* お客様・取引先向け / Customers & Business Partners
* 従業員向け / Employees Only
⸻
16. 新規投稿 / New Post
管理者は新規投稿を作成できるようにしてください。
入力項目：
公開先 / Audience
必須。
* お客様・取引先向け / Customers & Business Partners
* 従業員向け / Employees Only
部門 / Department
手入力、必須。
投稿者 / Author
手入力、必須。
カテゴリ / Category
カテゴリマスタから選択、必須。
内容（日本語） / Message - Japanese
手入力、必須。
内容（英語） / Message - English
手入力、必須。
日本語と英語は別フィールドで保存してください。
保存時に自動記録：
* 投稿日時 / Posted
* 最終編集日時 / Last Updated
新規作成時：
投稿日時 = 最終編集日時
⸻
17. 投稿編集 / Edit Post
編集可能項目：
* 公開先 / Audience
* 部門 / Department
* 投稿者 / Author
* カテゴリ / Category
* 内容（日本語） / Message - Japanese
* 内容（英語） / Message - English
編集しても投稿日時は変更しないでください。
保存時に、
最終編集日時 / Last Updated
だけを現在日時へ更新してください。
⸻
18. 投稿削除 / Delete Post
削除前に確認画面を表示してください。
日本語：
「この投稿を削除しますか？」
英語：
“Are you sure you want to delete this post?”
ボタン：
* 削除 / Delete
* キャンセル / Cancel
⸻
19. カテゴリマスタ / Category Master
カテゴリマスタも日英2カ国語で管理してください。
各カテゴリは、
* 日本語カテゴリ名
* 英語カテゴリ名
を別フィールドとして保存してください。
管理者は、
* 新規作成 / Add
* 編集 / Edit
* 削除 / Delete
が可能です。
投稿画面でのカテゴリ表示：
日本語カテゴリ名 / English Category Name
初期カテゴリ：
日本語 English
緊急 Emergency
災害 Disaster
システム障害 System Outage
オフィス閉鎖 Office Closure
交通 Transportation
安全 Safety
復旧状況 Recovery Status
事業継続 Business Continuity
一般情報 General Information
⸻
20. 投稿件数上限
Customers & Business PartnersとEmployees Onlyは、それぞれ独立して最大100件まで投稿を保持してください。
101件目を登録した場合、
その公開先で最も古い投稿を自動削除してください。
別公開先の投稿を削除してはいけません。
投稿の自動削除によって表示回数カウンターをリセットしないでください。
表示回数は投稿データとは独立して保持してください。
⸻
21. 日時
日時は、
Asia/Tokyo
を使用してください。
表示形式：
YYYY-MM-DD HH:mm
例：
2026-09-16 08:30
⸻
22. 権限モデル
A. 一般外部ユーザー / Public User
認証不要。
閲覧可能：
* トップ / Top
* お客様・取引先向け / Customers & Business Partners
閲覧不可：
* 従業員向け / Employees Only
* 管理者 / Admin
⸻
B. 従業員ユーザー / Employee User
認証：
* User ID: emp
* Password: only
閲覧可能：
* トップ / Top
* お客様・取引先向け / Customers & Business Partners
* 従業員向け / Employees Only
操作：
読み取り専用 / Read Only
禁止：
* 新規投稿
* 編集
* 削除
* カテゴリ管理
* Admin
⸻
C. Site所有者 / Site Owner / Administrator
Site所有者認証を利用してください。
可能な操作：
* 新規投稿
* 投稿編集
* 投稿削除
* カテゴリ管理
* サイト統計閲覧
⸻
23. Employees Only認証
emp / only を、
* HTML
* JavaScript
* クライアント側ソース
に平文埋め込みしないでください。
可能な限りサーバー側で認証してください。
認証成功後は、安全なセッションまたはCookieを使用してください。
ログアウト機能も設けてください。
⸻
24. セキュリティ
Customers投稿とEmployees投稿は、表示制御だけではなくデータ取得段階でも分離してください。
未認証ユーザーが、
* URL直接入力
* API直接アクセス
* HTMLソース確認
等によってEmployees Onlyの内容を取得できないようにしてください。
Employees Only投稿は認証後のみサーバー側から取得してください。
Admin APIもSite所有者以外には利用させないでください。
投稿本文内の、
* HTML
* JavaScript
* scriptタグ
* その他危険なコード
が実行されないようXSS対策を行ってください。
⸻
25. データ構造
投稿：
* id
* audience
* createdAt
* updatedAt
* department
* author
* categoryId
* contentJa
* contentEn
カテゴリ：
* id
* nameJa
* nameEn
* createdAt
* updatedAt
サイト表示回数：
* siteKey
* viewCount
* updatedAt
siteKey例：
* external
* employees
日本語と英語を1つのフィールドへ連結して保存しないでください。
⸻
26. 画面構成
一般公開 / Public
1. トップ / Top
2. お客様・取引先向け / Customers & Business Partners
3. 従業員ログイン / Employee Sign In
4. 従業員向け / Employees Only
管理者 / Admin
5. 管理者認証 / Admin Authentication
6. 管理画面 / Admin Dashboard
7. 投稿一覧 / Posts
8. 新規投稿 / New Post
9. 投稿編集 / Edit Post
10. カテゴリマスタ / Category Master
11. サイト統計 / Site Statistics
⸻
27. UI方針
DR/BCPサイトのため、
* 読みやすさ
* 緊急時の視認性
* スマートフォン対応
* PC対応
* 表の視認性
を優先してください。
日英表記は、
日本語 → 英語
としてください。
画面幅によっては、
日本語
English
の2行表示でも構いません。
表示回数はページ上部または下部の目立ちすぎない場所に、
表示回数 / Views: 1,234
のように表示してください。
⸻
28. 初期状態
大量のダミー投稿は作成しないでください。
必要なテストデータは最小限とし、完成時には削除してください。
初期カテゴリのみ登録してください。
表示回数カウンターの初期値は、
0
としてください。
⸻
29. 完成条件
以下が実際に動作することを完成条件としてください。
1. トップページを誰でも開ける
2. Site全体が日本語・英語併記
3. 日本語が必ず英語より先に表示される
4. Customers & Business Partnersを認証なしで閲覧できる
5. Employees Onlyは未認証では閲覧できない
6. emp / only でEmployees Onlyへログインできる
7. 従業員ユーザーは読み取り専用
8. Site所有者のみAdminを利用できる
9. カテゴリを日本語・英語で管理できる
10. 投稿本文を日本語・英語で登録できる
11. 管理者が投稿を新規作成できる
12. 投稿を編集できる
13. 投稿を削除できる
14. 投稿日時が自動記録される
15. 編集時に最終編集日時だけ更新される
16. 公開先ごとに投稿データが分離される
17. 各公開先最大100件まで保持される
18. 101件目で最古投稿が自動削除される
19. Customersサイトに独立した累計表示回数がある
20. Employeesサイトに独立した累計表示回数がある
21. ページ再読み込みでもカウンターが失われない
22. 異なる端末から同じ累計カウンター値を参照できる
23. ブラウザキャッシュやlocalStorageだけに依存しない
24. 同時アクセス時も可能な限り正確に加算される
25. Employeesログイン画面を表示しただけではカウントされない
26. Employees認証失敗時にはカウントされない
27. Admin表示はCustomers/Employeesカウンターに加算されない
28. Employees Onlyデータを未認証ユーザーが取得できない
29. Admin APIを一般ユーザーが利用できない
30. PC・スマートフォン双方で正常に利用できる
⸻
30. 実装優先順位
作業時間や実装枠に制約がある場合は、以下の順番で完成させてください。
1. データ永続保存
2. 日英2カ国語データ構造
3. Customers & Business Partners表示
4. Customers表示回数カウンター
5. Employees Only認証
6. Employees Only表示
7. Employees表示回数カウンター
8. Site Owner / Admin認証
9. 新規投稿
10. 投稿編集
11. 投稿削除
12. 日英カテゴリマスタ
13. サイト統計
14. 100件上限・古い投稿自動削除
15. セキュリティ確認
16. UI調整
広範囲に未完成機能を作るのではなく、優先度の高いものから実際に利用可能な状態まで完成させてください。
⸻
31. 最重要事項
これはデモ画面ではなく、実際のDR/BCP Communication Siteとして利用する前提です。
以下の実装は禁止してください。
* ブラウザ再読み込みで投稿データが消える
* 表示回数がブラウザごとに異なる
* localStorageだけで表示回数を保持する
* sessionStorageだけで表示回数を保持する
* JavaScript変数だけでカウントする
* キャッシュされたHTMLに固定された古い表示回数だけを表示する
* 同時アクセスで大量にカウントが欠落する単純なread-modify-write方式
* Employees Onlyの内容がHTMLへあらかじめ埋め込まれている
* Adminリンクを隠しているだけで管理APIへアクセスできる
* 日本語と英語を1フィールドへ連結保存する
* ボタンだけ存在して実際には動作しない
表示回数は、
サーバー側またはChatGPT Sitesで利用可能な永続データストアに保存する累計カウンター
としてください。
可能な限り、
atomic increment + 最新値取得
方式で実装してください。
ChatGPT Sitesの仕様上、指定した方式をそのまま実装できない場合は、機能自体を省略せず、
* 永続性
* 複数端末での共通値
* キャッシュ非依存
* 同時アクセス時の整合性
をできるだけ満たす最も簡潔な代替方式を実装してください。