非エンジニアのためのClaude Code・AI活用メディア運営:株式会社GORO
基本とほかのAIとの違い業務での使い方会社での導入Web制作とAI運営者情報

> Web制作とAI

Web制作の内製化とは?失敗しやすい理由とAIで実現する進め方を解説

公開2026.07.16更新2026.10.11読了目安16分法人・チーム向け

執筆:株式会社GORO編集部/運営:旭 俊成(株式会社GORO 代表)

Web制作の内製化とは?失敗しやすい理由とAIで実現する進め方を解説

この記事でわかること

  • Web制作の内製化と外注の違い、向き不向き
  • 内製化が人材確保の壁でつまずく理由
  • AIで非エンジニアが内製化を進める具体的な方法
目次閉じる開く
  1. 01Web制作の内製化とは?外注との違いと向いているケース
  2. 02なぜWeb制作の内製化は進まないのか?人材確保という壁
  3. 03人を増やさずに内製化する方法としてのAI活用
  4. 04非エンジニアが内製化の一歩を踏み出した研修の実例
  5. 05内製化後の制作スピードはどう変わるのか?デザイン現場の実例
  6. 06Web制作の内製化を始める具体的なステップ

Webサイトの修正や更新のたびに外注先とのやり取りに時間とコストがかかり、そろそろ内製化したいと感じていませんか。じつは今、新たにエンジニアを採用しなくても、非エンジニアがAIを使ってWeb制作を内製化する方法が広がっています。ただし内製化はツールを導入するだけでは進まず、人材確保の壁でつまずく企業も少なくありません。なぜなら内製化を阻むのは技術ではなく、担当できる人をどう確保するかという問題だからです。人を増やさずに内製化を進めたいなら、AIでできることとできないことを知ることから始めましょう。ここでは、GOROが研修や制作の現場でAIを使って内製化を進めてきた実例をもとに、現実的な進め方を解説します。

Web制作の内製化とは?外注との違いと向いているケース

Web制作の内製化とは、更新や制作の作業を外部の制作会社に依頼せず、自社の社員が担う体制のことです。外注では発生していた依頼・確認・納品のやり取りが社内で完結するため、修正の都度かかっていた時間とコストを減らせます。

Web制作の内製化の定義と外注との違い

外注は、制作会社が持つ専門知識や制作スキルを使える代わりに、依頼のたびに見積もり・制作・確認という工程が発生します。小さな文言修正でも、依頼から公開まで数日かかることが珍しくありません。

内製化は、この工程を社内に持ち込む取り組みです。自社の担当者が直接サイトを編集できれば、確認の往復は社内の意思決定だけで完結します。ただし、外注先が担っていた専門スキルの一部を、社内の誰かが代わりに持つ必要があります。

項目外注内製化
修正依頼から反映までの時間数日〜1週間程度かかることが多い社内の確認次第で当日中も可能
必要な社内スキルディレクションのみで対応可能制作・編集スキルが一定量必要
コスト構造依頼のたびに費用が発生人件費以外の追加費用が発生しにくい
スピード感外注先のスケジュールに依存する自社の都合で動かせる

内製化に向いている業務・向いていない業務

すべての業務を一度に内製化する必要はありません。まずは発生頻度が高く、判断の多くが社内で完結する業務から検討すると進めやすくなります。

内製化に向いている業務内製化が難しい業務
既存ページの文章・画像の更新ゼロからのブランドデザイン設計
定型レポートやランディングページの作成大規模なシステム連携・セキュリティ要件の実装
キャンペーンページの差し替え・量産専門的な実装が必要な高度な機能開発

近年は、コードを書く知識がなくてもAIの支援を受けながら制作を進める方法も広がっています。こうした仕組みについてはAI Web制作の進め方で詳しく整理しています。

内製化の主なメリットとデメリット

内製化の最大のメリットは、意思決定から公開までのスピードが自社の都合で決まることです。外注先の予定を待つ必要がなくなり、小さな修正をためらわずに試せるようになります。

