AI時代の働き方｜フリーランスが「使われる側」から「使う側」になるための極意を徹底解説

結論から言うと、AIに仕事を奪われるのではなく、AIを使いこなせる人こそが数倍のスピードで価値を生み出す「スーパー個人の時代」が到来しています。コードが書けることの希少価値は下がり続け、代わって「なぜそのサイトを作るのか」「どうすればクライアントの売上が上がるのか」という課題解決能力が本質的な価値を持つようになっています。本記事では、AI共生の理論から実践プロンプト・エンジニアリングの極意まで解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

菅井さん
将来への不安と子育てという背景から「副業」に挑戦しようと決意。独学からプログラミングの学習を開始していたが、WithCodeに出会い体験コースを受講。約4ヶ月の学習に取り組み、当初の目標であった卒業テスト合格を実現した。WithCode Platinumにて3件の案件を担当し、現在は副業だけでなく本格的に「フリーランス」として在宅で活躍していきたいと考えるようになる。

詳しくはこちらの記事をご覧ください。

あわせて読みたい

【子育てママさん必見】「在宅×副業」を達成！多方向で活躍中のママさんフリーランスにインタビュー！ ペン博士、ママさんなのに在宅で副業もこなしている方がいるって聞いたんですけど、本当ですか？だとしたらすごすぎます！ うむ、うちの受講生でな、まさに“時間も場所...

菅井さんの主な制作実績はこちら

---

Web制作におけるAI共生の本質

「作業」から「AI駆使」への進化

これまでのWeb制作は、HTMLを一行ずつ書き、CSSの微調整に数時間を費やす「手作業」の積み重ねでした。しかし、AIの登場により、これらの作業は省かれつつあります。これから求められるのは、AIを使いこなせる能力です。

価値の源泉が「コーディング」から「課題解決」へ

コードが書けることの希少価値は下がり続けています。代わって価値を持つのは、「なぜそのサイトを作るのか」「どうすればクライアントの売上が上がるのか」という、ビジネスの本質に根ざしたコンサルティング能力です。AIを導入することで空いた時間を、この「付加価値の高い領域」に投資できるかどうかが、フリーランスの必須スキルとなっていきます。

---

Web制作におすすめなAIツール4選

AIツール	得意領域	Web制作での主な活用シーン
Claude（Anthropic）	実装・コードの論理的整合性・自然な日本語	複雑なJSロジック構築、Reactコンポーネント設計、バグ修正、ワイヤーレビュー、納品マニュアル作成。Artifacts機能でUIをその場で確認しながら修正できる
ChatGPT（OpenAI）	企画・推論・大規模データの要約	サイトマップ構築、ペルソナ設計、競合分析、ヒアリングメモの提案書化、テスト項目のチェックリスト作成
Gemini（Google）	リサーチ・Google連携・最新情報	最新ライブラリ仕様の調査、クライアント資料の整理、SEOトレンド分析、YouTube動画の解析
DeepSeek / Coder	コーディングのコストパフォーマンス	大量のコード生成、定型的なスクリプトの作成

---

Web制作フロー別・AI活用実践ガイド（全7工程）

1. 営業・問い合わせ直後に作業範囲を固める

入力（AIに渡すもの）：クライアントの問い合わせ文・既存サイトURL・納期/予算感 ／ 使うAI：ChatGPT

依頼内容を貼ります。
1. 想定される制作物（ページ/機能/素材）を箇条書きで整理
2. 不明点を「確認必須」「確認推奨」に分けて列挙
3. 見積もり前提の質問リストを10個作成
出力はチェックリスト形式にしてください。

出力の使い方：「確認必須」だけを抜き出してクライアントに質問し、作業範囲が確定してから見積もりに入る。ここを飛ばすと後半で仕様が増える。

2. ヒアリング

入力：ヒアリングメモ・目的・競合 ／ 使うAI：Claude（またはChatGPT）

以下はヒアリングメモです。
1. 目的を「現状→理想→障害→打ち手」に整理
2. 提案の柱を3つにまとめる（各柱に根拠と期待効果）
3. クライアントに確認すべき”意思決定ポイント”を最後に列挙
出力はそのまま提案書に貼れる文章にしてください。

