3-3 運用マニュアルを作る ​

サイトの構築が終わったら、更新する人のための運用マニュアルを書かせます。広報の相沢さんと編集部の佐伯さんが、 管理画面でお知らせ・プレスリリース・マガジンを書いて公開するための手引きです。

準備：ブラウザを使えるようにする ​

管理画面の画面写真を撮影するため、作業フォルダに Playwright（ブラウザを操作するツール）を入れます。

npm init -y
npm i -D playwright
npx playwright install --with-deps chromium

Claude Code はこれを使って、実際に管理画面へサインインし、操作しながら撮影します。

頼む ​

組み上がったサイトの運用マニュアルを manual/ に Markdown で書いてください。

- 読む人は広報の相沢さんと編集部の佐伯さんです。管理画面でお知らせ・プレスリリース・マガジンを書いて公開する手順を中心に、迷いそうなところと、してはいけないこと（カテゴリの basename を変えない、など）も書いてください
- 管理画面の画面写真を撮って、手順の中に入れてください。ブラウザはこのフォルダに Playwright を入れてあります（npx playwright / node から使えます）。管理画面には、構築のときに決めた相沢さん・佐伯さんの初期パスワードで入ってください。パスワードはマニュアルにもファイルにも書かないでください
- 撮影のついでに、構築のときに残った確認（佐伯さんの画面でマガジンの記事が崩れずに開けるか、HTML のブロックが選べるか、担当以外が見えないか）も確かめて、結果を最後に教えてください。確かめるために作った記事は消してください
- 設計書（design-doc.md）と構築の記録（build-log.md）も参考にしてください

管理者のパスワードは渡していません。 撮影には、構築のときに Claude Code 自身が作成した2人のアカウントを使わせました。 マニュアルの画面写真がそれぞれの担当者の画面になり、担当ごとに権限が正しく分かれているかも同時に確かめられます。

Claude Code がしたこと ​

記録では 147ターン・約37分かかりました。3つの段の中でいちばん長い作業です。

1. 設計書と構築の記録を読み、マニュアルの章立てを決める
2. Playwright で、相沢さん・佐伯さんとして管理画面にサインインする
3. 確認用の記事を実際に作成して公開し、各段階の画面を撮る（42枚）
4. 公開ページも撮影し、手順と結果を対応させる
5. 確認用の記事と画像をすべて消し、サイトがモックアップと一致した状態に戻ったことを確かめる

撮影の途中で見つかったこと ​

管理画面で実際に記事を作成したことで、3-2 では確認できなかった問題が3つ見つかりました。

1つ目はAPI で作ったものだけで確かめると見落とすという典型例です。管理画面で人間が操作したときの形でも確かめることが大事です。 運用マニュアルを書かせる段が、そのまま受け入れの確認にもなりました。

構築のときに残っていた確認項目の結果も報告されました。

• 佐伯さんの画面で、取り込んだマガジンの記事は崩れずに開いた（本文全体が1つの HTML のブロックとして開く）
• HTML のブロックは選べ、雛形の class も保存・公開で消えない
• 2人とも、担当のブログしか見えない。ほかのブログやサイトの設定を開くと「権限がありません」になる

できあがった運用マニュアル ​

manual/ には、目次と5つの章が出力されました。全文は付録Cにあります。

パスワードは頼んだとおり、マニュアルにもファイルにも書かれていませんでした（撮影のスクリプトは環境変数でパスワードを受け取る作りでした）。

この段のまとめ ​

公開用のドメインに切り替える ​

ここまでは手元の MT（http://localhost:8090/）で構築して確認しました。最後に、サイトの URL を公開用のドメインに切り替えます。 設計書には、切り替えを前提にした構成と手順（14.1）が最初から書いてあります。

公開用のドメインが決まりました。サイトの URL を https://five-united-demo.mtbcli.com/ に切り替えて、全体を書き出し直してください。

- 手順は design-doc.md の 14.1 のとおりに進めてください。公開パス（/data/file/static）は変えません
- 書き出したあとは、手元の http://localhost:8090/ で、HTML に旧ドメイン（localhost:8090）が残っていないこと、47ページがモックアップと一致したままであることを確かめてください
- Web サーバの設定は私がします。結果は build-log.md に追記してください

記録では24ターン・約2分でした。

1. ウェブサイトの URL だけを変えた（3つのブログの URL はウェブサイトからの相対指定なので、合わせて変わった）
2. 記事・ページ・コンテンツデータから旧ドメインを探し、画像の欄の13件に入っていたものを /images/… の形に置き換えた （3-3で見つかった、管理画面で入れた画像の値です）
3. 記事・ページ・コンテンツデータ・インデックスをすべて書き出し直した
4. HTML・フィード・サイトマップに旧ドメインが0件、モックアップとの一致は47ページとも保たれていることを確かめた

あとは書き出したファイルを公開用のサーバに置けば、公開は完了です（Web サーバの設定は MT の外の作業です）。

チュートリアルのまとめ ​

人間が書いたのは、要件メモと、合わせて4回の頼む文だけです（ドメインの切り替えを入れると5回）。同じ頼み方でもう一度実行した結果はもう一度通すとにあります。 設計書・サイト・運用マニュアルは Claude Code が mtb を使って作成し、途中で見つかった問題も、原因と直し方を記録に残しながら自分で修正しました。

完成したサイトは five-united-demo.mtbcli.com で公開しています。