一方で、制作を担う人材を社内で確保し続ける必要がある点はデメリットです。担当者が異動や退職をすると、ノウハウごと失われるリスクもあります。過去にノーコードツールを導入しても定着しなかった企業が多いのは、このスキル維持の難しさが背景にあります。

なぜWeb制作の内製化は進まないのか?人材確保という壁

内製化のメリットは大きいものの、実際に取り組もうとすると多くの企業が同じ場所でつまずきます。それが人材の確保です。

内製化を進める企業ほど直面する人材確保の課題

制作を担う人材が社内にいなければ、内製化は計画のまま止まります。採用市場でWeb制作のスキルを持つ人材を探しても、応募が集まらない、あるいは採用できても定着しないという声は珍しくありません。

前述のとおり、ノーコードツールで内製化を試みても定着しなかった企業が多い背景には、ツールを使いこなす人材の確保・育成という課題があります。ツールを導入するだけでは、内製化は進みません。

日本企業特有の内製化のハードル(IPA調査から)

DX動向2025によると、日本・米国・ドイツの3カ国を比較した調査で、DXに取り組んでいる企業ほどシステム開発の内製化を進めている傾向が示されています。

一方で、同調査は日本企業が抱える課題も明らかにしています。内製化を進める上での課題として「人材の確保や育成が難しい」という回答が、日本では突出して高くなっています。

さらに、ソーシング手段についての調査では、非コア領域(事業の中心ではない業務)で次のような傾向が示されています。

領域日本の傾向米国の傾向
非コア領域(事業の中心ではない業務)パッケージソフト・SaaS導入の回答率が高く、内製・外部委託ともに回答率が低い内製による自社開発の回答率が最も高い

つまり日本企業は、人材を確保できないために内製を避け、既存のツール導入で済ませる傾向が強いと読み取れます。Web制作の現場で起きている人材不足も、この構造と地続きにあります。

『人を採用するしかない』という思い込みの落とし穴

人材が足りないと分かると、多くの担当者は「専門スキルを持つ人を採用するしかない」と考えます。しかし採用には時間がかかり、育成にもさらに時間を要します。採用活動を始めてから内製化が軌道に乗るまで、半年や1年を要するケースも少なくありません。

IPA調査が示すとおり、人材の確保や育成の難しさは日本企業に共通する課題です。採用を前提にする限り、内製化は限られた企業だけの選択肢になってしまいます。

ここで見直すべきなのは、「人を増やす」という前提そのものです。今いる担当者のスキルを拡張する方法があれば、採用を待たずに内製化へ進めます。次章では、その具体的な手段としてのAI活用を取り上げます。

人を増やさずに内製化する方法としてのAI活用

今いる担当者のスキルを拡張する手段として注目されているのが、AIを使った制作支援です。なかでもClaude Codeは、コードを書く知識がなくても制作や編集の指示を出せる点で、内製化の選択肢になり得ます。

Claude Codeとはコードを書かずに制作・編集ができるエージェント型AI

Claude Codeは、Anthropic社が提供するエージェント型のAIツールです。Overview - Claude Code Docsによると、機能の構築・不具合の修正・開発作業の自動化を支援するツールと説明されています。

「エージェント型」とは、指示を出すと内容を理解し、ファイルの編集や作業の実行までを担当するという意味です。担当者が文章や画像の変更を自然な言葉で伝えれば、サイトのコードを自分で書かなくても反映を進められます。この仕組みは、採用に頼らない内製化を考えるうえでの土台になります。

ターミナルだけでなくデスクトップアプリやブラウザでも使える

Claude Codeと聞くと、黒い画面にコマンドを打ち込む作業を思い浮かべる人も多いかもしれません。しかしOverview - Claude Code Docsでは、ターミナルに加えてIDE拡張・デスクトップアプリ・ブラウザなど、複数の環境で利用できると説明されています。

利用環境想定される使い方
ターミナルコマンド操作に慣れた担当者向け
デスクトップアプリ専用の画面から操作できる
ブラウザインストール不要で操作できる

