Web制作×AI活用の実務フロー公開【フリーランスコーダーの体験談】

正直に言うと、AIを使い始めてからの作業スピードに慣れてしまった今、もうAIなしの状態には戻れないと思っています。

僕はWeb制作フリーランスとして独立して約1年になりますが、AIツールを実務に取り入れてからコーディングの作業時間が体感で3〜4割ほど短くなりました。クラス名の命名、繰り返し処理、WordPress関数の呼び出し——こういった「わかるけど毎回調べる」作業がほぼゼロになったんですよね。

逆に言えば、AIを活用できていないフリーランスは、同じ作業に1.5倍の時間をかけている可能性があるということです。この差は案件が増えるほど開いていきます。

この記事では、工場勤務17年から37歳でWeb制作フリーランスになった僕が、実際にどんなAIツールを・どの工程で・どう使っているかを全部公開します。成功も失敗も含めて書くので、AI活用に迷っている方の参考になればうれしいです。

Web制作で使っているAIツール一覧

AIツールって本当にたくさんありますが、僕が実務で日常的に使っているのは実はそこまで多くありません。メインで使うのは2つ、あとは用途に応じて補助的に使い分けている感じです。最初のころはあれこれ試していた時期もありましたが、結局のところ「自分の作業に合うかどうか」で絞られていきました。ここでは、今メインで使っているツールとその使い分けを紹介しますね。

Claude Code（メイン）

コーディング作業のメインはClaude Codeです。ターミナル上で動くAIアシスタントで、FigmaのデータをMCP連携で取得したり、コードの補完・修正をしてもらったりしています。

特にありがたいのが、プロジェクト全体のコードを読み取ったうえで提案してくれるところです。ファイル構成やコーディングルールを把握した状態で修正してくれるので、コードの一貫性が保たれるんですよね。

Gemini（学習・画像・無制限）

Geminiは主に学習用途と画像生成で使っています。無制限で利用できるので、ちょっとした疑問をぶつけたり、コードの解説をお願いするのに向いていますね。

ちなみに、このブログのサムネイル画像もGeminiで生成しています。漫画調のイラストを出してもらって、そこに袋文字でタイトルを載せる流れです。

その他（Perplexity / Adobe Firefly / Figma AI）

検索用途にはPerplexityを使っています。一般的な検索エンジンよりもピンポイントで答えが返ってくるので、技術的な調べ物に便利です。

画像生成ではAdobe Fireflyも使うことがあります。Figmaの有料プランではAI機能で背景を消したり微調整したりできるので、デザイン面でも少しずつAIの恩恵を受けている状況ですね。ただ正直、デザインではまだAIを使いきれていないのが本音です。

実務のどこでAIを使っているか【工程別に公開】

AIツールの紹介だけだと「で、実際どう使うの？」となると思うので、僕の実務フローを工程別にまとめます。コーディングだけでなく営業や修正対応でも使っていて、正直もうAIが関わらない工程のほうが少ないかもしれません。それぞれの工程でどんな指示を出しているかも含めて書いていきますね。

コーディング — FigmaのMCP連携でデータ取得、補完、命名

コーディングでは、FigmaとのMCP連携がかなり大きいです。デザインデータから色やフォントサイズ、余白の数値を正確に取得してくれるので、目視で確認する手間が大幅に減りました。

実際に出している指示はこんな感じです。

Figmaのデータを取得して、このセクションのHTML/CSSをコーディングして

BEMのクラス命名もAIに任せることが多くて、自分で「この名前どうしよう…」と悩む時間がなくなりました。もちろん最終的には自分で確認して、プロジェクトのルールに合っているかチェックしています。

JavaScript・動的処理 — まず実装してもらい、理解→修正

JavaScriptの実装は、まずAIに書いてもらうことが多いです。たとえばスクロールアニメーションやハンバーガーメニューなど、よくある処理はAIに任せてしまいます。

