こんにちは、アサヒリンクスです。この記事は、代表コバが現場で蓄積してきた知見をもとに、AIを活用して構成・執筆し、弊社にて最終チェックを行ったものです。
Web 制作会社にとって、コーディングと提案書作成は収益に直結する二大業務です。しかし「コードを書く時間」「提案書のたたき台を作る時間」が積み重なると、案件をこなすほど担当者の稼働が圧迫されます。Claude をはじめとする生成 AI ツールを実務に組み込むと、この二つの工程でそれぞれ作業時間を 30〜50% 程度削減できるケースが報告されています。本記事では、実際に Web 制作の現場で機能している AI 活用のシーン別パターンを、プロンプト例・実装ステップ・数値目安を交えながら具体的に解説します。コーディング補助から提案資料の一気通貫フローまで、すぐに試せる形でまとめましたので、ぜひ参考にしてください。
Web 制作会社が AI 活用で変えられる業務領域
コーディングと提案書という「時間泥棒」の正体
Web 制作会社の業務を分解すると、大きく「制作（コーディング含む）」「営業・提案」「ディレクション」「保守」に分かれます。このうち特に時間を食うのが、コーディング中の調査・デバッグ工程と、提案書のゼロイチ作業です。
コーディング業務では、レイアウト実装そのものより「このプロパティの挙動確認」「ブラウザ間の差異調査」「エラーの原因特定」に時間がかかります。提案書業務では「構成を考える時間」「競合との比較表を作る時間」「クライアントの業種に合わせた文言調整」が重くなりがちです。
AI を活用すると、どちらも「考える→書く→直す」のサイクルを高速化できます。コーディングでは Claude Code が実装の初稿を出し、担当者が修正・確認に集中できます。提案書では Claude がたたき台と差し込み文言を生成し、担当者が文脈を整えるだけで仕上がります。以降のセクションで、それぞれの具体的な運用パターンを見ていきます。
Claude Code を使ったコーディング補助の実装ステップ
環境構築とプロジェクト単位の設定
Claude Code はターミナルから動作する AI コーディングアシスタントです。まずは以下の手順で作業環境を整えます。
# Node.js 18以上が前提
node -v
# Claude Code のインストール
npm install -g @anthropic-ai/claude-code
# プロジェクトディレクトリで起動
cd /path/to/project
claude
起動後、プロジェクトルートに CLAUDE.md を作成しておくと、Claude がプロジェクトの構成・使用技術・コーディング規約を把握した状態で動きます。WordPress 案件であれば使用テーマ名・PHP バージョン・カスタム投稿タイプの構成を書いておくと指示が少なくて済みます。
# CLAUDE.md 記載例（WordPress テーマ開発向け）
## プロジェクト概要
- WordPress 6.5 + 自作テーマ（テーマ名: mytheme）
- PHP 8.2、ACF Pro 使用
- カスタム投稿タイプ: works, news
## コーディング規約
- インデント: タブ
- クラス名: BEM 記法
- JS: バニラ JS（jQuery 不使用）
この設定を一度作ると、同じクライアント案件の追加開発でも「CLAUDE.md を更新して claude を起動するだけ」で同じコンテキストが再現されます。初期設定の工数は 30 分程度、その後の恩恵は案件が続く限り継続します。
実装補助プロンプトのパターン
Claude Code へのプロンプトは「背景→やること→制約」の三段構成にするとブレが少なくなります。以下は実際の現場で使いやすいパターンです。
# レイアウト実装の依頼例
このプロジェクトは WordPress + ACF Pro を使った企業サイトです。
works 一覧ページ（/works/）に、3カラムのカードグリッドを実装してください。
- カードには サムネイル画像・タイトル・カテゴリタグ・投稿日 を表示
- モバイルでは1カラム、タブレットでは2カラム
- ACF のフィールド名: thumbnail（画像）, category（テキスト）
- CSS は BEM 記法で既存の style.css に追記
# デバッグ依頼例
functions.php の以下のコードで、管理画面に「Notice: Undefined index」が出ています。
原因を特定して修正してください。
[該当コードをそのままペースト]
実装補助を継続して使うと、1 コンポーネントあたりの実装時間が 60〜90 分程度から 20〜30 分程度に短縮できるケースが多く見られます。特に「仕様は頭の中にある、コードに落とす時間がない」という状況で効果が顕著です。
提案書作成フローへの AI 組み込み
ヒアリングシートから構成案を自動展開する
提案書作成で最も時間がかかるのは「ゼロから構成を考える」工程です。ヒアリング内容を整理した後、そこから提案書の骨格を手で組み立てるのには 1〜2 時間かかることも珍しくありません。
Claude に「ヒアリング内容を貼り付けて提案書の構成案を出す」という使い方をすると、この工程を 15〜20 分程度に圧縮できます。以下はそのためのプロンプト例です。
以下はクライアントへのヒアリング内容です。
Web 制作会社としての提案書の構成案を作成してください。
【業種】飲食チェーン（居酒屋 20 店舗）
【現状の課題】採用サイトが古くて応募が少ない、店舗ごとにバラバラに情報発信している
【予算感】サイト制作 80〜100 万円、CMS 込みで完結させたい
【納期】3ヶ月以内
【決裁者】総務部長、最終は社長
# 出力形式
- 提案書の大見出し5〜7個
- 各大見出し配下にスライド1枚分の要点（箇条書き2〜3個）
- 刺さる見せ方のポイントを最後に一言
出力された構成案をそのまま PowerPoint のアウトラインに貼り付け、中身を足すだけで提案書が形になります。ゼロイチ作業を Claude に任せることで、担当者は「クライアントの感情に刺さるか」という判断だけに集中できます。
競合比較表と料金ページのたたき台生成
提案書の中でも特に手間がかかる「競合比較表」も AI に任せられます。競合サイトの URL を数件渡して特徴を列挙させ、自社の強みを対比する形にすると、比較表のたたき台が 10 分程度で完成します。
以下の3社の Web 制作会社の特徴を比較してください。
各社の公開情報をもとに、以下の観点で表形式にまとめてください。
比較観点:
- 得意ジャンル
- 制作実績の業種傾向
- 料金の目安（公開情報のみ）
- ターンアラウンドの速さ（公開情報から推測）
- 保守・運用サービスの有無
A社: [URL]
B社: [URL]
C社: [URL]
自社の強みや価格帯を後から追記する形にすると、クライアントが「この会社が一番合っている」と感じやすい比較表に仕上げられます。提案書 1 本あたりの作業時間を 3〜4 時間から 1.5〜2 時間程度に圧縮できる目安です。
コーディングから提案書までの一気通貫フロー
案件受注から納品後フォローまでの AI 活用マップ
個別の工程で AI を使うだけでなく、案件の流れ全体に AI を組み込むと相乗効果が生まれます。以下は Web 制作案件のフェーズごとの活用マップです。
フェーズ1：提案・見積
ヒアリング内容 → Claude で提案書構成案生成 → スライド化 → 見積書の項目整理も Claude に補助させる
フェーズ2：要件定義・設計
ページ構成案・ワイヤーフレームのテキスト版を Claude に作らせ、ディレクターが調整する
フェーズ3：コーディング
CLAUDE.md でプロジェクト定義 → Claude Code でコンポーネント実装 → 担当者がレビュー・修正
フェーズ4：テスト・修正
クライアント指摘をテキストで Claude に渡して修正コードを生成 → 担当者が確認・適用
フェーズ5：納品後フォロー
運用マニュアルの初稿を Claude に生成させる・定期報告メールのたたき台を Claude に出させる
このフローを整えると、1 案件あたりの工数が全体で 20〜30% 程度削減できる見込みです。特にフェーズ 1 と 3 の短縮効果が大きく、担当者が「考える仕事」に集中できる時間が増えます。
情報の受け渡しを仕組み化する
一気通貫フローを安定させるには、フェーズ間の情報受け渡しを仕組み化することが重要です。ヒアリングシートのフォーマットを固定し、Claude へのプロンプトテンプレートとセットにしておくと、誰が担当してもブレが少なくなります。
# 案件引き継ぎ用テンプレート（Claude に渡す形式）
## 案件概要
- クライアント業種:
- 納品物:
- 使用技術スタック:
- 予算規模:
- 納期:
## 経緯・背景
[ヒアリングメモをここに貼り付け]
## 依頼内容
[具体的にやってほしいことを書く]
このテンプレートを社内の案件管理ツール（Notion や Backlog など）に組み込んでおくと、「Claude に何を渡せばいいかわからない」という迷いが解消されます。テンプレート整備の初期工数は数時間程度ですが、月に複数案件を抱えるチームなら 1 ヶ月以内に回収できます。
営業効率化と売上向上につながる AI 活用の実例
既存クライアントへのアップセル提案を AI で量産する
Web 制作会社の営業課題として「新規獲得に手が回らない」「既存クライアントへの追加提案が後回しになる」という声は多く聞かれます。Claude を使うと、既存クライアントへのアップセル提案書を短時間で量産できます。
以下のクライアント情報をもとに、追加提案の内容を3案出してください。
【クライアント】製造業の中小企業（従業員 80 名）
【現在の契約】コーポレートサイト制作・保守月額 2 万円
【サイトの現状】スマホ対応済み・問い合わせフォームあり・更新は手動
【クライアントの最近の話題】採用に苦労している・展示会出展が増えている
# 出力形式
- 提案タイトル（1行）
- 課題との接続（2〜3文）
- 提供内容の概要（箇条書き）
- 想定費用感（おおよそ）
このプロンプトに既存クライアントの情報を流し込むと、1 クライアントあたり 5〜10 分でアップセル提案の選択肢が揃います。営業担当者が「何を提案しようか考える時間」を短縮し、提案数を増やすことで成約件数の底上げにつながります。月 5〜10 件程度の追加提案が現実的なラインになってきます。
見積書・発注書のドラフト生成で事務工数を削減
営業工数の中で見落とされがちな「事務作業」にも AI が使えます。見積書の項目整理や発注書のドラフト作成は、内容が決まっていれば Claude にほぼ任せられます。
以下の作業内容から見積書の項目を作成してください。
作業内容:
- WordPress サイト新規構築（デザイン込み・10ページ程度）
- レスポンシブ対応
- お問い合わせフォーム設置（メール通知機能付き）
- SEO 基本設定（メタタグ・OGP 設定）
- Google アナリティクス設置
- 納品後 3 ヶ月の保守サポート込み
# 出力形式
- 項目名
- 作業内容の説明（1〜2 行）
- 工数目安（時間）
- 単価目安（円）
出力された項目を Excel や請求書ソフトに転記するだけで見積書が完成します。見積書 1 件あたりの作業時間が 30〜60 分から 10〜15 分程度に短縮できる目安です。
AI 活用を社内に定着させるための運用ルール
プロンプトライブラリの整備と共有
AI 活用を「属人化させない」ためには、効果的なプロンプトをライブラリとして整備し、チームで共有する仕組みが必要です。「あの人しか使えない」状態では会社全体の生産性は上がりません。
プロンプトライブラリの管理には Notion が使いやすく、「業務カテゴリ」「使う場面」「プロンプト本文」「期待される出力例」を一覧にしておくと、新しいメンバーでも即日使えます。初期のライブラリ整備は 5〜10 プロンプトから始め、実際に使って効果があったものを追加していく運用がうまくいきやすいです。
# プロンプトライブラリの管理フォーマット例
## プロンプト名: 提案書構成案生成
### 使う場面
ヒアリング後、提案書の構成を考えるとき
### プロンプト
[ここにプロンプト本文を記載]
### 期待される出力
- 提案書の大見出し5〜7個
- 各見出しの要点
### 注意事項
- クライアント業種の情報は必ず入れる
- 予算感が不明な場合は「予算未確認」と明記して渡す
AI アウトプットの品質チェック体制
AI の出力をそのまま使うのではなく、必ず人がレビューする体制を作ることが品質維持の要です。特にクライアントに見せる成果物（提案書・コード・マニュアルなど）は、AI の出力を「たたき台」として位置づけ、最終確認を担当者が行うルールを明文化しておきましょう。
チェックの観点は業務によって異なりますが、以下の3点は共通して意識する価値があります。
- 事実確認：AI が出力した数値・固有名詞・技術的な説明が正確かどうか
- 文脈整合：クライアントの業種・状況・温度感と合っているかどうか
- リスク確認：コードの場合、意図しない副作用や脆弱性がないかどうか
このレビュー工程を省かないようにルール化すると、AI 活用のスピードメリットを享受しながら品質を維持できます。担当者のレビュー時間も AI の精度が上がるにつれて徐々に短縮されていきます。
導入ステップと費用感の目安
小さく始めて横展開するロードマップ
AI ツールの導入は「一気にすべての業務に入れる」よりも、効果が見えやすい1〜2業務からスタートするほうが定着しやすいです。Web 制作会社であれば「提案書の構成案生成」か「コンポーネント実装の補助」のどちらかを最初の試験台にするのが現実的です。
ステップ1（1〜2 週間）：担当者1名が Claude の個人プランで試験的に使い始める。プロンプトをメモしておく。
ステップ2（1 ヶ月）：効果が確認できた業務のプロンプトをチームに共有。2〜3 名で使い始める。
ステップ3（2〜3 ヶ月）：プロンプトライブラリを整備し、新規メンバーも使える状態にする。Claude Code を導入して実装補助も本格化。
ステップ4（3 ヶ月以降）：一気通貫フローを確立。案件単位での工数削減効果を計測し、活用範囲を拡大。
費用の目安として、Claude の個人プラン（Claude Pro）は月額 20 ドル程度、チームプランは 1 ユーザーあたり月額 25〜30 ドル程度です。Claude Code は API 使用量に応じた従量課金で、月あたりの使用量が少ない段階では数千円〜1 万円程度に収まるケースが多いです。工数削減で回収できるコストと比べると、費用対効果は高い水準です。
導入時に起きやすいつまずきと対処法
AI 活用でよく聞かれるつまずきとして「出力が期待と違う」「使いどころがわからない」「チームに浸透しない」の三つがあります。
「出力が期待と違う」は、プロンプトに背景情報と出力形式の指定が不足していることが原因の大半です。「〜してください」だけでなく「どんな状況で」「何のために」「どんな形式で」を加えるだけで出力の質が上がります。
「使いどころがわからない」は、試す業務を絞れていない状態です。まず1業務に集中し、「この業務でのプロンプトが完成した」と感じてから次に広げる順番が効果的です。
「チームに浸透しない」は、使える人が個人でサイロ化している状態です。プロンプトライブラリと共有ルールを作ることが解決策ですが、管理コストをかけすぎないよう Notion の1ページにまとめる程度で十分です。
まとめ
Web 制作会社における AI 活用は、コーディング補助と提案書作成という二大工程を中心に、実務に組み込める具体的な手段が揃ってきています。Claude Code でのコンポーネント実装補助、Claude による提案書構成案の生成・競合比較表の作成、そして案件フロー全体への AI 組み込みは、今すぐ試せるレベルの技術です。
重要なのは「全部一気に変える」ではなく「1業務から始めて効果を確認し、横展開する」サイクルです。最初の1〜2 ヶ月で効果を実感できた企業は、その後の活用範囲を自然に広げています。まず提案書の構成案生成か、Claude Code でのコーディング補助の一方から試してみてください。
AI 活用の設計や導入サポートについてご相談があれば、お気軽にお問い合わせください。貴社の業務フローに合った進め方を一緒に考えます。
