工程を分け、成果物をつないで、HPを1枚作り切る
題材は自社HPのリニューアルです。HP制作を6工程に分け、全6工程を自分のPCで手を動かして回します。工程1〜3（現状調査・理解／目的設定／再調査）は運営の深瀬のリードでみんなで進み、工程4〜6（要件・情報設計／デザイン定義／実装）は自分のペースで進めます。
最終回は全員 Claude Code を使います（デスクトップアプリの「Code」タブ／VS Code拡張）。工程ごとにファイルを作って次の工程へ渡していく進め方のため、今日はツールを1つに揃えます。これまで Cowork で参加していた方も、今日は Code タブで操作してください。
今日のタイムスケジュール
はじめに・今日の全体像
5分§0.1前回（第4回＝外部連携）のふりかえり
第4回は「チャットで頼むと、外の業務システムが動く」——MCP・コネクタ・プラグインの回でした。要点は3つです。
§0.2前回の質問にお答えします
第4回のふりかえりアンケート（回答51名）に寄せられた質問にお答えします。当日は主なものだけ触れます——残りはこの資料で読めます。
Q.APIキーは「公式から入手」とのことでしたが、公式のどこを探せばよいですか？すぐ見つかるものですか？
そのサービスの管理画面（設定）の中です。メニュー名は「外部連携」「API」「開発者向け」「アクセストークン」あたりが定番で、ハンズオンのわくわく精算でも設定ページの「外部連携用APIキー」にありました——あの配置が実サービスの縮図です。
- 見つからないときは「サービス名 APIキー 発行」でそのサービスの公式ヘルプを検索します
- 実サービスでは、発行に管理者権限が必要なことが多く、個人アカウントの画面には出ないことがあります（すぐ見つかるかはサービス次第です）
- 発行画面に出る権限の範囲（読み取りのみ／書き込み可）と有効期限も、キーの文字列と同じくらい重要な情報です
Q.「API Error: 400 tools.9.custom.input_schema.properties: Property keys should match pattern …」が出て、ハンズオンが完走できませんでした
このエラーは「そのとき有効だったツールのうち1つ（tools.9＝10番目）の入力項目名が命名規則（半角英数字など）に合っていない」という意味です。配布した「わくわく精算（研修用）」のツールは8個で、項目名はすべて規則に合わせて作ってあるため、同時に有効になっていた別の拡張機能の定義が原因の可能性が高いです。
- 対処: わくわく精算以外の拡張機能をいったんすべてオフにして再送信します。通ったら、オフにしたものを1つずつ有効に戻し、エラーが再発した拡張機能が原因です
- 自作・入手した拡張機能の場合は、ツールの入力項目名を半角英数字（
a-z A-Z 0-9 _ . -）に直すと解消します
Q.チャットモードと Cowork モードの見分けがつかず、違うモードで実行してエラーや違う結果になりました
チャットと Cowork は同じホーム画面の入力欄で切り替える設計のため、画面の色や形では判別できません。見る場所は1つです——送信する前に、入力欄のモード表示（「チャット」／「Cowork」）を確認します。
- 送信後の見分け方: Cowork は頼みごとがタスク（作業）として実行され、作業計画と進捗の画面が開きます。普通の会話の応答が返ってくるだけならチャットです
- 間違えて送ったら: モードを切り替えて、同じ依頼を送り直します（第4回のハンズオンはチャット側が前提でした）
Q.リモートMCPは、結局業務データが外部に出るのではないですか？個人の判断で使ってよいのでしょうか
6名の方から同趣旨の質問をいただきました。事実の整理と、判断の枠組みを分けてお答えします。
- データの行き先（事実）: はい、リモートMCP（コネクタ）では接続先事業者のクラウドまでデータが届きます。だからこそ第4回の4観点に「接続先の信頼性」「データの行き先」が入っています。なお、ローカルMCPでも会話に載せた内容（ツールの実行結果を含む）は推論のため Claude のクラウドに送られる点は同じです
- 個人の判断で追加できるか（しくみ）: 会社の Team プランでは、コネクタの追加は管理者のみができる設定です。管理者が承認していないコネクタを個人が業務アカウントに足すことは、そもそもできません
- 使ってよいかの判断（ルール）: 個別のSaaS連携（M365 等）を業務で使ってよいかの全社一律ルールはなく、各自のプロジェクトで判断します。判断材料は上の2点（データの行き先・追加は管理者経由）と、第3回で案内した ISMS の情報資産の取り扱い区分です。扱うデータがプロジェクトの管理対象なら、プロジェクトの責任者に確認してから使います
Q.MCP連携の実行結果は、どこまで信用してよいですか？人間の確認はどこに入れるべきでしょうか
確認を入れる場所は実行前と実行後の2か所です。
- 実行前: 承認ダイアログで「どのツールに・何を渡すか」を読んでから許可します（第2回からの習慣です）
- 実行後: 書き込み系の操作（申請・承認・登録）は、対象システムの画面で結果を確かめます
とくに判断を伴う操作は人間の最終確認を前提にします。前回のアンケートには「Sonnet が本来止めるべき申請を承認してしまった」という実例の報告がありました（→ §0.3 コツ②）。判断の質はモデルによっても変わります——「AIがやったから正しい」で動かない、は外部連携でも同じです。
Q.Backlog・M365・Salesforce と連携すると何ができますか？何から調べればよいでしょうか
調べる順序はこの3ステップです。
- ① 公式提供があるか調べる — 「サービス名 MCP」でそのサービスの公式ドキュメント・公式ブログを検索します。公式提供でない野良のMCPサーバーは「接続先の信頼性」の観点で慎重に扱います
- ② コネクタ一覧を見る — Claude アプリの「設定 ＞ コネクタ」に追加できるコネクタの一覧があります（Team プランでは追加は管理者経由です）
- ③ つないだら Claude に聞く — 接続後に「このコネクタで何ができますか」と聞くと、使えるツールの一覧と用途を答えます。まず読み取り系（検索・参照）から試し、書き込み系は4観点の確認を通してからにします
2026年7月公開の解説動画「最新技術MCPの正体は、「すごい説明書」でした。」（ゆるコンピュータ科学ラジオ）が、MCP＝AIのためのすごい説明書という切り口で仕組みを説明しています。第4回の内容を別の角度からおさらいできます。
§0.3みんなのコツ — 前回アンケートから
第4回アンケートの「コツ・発見」欄と自由記述から、4つ紹介します（匿名・要約）。
わくわく精算のMCPには「規定を確認すること」という指示が組み込まれています。人間は慣れてくると確認をスキップして誤申請・誤承認を生むが、その確認をしくみ側で強制できている——という読みの報告です。スキルにも同じ発想が使えます。毎回守らせたいチェックは、頼むたびに書くのではなく手順書（SKILL.md やツールの定義）側に書き込みます。
「Sonnet は EXP-019 を勝手に承認しやがりました」——本来規定違反で止めるべき申請を、軽量モデルが通してしまった実例の報告です。第3回の「同じプロンプトでもモデルで出力が変わる」という報告の続報にあたります。作業の難易度・判断の重さに合わせてモデルを選び、判断を伴う操作ほど上位モデル＋人間の最終確認で臨みます。
APIキーを設定したのに認証が通らないとき、拡張機能を一度オフ→オンに切り替えて再送信したら読み込まれた——という報告です。第4回資料のQ&Aに「要実機確認」として載せていた回避策が、参加者の実地検証で裏づけられました。当日この症状で完走できなかった方は、この手順で復習できます。
講義で「APIキーをチャットに貼ると Claude にたしなめられる」と説明したのを受けて、実際に送って検証した報告です。結果は本当に拒否され、「チャットに貼った認証情報は履歴に残り得るため良くない」という説明が返ってきました。講義の主張を鵜呑みにせず自分の環境で確かめる——このワークショップが勧めてきた姿勢そのものです。
このほか、深瀬の Claude × Codex の二刀流には6名の方が反応していました。このあとの懇親会で、ぜひ本人に聞いてみてください。
§0.4今日の全体像 — HP実装の6工程
実務のWeb制作は、調査から実装まで数週間かけて進みます。今日はその流れを90分のミニチュア版に縮めて、6工程すべてを自分のPCで回します。工程1〜3（HANDS-ON 1）は深瀬のリードでみんなで進み、その成果物をそのまま工程4の入力として渡して、工程4〜6（HANDS-ON 2）は自分のペースで進めます。
CLAUDE.md にまとめます。requirements.md にまとめます。requirements.md をもとに方向性を3案出させ、1案を style-guide.md として確定します。index.html を実装させ、ブラウザで見て直します。工程1→2→3をみんなで回す — 現状調査・理解／目的設定／再調査 Claude Code
25分深瀬が進行します。実際の自社HPを見ながら、みなさんも自分のPCで同じ手順を進めてください。ここで各自の作業用フォルダに作る資料が、HANDS-ON 2 でそのまま工程4の入力になります。
使うもの: Claude Code（デスクトップアプリの「Code」タブ／VS Code拡張）。今日の作業用フォルダを1つ新しく作り、そのフォルダを開いた状態で始めます（例: C:\Users\<ユーザー名>\Documents\hp-workshop）。
Code タブを初めて使う方へ: Windows では Git for Windows のインストールが必要です。未導入の場合は git-scm.com から入手し、インストール後にアプリを再起動してください。手が止まったらフロアのサポートに声をかけてください。
権限モード: このパートの作業は調査（読み取り）が中心のため、「自動」にして進めます（実行のたびの確認を省きます）。モデル・権限モードはどちらもチャット欄で切り替えます。
| 場面 | 使うモデル | 理由 |
|---|---|---|
| 調査計画・方針を考えさせる | Opus 5 | ここでの判断の質が後の全工程に響くため、性能のいいモデルで考えさせます |
| 手分けして大量に調べさせる | Sonnet 5 | 決まった調査項目を並行して埋める作業は、速いモデルで十分です |
つまずいたときの確認ポイント
- 計画を出さずにいきなり調査を始めた場合 → いったん止めて「調査はまだしないでください。調査項目とファイル構成だけを出してください」と指示し直します
- ファイルがどこにできたか分からない場合 → 「作成したファイルの一覧を、パス付きで教えてください」と聞きます
つまずいたときの確認ポイント
- 10案が似通っていて選べない場合 → 「ターゲット層を案ごとに変えて、違いがはっきりするように出し直してください」と指示します
- 調査結果を読まず一般論が出てきた場合 → 「まずフォルダ内の調査結果を読んでから、その内容にもとづいて出し直してください」と指示します
@ のあとにファイル名を入力すると、ファイルを明確に指定できます。CLAUDE.md と images フォルダができ、CLAUDE.md に方針の要点とファイル一覧、images に画像と取得元の一覧（README.md）が入っている。この状態が HANDS-ON 2 の出発点です。
CLAUDE.md ができたら、この会話をいったん終え、HANDS-ON 2 は新しいセッションで始めます。Claude Code は /clear と入力すると、同じフォルダのまま会話だけをリセットできます（アプリ側で新しい会話を開いても構いません）。
ここまでの調査で会話には大量の情報が溜まっています。それを引き継ぐために作ったのが CLAUDE.md です——新しいセッションでも自動で読み込まれるので、工程4は「何も知らない状態から始まる」わけではありません。この身軽さの効果は、次の STEP 4 で確かめます。
つまずいたときの確認ポイント
@でファイル名が候補に出ない場合 → ファイル名をそのまま本文に書いても伝わります（「hp-policy.md の方針で進めます」）- 画像が1枚も取得できなかった場合 → そのまま先へ進みます。工程6では、画像がない部分をCSSのダミー表示で代替できます（→ STEP 6）
- 時間が足りない場合 → プロンプト例⑤⑥は飛ばし、⑦の CLAUDE.md だけは作ります。HANDS-ON 2 はここまでの資料があれば始められます
- ここで作る資料一式は、このあと工程4でそのままClaudeに渡す入力になります。「どの記述が要件の材料になるか」を考えながら進めてください
- 目的設定（工程2）は、工程5のデザイン判断の基準になります。「誰に何を伝えるHPにするか」が決まっていないと、デザインの3案を比べる軸が持てません
- 事実として書かれている部分と、担当者の解釈として書かれている部分を区別しておきます。工程4でAIが両者を混ぜて要件化することがあり、そこが人間の確認どころになります
工程4→5→6を回す — トップページを作り切る Claude Code
30分
HANDS-ON 1 と同じ作業用フォルダを、新しいセッションで開いて始めます（/clear で会話だけリセット、またはアプリで新しい会話を開きます）。フォルダが同じであれば CLAUDE.md は自動で読み込まれます。権限モードは「自動」のままにします。
モデルは HANDS-ON 1 の使い分けを続けます——判断が要る工程4・5は Opus 5 のまま、確定した設計を実装に流し込む工程6は Sonnet 5 に切り替えます（15分で「見て直す」の往復を回すため、速さを優先します）。
CLAUDE.md は自動で読み込まれるので、そこに書かれたファイル一覧を手がかりに、Claude 自身に「必要なファイルだけ」を選ばせます——調査結果を全部読ませると、それだけでコンテキストが埋まってしまうためです。あわせて技術的な前提も先に伝えます。伝えないと、サーバー構成や公開手順まで要件に書かれ、今日の90分では扱えない分量になります。requirements.md を自分で読み、違うと思う点を最低1つ見つけて指示し、直させます。作業はAI、判断は人間——この往復が工程4の本体です。requirements.md ができ、自分の指示が1か所以上反映されている。つまずいたときの確認ポイント
- CLAUDE.md を読んでいない様子の場合（前回の経緯を知らない返答が来る）→ 作業用フォルダが HANDS-ON 1 と同じか確認します。違うフォルダを開いていると読み込まれません
- 資料を読まず、どの会社にも当てはまる一般論が出てきた場合 → 「まず CLAUDE.md のファイル一覧から必要な資料を読んでから、その内容にもとづいて書き直してください」と指示し直します
- サーバー構成・CMS・公開手順などインフラの要件が書かれた場合 → 「静的なHTML/CSS/JavaScriptのみ・ローカルで表示できれば完成という前提なので、インフラ面の要件は削ってください」と指示します
- ファイルの作成・上書きの確認が出た場合（権限モードが「自動」以外のときに出ます）→ 内容を読んでから許可します
style-guide.md ができ、配色・書体・写真の扱い・全体の佇まいが書かれている。つまずいたときの確認ポイント
- 3案が似通っていて選べない場合 → 「想定する読み手を案ごとに変えて、違いがわかるように出し直してください」と指示します
index.html をダブルクリックしてブラウザで表示を確認します。気になる点を1つ伝えて直させる、を時間まで繰り返します。つまずいたときの確認ポイント
- 画面が崩れる・真っ白になる場合 → 見た目やエラー内容をそのままClaudeに伝えて修正させます（「画面が真っ白です」「見出しと画像が重なっています」でも伝わります）
- 画像が表示されず枠だけになる場合 → 「画像が表示されません」と伝えて直させます。
index.htmlから見た画像のパス（images/◯◯.jpg）のずれが原因のことが多いです - ファイルが見つからない場合 →
index.htmlが作業用フォルダの中にできているか確認します。別の場所に作られていたら「作業用フォルダの直下に置いてください」と指示します
実例 — 他部署向けデータ分析基盤を1人・1週間で構築
5分今日の型が実務でどこまで通用するかの実例として、講師が直近で構築した社内プロジェクトを紹介します。他部署向けの Snowflake データ分析基盤を、データの取り込み→変換→ダッシュボードまで動く状態で作り、相手部署が自走できるようドキュメントごと引き渡したものです。構築は1人・1週間で完了しています（Git履歴: 7日間・45コミット）。
| 成果物 | 分量 |
|---|---|
| ドキュメント（設計書25本・検討メモ18本・議事録ほか） | 122ファイル・13,653行（約147万字） |
| コード（SQL・Terraform・Python・YAML・PowerShell） | 55ファイル・4,624行 |
| AI用の作業手順書（スキル） | 20本（引き渡し先が自走するためのもの） |
| AI用の前提ファイル（CLAUDE.md） | 27個（全ディレクトリに配置） |
§3.1今日の型と同じ構造でできている
ワークフロー図・スキル一覧・コミット履歴の実物は当日投影します。
卒業課題 — 同窓会（8/20）に向けて育てる
5分
最後の課題は、今日の index.html を起点に、8/20(木) の同窓会までに自分の成果物を育てることです。
8/20に自分の画面で見せられるものが1つある状態。
§4.1進め方のヒント① — HP制作に使える公開スキル・プラグイン
まず、Anthropic 公式が公開しているスキルのうち、この宿題に使えるのは次の2つです。
| スキル名 | できること | 入れ方（Claude Code） |
|---|---|---|
| frontend-design | 配色・書体・レイアウトを「設計→自己批評→実装」の2段階で決め、テンプレート的な見た目を避けます | 入力欄の隣の「+」＞ Plugins ＞ Add plugin で検索、または/plugin install frontend-design@claude-plugins-official |
| theme-factory | 配色＋フォントの組み合わせテーマ10種から、HTMLページの見た目を整えます | /plugin marketplace add anthropics/skills のあと/plugin install example-skills@anthropic-agent-skills |
- 似た名前の
brand-guidelinesはAnthropic社のブランド配色を適用するスキルです。自社HPには使いません
上の2つが「見た目」を助けるスキルなのに対して、superpowers は「進め方」を助けるプラグインです。ブレスト → 設計 → テストを書きながらの実装 → コードレビュー、という開発の型そのものを Claude に持たせます。今日みなさんが6工程でやったことを、Claude 側に手順として組み込んだものと考えると分かりやすいです。
- 入れ方:
/plugin install superpowers@claude-plugins-officialのあと/reload-plugins - Anthropic製ではなくコミュニティ製です（作者: Jesse Vincent 氏）。公式カタログに載っていますが、Anthropicの動作保証・サポートの対象ではありません。公式ドキュメントも「インストール前に信頼できるか確認すること」と明記しています
- 20以上のスキルが入っているため、有効にすると毎回のやり取りで消費するコンテキストが増えます。まずは入れずに進め、物足りなければ試す、で構いません
§4.2進め方のヒント② — GitHubで履歴を残す（会社のGitHubアカウントがある方向け・任意）
育てたHPをGitHubに置くと、いつ何を変えたかの履歴が残り、失敗しても前の状態に戻せます。git と GitHub CLI（gh）が入っていれば、Claudeに「変更をコミットして」「プルリクエストを作って」と日本語で頼むだけで実行してくれます。
- デスクトップアプリの Code タブは、初回利用時に Git for Windows のインストールが必要です（入れたらアプリを再起動）。
ghは初めてプルリクエストを作るときにインストールを案内されます - 次の一歩: 公式GitHubプラグイン
/plugin install github@claude-plugins-officialで、イシュー作成・プルリクエスト管理・リポジトリ検索もチャットから頼めるようになります
- 内容 — 各自が作ってきたシステムやホームページを見せ合う会です
- 発表の範囲 — 未完成・失敗談も発表対象です
- 会場・参加方法 — 詳細は追って案内します
総括・運営からのお知らせ 共通
15分§5.15回で積み上げた道具立て
この5回は1つのストーリーでした。「任せる → 覚えさせる → 広げる → 作り切る」の4段階です。
§5.2AI駆動開発の型 — 今日やったことの構造
今日のハンズオンでやったことは、次の3点に整理できます。
CLAUDE.md・requirements.md・style-guide.md というファイルに残しました。5回で繰り返してきた4原則（再掲）
| 原則 | 今日どこで出てきたか |
|---|---|
| 見せていないものは見えていない | 工程1〜3の資料を先に作ってから要件を頼んだ（STEP 1〜3 → STEP 4） |
| 確認を読んでから許可する | 調査計画を読んでから実行させ、実装前に requirements.md を確認した（STEP 1・4） |
| 1回で完成させない | requirements.md を読んで直させ、実装は往復で仕上げた（STEP 4・6） |
| 最終責任は人間にある | 大方針もデザインも、複数案からどれで進めるかを選んだのは自分（STEP 2・5） |
§5.3運営からのお知らせ — Claudeプランについて
所属会社によって期限と手続きが異なります。自分の所属の行を確認してください。
| 所属 | 利用できる期限 | 継続したい場合 |
|---|---|---|
| IFTC・ITHD | 8/20(木) まで 8/21以降、順次プランをキャンセルします |
上司と相談のうえ、8/20までに運営へ連絡してください |
| ITSV | 9/27(日) まで | 各自でクラウド利用申請をお願いします |
§5.4アンケート
URLも設問も毎回と同じです。「第何回の振り返りですか？」では第5回を選んでください。5回続けてきた最後の回答になります。今後の社内展開の計画に直結するインプットです。
§5.5まとめ — AI-Readyな会社になるために
セットアップから始めたこの5回で、みなさんは課題の洗い出しから実装までをAIと回せるようになりました。この使い方を業務で続け、現場の実績を持ち寄り、一人ひとりが当事者として積み重ねていくことが、この会社をAI-Readyにしていくのだと思います。その最初の一歩が、8/20の同窓会です。
リファレンス
卒業後の自習用リンク集です。
卒業課題で使う — スキル・GitHub連携（§4.1 / §4.2）
AI駆動開発を深める