ただし、出てきたコードをそのまま使うわけではありません。必ず内容を解説してもらい、自分で理解・修正できる範囲に収めるようにしています。

スクロールしたらフェードインするアニメーションを実装して。内容を解説してから書いて

この「解説してから書いて」がポイントで、いきなりコードだけ出されると理解が追いつかないんですよね。

WordPress — 関数の引き出し、繰り返し処理

WordPressの開発では、関数名は覚えているけど「引数の順番どうだっけ？」みたいなことが頻繁にあります。こういう「わかるけど毎回調べる」系の作業をAIに任せると、本当にストレスが減りました。

カスタムフィールドの繰り返し処理やループの書き方など、テンプレート的なコードもAIに出してもらうことで作業が一気に進みます。

営業・提案 — 強み出し、提案文、ワイヤーフレーム作成

営業面でもAIにはかなりお世話になっています。自分の強みの整理、案件に合った提案文の作成、世の中で求められていることのリサーチなど、AIと何度か壁打ちしながら内容を詰めていく流れです。

自分の強みと実績を整理して、この案件に合った提案文を作って

正直、AIが出してくる文章はちょっと大げさだなぁと感じることもあります。でも裏を返せば、自分では気づかなかった強みを言語化してくれるので、そこから自分の言葉に直していく作業が効率的なんですよね。

提案時にはワイヤーフレームのたたき台もAIで作成しています。視覚的に共有できるうえに素早く出せるので重宝していますね。提案文の書き方についてはクラウドソーシングの提案文の書き方でも詳しく書いています。

修正対応 — コード全体を読み取り→ルール化→修正

クライアントからの修正依頼では、まずプロジェクト全体のコードをAIに読み取ってもらうところから始めます。

このコード全体を読み取って、コーディングルールを書き出して。そのルールに沿って修正して

既存のコーディングルールや命名規則を把握したうえで修正してくれるので、他の部分との整合性が取れた状態で納品できます。これは手作業だとかなり神経を使う部分なので、大きな助けになっていますね。

AIを使って実際どれくらい速くなったか

「AIで速くなる」とは聞くけど、具体的にどこがどう速くなるのか気になる方も多いと思います。僕の場合は、派手な自動化というよりも「地味だけど毎回発生する作業」の積み重ねで大幅に時短できた感覚です。全体の作業時間で言うと、体感で3〜4割は短くなっています。どの部分で効果が大きかったか、具体的にお話ししますね。

クラス命名・繰り返し処理の時短

地味なようですが、BEMのクラス名を毎回考えるのって意外と時間がかかるんですよね。特にセクションが多いページだと、命名の一貫性を保つだけでも頭を使います。

AIに任せてからは、命名の迷いがほぼなくなりました。繰り返し処理のテンプレートもすぐ出してくれるので、手を動かす前の「考える時間」が大幅に短縮されています。

MCP連携でミス激減 → 確認作業の時短

FigmaのMCP連携を使い始めてから、デザインデータの読み取りミスがほとんどなくなりました。以前は目視で数値を確認してCSSに反映していたので、「あ、ここ2pxズレてた」みたいな修正が頻繁にあったんですよね。

ミスが減ったということは、確認作業の時間も減ったということです。これが実は一番大きな時短ポイントだったかもしれません。

ブラウザチェックまでやってくれる時代

最近ではClaude Codeのプレビュー機能が優れていて、ブラウザ上でのサイトチェックもある程度やってくれます。動作確認まで自動でやってくれるのは正直驚きました。

もちろん、どこまで保証できるかはわからないので最終的には自分の目で確認しています。でも大枠のチェックをAIがやってくれるだけで、確認工程がかなりスムーズになりましたね。

AIに任せて失敗した話【TypeScript事件】

いいことばかり書いてきましたが、もちろん失敗もあります。しかも結構大きな失敗です。AIを使い始めたころ、調子に乗って自分の理解を超えた技術をAIに丸投げしたことがありました。その結果どうなったか、包み隠さずお話しします。同じ失敗をする人が減ればいいなと思っていて。

