制作期間を大幅に削減！ Web制作の効率を上げる「引き算思考」と「現場で使えるAIツール」

AI時代を生き抜くには、Web制作においても発注・制作・運用でAIを活用するための“人間の知識”が必要だ。「Web担当者Forum ミーティング 2025 春」では、『業界1年生が必ず身につけたいウェブ制作・運用のリテラシー』の著者でもある株式会社A＆S代表取締役 長澤 大輔氏が登壇。業界1年生はもちろん、誰もが知っておくべきAIの基礎知識を解説する。

Web制作でのAI活用のメリットは大きく6つ！ 今こそAIの活用を始めよう

「AIを使えば楽になると言われたが、実際どう導入すべきかイメージが湧かない」「実務未経験者にAIの何から教育すればいいのかわからない」など、AIにまつわる悩みは多い。その一方で、AIが普及すればWeb制作の仕事はなくなるのではないかと懸念する人もいるだろう。

WACA認定講師 ウェブ解析士マスターとして数多くのWebサイト制作に携わってきた、株式会社A＆Sの長澤氏は、「日本のWeb制作市場はまだ成長の余地があり、AIの活用がカギを握る」と語る。実際、日本のWeb制作市場は世界の1/10という9,900億〜1.2兆円規模、年平均の成長率は6〜8％と言われており、堅調ながら成長市場と言える。

一方AIについては、世界市場が35.2兆円（2024年度IDC調べ）に達しつつある一方、日本市場は1,800億円と出遅れている。とはいえ、年平均成長率は84.4%と急成長しており、長澤氏は「Web制作でも、このAIの波に乗り遅れてはならない」と語る。

では、Web制作にどのようにAIを活用すればよいのだろうか。一般的には、Web制作におけるAI活用は、次のような6つのメリットがあげられる。

メリット1 業務の効率化とスピード向上
レイアウト作成、文章構成、画像準備、コーディングなどの反復作業をAIで自動化することで、劇的にスピードアップできる。たとえば、1週間かかっていたプロジェクトが3〜4日で完了できるようになり、単純計算で利益率は2倍になる可能性がある。

メリット2 パーソナライズ
AIに訪問者の行動を学習させることで、スマホユーザーにはシンプルなUI、PCユーザーには情報量の多い画面を表示するというように、一人ひとりにパーソナライズされた体験を提供できるようになる。

メリット3 ユーザー体験の向上
AIチャットボットの導入により、ユーザーは24時間365日、待ち時間ゼロで質問に対する回答を得られるようになった。深夜の問い合わせにも対応可能なため、顧客満足度の向上にも貢献する。

メリット4 コスト削減効果
AIを活用することで、従来5人で担当していた業務を1人で処理できるようになる。人件費だけでなく、外注費や修正コスト、機会損失など、“目に見えないコスト”も最適化し、削減できる。

メリット5 エンゲージメントの向上
AIによってユーザーの関心を分析し、最適なレコメンドを提供できる。たとえば、ある製品の閲覧時に、リアルタイムで興味のありそうな他の製品をプッシュで紹介することも可能になる。

メリット6 意思決定の精度向上
「このデザインの方が滞在時間が長い」「変更後、何％改善された」というように、AI分析によって具体的な指標を示せるようになることで、従来の「感覚的な判断」ではなく、「データ分析に基づいた意思決定」が可能になる。

これらによって、ある調査ではWeb開発で最大50%、コンテンツ制作で最大62%、コーディングで55%、データ分析で50%も短縮効果があると報告されている。ただしこれは海外での調査結果であり、ほとんどAI導入が進んでいない日本では、より「伸びしろ」が大きいと想像される。

AIツールの未導入率は60%以上！ 「スモールスタート」が成功の鍵に

現在、Web広告運用・制作の現場で「生成AIツールを使っていない」と答えた担当者は60%以上に上るというが、その理由として長澤氏は次のように分析している。

• 属人的な業務から脱却できていない
  多くの企業では、特定の個人に依存した業務が続いており、これが全体の効率化を阻害している。たとえば、その人がAIを活用していなければ周囲も導入できず、属人的な業務が継続してしまう。

• AIツール過多と選択の困難さ
  現在、世界中で提供されているAIツールは約2万種類以上にも上り、膨大な選択肢となって企業の意思決定を難しくしている。

• 経営層の理解不足
  AIの価値を経営者が十分に認識していなければ、導入のサポートを得られず、企業全体での活用が進まない。

AI導入にはどんな障壁があるのか？

長澤氏は「企業の成長と競争力を維持するためには、AI導入のタイミングが極めて重要。今導入すれば、労力を少なくして、競合に先んじるチャンスがある。導入の遅れは、将来のパフォーマンス低下につながる可能性が高い」と語り、「今こそ先手を打とう」と訴えた。

