Web制作会社向けClaude Codeセミナー｜要件定義書・見積書・コーディングの実装業務はどこまで自動化できるか
aikanri-admin
弊社GENAIでは、Web制作会社の方向けに Claude Code・Codex の無料オンラインセミナー（60分）を開催しています。本記事では、要件定義書の作成や見積もりの工数試算、コーディングの実装補助といった制作業務がどこまで自動化できるかを、セミナーの内容とあわせて解説します。
Web制作会社では、代表やプロデューサーが受注・提案・進行管理まで一人で抱え、エンジニアは実装作業に追われがちです。ChatGPTとの違いや導入のハードルについても、順を追って整理します。
要件定義・見積もり・コーディング・クライアントレビュー・納品・請求という業務ごとに、何を渡すとどう変わるのか、仕組みの理由からできないことまで、本記事で丁寧に解説していきます。
AI鬼管理山崎
代表菅澤
AI鬼管理山崎
代表菅澤
参加無料・60分・オンライン(Google Meet)・1社1枠
01 AI_DIFF Web制作会社にとっての生成AIとClaude Codeの違い Claude CodeとCodex、それぞれ何者で、非エンジニアでも使えるのかを整理します
ChatGPTやGeminiのような生成AIは、質問すると答えてくれる「対話するAI」です。使ったことがある方も多いと思います。
「見積書の書き方のコツは」「要件定義書に何を書けばいいか」といった質問には、丁寧に答えてくれます。ただし、実際の見積書作成やコーディングそのものまではやってくれません。
一方、Claude CodeやCodexは、指示した作業を最後まで自分で実行してくれる「仕事をやり切るAI」です。ヒアリング議事録を読み込んで要件定義書を作る、Figmaカンプからコードを生成する、といった一連の作業を任せられます。
AI鬼管理山崎
代表菅澤
たとえば「このヒアリング議事録から要件定義書を作って」と頼んだ場合、ChatGPTは要件定義書の一般的な書き方を説明してくれますが、実際に議事録を読み込んで書類を作るところまではしてくれません。
Claude Codeは、その議事録ファイルを実際に開いて中身を読み込み、要件定義書のドラフトをその場で作ってくれます。「説明する」のではなく「やってくれる」のが最大の違いです。
1-1. Claude Codeとは
Claude Codeは、Anthropic社が開発した、ターミナルやエディタの画面から指示を出して動かすAIツールです。議事録やFigmaのデータといった実際のファイルを読み込ませ、対話しながらドラフト作成を進められます。
📚 用語解説
Claude Code：Anthropic社が開発した、ファイルを読み込んで作業を代行してくれるAIツールです。パソコンの画面から日本語で指示を出して使います。
もともとはソフトウェア開発者向けのツールとして作られましたが、「ファイルを読み込んで作業する」という性質そのものは、コーディングに限らず、要件定義書作成や見積書作成にもそのまま応用できます。
1-2. Codexとは
Codexは、OpenAI社が開発した、Claude Codeと似た位置づけのAIツールです。こちらもファイルを読み込ませて作業を任せる使い方が中心で、Web制作会社での活用事例はClaude Codeのほうが蓄積が進んでいます。
ChatGPTを開発しているOpenAI社の技術がベースになっているため、ChatGPTに慣れている方には、操作の雰囲気が近く感じられるかもしれません。基本的な考え方はClaude Codeと共通しています。
📚 用語解説
Codex：OpenAI社が開発した、Claude Codeと同じく作業を代行してくれるAIツールです。仕組みは似ていますが、開発元と細かな使い勝手が異なります。
AI鬼管理山崎
代表菅澤
「そもそもどこの会社が作っているのか」という疑問もよく聞きます。Claude CodeはAnthropic社、CodexはOpenAI社がそれぞれ開発しており、どちらもWeb制作会社向けに特化したツールではなく、汎用のAIツールを業務に応用する形で使います。
| Claude Code | Codex | |
|---|---|---|
| 開発元 | Anthropic | OpenAI |
| できること | ファイル読み込み・要件整理・コード生成補助 | ファイル読み込み・要件整理・コード生成補助 |
| Web制作会社での活用事例 | 蓄積が進んでいる | 蓄積は少なめ |
| 非エンジニアの利用 | 日本語の指示文で操作可能 | 日本語の指示文で操作可能 |
| 土台となる技術 | Anthropic独自のAIモデル | ChatGPTと同じOpenAIのAIモデル |
| セミナーでの扱い | 実演の中心として詳しく紹介 | 冒頭で違いを簡単に紹介 |
どちらも専門的なプログラミング知識がなくても、日本語で「この議事録から要件定義書を作って」のように話しかけるだけで使えます。難しい操作を覚える必要はありません。
画面自体は黒い背景に文字が並ぶ、いわゆる「エンジニアっぽい」見た目をしています。ただし操作は日本語のチャットとほぼ同じで、ボタン操作を覚える必要はなく、話しかける言葉の中身のほうが重要です。
Claude CodeもCodexも、専門知識よりも「何を渡して、何を作ってほしいか」を言葉にする力のほうが重要です。セミナーでは実際の画面を動かしながら、この感覚をお見せしています。
1-3. Web制作会社では、具体的に何に使えるのか
「仕事をやり切るAI」と言われても、まだ抽象的に感じるかもしれません。Web制作会社の現場で言えば、次のような業務が代表的な使いどころです。
- 要件定義書・サイトマップのドラフト作成
- 見積書の工数試算とドラフト作成
- Figmaカンプの構造化とコード生成補助
- クライアントレビューのフィードバック整理と修正タスク化
- 納品チェックリストと月次請求書の自動作成
この先の章では、これらの業務ひとつひとつについて「何を渡すと、何が出てくるか」を具体的に見ていきます。
逆に、クライアントとの信頼関係づくりや、デザインの方向性のように、感性やその場の判断が求められる業務は、これからも人が担う部分として残ります。AIが代われるのは「作業」であって「判断」ではない、という線引きが基本です。
この線引きを最初に理解しておくと、「AIに何でも任せられる」という過度な期待も、「結局は使えない」という過小評価も、どちらも避けやすくなります。
背景には、Web制作業界特有の競争環境もあります。STUDIOやWix、Webflowといったノーコードツールの台頭で小規模案件の単価が下がり、GitHub Copilotやv0.devのような生成AIの普及で、個人やフリーランスとの競争も激しくなっています。
こうした環境の中で、代表やプロデューサーが企画・受注・進行管理・採用までを一人で抱え込む状態は、多くの中小Web制作会社に共通する構造的な悩みです。書類仕事の負担を軽くすることは、単なる効率化ではなく、この構造そのものへの対処でもあります。
| 向いている業務 | 向いていない業務 |
|---|---|
| ドラフトの下書き・書類のたたき台作成 | クライアントとの信頼関係づくり |
| 過去の様式を踏まえた書式変換 | デザインの方向性や世界観の決定 |
| 繰り返しの多い定型業務 | そのつど状況が変わる価格交渉 |
| 複数資料の突合・横断作業 | クライアントの経営課題を踏まえた提案の骨子決め |
| データに基づく傾向の把握 | コンペでの最終的な見せ方の判断 |
| 用語 | 一言でいうと |
|---|---|
| Claude Code | Anthropic製の「仕事をやり切るAI」 |
| Codex | OpenAI製の「仕事をやり切るAI」 |
| プロンプト | AIへの指示文(日本語の普通の文章でよい) |
| AIエージェント | 複数の作業を自律的に実行し続けるAIの総称 |
| permission mode | AIに許可する操作の範囲を決める設定 |
| ヘッドレスCMS | デザインや表示部分と、記事データの管理部分を分離したCMSの仕組み |
02 PROPOSAL 要件定義・提案・見積もりが、Claude Codeでこう変わる Web制作会社の受注前工程を、入力と出力で見ます
Web制作会社でもっとも代表やプロデューサーの時間を奪うのが、受注前の要件定義・提案・見積もりの工程です。ヒアリングからサイトマップ、見積書までを、限られた人数でこなす必要があります。
案件数が増えるほど、この受注前工程の負担は膨らみます。専任のディレクターを置けない中小のWeb制作会社ほど、この負担が代表やプロデューサーにのしかかりやすくなります。
要件定義書ドラフト
クライアントヒアリングの議事録を読み込ませると、要件定義書のドラフトが出てきます。
サイトマップ自動化
要件と参考サイトのURLを渡すと、サイトマップとワイヤーフレーム案が出てきます。
コンペ提案資料自動化
過去の提案書と競合情報を渡すと、新規案件向けの提案書ドラフトが出てきます。
見積書ドラフト
要件定義書と工数単価表を渡すと、工程別の見積書ドラフトが出てきます。
2-1. 要件定義書・サイトマップのドラフト作成
クライアントヒアリングの録音や議事録メモをClaude Codeに読み込ませると、要件定義書のドラフトが出てきます。ゼロから項目立てを考える必要がなくなります。
続けて要件と参考サイトのURLを渡せば、サイトマップとページごとの情報設計案のドラフトも作れます。これまでディレクターが白紙から組み立てていた作業のうち、たたき台の部分だけを、AIが先に用意しておくイメージです。
もちろん、クライアントの意図に沿っているかどうかの最終確認は、これまで通りディレクターやプロデューサーが行います。
要件定義書のドラフトは、その後のサイトマップ・見積もり・コンペ提案のすべての土台になります。ここを最初に整えることが、以降の工程全体の時間短縮につながります。
| 工程 | 作成する書類の例 |
|---|---|
| ヒアリング整理 | 議事録・要件一覧・参考サイトリスト |
| 情報設計 | サイトマップ・ワイヤーフレーム |
| 提案準備 | 競合分析・コンペ提案書 |
| 見積もり | 工数試算表・見積書 |
| 契約準備 | 業務委託契約書・著作権譲渡条項 |
2-2. ワイヤーフレーム・情報設計のドラフト作成
要件定義書が固まった段階で、ページ構成とコンテンツの整理、SEO構造設計をあわせて進める必要があります。要件定義書とサイトマップを渡すと、ページごとのワイヤーフレームのたたき台が出てきます。
📚 用語解説
ワイヤーフレーム：Webページのレイアウトや要素の配置を、デザインの装飾を除いた線画で示した設計図です。デザイナーやエンジニアへの共有前段階として作成されます。
情報設計とSEO構造設計は密接に関わっており、見出しの階層や内部リンクの構造をワイヤーフレームの段階で整理しておくと、後工程のコーディングでの手戻りを減らせます。
2-3. コンペ提案資料の自動化
過去の提案書のフォーマットと、今回の競合情報・クライアントの業種データを渡すと、コンペ用の提案書ドラフトが出てきます。提案の骨子や見せ方の最終判断は、プロデューサーが行います。
📚 用語解説
コンペ：複数のWeb制作会社が同じ案件に対して企画提案を出し合い、クライアントが発注先を選ぶ選定方式のことです。提案書の完成度が受注率を左右します。
コンペは短納期で複数案件が重なりやすく、提案書のたたき台作成に時間を取られると、肝心の企画部分を練り込む時間が削られてしまいます。ドラフトを先に用意しておくことで、企画の検討に時間を回せます。
2-4. 見積書ドラフトと工数試算
要件定義書と、企画・デザイン・コーダー・PMそれぞれの工数単価表を渡すと、工程別の工数を積み上げた見積書のドラフトが出てきます。見積金額の最終判断と提示は、担当者が行います。
📚 用語解説
工数試算：案件を完成させるまでに、企画・デザイン・コーディング・進行管理それぞれの担当者が何時間かかるかを見積もる作業です。見積金額の根拠になります。
受注が決まった案件では、見積もり段階の工数試算をそのまま進行管理の目安として転用できます。見積もり時の想定工数と実際の稼働工数を並べておけば、赤字案件の兆しにも早く気づけます。
| 業務 | 何を渡すか | 何が出てくるか |
|---|---|---|
| 要件定義書ドラフト | ヒアリング議事録・録音 | 要件定義書のドラフト |
| サイトマップ自動化 | 要件一覧・参考サイトURL | サイトマップ・ワイヤーフレーム案 |
| コンペ提案資料自動化 | 過去の提案書・競合情報 | 提案書ドラフト |
| 見積書ドラフト | 要件定義書・工数単価表 | 工程別の見積書ドラフト |
| 著作権譲渡条項チェック | 過去の契約書・今回の案件条件 | 業務委託契約書の条項ドラフト |
| 進行管理表の作成 | 見積もり時の工数試算 | 案件別の進行管理表 |
たとえば「このヒアリング議事録から、要件を機能一覧の形で整理して」と渡すと、機能ごとの要件一覧のドラフトが数分で出てきます。
続けて「この要件一覧と工数単価表から見積書を作って」と渡せば、工程別の見積書のドラフトが出てきます。これを土台に、担当者が金額を調整します。
毎回イチから条件を説明し直す必要はなく、一度使った指示文をメモしておけば、次の案件でもほぼそのまま使い回せます。
AI鬼管理山崎
代表菅澤
2-5. 業務委託契約書・著作権譲渡条項のチェック
過去の業務委託契約書のひな形と、今回の案件条件を渡すと、著作権譲渡条項を含む契約書のドラフトを作らせられます。最終的な契約内容の確認と締結は、代表や法務担当が行います。
📚 用語解説
著作権譲渡条項：納品したWebサイトのデザインやコードの著作権を、制作会社からクライアントへ譲渡する条件を定めた契約条項です。譲渡の範囲や対価を明確にしておくことが重要です。
下請法(下請代金支払遅延等防止法)の対象になる取引かどうかの確認も、契約書チェックとあわせて行っておきたいポイントです。過去の契約書と照らし合わせるドラフト作成の段階で、注意すべき条項を洗い出させることができます。
元請から仕事を受ける下請的な立場のWeb制作会社にとって、支払期日や代金の減額に関する条項は特に確認が欠かせません。過去に問題になった条項のパターンをあらかじめ渡しておけば、同じ論点をドラフトの段階でチェックリスト化できます。
📚 用語解説
下請法：正式名称は下請代金支払遅延等防止法です。発注者が下請事業者に対して代金の支払遅延や不当な減額を行うことを禁止する法律で、Web制作会社が元請から仕事を受ける場面でも関係します。
Claude Codeが担うのは契約書ドラフトの作成までです。最終的な契約条件の判断と締結は、代表や法務担当が行います。
提案から見積もりまでのリードタイムが短い案件ほど、この下書き作成の時間短縮が効いてきます。急なコンペ参加の依頼が来た場合でも、担当者は企画の練り込みと金額の最終調整に集中できます。
結果として、これまでは書類作成の負担を理由に見送っていた短納期のコンペにも、対応しやすくなります。受注前工程の負担軽減は、受注機会そのものを広げる効果も持っています。
03 IMPLEMENT デザイン・コーディングから納品・請求まで、Claude Codeでこう変わる 実装からクライアントレビュー、納品、請求までを具体的に見ます
受注前工程以外にも、Web制作会社には案件が進むにつれて発生する負担の大きい業務があります。コーディング、クライアントレビュー、納品、請求などです。
いずれも「案件ごとに繰り返し発生する」業務という共通点があり、Claude Codeの「型」が効きやすい領域でもあります。ひとつずつ、何を渡すと何が出てくるかを見ていきます。
3-1. Figmaカンプの構造化とコード生成補助
Figmaのデザインカンプを読み込ませ、レイヤー構造や余白・フォントサイズの情報をもとに、HTML/CSS/JSのコード生成を補助させる、という使い方がAIと相性の良い領域です。
📚 用語解説
Figma：Web制作会社で広く使われている、ブラウザ上でデザインを作成・共有できるデザインツールです。デザインカンプの共有や、実装担当者への引き継ぎに使われます。
デザインカンプの構造をコードに落とし込む部分は、エンジニアが一つひとつ手作業で行うと時間がかかります。構造化されたコードのたたき台を先に用意しておくことで、エンジニアは細部の調整と品質確認に集中できます。
| 実装領域 | コード生成補助の例 |
|---|---|
| 静的なページ | HTML/CSSのマークアップとレスポンシブ対応の下書き |
| 動きのある要素 | JSアニメーション・スクロール演出の下書き |
| WordPressテンプレ | カスタム投稿タイプ・テンプレファイルの下書き |
| microCMS連携 | APIから記事データを取得する実装の下書き |
| Astro/Next.js実装 | コンポーネント構成・ページ生成の下書き |
3-2. WordPress・microCMSのテンプレ自動化
既存のWordPressテーマやmicroCMSのスキーマ定義を渡すと、新規案件向けのテンプレファイルのドラフトが出てきます。最終的な動作確認と公開は、エンジニアが行います。
📚 用語解説
ヘッドレスCMS：デザインや表示の仕組みと、記事データを管理する仕組みを分離したCMSの構成です。microCMSはヘッドレスCMSの代表例で、Next.jsやAstroと組み合わせて使われます。
コーポレートサイトや採用サイトでは、WordPressの案件とヘッドレスCMSの案件が並行して進むことも多く、テンプレの書き方もそれぞれ異なります。過去の類似案件のテンプレを土台に、新しい案件向けに再構成させる使い方が現実的です。
📚 用語解説
Core Web Vitals：Googleが定める、Webページの表示速度や操作性を評価する指標群です。数値が低いと検索順位にも影響するため、納品前のチェック項目に含まれます。
受注が決まった案件では、Core Web Vitalsやアクセシビリティ対応のチェックリストをドラフトの段階で用意させておくと、実装の後半で慌てて対応する事態を避けやすくなります。
ただし、Core Web VitalsやアクセシビリティへのAI対応はチェックリスト適合度の判定と改善案のドラフトまでで、Lighthouseやaxeの計測結果を踏まえた最終的な改善判断はエンジニアが行います。AI任せで完結しない領域だと理解しておくことが大切です。
| 業務 | 何を渡すか | 何が出てくるか |
|---|---|---|
| Figmaカンプの構造化 | Figmaデザインカンプ | HTML/CSS/JSコード生成補助のドラフト |
| WordPressテンプレ自動化 | 既存テーマ・要件定義書 | カスタム投稿タイプ・テンプレファイルのドラフト |
| microCMS連携実装 | スキーマ定義・要件 | API連携部分の実装ドラフト |
| Core Web Vitals対応 | Lighthouse計測結果 | 改善案のドラフトと優先順位一覧 |
| フィードバック整理 | クライアントの修正依頼メール | 修正タスクリストのドラフト |
| 納品チェックリスト | 本番環境の設定情報 | SSL/DNS/サーチコンソール設定のチェックリスト |
たとえば「このFigmaカンプの構成から、トップページのHTML/CSSの下書きを作って」と渡すと、レイアウトを反映したコードのドラフトが数分で出てきます。
続けて「このテンプレを今回のmicroCMSのスキーマに合わせて調整して」と渡せば、API連携部分を含む実装のドラフトが出てきます。これを土台に、エンジニアが細部を仕上げます。
AI鬼管理山崎
代表菅澤
3-3. クライアントレビューの修正タスク化
クライアントからの修正依頼メールやSlackのやり取りを読み込ませると、修正タスクのリストと優先順位案のドラフトが出てきます。修正範囲の合意や追加見積の判断は、ディレクターが行います。
「デザインの微調整」「機能追加」「不具合修正」のように、依頼の性質ごとに分類しておくと、追加見積が必要な修正かどうかの判断もしやすくなります。
フィードバックの整理と同時に、当初の見積もり範囲内か追加対応かを整理したメモを作らせておくと、クライアントとの合意形成がスムーズになります。
3-4. 納品チェックリストと月次請求書の自動化
本番環境のドメイン・SSL証明書・サーチコンソール登録状況といった情報を渡すと、納品前の確認項目をまとめたチェックリストのドラフトが出てきます。最終確認と公開作業は、担当エンジニアが行います。
運用マニュアルや保守契約書も、過去の案件のフォーマットを土台にドラフトを作らせられます。案件ごとに手作業で一から作る必要がなくなります。
月次で発生する請求書作成も、案件別の稼働実績や契約単価を渡せば、クライアントごとの請求書ドラフトをまとめて作らせられます。複数クライアントを抱えるほど、この一括作成の効果が大きくなります。
3-5. 新規クライアント提案書・採用書類の自動化
新規クライアントへの提案書や、エンジニア・デザイナーの採用書類のドラフト作成にも、同じ考え方を応用できます。求人票の文面や、応募者の職務経歴書をもとにした選考メモのドラフトなどです。
採用は代表やプロデューサーが受注業務の合間に対応することが多く、後回しになりがちな業務です。求人票のたたき台と、応募者ごとの選考メモのドラフトを先に用意しておくだけでも、採用活動にかけられる時間が変わってきます。
運用保守フェーズに入ってからも、クライアントの月次の運用報告書やアクセスレポートのドラフト作成に同じ仕組みを使えます。運用保守は利益率が読みやすい業務であるぶん、定型化できる部分を早めにAIに任せる価値が大きい領域です。
AIが担うのはドラフト作成とコード生成補助までです。品質確認・公開作業・クライアントとの合意形成は、これまで通り担当者が行います。
コーディングやクライアントレビューの整理は、セミナーで実際の画面を動かしながらお見せしています。
04 MECHANISM なぜWeb制作会社の業務までAIがやり切れるのか Claude Codeの仕組みを、専門用語を使わずに説明します
「AIが制作業務を代わりにやってくれる」と聞くと、仕組みが気になる方も多いと思います。専門用語を使わずに、3つのポイントで説明します。
難しい技術の話ではありません。パソコンが得意な人が、たまたまその得意分野を制作業務に向けている、というくらいのイメージで読み進めていただければ十分です。
ここまで見てきた要件定義やコーディングの例も、すべてこの3つの特徴の組み合わせで成り立っています。仕組みが分かると、自社のどの業務に応用できそうかもイメージしやすくなります。
📚 用語解説
AIエージェント：指示を受けて、複数の作業を自律的に実行し続けるタイプのAIの総称です。Claude CodeやCodexは、このAIエージェントの一種です。
4-1. ファイルを直接読み書きできる
Claude Codeは、議事録のテキストやFigmaのデータ、コードベースといった実際のファイルを、パソコンの中でそのまま開いて中身を読み込めます。読んだ内容をもとに、新しい書類やコードを作ったり、既存のファイルを書き換えたりできます。
たとえるなら、資料を渡せば黙々と目を通し、指示通りに整理したり文書やコードを作ったりしてくれるアシスタントのような存在です。
従来の生成AIとの違いも、まさにここにあります。「作り方を教えてくれる」のではなく「実際に作ってくれる」——この一歩の差が、制作業務の時間を大きく左右します。
AI鬼管理山崎
代表菅澤
4-2. 手順を覚えて繰り返せる
一度「この形式で要件を整理して」と教えたやり方は、次回以降も同じ手順で再現できます。毎回イチから指示を考える必要はなく、「型」として使い回せます。
月次請求書の作成や納品チェックリストのように、毎回やることがほぼ決まっている業務ほど、この「型」の効果が出やすくなります。二度目以降は指示の言葉数も減り、確認するだけで済むようになります。
逆に言えば、毎回内容が大きく変わるコンペ提案のような業務では「型」の恩恵が小さくなります。まずは繰り返しの多い業務から試すのが、効果を実感しやすい進め方です。
最初から完璧な型を作ろうとせず、使いながら少しずつ調整していくほうが、結果的に早く定着します。1つの業務で型ができたら、似た業務にも応用できます。
4-3. 複数の資料を横断できる
ヒアリング議事録・Figmaカンプ・過去の見積書など、別々の場所に保存されている資料を、同時に開いて見比べることができます。要件定義書の作成はこの「横断」がまさに効いてくる作業で、議事録・参考サイト・過去案件の実績を別々に突き合わせる手間を、まとめて引き受けられます。
コーディングでも同じことが言えます。デザインカンプ・既存テンプレ・API仕様書という、性質の異なる複数の資料を横断して、構造化とコード生成補助を一度に進められます。
対話しながら進められる点も見落とせない特徴です。一度出したドラフトを見て「この項目は不要」「ここはもう少し詳しく」と伝え直せば、その場で修正した案が返ってきます。完璧な指示文を最初から用意する必要はありません。
この「対話しながら詰めていく」感覚は、クライアントとの打ち合わせに近いものがあります。一度で完成させようとせず、やり取りを重ねながら精度を上げていくイメージを持っておくと、使い始めのハードルが下がります。
AI鬼管理山崎
代表菅澤
Claude Codeが担うのは、資料を読み込んでドラフトを作る作業までです。品質の最終確認や、クライアントへの提出・公開の判断は、これまで通り人が行います。
| 特徴 | 何ができるか | Web制作会社での具体例 |
|---|---|---|
| ファイルの直接読み書き | 議事録やコードを開いて、整理やドラフト作成ができる | 議事録から要件定義書を作成 |
| 手順を覚えて繰り返す | 一度教えたやり方を「型」として次回も使える | 毎月の請求書作成を同じ手順で処理 |
| 複数資料の横断 | 議事録・デザイン・過去案件などをまとめて参照できる | 要件定義とサイトマップを横断して一括整理 |
| 対話しながら進められる | 一度で完璧を求めず、やり取りしながら調整できる | 提案書ドラフトの表現を対話で修正 |
ただし、Claude Codeが自分で判断できないこともあります。どこまで任せて、どこから人が確認するか。次の章で、つまずきやすいポイントとあわせて具体的に説明します。
05 PITFALLS Web制作会社が導入でつまずきやすいポイントと対処法 セキュリティ・社内定着・ツール選定でよくあるつまずきを整理します
Claude CodeをWeb制作会社の現場に導入する際、多くの会社が最初につまずくのはセキュリティ面の線引きです。
ここまで紹介してきた便利さの裏側で、実際に導入するとなると出てくる現実的な悩みを、順番に整理していきます。
5-1. セキュリティと情報の取り扱い範囲
permission mode(操作許可の範囲)を適切に設定し、どのデータをAIに渡すか、どこまでの操作を許可するかを事前に線引きしておく必要があります。
📚 用語解説
permission mode：AIにどこまでの操作(読み取り・下書き作成・公開など)を許可するかを制御する設定です。範囲を絞って始め、慣れてから広げる使い方が一般的です。
まず読み取り専用の範囲で運用を始め、慣れてきた段階で許可する操作を広げていく進め方であれば、情報システム担当が不在の会社でも無理なく運用できます。
クライアントの本番環境の認証情報や、個人情報保護法の対象になるユーザーデータを扱う場合ほど、この設計を丁寧に行うことが導入の前提になります。何を渡して、何を渡さないかを、あらかじめ決めておくということです。
| 段階 | 許可する操作 | 目安の期間 | 関わる担当者 |
|---|---|---|---|
| 導入初期 | 読み取り・整理・下書き作成のみ | 最初の1〜2ヶ月 | プロデューサー・情報システム担当 |
| 慣れてきた段階 | 社内フォーマットへの自動保存を追加 | 3〜6ヶ月目以降 | 業務担当者本人 |
| 定着後 | 業務ごとに必要な操作範囲を個別に調整 | 運用が安定してから | 各業務の責任者 |
5-2. 社内での定着
最初から全業務をAI化しようとせず、要件定義書の作成や月次請求書の作成など、負担の大きい一部の業務から試し、効果を実感してから範囲を広げていくほうが定着しやすくなります。
「便利そうだから」と全社に一斉導入するよりも、まず一人か二人が使いこなせるようになってから、周りに広げていくほうが、結果的に定着のスピードは早くなります。
AI鬼管理山崎
代表菅澤
5-3. ツール選定で押さえておきたいこと
Claude CodeとCodex、どちらが自社に合うかは、実際に画面を見ながら判断するのが早いです。まず自社が最初に試したい業務を決めてから、その業務での使いやすさを比較する順番がおすすめです。
月額料金や課金プランの違いも選定時のポイントですが、機能一覧を比較するよりも、自社の業務で実際に動かしてみたほうが、判断材料としては早く確実です。
「どちらのツールが優れているか」ではなく「自社のどの業務に使いたいか」を先に決めることが、ツール選定で遠回りしないコツです。
| 観点 | 確認しておきたいこと |
|---|---|
| セキュリティ | どのデータをどこまで渡すか、操作許可の範囲 |
| 社内定着 | 最初に試す業務を1〜2個に絞れているか |
| ツール選定 | 自社の業務で実際に動かして比較したか |
| 記録の残し方 | 元データとドラフトを案件フォルダに保存しているか |
| 教育・サポート | 最初の数回、誰が一緒に操作をサポートするか |
5-4. 現場でよくあるつまずきの実例
ひとつは、要件定義書の作成とコーディング補助と請求書自動化を、初日からすべて一気に試そうとして途中で止まってしまうケースです。担当者ごとに温度差が生まれ、どの業務も中途半端になりがちです。
📚 用語解説
プロンプト：AIに対して、何をしてほしいかを伝える指示文のことです。難しいコマンドではなく、日本語の普通の文章で構いません。
もうひとつは、プロデューサーがプロンプトの書き方に戸惑い、結局誰も使わなくなってしまうケースです。「この議事録から要件を整理して」といった業務の言葉をそのまま入力すれば十分ですが、この点が伝わっていないと、ツールを開かないまま放置されがちです。
三つ目は、クライアントごとのデザインシステムの違いを考慮せずにコード生成のドラフトをそのまま使い、修正差し戻しが増えるケースです。過去の類似案件との違いを事前に読み込ませておかないと、ドラフトの精度は上がりません。
📚 用語解説
デザインシステム：色・フォント・ボタンなどのUIパーツと、そのルールをまとめたガイドラインです。案件ごとに異なるため、コード生成の精度にも影響します。
多くのつまずきに共通するのは、準備段階を飛ばして一気に始めてしまう点です。1つの業務に絞って慣れてから広げるほうが、結果的に早く定着します。
| つまずきポイント | 現実的な対処 |
|---|---|
| 全業務を一度にAI化しようとして頓挫 | 要件定義書や請求書など、負担の大きい業務を1〜2個に絞って試行 |
| クライアントごとのデザインシステム差異を考慮せず差し戻される | 過去の様式を事前に読み込ませ、書式変換の下書きから始める |
| プロデューサーがプロンプトの書き方に戸惑う | 最初の数回はエンジニアや情報システム担当が一緒に操作する |
| 読み込ませるデータの範囲を決めずに始める | permission modeで読み取り専用の範囲から着手する |
| 元データとドラフトの保存ルールがない | 案件フォルダにやり取りを保存する運用を決めておく |
AIに読み込ませた元データと、生成されたドラフトを、いつ・どの案件で使ったか分かる形で残しておくことも大切な運用ルールです。案件フォルダにやり取りを保存しておくだけで、最低限の記録になります。
特別なシステムを新たに導入する必要はありません。今使っているフォルダ構成やファイル管理のルールに、AIとのやり取りの保存を一項目加えるだけで十分です。
デザインシステムのバージョン管理も、地味ながら見落とされがちなポイントです。どのバージョンのデザインシステムを参照してドラフトを作らせたかを記録しておくと、後から仕様変更があった際の影響範囲も追いやすくなります。
保守契約の更新時期にも、この記録が役立ちます。どの案件でどのAI活用ルールを適用していたかが分かっていれば、契約更新の際にクライアントへ運用状況を説明する材料としても使えます。
著作権譲渡条項や下請法対応で後から経緯を確認したくなることもあります。元データとドラフトの保存履歴が、そのまま簡易的な記録として役立ちます。
ここまで見てきたように、つまずきの多くは技術的な難しさではなく、始め方の設計に起因します。業務を絞る、型を作る、記録を残す——この3つを押さえておけば、大きな失敗にはつながりにくくなります。
特に中小のWeb制作会社では、担当者が制作と管理を兼務していることが多く、「教える時間がない」という声もよく聞きます。最初の型作りだけ一緒に手伝ってもらえれば、あとは日々の業務の中で自然に慣れていくケースがほとんどです。
文章だけでは伝わらない部分は、実際の画面をご覧いただくのが早いです。セミナーでは、要件定義書の作成やコーディング補助を実際に動かしながらお見せしています。
06 SEMINAR_CONTENT Web制作会社向けセミナー当日、実際に何を話すのか 60分の時間割・実演する業務・よくある質問・参加対象を具体的に紹介します
「結局セミナーで何をするのか」が分からないと、参加を決めにくいと思います。60分の中身を具体的に紹介します。
6-1. 60分の時間割
| 時間帯 | 内容 |
|---|---|
| 最初の10分 | Web制作会社の業務棚卸しと、Claude Code・Codexの全体像整理 |
| 次の25分 | ヒアリング議事録から要件定義書ドラフト、Figmaカンプのコード生成補助の実演デモ |
| 次の15分 | 参加者の悩みを募集し、その場で「うちならこう試すか」を設計 |
| 最後の10分 | 質疑応答と、来週何を試すかの言語化 |
この時間割が基本の流れです。実演デモで扱う具体的な資料例は、参加企業の業種・規模に応じて多少調整することもあります。
6-2. 実演する業務
実演の中心は、25分間のノーカットデモです。Web制作会社の具体的な業務を、画面を動かしながらお見せします。
Figmaカンプのコード生成補助では、デザインカンプを読み込ませるところから、HTML/CSSのドラフト作成までを実際に動かします。
見積書ドラフトでは、要件定義書を読み込ませて工数を試算させ、見積書のドラフトができるまでの流れをお見せします。
業務ごとに入力と出力がどう変わるかを比較しながら見ていただくことで、自社ではどの業務から試すのが現実的かを判断しやすくしています。
6-3. その場で答える、こんな質問
| よくある質問 | 当日の回答の方向性 |
|---|---|
| 著作権譲渡条項のチェックはどこまで任せられるか | ドラフト作成までで、最終確認と締結は人が行う前提です |
| クライアントごとにデザインシステムが違う場合はどうするか | 過去の様式を読み込ませ、案件別の調整ドラフトを作ります |
| セキュリティ面でどこまでデータを渡していいか | permission modeでの操作許可範囲の考え方を説明します |
AI鬼管理山崎
代表菅澤
6-4. 参加対象
参加対象は代表・プロデューサー・会社役員としていますが、要件定義や見積もりを担当するディレクター、コーディングを担当するエンジニアの方にも参考にしていただける内容です。パソコン操作に不慣れな方でも、専門知識は前提としていません。
一方、制作業務を人に任せる想定がなく、代表お一人で全ての業務を完結されている場合は、効果を実感しにくいかもしれません。複数人で業務を分担している会社ほど、持ち帰れる材料は多くなります。
07 SEMINAR_BOOKING Web制作会社向けセミナーの参加方法と予約の流れ 無料・60分・オンラインの参加方法と、予約から当日までの流れを紹介します
ここまで紹介した内容を、実際の画面を動かしながら確認できる場として、60分の無料オンラインセミナーを開いています。
- 参加費は無料
- 60分・オンライン(Google Meet)開催
- 1社1枠の貸切で、実演を中心に進めます
- 空いている日程からそのまま予約できます
このページ下部の予約フォームで、空き日程を選ぶだけで予約が完了します(日程調整のメール往復はありません)。こちらの予約フォームからお進みください。
日程や内容の詳細はClaude Code セミナーの詳細ページでもご確認いただけます。
| この記事で分かったこと | セミナーで確認できること |
|---|---|
| Claude Code・Codexが何者か | 実際の画面での操作感 |
| 何を渡すと何が出てくるか(理屈) | 自社の業務に置き換えた場合の具体例 |
| 導入時のつまずきポイント | 自社ならどこから試すべきかの判断材料 |
| なぜそれが可能なのか(仕組み) | 実際に動いている様子を見て納得できるか |
| 要件定義・見積もり・コーディングの変わり方 | 自社のヒアリング議事録を例にした質疑応答 |
| セキュリティ・社内定着の考え方 | 自社の運用ルールに落とし込む相談 |
この記事を読んで、Claude Code・Codexが何者かはお分かりいただけたと思います。あとは、自社の業務にどこまで使えそうか、実際の画面で確かめていただくだけです。
Claude CodeやCodexが自社に合うかどうかは、実際の画面を見るのが一番早い判断材料になります。押し売りはしませんので、まずは60分、実際の動きを確認してみてください。
参加無料・60分・オンライン(Google Meet)・1社1枠
よくある質問
Q. コンペの提案資料は案件ごとの個性が必要ですが、AIに任せて大丈夫でしょうか。
A. 過去の提案書のフォーマットと今回の競合情報を土台にドラフトを作成する使い方が中心です。企画の骨子やコンペでの見せ方の最終判断は、これまで通りプロデューサーが行うため、提案の独自性を保ったまま作成時間を圧縮できます。ドラフトを土台にすることで、企画の練り込みに時間を回しやすくなります。
Q. クライアントごとにデザインシステムが違うのですが、対応できますか。
A. 既存のテーマやスキーマ定義、過去の類似案件のコードを読み込ませておけば、案件ごとの違いを反映したドラフトを作らせられます。WordPress・microCMS・Astro/Next.jsのように実装方式が異なる場合も、それぞれの様式を読み込ませることで対応します。最終的なコード品質の確認はエンジニアが行います。
Q. クライアントの本番環境の認証情報や個人情報保護法の対象データをAIに読み込ませても問題ないですか。
A. 社内のどのデータをどこまでAIに渡すか、扱う範囲の線引きも含めてセミナー内で説明しています。permission modeの設定で、最初は読み取り専用の整理・下書き作成のみに限定する運用も可能です。慣れてきた段階で、許可する操作の範囲を少しずつ広げていく進め方が現実的です。
Q. パソコン操作に不慣れな社員が多い会社でも導入できますか。
A. セミナーではターミナルやエディタの画面を実際に動かしながら説明します。専門知識がなくても、まずは何ができるかを知ることを目的にした内容です。最初の数回はエンジニアや情報システム担当が一緒に操作するところから始める会社が多いです。ボタン操作より、日本語で何を伝えるかのほうが重要になります。
Q. Claude CodeとCodex、どちらを選べばよいですか。
A. どちらも生成AIを使った業務自動化ツールですが、Web制作会社の現場業務での活用事例の蓄積が進んでいるのはClaude Codeです。開発元(Anthropic/OpenAI)が異なるだけで、基本的な使い方や非エンジニアでも扱える点は共通しています。まず自社が最初に試したい業務を決めてから、使いやすさを比較するのがおすすめです。
Q. 要件定義書のドラフトは、経験の浅いディレクターでも精度を保てますか。
A. AIが作るのはあくまで要件定義書のドラフトで、クライアントの意図に沿っているかの最終確認はディレクターが行う前提です。ベテランが最終チェックに集中できるようになるため、経験の浅いディレクターの育成期間中でも、下書き作成の負担を軽くする使い方ができます。ベテランによる確認そのものは残るため、育成の機会が失われるわけではありません。
Q. Claude Codeを使うと、エンジニアやデザイナーの仕事が奪われるのではないですか。
A. いいえ。AIが担うのはコードや書類の下書き作成までで、デザインの方向性の決定や、クライアントとの折衝、品質の最終確認といった人にしかできない業務はそのまま残ります。制作業務の時間を減らし、設計やクライアント対応に集中する時間を増やすための道具です。むしろ企画に時間を割けるようになったという声もあります。
Q. セミナーは代表本人が参加しないといけませんか。
A. 代表・会社役員向けを基本としていますが、ディレクターやエンジニアの方が実務目線で参加されることも歓迎しています。参加人数や役職については、お申し込み時にご相談ください。複数名での参加もご相談に応じます。
空き日程を選んで、そのまま予約
Claude Code セミナー(参加無料・60分・オンライン)の予約フォームです。
日程調整のメール往復はありません。実際の空き日程が下に表示されています。
下の空き日程から選ぶだけで予約完了。
予約確定と同時に Google Meet の招待をお送りします。
【参加無料・1社1枠】Web制作会社向け Claude Code セミナーを予約する
オンライン(Google Meet) / 60分
空き日程から選ぶだけで予約が確定します
Web制作会社の制作業務は、要件定義・提案・見積もりの段階から、コーディングやクライアントレビューのように案件ごとに繰り返し発生する業務、納品や請求のように月次で積み重なる業務まで、次々と積み重なっていきます。Claude CodeやCodexが何者かという基本から、実際に何ができて何ができないかまで、文章だけではどうしても掴みにくい部分があります。自社のヒアリング議事録やFigmaカンプを例に、実際の画面を見ながら自社に合う業務を見極められる場として、60分の無料セミナーを用意しています。
ここから先の進め方は、大きく2つあります。
自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。
覚えるより任せたい方は、AI社員・ジドウカさんでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。
どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理／AI社員・ジドウカさんへのお問い合わせ
この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