理解できないコードを任せた結果

まだTypeScriptを覚えていない時期に、AIにTypeScriptを使ったサイトを作ってもらったことがあります。見た目はきれいに仕上がったんですよね。動作も問題なし。「AIすごい、これでいけるじゃん」と思いました。

でも問題はそのあとでした。

テキスト1つ変えるのにもAIが必要に

ちょっとしたテキストの修正をしようとしたら、何がどう処理されているのかさっぱりわからない。型定義やインターフェースが絡み合っていて、1箇所変えると別の場所でエラーが出る。結局、少しの修正にもAIが必要な状態になってしまいました。

「見た目は良いけど扱えないサイト」は仕事にならない

見た目がきれいでも、自分で保守・修正できないサイトはクライアントワークでは使えません。納品後に「ここのテキスト変えてください」と言われて、毎回AIに頼まないと対応できないのでは仕事として成り立たないんですよね。

この経験から、AIには「自分が理解できる範囲」で使うというルールを徹底するようになりました。フリーランス1ヶ月目のリアルでも書きましたが、独立してすぐの時期は特にこういう判断が難しかったです。

クライアントにAI使用をどう伝えているか

AI活用の話をすると、「クライアントにはどう伝えてるの？」と聞かれることが増えました。正直、最初は伝え方に悩んだ時期もあります。「AIで作りました」と言ったら安く見られるんじゃないか、信頼を失うんじゃないか——そんな不安があったんですよね。でも実際に伝えてみると、想像とは違う反応が返ってきました。

現場でAIを使っていないところはない

僕はクライアントにAIの使用を伝えるようにしています。というのも、今のWeb制作の現場でAIを全く使っていないところはほぼないという認識だからです。

隠す必要があるものではないし、むしろ「最新のツールを取り入れて効率的に作業しています」と伝えるほうが信頼につながると感じています。

「使っているか」ではなく「どう使っているか」

面白いのが、クライアントから聞かれるのは「AIを使っていますか？」ではなく「どう使っていますか？」だったことです。何度かこの質問を受けました。

僕はコーディングの補完、アニメーションなど動的な部分の提案と処理解説、WordPress関数の補完などを具体的に伝えるようにしています。「何をAIに任せて、何を自分でやっているか」を明確にすると、納得してもらえることが多かったですね。

プライバシー配慮（Geminiワークスペース利用）

プライバシーへの配慮として、Geminiのワークスペースを利用しています。クライアントの情報がAIの学習データに使われないようにするためです。

ちなみに、あるクライアントからは「フロントエンドならそこまでしなくても大丈夫だよ」と言われたことがありました。でも裏を返せば、事前にそこまで配慮していることが信頼につながっている面もあると思うんですよね。後々のことを考えるとやっておいて損はないかなと。

AIでスキルが育たない問題にどう向き合うか

AIを使い始めると、ほぼ必ずぶつかるのが「これ、自分のスキル伸びなくない？」という不安です。僕も最初はありました。便利になる一方で、自分の手でコードを書く機会が減っていくのを感じて、「このままだと良くて平行線、悪くてどんどん忘れていくんじゃないか」と。この不安への向き合い方を、僕なりにお話しします。

丸投げは確実にスキルが落ちる

これは断言できます。完全に丸投げで作っていると、スキルは育たないどころか落ちていきます。「覚えていたはずのことが出てこない」という感覚を何度か経験しました。

ただ、これはAIに限った話ではなくて、コピペで済ませていた時代も大して変わらなかったと思います。結局、自分で理解しようとするかどうかが分かれ目なんですよね。

コード解説・クイズ形式で理解を深める

僕がやっているのは、AIに出してもらったコードの解説を必ず読むことです。さらに、AIにクイズ形式で「今のコードのこの部分は何をしている？」と出題してもらうこともあります。

