【クラウドソーシングで稼ぐAI制作】WordPressからFigma、そしてバイブコーディングへーーWeb制作3世代の変遷とAI時代の生き残り方

🎀 エリカより

こんにちは、エリカよ。 シリーズ第1作では記事執筆、第2作ではWebサイト制作、第3作では運用・保守のサブスクリプション化を解説してきたわ。 今回は少し大きな視点で、Web制作のツールと方法論がどう変化してきたか、そしてWordPressもFigmaもAIで進化する今、制作者としてどうキャッチアップしていくべきかを考えてみたいの。 「自分には関係ない話」と思わずに読んでほしいわ。この変化は、クラウドソーシングで稼ぐすべての人に直接影響する話だから。

🌐 Web制作は「3世代」で進化してきた

Webサイトを作る方法は、この20年で大きく3回変わりました。批判ではなく変遷として、それぞれの時代を振り返ってみましょう。

第1世代：WordPress＋テンプレート

2000年代後半から普及したWordPressは、専門知識がなくてもWebサイトを持てる時代を切り開きました。テンプレート（テーマ）を選んでコンテンツを流し込む。この手軽さは革命的でした。

現在もWordPressは世界のWebサイトの43%以上を占める圧倒的なCMSです。ブログ・コーポレートサイト・ECサイトまで幅広く対応できる柔軟性は、今も大きな強みです。

一方で、テンプレートベースの制作には課題もあります。多くの人が同じテーマを使うため、デザインの差別化が難しくなります。プラグインが増えるほど保守コストが上がり、セキュリティリスクも高まります。また「テンプレートの限界」にぶつかると、カスタマイズにエンジニアが必要になり、コストが跳ね上がります。

第2世代：Figma＋エンジニア分業

2010年代後半から、デザインの品質を上げるためにFigmaが普及しました。デザイナーがFigma上でUI/UXを設計し、エンジニアがそれをコーディングするという分業体制が業界標準になっていきます。

Figmaは2016年のリリース以来、デザインツールの中心的存在になりました。コンポーネントの一元管理、チームでのリアルタイム共同編集、デザインシステムの整備——これらはWebサイトの品質を大きく引き上げました。

しかしこのスタイルにも課題があります。デザインとコーディングの分業により、工数と人件費が増えます。プロトタイプはFigma上で画面と画面を線でつなぐ「紙芝居」レベルにとどまり、実際の使い勝手を検証しにくい面がありました。また、デザイナーとエンジニアの間の意思疎通にコストがかかります。

第3世代：バイブコーディング（AI制作）

そして今、第3世代が始まっています。バイブコーディングとは、コードを自分で書くのではなく、AIに「こう動いてほしい」と言葉で伝えながら制作を進めるスタイルです。

グッドパッチのUI/UXデザイナーKC氏は2026年5月、Figmaの画面を1枚も編集せずにClaude Codeだけで6機能分のプロトタイプを作り切った経験を公開しています（参照：goodpatch.com/blog/2026-05-prototype）。着手から4日で2機能がFIXし、機能FIXまでの時間は体感で半分以下になりました。

「Figmaで絵を描く」から「AIと動きを対話する」への感覚の切り替えが、制作のスピードと検証の解像度を同時に引き上げたのです。

🤖 WordPressもFigmaも、AI化が加速している

ここで重要なのは、WordPressもFigmaも「AI時代に取り残される古いツール」ではないという点です。むしろ両ツールとも、急速にAI化を進めています。

WordPressのAI進化

WordPress.comは2025年4月、「AI Website Builder」をリリースしました（参照：wpmake.jp/contents/knowledge/ai-website-builder/）。チャット形式で「コーヒーショップのWebサイトを作りたい」と伝えるだけで、テキスト・レイアウト・画像が自動生成され、数分でWebサイトのひな形が完成します。

さらにJetpack AI Assistantは、WordPressのブロックエディタ内で直接使えるAIアシスタントです。キーワードを入力するだけで記事を自動生成し、文章のトーン調整・多言語翻訳・タイトル提案まで対応します。英語コンテンツの生成と翻訳も、このAI機能で大幅に効率化できます。

WordPressは「テンプレートを選んでコンテンツを流し込む」ツールから、「AIと会話しながらサイトを育てるプラットフォーム」へと進化しつつあります。

FigmaのAI進化

Figmaも2024年以降、AI機能を次々とリリースしています（参照：coosy.co.jp/blog/whats-figma-ai/）。

「First Draft」機能では、テキストプロンプトからUI案を自動生成できます。「ログイン画面を作って」と入力するだけで、デザインの叩き台が出来上がります。既存デザインの階層構造を自動最適化する機能、コンポーネント単位でReact/Tailwindのコードを生成する機能、ワイヤーフレームの自動生成、背景の自動削除、ブランド素材の一括生成（Figma Buzz）も加わりました。

2025年7月以降、AI機能は有料プランのみの提供となっていますが、その分機能の精度と実用性は高まっています。「デザイン→コード」までを1つの思考の流れで完結できる時代が近づいています。

重要なのは、AIが生成するのは「もっともらしい案」であり、本当にユーザーに刺さる体験や差別化されたUIは、人の観察力と創造性が生み出すものだという点です。AIに任せる部分と自分でこだわる部分を見極める判断力が、これからの制作者に求められます。

🎀 エリカより

ここまでが無料で読める部分よ。 続きでは、3世代の制作スタイルを単価・スピード・スキル要件で比較した表、WordPressとFigmaとバイブコーディングをどう組み合わせて使うのか、クラウドソーシングでの出品戦略、そして英語×AI制作による差別化まで解説しているわ。 AI時代の制作者として一歩先を行きたいなら、ぜひ読み進めてね。