出力の使い方：提案書は「柱3つ」だけ先に出す。詳細資料は後追いでOK（先に合意が取れる）。

3. 企画・構成：ワイヤー前に情報の順番を決める

入力：誰に（ターゲット）・何を（提供価値）・何をしてほしいか（CV） ／ 使うAI：ChatGPT

ターゲットは〇〇、CVは〇〇です。
トップページに必要なセクションを優先度順に並べ、各セクションに「1行の目的」と「入れるべき要素」を書いてください。
さらに、ユーザーが離脱しやすいポイントを3つ予測して対策も添えてください。

出力の使い方：この結果をもとにFigmaで”枠”を作る。先に文章（見出し）を置くとデザインが暴れない。

4. ワイヤー・デザイン

デザインは好みの要素が強いのでAIに丸投げすると逆に遅くなります。ここではチェック用途に寄せます。

入力：ワイヤーのスクショ・想定ユーザーの不安 ／ 使うAI：Claude

このLP構成をレビューしてください。
1. 信頼獲得に足りない要素
2. 反論処理が弱い箇所（価格・実績・比較など）
3. CTAまでの導線で迷うポイント
を具体的に指摘し、改善案を各3つ出してください。

出力の使い方：直すのは”上位2つだけ”でOK。全部直すとコンセプトがブレる。

5. 実装

入力：技術スタック・既存コンポーネント方針 ／ 使うAI：Claude（実装方針）、ChatGPT（デバッグ壁打ち）

【下書き作り】
Next.js / TypeScript / Tailwindで、「カード型の実績一覧」をコンポーネント化してください。
条件：propsでデータを受け取り、レスポンシブ対応、簡潔なコメント付き。
まずは最小構成で出力し、その後改善案を3つ提示してください。

【デバッグ】
このコンポーネントで表示崩れが起きます。
期待する表示は〇〇で、現状は〇〇です。
原因候補を優先度順に5つ出し、確認手順も書いてください。

出力の使い方：生成コードは”最小構成”で受け取りご自身で整える。うまくいかないときは「原因候補→確認手順」の形にさせると早い。

6. テスト

使うAI：ChatGPT

予約フォーム（入力：氏名/電話/希望日時/備考）があります。
想定されるユーザーの誤操作・エラーケースを20個出し、テスト項目としてチェックリスト化してください。
さらに、優先度（高/中/低）も付けてください。

出力の使い方：テスト観点が増えるだけでクレーム率が落ちる。”優先度付き”がポイント（全部やろうとしない）。

7. 納品・運用

フリーランスが地味に時間を取られる場所です。AIの効果が出やすいです。

使うAI：Claude

以下の納品内容を、クライアント向け運用マニュアルにしてください。
・更新手順 ・注意点 ・よくある質問 ・問い合わせ窓口
まで含め、専門用語は避けて書いてください。

---

AIへの指示出しが劇的に変わる「Web制作専用プロンプト」

プロンプト設計の4要素「I-C-E-F」フレームワーク

1. Identity（アイデンティティ）：AIに特定の専門家（例：シニアフロントエンドエンジニア）になりきってもらう
2. Context（背景）：プロジェクトの目的・ターゲット・現在の進捗状況を伝える
3. Execution（実行指示）：何を、どのような手順で作るか具体的に指示する
4. Format（出力形式）：コード・表・マークダウン・JSONなど、希望の形式を指定する

---

実務でそのまま使える！高度なプロンプト・テンプレート集

① ユーザーの心理を動かすLP構成プロンプト

# 役割 あなたは行動経済学とセールスライティングに精通した、世界最高峰のLPディレクターです。

# 背景 [商材の詳細]を販売するためのLPを制作します。ターゲットは[ターゲットの詳細]で、彼らは[悩み]を抱えています。

# 実行指示
1. ターゲットの「痛み」を再定義し、それを解決するベネフィットを3つ抽出してください。
2. 「新PASONAの法則」に基づき、12セクションからなるサイト構成案を作成してください。
3. 各セクションごとに「配置すべき画像イメージ」「訴求すべきコピー」「期待するユーザーのアクション」を記述してください。