しかしながら、企業がAIを導入する際には、いくつかの障壁を乗り越える必要がある。1つめの障壁は、明確なガイドラインが整備されていないために、積極的な活用に繋がらず、不安感が生まれてしまうことだ。そして、2万種類以上のAIツールの中から自社に最適なツールを選べないでいること、属人的なAI活用によって全社への普及が遅れてしまうことなども大きな問題となっている。

これらの解決のために、長澤氏は「引き算思考」が大切と語る。足し算思考は、手順を増やしたり、ツールを足したりして作業を進めることだが、引き算思考は、工程を省いたり自動化したりして効率化を図ることだ。両者によってAI導入が進むが、とりわけ引き算思考を意識することが成功のコツだという。

Webサイト制作のフローは、①ヒアリング　②要件定義　③情報設計　そして、設計した情報を基に、ページのレイアウトやナビゲーションを視覚化する④ワイヤーフレーム作成　⑤UIデザインと続く。近年では、ノーコードツールを活用したデザインが増えており、⑥コーディング・実装では開発スピードが向上している。サイトを公開して⑦運用開始となり、パフォーマンスの監視やユーザー対応を行いつつ、PDCAサイクル（改善・最適化）で次につないでいく。

この中でAIが入る「引き算」によって、最も効率化ができるのはどの部分なのか。長澤氏が指摘するのは、Webディレクターなら一度は経験したであろう、情報設計からデザインプロセスにおいて陥りがちな「負の無限ループ」だ。デザイナーにアイデアがなかなか伝わらない、修正を繰り返してデザイナーを怒らせる、クライアントにダメ出しを食らうーーなどが繰り返され、時間と費用の追加コストが嵩み、外注ならさらに損失額は拡大する。

Webディレクションにおいて、デザインのアイデアを具体化し、デザイナーに的確に伝えることは、決して簡単な作業ではない。必要な資料を集め、参考サイトをチェックし、情報を精査しながらワイヤーフレームを作成。形にしてみては壊し、再び作り直すという試行錯誤が続く。気づけば何日も経過し、果たしてこの方法で良いのかと、自問自答する日々。それが、AIを活用することで効率化できるという。

情報設計からデザインまでのプロセスで、ヒアリング内容やサービス概要を入力するだけでサイト構成案やフレームワークを自動作成してくれるツールが登場している。本当に使えるツールを見極めて活用することが、Webクリエイターにとって大きな分かれ道となる（長澤氏）

そのポイントとして「引き算できる場所を見つけること」「導入が簡単なものから始めること」「スモールスタートで小さな成功を積み重ねること」をあげた。

引き算AIツール入門編：Figmaを軸にして考える

“引き算”できるAIツール導入の第一歩として、長澤氏からいくつかツールが紹介された。

Figma（フィグマ）

Web業界の共通言語ともいわれるメジャーなワイヤーフレームUI作成ソフト。マイクロソフトやAirbnbのような大企業も含め、世界10万社以上に導入され、ユーザー数も推定1,000万（一説には400万ユーザー）を超える。優秀なオートレイアウト機能を持ち、ブラウザ上で複数メンバーがリアルタイムで編集し、作成したプロトタイプを即座に共有できる。しかし、まだ改善の余地も多く、特にAI機能についてはさらなる進化が求められている。新しいAIツールとして「Figma Make」や「Figma Buzz」などが登場しているものの、「現時点では実用レベルには達していない」と長澤氏は評価する。

Create.xyz（クリエイト）

プログラミングの知識がなくてもWebサイトやアプリを作成できるノーコードデザイン・UI生成ツール。テキストでの指示により複数の構成案が瞬時に作成できたり、スクリーンショットを取って再現したり、言葉だけでは伝えられなかったイメージ案をモックとして見せられる。これだけで全てを完結できるわけではないが、関係者間の合意形成がスピーディに行えるのが強みだ。

v0（ブイゼロ）by Vercel

エンジニア不在でも、WebアプリのUI設計を内製化したい企業に最適なツール。Reactを活用した自動設計機能により、フロント開発の外注コストを大幅に削減可能。デザインからコーディングまでのプロセスを自動化し、「ボタンだけデザイン」などパーツ単位でのデザイン作成も可能。日本の制作会社でも導入が進んでおり、制作時間の66%を削減したというデータもあるという。

Create.xyzもv0も、Figmaとの連携を前提に設計されているため、世界標準のUIデザインワークフローに適応する。どんなクリエイターやクライアントとも、共通言語でやり取りできることで、プロセスの効率化が図られるというわけだ。

世界の現場では実装までもAIが引き算して“3ステップ制作”へ

さらに長澤氏は「世界は既に“3ステップ制作”へと進んでいる」と語り、とりわけハリウッドを中心とした米国では、「②要件定義→③情報設計→④ワイヤーフレーム作成→⑤UIデザイン→⑥コーディング・ノーコードでの実装」のプロセスを“引き算”していると紹介した。ミーティングなど人を介する機会を極限まで減らし、「こんなサイトを作りたい」という言葉でのAIとのやり取りだけでスピーディなWeb開発を実施しているという。

