【Web担当者必見】AI時代のWeb制作術｜フリーランスが生き残るための実践ガイドを詳しく解説
生徒最近「AIのせいでWeb制作の仕事がなくなる」ってよく聞くので、正直不安です…。このままWeb制作を続けていて大丈夫でしょうか？
ペン博士大丈夫じゃ！むしろ今こそチャンスなんじゃ。AIに仕事を奪われるのではなく、AIを味方につけることで、これまでの何倍も速く価値を生み出せるようになる。今回は「AIと共に働く」ための具体的な方法を、実践的に解説していくぞい！
生徒AIを味方に…！ぜひ教えてください！
Web制作の現場では今、AIという強力なツールが急速に普及しています。「AIに仕事が奪われる」という不安の声もありますが、現実はその逆です。
AIを使いこなせる人こそが、より多くの案件を短時間でこなし、高い収入を得られる時代が到来しています。
本記事では、Web制作におけるAIの実践的な活用方法を、工程ごとに詳しく解説します。明日からすぐに使えるプロンプト例も多数掲載していますので、ぜひ最後までご覧ください。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【子育てママさん必見】「在宅×副業」を達成！多方向で活躍中のママさんフリーランスにインタビュー！
ペン博士、ママさんなのに在宅で副業もこなしている方がいるって聞いたんですけど、本当ですか？だとしたらすごすぎます！ うむ、うちの受講生でな、まさに“時間も場所...
菅井さんの主な制作実績はこちら
目次
AI時代のWeb制作はどう変わる
「手作業」から「AI活用」へ
これまでのWeb制作では、HTMLを一行ずつ書き、CSSの細かい調整に何時間もかかることが当たり前でした。
レイアウトの微調整、レスポンシブ対応、ブラウザ差異の確認など「作ること」そのものに、多くの時間と労力を費やしてきました。
しかし、AIの登場により、コードの生成、デザインパターンの提案、構造設計の補助など、これまで手作業で行っていた工程の多くを、短時間で高精度に実行できるようになっています。
作業時間は大幅に短縮され、制作スピードは飛躍的に向上しました。
これから重要なのは、「コードを書く時間を減らした分、どこに時間を使うか」という視点です。
単純作業をAIに任せられるようになった今、人間にしかできない価値がより重要になります。
例えば
- ユーザー体験（UX）の設計
- コンバージョン導線の最適化
- ブランドの世界観づくり
- ビジネス成果につながる戦略設計など
Web制作は、単なる「ページ作り」ではなく、成果を生むための設計業へと進化しています。
AIは作業を効率化する道具。
しかし、どの方向に進むかを決めるのは人間です。
これからのWeb制作に求められるのは、
「どれだけ早く作れるか」ではなく、
「どれだけ成果につながる設計ができるか」。
手作業の時代から、AI活用の時代へ。
制作の本質は、より戦略的なフェーズへと移行しています。
価値は「コーディング」から「課題解決」へ
AIが発達することで、単純にコードが書けるだけの価値は下がっていきます。代わりに価値を持つのは、次のような能力です：
・クライアントの本当の課題を見つける力
・サイトでどう売上を上げるかを考える力
・ユーザー体験を設計する力
・関係者をまとめて合意を作る力
AIを使って空いた時間を、これらの「付加価値の高い仕事」に使えるかどうかが、これからのフリーランスに求められるスキルです。
不安を感じる必要はない
「AIが発達したら仕事がなくなるのでは？」という不安は理解できます。しかし、実際には以下のような理由から、Web制作の需要はなくなりません。
- Webサイトの需要は増え続けている
DX化の流れで、すべての企業がWebサイトを必要としています - AIを使いこなせる人は少ない
AIを効果的に使うには、Web制作の基礎知識が必要です - 人間にしかできない仕事がある
クライアントとのコミュニケーションや、最終的な品質管理は人間の仕事です
つまり、「AIに奪われる」のではなく「AIを使える人が選ばれる」時代になっているのです。
生徒なるほど！
「AIが仕事を奪う」っていうより、
「AIを使える人が強くなる」って感じなんですね。
ペン博士その通りじゃ。
作業者から“設計者”へ役割がシフトしておるのじゃ！
Web制作におすすめのAIツール4選
ペン博士まずは、Web制作でよく使うAIツールを4つ紹介するぞ。それぞれ得意分野が違うから、使い分けが大切じゃ！
1. Claude（実装とコード生成に最適）
Claudeは、コードの品質と日本語の自然さで定評があるAIです。
特に長文の整理や、仕様書・ドキュメント作成、リライト系の作業が得意で、
- ロジックが破綻しにくい
- 変数名や構造が人間フレンドリー
- 日本語がやわらかく、説明が過剰になりにくい
といった特徴があります。
得意なこと：
- 複雑なJavaScriptのコード生成
- Reactコンポーネントの設計
- 既存コードのバグ修正
- UIの確認をしながらの修正（Artifacts機能）
おすすめの使い方：
実装フェーズで、具体的なコードを生成してもらうときに使います。特に「Artifacts」機能を使えば、その場でUIを確認しながら修正できるため、プロトタイピングが非常に速くなります。
2. ChatGPT（企画と要件定義に最適）
ChatGPTは、汎用性の高さと推論能力が特徴です。
アイデア出しから実装レベルのコード、マーケティング戦略、文章生成まで幅広く対応でき、
- 抽象的な相談 → 具体案への落とし込み
- 問題の分解 → 解決策の組み立て
- 複数条件を踏まえた思考整理
などといった「考える系のタスク」がかなり得意です。
得意なこと：
- 大量の資料の要約
- 要件定義書の作成
- サイトマップの構築
- ペルソナ設計
- 競合分析
- 画像生成（DALL-E 3機能）
おすすめの使い方：
プロジェクトの初期段階、特にヒアリング後の企画立案や構成案の作成に使います。クライアントから受け取った大量の資料を整理するときにも便利です。
3. Gemini（リサーチと最新情報に最適）
Geminiは、Google検索と連携している点が大きな強みです。
つまり、
- 最新情報
- トレンド
- 一般ユーザーが実際に検索している内容
といった「リアルな検索文脈」を踏まえた回答が得やすいのが強み。
特に、
- SEOを意識したコンテンツ案
- 市場調査
- 競合リサーチ
- 一般向けの説明文
などのような、「検索前提のアウトプット」ではかなり使いやすいです。
得意なこと：
- 最新の技術情報の検索
- YouTube動画の内容解析
- PDF資料の要約
- SEOトレンドの分析
おすすめの使い方：
新しいライブラリやフレームワークの仕様を調べるとき、クライアントから渡された資料を整理するときに使います。リアルタイムの情報が必要な場面で活躍します。
4. DeepSeek（コスパ重視のコード生成）
DeepSeekは、コストパフォーマンスに優れたAIです。
特徴としては
- API利用が安価
- シンプルな生成処理が速い
- 大量バッチ処理に向いている
といった点があり、
- 自動記事生成
- データ整形
- 単純なコード生成
- 内部ツール組み込み
のような「数を回す用途」で強さを発揮します。
スタートアップや個人開発で、
まず安く回したい場合の現実的な選択肢になりやすいAIです。
得意なこと：
- 大量のコード生成
- 定型的なスクリプトの作成
- コストを抑えた開発
おすすめの使い方：
シンプルなコンポーネントや、繰り返しの多いコードを生成するときに使います。頻繁に使う場合、コスト面でのメリットが大きくなります。
使い分けのコツ
これらのAIは、それぞれ得意分野が異なります。工程に応じて最適なツールを選ぶことで、作業効率が格段に上がります。
| 工程 | おすすめAI | 理由 |
|---|---|---|
| ヒアリング・企画 | ChatGPT | 要約と構造化が得意 |
| リサーチ | Gemini | 最新情報へのアクセス |
| 実装 | Claude | コード品質が高い |
| 大量コード生成 | DeepSeek | コスパが良い |
生徒思ってたより用途がはっきり分かれてますね。
ペン博士そうじゃ。
「万能AI」を探すより、
適材適所で組み合わせるのが現実的なのじゃ！
工程別・AI活用の実践ガイド
ペン博士ここからは、Web制作の各工程で、具体的にAIをどう使うかを詳しく解説するぞ！すぐに使えるプロンプト例も紹介するから、ぜひ試してみるんじゃ。
ステップ1：問い合わせ対応・作業範囲の確定
案件が来たら、まず作業範囲を明確にすることが重要です。ここが曖昧だと、後から「これもお願いします」と仕様が増えてしまいます。
AIに渡す情報
- クライアントからの問い合わせ文（コピペでOK）
- 既存サイトのURL（あれば）
- 納期や予算感（分かる範囲で）
使うAI
ChatGPT
プロンプト例
以下はクライアントからの問い合わせ内容です。
[問い合わせ文をここに貼り付け]
以下の3つを整理してください：
1. 想定される制作物（ページ数、機能、素材など）を箇条書きで
2. 不明点を「確認必須」「確認推奨」に分けて列挙
3. 見積もり前に確認すべき質問リストを10個作成
出力はチェックリスト形式にしてください。実行例
次にやること
- 「確認必須」の項目だけを抜き出して、クライアントに質問します
- 作業範囲が確定してから見積もりに入ります
ポイント： ここをしっかりやることで、後半での仕様変更を防げます。
ステップ2：ヒアリング内容の整理
ヒアリングで聞いた内容は、そのままでは散らかっています。AIを使って構造化しましょう。
AIに渡す情報
- ヒアリングメモ（箇条書きでOK）
- サイトの目的（例：問い合わせ増加、採用強化など）
- 競合情報（分かる範囲で）
使うAI
Claude または ChatGPT
プロンプト例
以下はクライアントへのヒアリング内容です。
[ヒアリングメモをここに貼り付け]
以下の3つを整理してください：
1. 目的を「現状→理想→課題→解決策」の順で整理
2. 提案の柱を3つにまとめる（各柱に根拠と期待効果を添えて）
3. クライアントに確認すべき意思決定ポイントを列挙
出力はそのまま提案書に使える文章形式でお願いします。実行例(ChatGPT)
次にやること
- 提案書の骨子として、まず「柱3つ」だけをクライアントに見せます
- 方向性の合意が取れてから、詳細資料を作成します
ポイント： 先に全部作り込むのではなく、方向性を確認してから詳細を詰めると無駄がありません。
ステップ3：サイト構成・ワイヤーフレームの作成
デザインに入る前に、情報の順番と必要なセクションを決めます。
AIに渡す情報
- 誰に（ターゲット）
- 何を（提供価値）
- 何をしてほしいか（コンバージョン）
使うAI
ChatGPT
プロンプト例
以下の情報をもとに、トップページの構成案を作成してください。
・ターゲット：[ターゲット層を記入]
・提供価値：[サービスや商品の特徴]
・コンバージョン：[問い合わせ、購入など]
以下の形式で出力してください：
1. 必要なセクションを優先度順に並べる
2. 各セクションに「目的」と「入れるべき要素」を書く
3. ユーザーが離脱しやすいポイントを3つ予測し、対策も書く実行例
次にやること
- この結果をもとに、Figmaなどで大まかな枠を作ります
- 先に見出しと文章を決めてからデザインすると、ブレにくくなります
ポイント： いきなりデザインを始めるのではなく、情報設計を先に固めましょう。
ステップ4：デザインのレビュー
デザインは感覚的な部分が大きいので、AIに丸投げするのはおすすめしません。ただし、客観的なチェック役としては非常に有効です。
AIに渡す情報
- ワイヤーフレームのスクリーンショット
- または、セクション構成をテキストで列挙
- 想定ユーザーの不安（価格、信頼性、比較など）
使うAI
Claude
プロンプト例
このLPの構成をレビューしてください。
[構成またはスクリーンショットを添付]
以下の3点を具体的に指摘し、改善案を各3つ出してください：
1. 信頼獲得に足りない要素
2. 反論処理が弱い箇所（価格、実績、比較など）
3. コンバージョンまでの導線で迷いそうなポイント実行例
次にやること
- 指摘された中で、優先度の高い上位2つだけを修正します
- 全部直そうとすると、コンセプトがブレる可能性があります
ポイント： AIの指摘を全て取り入れるのではなく、重要なものだけを選びましょう。
ステップ5：コーディング・実装
実装フェーズでは、AIが最も活躍する場面です。ただし、生成されたコードをそのまま使うのではなく、必ず内容を確認して調整することが重要です。
AIに渡す情報
- 使用する技術スタック（例：Next.js、WordPress、Astroなど）
- 既存のコーディングルール（命名規則、ファイル構成など）
- 作りたい機能の詳細
使うAI
Claude（コード品質重視）、または DeepSeek（コスト重視）
基本実装のプロンプト例
Next.js、TypeScript、Tailwind CSSを使って、
カード型の実績一覧コンポーネントを作成してください。
条件：
- propsでデータを受け取る形式
- レスポンシブ対応（モバイル、タブレット、PC）
- 簡潔なコメント付き
まずは最小構成で出力し、その後に改善案を3つ提示してください。デバッグのプロンプト例
このコンポーネントで表示崩れが起きています。
期待する表示：[説明]
現状：[説明]
原因の候補を優先度順に5つ挙げ、
それぞれの確認手順も書いてください。実行例
次にやること
- 生成されたコードは「最小構成」で受け取り、自分で整えます
- エラーが出たら、「原因候補→確認手順」の形でAIに聞くと早く解決します
- 必ずブラウザで動作確認をしてください
ポイント： AIが書いたコードでも、必ずご自身で内容を理解してから使いましょう。
ステップ6：テストとデバッグ
制作が終わったら、テストが必要です。AIを使えば、見落としやすいテストケースを網羅的に洗い出せます。
使うAI
ChatGPT
プロンプト例
予約フォーム（入力項目：氏名、電話番号、希望日時、備考）があります。
想定されるユーザーの誤操作・エラーケースを20個出し、
テスト項目としてチェックリスト化してください。
さらに、優先度（高・中・低）も付けてください。実行例
次にやること
- 優先度「高」の項目を重点的にテストします
- 全部をテストしようとすると時間がかかるので、重要なものから順番に
ポイント： テスト観点が増えるだけで、納品後のクレーム率が大幅に下がります。
ステップ7：納品と運用マニュアル作成
納品時には、クライアントがご自身で更新できるようにマニュアルを用意すると喜ばれます。AIを使えば、専門用語なしの分かりやすいマニュアルが作れます。
使うAI
Claude
プロンプト例
以下の納品内容を、クライアント向けの運用マニュアルにしてください。
[納品内容の説明を記入]
以下の項目を含めてください：
- 更新手順（画像付きで説明する想定）
- 注意点
- よくある質問
- 問い合わせ窓口
専門用語は避けて、初心者でも理解できる文章でお願いします。実行例
次にやること
- 生成されたマニュアルに、スクリーンショットを追加します
- 可能であれば、実際にクライアントに試してもらい、分かりにくい部分を修正します
ポイント： マニュアルがあると、納品後の問い合わせが減り、時間の節約になります。
生徒なるほど！
企画から実装、テストまで全部にAIが関われるんですね。
ペン博士うむ。
ポイントは「丸投げ」ではなく
補助として使うことじゃ！
実践で使えるプロンプトテンプレート集
ペン博士ここでは、より高度なプロンプトテンプレートを紹介するぞ。コピーしてそのまま使えるから、ぜひ活用してほしいんじゃ！
プロンプトの基本構成「I-C-E-F」
良いプロンプトには、4つの要素が含まれています：
- Identity（役割）： AIにどんな専門家になってもらうか
- Context（背景）： プロジェクトの目的やターゲット
- Execution（実行指示）： 具体的に何をしてほしいか
- Format（出力形式）： どんな形式で出力してほしいか
この4つを意識するだけで、AIの回答精度が格段に上がります。
テンプレート1：ランディングページの構成案
# 役割
あなたは行動経済学とセールスライティングに精通した、
LPディレクターです。
# 背景
[商材の詳細]を販売するためのLPを制作します。
ターゲットは[ターゲットの詳細]で、
彼らは[悩み]を抱えています。
# 実行指示
1. ターゲットの「痛み」を再定義し、
それを解決するベネフィットを3つ抽出してください
2. 「PASONAの法則」に基づき、
12セクションからなるサイト構成案を作成してください
3. 各セクションごとに以下を記述してください：
- 配置すべき画像イメージ
- 訴求すべきコピー
- 期待するユーザーのアクション
# 出力形式
表形式で整理して出力してください。テンプレート2：アクセシブルなコンポーネント生成
# 役割
あなたはGoogleのアクセシビリティガイドラインを熟知した、
フロントエンドエンジニアです。
# 実行指示
以下の要件を満たす[コンポーネント名]を制作してください。
# 要件
- 技術スタック：[Next.js / TypeScript / Tailwind CSS]
- アクセシビリティ：WAI-ARIAに準拠し、
キーボード操作（Tab、Arrowキー）で完全に操作可能であること
- デザイン：モダンでクリーンな印象。
ブランドカラー：[#XXXXXX]をアクセントに使用
- 品質：保守性を考慮し、機能ごとに細かくコンポーネントを分割し、
日本語の丁寧なコメントを付与すること
# 出力形式
コードブロックにまとめ、
実装のポイントを箇条書きで添えてください。テンプレート3：構造化データの生成
# 役割
あなたは最新のセマンティックWebとSEOに精通した
技術エキスパートです。
# 実行指示
提供するWebサイトの内容から、
検索エンジンおよび生成AI（LLM）が内容を正確に理解するための
「JSON-LD」を生成してください。
# 考慮事項
- Schema.orgの最新ボキャブラリを使用
- 著者情報（E-E-A-T）を強調する構造にすること
- FAQ / Product / Organizationなど、
該当するすべてのプロパティを網羅すること
# 出力形式
JSON-LD形式で出力してください。プロンプトって、
ちゃんと型があるんですね！
ペン博士うむ。
良いアウトプットは、良い指示から生まれるのじゃ！
AI時代でも人間にしかできないこと
ペン博士AIが発達しても、人間にしかできない仕事は残る。むしろその価値は高まっていくぞ。ここでは、4つの観点から解説するんじゃ。
1. 言葉にならないニーズを汲み取る力
クライアントは、必ずしも自分の欲しいものを正確に言葉にできません。例えば「もっとおしゃれにしたい」という要望の裏には、「競合に見劣りして問い合わせが減っている」という課題が隠れているかもしれません。
この「本当の課題」を引き出し、言語化して、合意できる形にするのは人間の仕事です。
実践のコツ：
1. 「誰に、何を、どうしてほしいか」を最初に固定する
2. 「理想→現状→課題→解決策」の順で質問する
3. 議事録に「決定事項/未決定事項/確認事項」を必ず残す
これができると、クライアントの曖昧な言葉が、制作チームが動ける要件に変わります。
2. 最終的な責任を負う力
AIは答えを出せますが、その結果に責任は持ちません。フリーランスの価値は、AIを使ったうえで、事故を起こさない運用を作れることにあります。
例えば：
- AI生成コードでバグが出てサイトが止まる
- 生成した文章が著作権に抵触する
- セキュリティの脆弱性が残る
これらの問題は、最終的に制作者が責任を負います。
実践のコツ：
・AI生成物に対する「チェックリスト」を用意する
・コードなら：入力バリデーション、例外処理、権限管理、ブラウザ検証
・文章なら：出典の明示、固有名詞の確認、引用範囲、断定表現の緩和
・納品時に「保証範囲」を明確にする
3. 文化や文脈を捉えたデザイン
AIは平均的なデザインを出すのは得意ですが、「その会社らしさ」や「地域・業界の文脈」を踏まえた絶妙なバランスは、人間の仕事として残りやすいです。
情緒的デザインとは、センスだけの話ではありません。「なぜこのデザインなのか」を言語化し、迷ったときに戻れる判断基準を作ることです。
実践のコツ：
・デザイン前に「ブランド棚卸し」を行う
・既存の強み（実績、人柄、歴史など）
・避けたい印象（安っぽい、堅すぎるなど）
・競合との違い（色、言葉、導線）
・「フォントは信頼感優先」「写真は現場の温度感」など、3〜5個のルールを作る
4. 関係者をまとめる合意形成力
Web制作は、経営者・現場担当・デザイナー・エンジニアなど、立場の違う人が関わるため、意見が割れるのが普通です。AIは論点整理はできますが、相手を納得させたり、優先順位を調整したりするのは苦手です。
実践のコツ：
・会議を「成果物ベース」で設計する
・毎回「今日決めること」を2〜3個に絞る
・アジェンダに「選択肢A/B」と「判断基準」を書いておく
・意見を「事実/解釈/要望」に分けてメモする
・最後に「決定事項/保留/宿題（担当と期限）」を決めて終える
これを徹底すると、議論が感情論に流れにくくなり、納期と品質が安定します。
生徒AIって魔法の自動化ツールだと思ってましたけど、実際は「自分の考えを速く形にする道具」なんですね！
ペン博士その通りじゃ！AIは腕そのものではなく、腕を増やす道具なんじゃ。最後の品質を決めるのは常に人間の判断じゃからな。AIに仕事を奪われるのではなく、AIで仕事を取りにいくんじゃぞ！
生徒はい！僕もAIを使いこなせるフリーランスを目指します！ありがとうございました！
まとめ
本記事では、AI時代のWeb制作術について、実践的な方法を解説しました。
重要なポイントは以下通りです。
・AIに仕事を奪われるのではなく、AIを使いこなす人が選ばれる時代
・工程ごとに最適なAIツールを使い分けることが重要
・プロンプトの質で、AIの回答精度が大きく変わる
・人間にしかできない価値（共感力、責任、デザイン感覚、合意形成）は残る
WithCodeで学んだ基礎知識に、AIを組み合わせれば、どんな複雑な課題でも解決できます。
大切なのは、変化を恐れず、AIを使いこなせるようになること。今日から少しずつ、AIを実務に取り入れてみてください。その積み重ねが、あなたを次世代のトップクリエイターへと押し上げるでしょう。
WithCodeを体験できる初級コース公開中！
初級コース（¥49,800）が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