# 出力形式 各項目を表形式で整理して出力してください。

② アクセシビリティ完備のコンポーネント生成

# 役割 あなたはGoogleのアクセシビリティガイドラインを熟知した、フロントエンド・エンジニアです。

# 実行指示 以下の要件を満たす[コンポーネント名（例：タブメニュー）]を制作してください。

# 要件
・技術スタック：[Next.js / TypeScript / Tailwind CSS]
・アクセシビリティ：WAI-ARIAに準拠し、キーボード操作（Tab, Arrowキー）で完全に操作可能であること
・デザイン：モダンでクリーンな印象。[ブランドカラー：#XXXXXX]をアクセントに使用
・品質：保守性を考慮し、機能ごとに細かくコンポーネントを分割し、日本語の丁寧なコメントを付与すること

# 出力形式 コードブロックにまとめ、実装のポイントを箇条書きで添えてください。

③ SEO/LLMO対策：AIに選ばれるための構造化データ生成

# 役割 あなたは最新のセマンティックWebとSEOに精通した技術エキスパートです。

# 実行指示 提供するWebサイトの内容から、検索エンジンおよび生成AI（LLM）が内容を100%正確に理解するための「JSON-LD」を生成してください。

# 考慮事項
・Schema.orgの最新ボキャブラリを使用
・著者情報（E-E-A-T）を強調する構造にすること
・[FAQ / Product / Organization]など、該当するすべてのプロパティを網羅すること

---

AI時代の生存戦略「人間にしかできない価値」をどう磨くか

1. 「言語化されないニーズ」を汲み取る共感力

クライアントは必ずしも「欲しいもの」を正確に言葉にできません。「もっとおしゃれにしたい」という要望の裏には、競合に見劣りして問い合わせが減っている・採用で若い層に届いていないなど、ビジネス課題が隠れていることが多いです。重要なのは共感だけではなく、課題を言語化して合意できる形に翻訳する力です。

1.「誰に、何を、どうしてほしいか（CV）」を固定
2.「理想→現状→課題→打ち手」の順で質問
3. 議事録に「決定事項／未決定事項／確認事項」を必ず残し、次回までの宿題に落とす。

2. 「責任」という名の最終防衛ライン

AIは答えを出せますが、成果物に責任は持ちません。だからこそフリーランスの価値は、AIを使ったうえで事故を起こさない運用を作れることにあります。AI生成コードでバグが出てECが止まる・生成した文章が著作権ルールに抵触するといった問題は、最終的に制作者が矢面に立つ領域です。

・コードなら「入力バリデーション／例外処理／権限・認可／依存ライブラリの脆弱性／主要ブラウザ検証」をチェックリスト化する。
・文章なら「出典の明示／固有名詞の事実確認／引用範囲／断定表現の緩和」を確認する。
・納品時に「どこまでを保証範囲にするか」「運用で誰が何を触るか」を簡単な合意メモにしておくと、トラブル時の火消しコストが激減する。

3. 文化・文脈を捉えた「情緒的デザイン」の創造

AIは平均的なデザイン案を出すのが得意ですが、「その会社らしさ」や「地域・業界の文脈」を踏まえた絶妙なバランスは人間の仕事として残りやすいです。ここでいう情緒的デザインとはセンスだけの話ではありません。“なぜこのデザインなのか”を言語化し、迷ったときに戻れる判断基準を作ることです。

デザインに入る前に「ブランド棚卸し」を行うのが効果的です。既存の強み（実績・人柄・歴史・現場写真など）・避けたい印象・競合との違いを1枚にまとめた上で、「フォントは信頼感を優先」「写真は”現場の温度感”を優先」「余白は高級感のために削らない」といったルールを3〜5個作ります。これがあると、AIが出した複数案から”自社に合うもの”だけを選べるようになり、修正でブレにくくなります。

4. 複雑なステークホルダー間の「合意形成」

Web制作は、経営者・現場担当・デザイナー・エンジニアなど立場の違う人が同じプロジェクトに関わるため、意見が割れるのが普通です。AIは論点整理はできますが、相手の納得感を作ったり、優先順位の衝突を調整したりするのは苦手です。合意形成は「調整役」ではなく、進行を前に進めるための技術です。

• 毎回のMTGで「今日決めること」を2〜3個に絞り、アジェンダに「選択肢A/Bと判断基準」を書いておく
• 会議中は意見を「事実」「解釈」「要望」に分けてメモし、最後に「決定事項／保留／宿題（担当と期限）」を決めて終える

これを徹底すると議論が感情論に流れにくくなり、納期と品質が安定します。結果として”大規模案件でも任せられる人”になり、単価も上がりやすくなります。

---

よくある質問

AIを使うと自分のスキルが伸びなくなりませんか？

逆です。AIが出したコードを読んで理解し、修正する過程でスキルが伸びます。大切なのは「コピペで終わらせない」こと。なぜそのコードが動くのかを毎回確認する習慣をつけることで、AIなしでも設計できる力が育ちます。AIは「写経」の相手ではなく、「壁打ち」の相手として使うのが正解です。

クライアントにAIを使っていることを伝えるべきですか？

必ずしも必要はありませんが、隠す必要もありません。重要なのは成果物の品質です。「AIを使って効率化した分、品質チェックと提案に時間をかけています」という説明は、むしろプロフェッショナルな印象を与えます。ただし、クライアントの機密情報を外部のAIサービスに送る場合は、利用規約と守秘義務の観点から必ず事前に確認が必要です。

ChatGPTとClaudeを両方使うのは非効率では？

適材適所で使い分けることで効率は上がります。企画・構成はChatGPT、実装・レビューはClaudeというように「フェーズごとに決め打ち」にすることでツールの切り替えコストが下がります。最初は1つのツールで全工程を試し、「ここは別のAIの方が良い」と気づいた時点で使い分けを始めるのがおすすめです。

プロンプトを毎回考えるのが大変です。どうすればいいですか？

本記事で紹介したようなプロンプトテンプレートをNotionやテキストファイルに保存して使い回してください。フェーズごとに「汎用プロンプト」「案件特化カスタマイズ欄」を分けて管理すると、毎回[ターゲット][CVなど]の箇所だけ書き換えるだけで済みます。また、うまくいったプロンプトはGitHubやNotionに記録して「自分専用プロンプトライブラリ」を育てていくと、時間とともに生産性が指数的に上がります。

AIが間違った情報を出したらどうすればいいですか？

AIのハルシネーション（事実でない情報の生成）は現時点で避けられません。特に数値・固有名詞・最新の技術仕様は必ず一次情報（公式ドキュメント・公式サイト）で確認してください。「〇〇の公式ドキュメントに基づいて回答してください」と指定することで精度が上がります。また「確信度を10段階で示してください」と添えると、AIが不確かな箇所を教えてくれます。

---

---

まとめ

AIと共に働く時代は、個人の能力が淘汰される時代ではなく、AIという強力なエンジンを操る「個人の力」が最大化される時代です。WithCodeで学んだ基礎に、AIを駆使していけば、どんな複雑な課題でも解決できます。

• Claude（実装）・ChatGPT（企画）・Gemini（リサーチ）・DeepSeek（コスト重視コーディング）を適材適所で使い分けることが生産性の鍵
• 全7工程（営業〜ヒアリング〜企画〜ワイヤー〜実装〜テスト〜納品）それぞれに最適なAIと具体的プロンプトが存在する
• プロンプト設計はI-C-E-F（Identity・Context・Execution・Format）の4要素で構成すると精度が大幅に上がる
• AIが代替できない価値は「言語化されないニーズの汲み取り」「責任ある運用管理」「情緒的デザイン」「合意形成」の4領域
• 成果物の品質チェックリストを固定化することで「AIを使いながら事故を起こさない制作者」になれる
• うまくいったプロンプトをライブラリ化して育てると、時間とともに生産性が指数的に上がる

---

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！