非エンジニアの担当者にとって、コマンド入力が必須ではない選択肢がある点は、導入のハードルを下げる要素といえます。なお多くの利用環境では、Claudeのサブスクリプション(Pro・Max・Team・Enterpriseいずれか)やAnthropic Consoleアカウントが別途必要になるため、導入時は公式サイトで最新の条件を確認してください。

Anthropic社内でも業務時間の大幅な短縮が報告されている

Claude Codeが実際にどの程度の時間短縮につながるのかは、Anthropic自身の社内調査からも読み取れます。How AI is transforming work at Anthropicによると、2025年8月に社内のエンジニア・研究者132名への調査と53件の詳細インタビュー、利用データの分析が行われました。

この調査では、数週間かかっていた構築や調整の工程が、Claude Codeの活用によって数時間の作業セッションに短縮された事例が報告されています。

一方で同じ調査では、エンジニアの半数以上が、自分の業務のうち「完全に委任できる」割合は0〜20%にとどまると回答しています。つまりAIがすべてを代行するのではなく、人が確認と判断を担いながら作業時間を圧縮する使い方が前提になっています。この構造は、採用で人を増やすのではなく、今いる担当者の作業範囲を広げるという内製化の方向性と重なります。

実際にこうした仕組みを非エンジニアが使いこなせるのかどうかは、Claude Codeの活用事例でも具体的な使われ方を紹介しています。次の章では、実際に経験のない担当者がどのように最初の一歩を踏み出したのかを見ていきます。

非エンジニアが内製化の一歩を踏み出した研修の実例

実際に研修でClaude Codeを使ったのは、コードを書いた経験がない担当者たちでした。なかにはClaude Codeに触れたことがあるメンバーもいました。進め方には、いきなり自由に作らせない工夫がありました。

実際の業務サイトを使い、小さな成功体験から始める

研修ではまず、参加者が実際の業務で扱っているWebサイトを使いました。真っ白な画面からサイトを作らせるのではなく、既にあるページの文章や画像を変える指示から始めています。

実録支援先の声(GOROの事例より)

実務サイトのHTMLで、まず小さな変更から

環境が整った後は、参加者が実際の業務で扱ったWebサイトのHTMLを使い、文章や画像の変更に取り組みました。

指示を出す → Webサイトが変わる → 結果を確認する

いきなりゼロからサイトをつくるのではなく、先に小さな変更を成功させることで、Claude Codeの基本的な動かし方をつかみました。

出典:Claude Code未経験のクリエイター12名が、たった4時間の研修でWebサイトを公開した事例(GOROの事例記事)

Notionにまとめた情報をClaude Codeに参照させて自己紹介サイトを作る

小さな変更に慣れた後、参加者は一人ひとりの自己紹介サイトを作る工程に進みました。ここで使われたのがNotionとの連携です。

実録支援先の声(GOROの事例より)

Notionの情報を参照して自己紹介サイトを作る

まずNotionに、サイトに掲載したい情報を整理し、Claude Codeは、その内容を参照しながら、Webサイトの構成やデザインを生成します。

Notionを使ったのは、単に参加者が普段から使い慣れているためではありません。

参加者の所属先では、議事録やプロジェクト情報をNotionにまとめています。Claude Codeと連携することで、Notionに蓄積された情報や背景を参照し、文脈を踏まえて制作を進められるためです。

出典:Claude Code未経験のクリエイター12名が、たった4時間の研修でWebサイトを公開した事例(GOROの事例記事)

この連携方法は、思いつきで選ばれたものではありません。Connect to Notion MCP - Notion Docsでは、Claude CodeからNotionワークスペースへ接続する手順が公式に公開されており、接続後はAIが権限の範囲内でNotion上の情報を読み取り、更新できると説明されています。