「3ステップ制作」の一例として、長澤氏は、①戦略・設計フェーズで「Relume」　②デザイン制作で画像作成AIの「Freepik（ロゴは大文字でiが!表記）」　③開発・実装フェーズで「ChatGPT」「Webflow」が使われていることを紹介。このフローによって、かつて3カ月ほどかかっていたものが5営業日で納品できたという事例もあるという。

Relume（レリューム）

Relumeは、クライアントの要望を文章で入力するだけで、サイト全体のサイトマップ、構成図、各ページのレイアウト、コピーテキストまで全て作成する。また、サイトのURLを入力するだけでコピーすることもできる。

Webflow（ウェブフロー）

Webflowは世界350万ユーザーに導入されているノーコードWeb制作ツールであり、ドラッグ＆ドロップで要素を配置するだけでデザインできるため、コーディング不要でプロ並みのサイトが作れる。Relumeとの連携も可能だ。

セミナーでは、RelumeとWebflowの連携で、一瞬でワイヤーフレームを作成しコピーまで入る様子を実演。英語についてはほぼ修正する必要がなく、日本語についてはやや改善の余地があるものの、クライアントへのファーストレビューとしては十分なレベルだという。

Freepik（フリーピック）

チャートやビジュアルについては、Freepikを使うとよい。AIによるビジュアル自動生成ツールで世界6,500万ユーザー（一説には1.5億ユーザー）が使っているが、日本での導入例は少ないという。かつて話題になったMidjourneyやDALL-Eは、画像生成ができても、その後Photoshopなどで調整する必要があった。その点、Freepikは背景を変えたりポーズを変えたり、自由自在に加工ができたりするため、Photoshopが不要。たとえば、社長の写真を5枚ほどアップロードするだけで、さまざまなシチュエーションでの動画や写真を生成することも可能だ。

Googleが本気のAI戦略を発表！ 「Google Stitch」の登場でゲームチェンジ？

長澤氏は「AI時代に求められるWebクリエイターとは、足し算よりも引き算ができる人材」と語り、それがますます加速していることを強調した。その象徴となる１つが、「Google I/O 2025」で発表されたGoogleのAI戦略だ。AIの「日常化」「どこでも化」「全産業浸透」を宣言しており、その一環として、Web制作ツール「Google Stitch（グーグル スティッチ）」が登場している。まさにWeb制作の“引き算”をすべて達成しようとするツールであり、手書きのワイヤーフレーム的なメモを読み込ませるだけで、たちまちデザインを作成しコードのドラフトまで生成してくれるというものだ。現在メジャーな存在であるFigmaとも連携でき、ゲームチェンジャーとしての野心がうかがえる。

他にも、たとえばGmailではお客様への返信案が自動的に提案されたり、Androidスマートフォンで撮影したスケッチがStitchを通じてFigmaの初期デザインに変換されたり、AIの日常化・どこでも化が進む施策が展開され、全産業への浸透も進むことが期待される。

医療や不動産、農業など、デジタル化が進んでなかった業界にもどんどんAIが入ってくる。Web制作側もAIに対応できていなければ仕事を請け負えない。ぜひとも、ツールや使われ方などAIの知識・知見を深めて挑んでほしい（長澤氏）

AIを「最強の相棒」に。これからのWeb制作に必須の3つの心得

また、発注者に対し、「AIでイメージを形にしてから発注すれば、Web制作側とスムーズに連携し、期待通りのWebサイトが半分の時間で完成する。このプロセスは海外企業では既に一般的であり、手戻りの削減に大きく寄与し、予算や時間の大幅な節約が可能になる」と語り、「AIツールを活用して、より良い成果を手に入れてほしい」と訴えた。

そして最後に、Web制作担当者に向けて「AI時代のWeb制作3つの心得」をあげ、次のように語った。

心得1　AIを「作業の相棒」として最大活用
AIは、単なる補助ツールではない。上手く活用すれば、どの工程においても50%以上の時間短縮が可能という報告がある。積極的に活用すべき。

心得2　人ならではの「洞察力・判断力」を磨く
AIに得意な領域を任せ、人間ならではの能力を磨こう。特に大切なのが「洞察力」と「判断力」。洞察力とは、顧客の状況を深く理解し、本当の強みや弱みを見極めて最適な提案をする力。そして判断力とは、選択肢を示しつつも、プロとして適切な判断を下す力のこと。

心得3　少数精鋭の「引き算思考」で戦う
あれもこれもと詰め込むのではなく、「必要なものだけ」にフォーカスする。少数精鋭でも世界と戦える力を持つことを意識しよう。

長澤氏は、「Web制作のプロフェッショナルとしてAIを活用して提供価値を高めることで、自身の利益にもつながっていく。まずはAIツールを早々に業務に組み込み、人としての力を高め、最新情報をキャッチアップする。1人あたりのパフォーマンスを高めて、世界と戦っていこう」と激励し、セッションを終えた。