自分が理解できる範囲に絞って利用することで、スキルの低下を防ぎつつAIの恩恵を受けるバランスを取っています。

「コードを書く」から「コードを読む・指示する」へ

正直、仕事の内容が少しスライドした感覚はあります。「自分でゼロからコードを書く」から「AIが書いたコードを読んで確認・修正する」へ。確認するのが自分の仕事だと捉えるようになりました。

ただ、クライアントへの伝え方は配慮しています。「AIに指示したらすぐできました」とは言わないようにしていて、あくまで自分が責任を持って確認・納品しているというスタンスを大切にしていますね。

これからWeb制作を始める人へのAIの使い方

ここまで読んで「よし、自分もAIガンガン使おう！」と思った方もいるかもしれません。でも、僕の経験から言うと、学習段階でのAIの使い方にはちょっと注意が必要です。便利すぎるがゆえに、使い方を間違えると成長の機会を失ってしまう可能性があるんですよね。これからWeb制作を始める方に向けて、僕なりのおすすめの順序をお伝えします。

まずはGeminiから始めるのがおすすめ

初心者の方には、まずGeminiをおすすめします。無制限で利用できるうえに、勝手にコードを書き込まれることがないので、自分で手を動かす必要があるんですよね。

Geminiには学習モードもあるので、1行ずつコードを解説してもらいながら理解を深めていくのがいいと思います。僕がデイトラで学んでいたころにこの使い方を知っていたら、もっと効率的に学べていたかもしれません。デイトラでの学習についてはデイトラWeb制作コースを選んだ理由と正直な感想に詳しく書いています。

AIなしで1サイト作れるようになってからClaude Code

Claude Codeはかなり高度に素早くコードを書いてくれます。これは大きなメリットですが、学習段階では逆にデメリットになりえます。

最初から使うと、スキルが伸びる前にどんどん先へ行ってしまうんですよね。学習意欲がわかなくなって「これでいいじゃん」となってしまう。だから、AIなしでWordPressサイトを1つ作れるようになってから導入するのがいいと僕は思っています。

1サイト自力で作れれば、ある程度の基礎力はあるということです。そこからは案件に応じた内容をAIとともに覚えていくスタンスで進めると、バランスよくスキルアップできますよ。未経験からWeb制作で初案件を取るまでにやったことも参考にしてみてください。

「書けなくても読める」が最低ライン

コードを書くのはもう仕事ではないのかもしれない——そう感じることもあります。でも、コードを読んで修正できなければ仕事にはなりません。TypeScript事件で身をもって学びました。

「書けなくても読める・理解できる」という状態が最低ラインです。常にコードを読む癖をつけること。AIが書いたコードでも、必ず目を通して何をしているか理解すること。これができていれば、AIとの協業で十分やっていけると思います。

まとめ

この記事では、Web制作フリーランスとして僕が実際にAIをどう活用しているかを工程別にお話ししました。最後にポイントを振り返ります。

• メインツールはClaude CodeとGemini。用途に応じてPerplexityやAdobe Fireflyも併用
• コーディング・JS・WordPress・営業・修正対応と、ほぼ全工程でAIを活用している
• 作業時間は体感3〜4割短縮。特にMCP連携によるミス削減と確認作業の時短が大きい
• 自分が理解できない技術をAIに丸投げすると破綻する。TypeScript事件が教訓
• クライアントにはAI使用を伝えている。「どう使っているか」を具体的に説明すると納得してもらえる
• スキル維持にはコード解説・クイズ形式が有効。丸投げせず理解できる範囲で使うのがコツ
• 初心者はGeminiから始めて、1サイト自力で作れてからClaude Codeがおすすめ

AIはあくまでツールで、使う人の判断力があってこそ活きるものだと思っています。僕自身もまだまだ試行錯誤の途中ですが、この記事がAI活用に悩んでいる方の参考になればうれしいです。