さらにConnect AI tools with Notion MCP | Notion Helpでは、散在したメモや情報を整理済みのドキュメントに変換する活用例が紹介され、ベストプラクティスとして「まずは個人利用のユースケースから始める」ことが推奨されています。研修で一人ひとりの自己紹介サイトという小さな単位から始めた進め方は、この公式の推奨と同じ方向を向いていました。

『指示を出す→サイトが変わる→確認する』を体感する意味

前述のとおり、参加者はこのサイクルを短時間で経験し、その後は自由な制作にも進みました。最初の成功体験が、次に進むための土台になっています。

外注では、依頼した内容がどのように反映されるかを担当者自身が確認する機会は多くありません。内製化を進める場合、この過程を自分で確認しながら作業を進められる点が特徴です。

内製化後の制作スピードはどう変わるのか?デザイン現場の実例

前述のとおり、研修で起きた変化は、実際の制作現場でも確認されています。ここでは、デザイナーが制作の現場でAIをどう使ったかを紹介します。

ワイヤーフレーム作成がAIとの対話で半分の時間に

ワイヤーフレームとは、サイトの構成や配置を決めるための設計図です。この工程は、担当者と制作者の間で何度もやり取りが発生しやすい部分です。

実録代表・旭の一次体験

ワイヤーフレーム作成がAIとの対話で半分の時間に

担当したデザイナーは、構成の検討からワイヤーまでをAIと相談しながら通しで作り、数時間で先方に渡せる状態に。かかる時間は半分になり、浮いた時間でディスカッションにより考えられるようになったと話していました。

出典:板前さんの鮨と一緒に、AI活用事例を共有する鮨会を開催しました(代表・旭俊成のnote)

構成の検討とワイヤーの作成を、別々の作業として分けずに進めた点がポイントです。下書きを作ってから見せるという段階を挟まずに、形にしながら検討できます。

Figmaの『絵』ではなく触れるプロトタイプで意思決定を早める

ワイヤーフレームの次に控える、メニュー構成の検討でも変化が起きました。

実録代表・旭の一次体験

触れるプロトタイプで意思決定を早める

担当したデザイナーは、サイトのメニュー構成の検討で、Claude Codeで実際に触れるプロトタイプを作りました。Figmaで絵で見せて議論する形から動くものをコーディングで作ることで、意思決定スピードを早められた経験を共有してくれました。

出典:板前さんの鮨と一緒に、AI活用事例を共有する鮨会を開催しました(代表・旭俊成のnote)

Figmaで作る画面は、見た目を確認できても、実際に操作することはできません。ボタンを押した先の画面は、説明を聞いて想像するしかありませんでした。

触れるプロトタイプなら、操作した結果をその場で確認しながら検討が進みます。意思決定に必要な情報が、その場で揃うようになります。

検討方法確認できること意思決定までの流れ
Figmaの画面レイアウトや配色などの見た目説明を聞いて想像し、後日フィードバック
触れるプロトタイプ操作した後の画面遷移や反応その場で操作し、その場で判断

Figmaと組み合わせた制作方法は、Figma連携でできることと学び方でも取り上げています。

浮いた時間をディスカッションに使うという変化

前述のとおり、かかる時間が半分になったことで生まれた時間は、議論に充てられました。

内製化は、作業にかかる人数を減らすための取り組みだと捉えられがちです。しかし実際に起きた変化は、同じ人数で考える時間を増やすことでした。

ワイヤーフレームや構成案の作成に時間を取られなくなると、検討に時間を割けます。手を動かす時間と、考える時間の配分が変わったといえます。

この変化は、内製化の目的を人員削減から、考える時間の確保へと置き換える材料になります。次の章では、この変化を自社で起こすための具体的な進め方を紹介します。

Web制作の内製化を始める具体的なステップ

前述のとおり、内製化によって浮いた時間は、考える時間に変わります。ここでは、その変化を自社で起こすための進め方を整理します。

まず内製化する業務範囲を決める

最初に決めるべきは、どの業務から内製化するかです。すべてのページ更新を一度に社内へ移そうとすると、担当者の負担が急に増え、挫折につながります。

記事冒頭の表で紹介したとおり、既存ページの文章・画像の更新や、キャンペーンページの差し替えは内製化に向いている業務です。この中から、更新頻度が高く、判断に迷いにくい業務を1つ選びます。

範囲を決める際は、以下の観点を確認すると選びやすくなります。

確認する観点判断のポイント
更新頻度月に何度も発生する業務ほど効果を実感しやすい
判断の難易度デザインの大きな変更を伴わない業務から選ぶ
関わる人数担当者が1人で完結できる業務から始める

範囲を絞り込んだら、その業務だけを対象に次のステップへ進みます。

必要な環境とツール、権限を整える

業務範囲が決まったら、実際に作業を進める環境を整えます。ここで確認が必要なのは、ツールの利用環境と、サイトを編集する権限の2点です。

Claude Codeの利用環境については、Overview - Claude Code Docsに記載があるとおり、ターミナル・IDE拡張・デスクトップアプリ・ブラウザなど複数の選択肢があります。社内にコマンド操作へ抵抗のある担当者が多い場合は、デスクトップアプリやブラウザからの利用を検討する余地があります。

あわせて確認しておきたいのが、以下の3点です。

  • 利用するClaudeのサブスクリプションプラン(Pro・Max・Team・Enterpriseのいずれか)
  • 編集対象のWebサイトへのアクセス権限と、編集内容を確認する社内の承認フロー
  • 既存ページのコードやNotionなど、参照させたい情報の所在

料金や利用条件は変更される場合があるため、契約前にOverview - Claude Code Docsや公式サイトで最新の内容を確認してください。

小さく試して成功体験を積み、範囲を広げていく

環境が整ったら、実際に手を動かします。ここで意識したいのは、最初から自由な制作を目指さないことです。

前述の研修の実例でも、参加者はいきなり新しいサイトを作るのではなく、既にあるページの文章や画像を変える作業から始めています。この進め方は、業務範囲を絞り込む段階から一貫させる価値があります。

進め方の目安は、以下の順番です。

  1. 既存ページの文言修正など、影響範囲が小さい作業で指示を出してみる
  2. 指示した内容が反映される様子を確認し、担当者が操作に慣れる
  3. 慣れてきた作業の対象ページを増やし、関わる担当者も増やす
  4. 対応できる業務の種類を、少しずつ広げていく

この順番を踏むと、担当者は「自分の指示でサイトが変わる」という経験を早い段階で持てます。最初の成功体験があるかどうかで、その後の取り組み方は大きく変わります。

範囲を広げる際も、一度にすべてを任せるのではなく、担当者が対応できる量を確認しながら進めます。社内で進め方に迷う場合や、自社の業務に合わせた具体的な手順を相談したい場合は、研修という形で一緒に進め方を設計する選択肢もあります。

Claude Codeの社内導入を検討している方へ

GOROは、デザイナー・マーケ担当・ディレクターなど非エンジニアの部署を対象にしたClaude Code法人研修を提供しています。事前ヒアリングで業務の内容を伺い、研修の内容を設計します。研修の当日に、受講者が実際の成果物を作り切る形式です。

運営

旭 俊成 株式会社GORO 代表取締役

株式会社GORO代表。Web支援・UI/UX支援・AI支援の事業を経営しながら、社内の業務と企業研修でClaude Codeを使っています。使ってみて分かったことをnoteで書いています。

記事は株式会社GORO編集部が、AIを使って制作しています。事例は自社の実践と研修の実績にもとづいています。

SERVICE

Claude Codeを、自分の業務で
使えるようになるために

個人向け

Claude Code マンツーマン講座

あなたの実際の業務を題材に、1対1で自動化を作っていくオンライン講座です(回数制)。

講座の内容を見る

法人・チーム向け

Claude Code研修

非エンジニアの部署・チーム向けに、業務に合わせて内容を設計する研修です。menu社・Steve Inc.で実施しました。

研修の内容を見る