WebデザイナーのAI活用｜制作の流れ別の使い方5つと、取り入れる4ステップ

「AIを使ったほうがいいのは分かるけど、デザインの仕事のどこに入れればいいんだろう」
「AIで作った案は、結局ほとんど作り直しになってしまう」
そんなもやもやを抱えながら、日々の制作を回しているデザイナーは多いと思います。

AIは、デザインを丸ごと任せる道具というより、たたき台や案出しのような「間の作業」を速くする道具として使うと、仕事に取り入れやすくなります。誰に何を伝えるかの決定と、最後の良し悪しの判断は、これまでどおり自分の手に残しておく。この線を引いておくだけで、AIとの付き合い方がぐっと楽になります。

この記事は、すでにWebデザインの仕事をしている人に向けた内容です。制作の流れ別のAIの使い方、取り入れる手順、注意点、AIで空いた時間の使い道を、メイカラの勉強会の実例とあわせて紹介します。例はWebデザインの話が中心ですが、バナーやSNS画像、資料づくりなど、デザインを請ける仕事なら考え方は同じです。

WebデザイナーのAI活用は「間の作業」から。判断と仕上げは自分で持つ

AIに任せやすいのは、たたき台・案出し・展開

生成AIは、もう一部の人だけの道具ではありません。総務省の「令和8年版 情報通信白書」によると、何らかの生成AIサービスを使っている、または使ったことがある人は、日本で58.8%でした（2025年度の個人調査）。前年度の調査では26.7%だったので、1年で2倍以上に増えています。

クライアントさんの側でもAIに触れる人が増えるなか、デザイナーがAIを使うのは、もう特別なことではなくなってきました。とくに任せやすいのは、手を動かす量は多いけれど、判断はそれほど要らない作業です。

AIに任せやすいこと	デザイナーが持っておくこと
ヒアリング内容の整理、提案資料のたたき台	誰に何を伝えるサイトなのかを決める
サイトマップやワイヤーフレームのたたき台	クライアントさんと話して、構成を固める
デザインの方向性の出し分け、配色やフォントの案	どの案が目的に合うかを選び、仕上げる
バナーのサイズ違いの展開、画像の生成	文字の読みやすさや、内容の正しさを確かめる
コードの下書き、公開後の数字のまとめ	数字から次の改善を考えて、提案する

表の「AIに任せやすいこと」は、どれも速さが価値になる作業です。一方の「デザイナーが持っておくこと」は、目的や相手の状況を知っている人にしか決められません。AIで「作る時間」を縮めて、その分を「決める時間」に回すのが、WebデザイナーのAI活用の基本です。

誰に何を伝えるかと、最後の良し悪しは人が決める

メイカラ代表の久保田は、2026年9月30日のYouTubeライブで、AIで一人でできることが一気に広がったと話しています。文章やデザイン、動画の編集、スライドづくりまで、これまで人に頼んでいた作業を、たたき台から仕上がりまで一人で進められるようになったそうです。

そのうえで久保田が大事にしているのが、「入り口」と「出口」です。入り口は、誰の何のために作るのかを決めること。出口は、どんな完成の姿にしたいのかをイメージしておくことです。この2つは人が決めるもので、ここがはっきりしていれば、AIから出てくるものの質も上がると言います。

デザインに置きかえると、入り口はターゲットや目的、出口は「この仕上がりならOK」という基準です。どちらもあいまいなままAIに頼むと、それらしい案は出てきても、使える案にはなりにくいでしょう。

AIで一人でできることが広がった先の働き方は、こちらのライブで詳しく見られます。

制作の流れ別、WebデザインのAI活用5つ

1. ヒアリング・企画：要件の整理と提案資料のたたき台

制作の最初の段階では、ヒアリングで聞いた内容を整理して、提案資料にまとめる作業がかかります。ここは、AIに材料を渡して、たたき台を作ってもらいやすい工程です。

打ち合わせのメモや、クライアントさんから届いた資料をAIに読ませ、「目的・ターゲット・必要なページ・決まっていないこと」に分けて整理してもらいます。抜けている項目が見えると、次の打ち合わせで何を聞けばいいかもはっきりします。

ただし、AIはクライアントさんの事情や、言葉にされていない本音までは知りません。整理された内容が本当に合っているかは、自分で確かめてから資料にしましょう。提案資料の見た目は、いつも使っている自分のテンプレートに流し込んで仕上げると、品質がそろいます。

2. 設計：サイトマップとワイヤーフレームのたたき台

AIの効果が分かりやすいのが、サイトマップとワイヤーフレームのたたき台づくりです。ページ数や業種、載せたい情報を伝えると、構成案が短い時間で出てきます。

2025年7月のWeb制作の勉強会で、Aさんは、AIで作ったサイトマップとワイヤーフレームのたたき台をクライアントさんと共有し、Zoomで話しながら直していく進め方を紹介していました。ある程度固まってから、デザインツールに取り込むそうです。勉強会では、話しながら30分ほどでたたき台ができていた、という声も出ていました。

Aさんは、クライアントさんとのやり取りが一番時間がかかるので、そこがスムーズになるのがありがたい、と話していました。たたき台を早く見せられると、イメージのずれが早い段階で見つかり、手戻りが減ります。

3. デザイン案：方向性の出し分けとアイデアの壁打ち

デザインそのものをAIに作ってもらうこともできます。ただ、Aさんは同じ勉強会で、今のAIの生成のデザイン力だと、プロのデザイナーのほうが圧倒的に強いと見ていました。AIの案は、そのまま使うものではなく、方向性を比べるための材料と考えるのが現実的です。

使いやすいのは、「やさしい雰囲気」「信頼感のある雰囲気」のように、方向の違う案をいくつか出してもらう使い方です。配色やフォントの組み合わせの候補を出してもらい、クライアントさんと方向をすり合わせる材料にもできます。

久保田も、メイカラの新しいロゴを作るときにAIを使ったそうです。手書きでいくつかイメージを膨らませ、それをAIと壁打ちしていろいろなパターンを出してもらい、近いものを選んで、最後は自分で調整して形にした、と言います。最初のアイデアと最後の調整は人が持ち、間の「パターンを広げる」部分をAIに任せた例です。

4. 画像・バナー：設計→生成→修正の順で作る

バナーやアイキャッチ、記事の挿絵などの画像は、画像生成AIで作れる範囲が大きく広がりました。サイズ違いの展開や、色違いのパターンを作る作業も速くなります。

2025年12月の画像生成の勉強会で、Bさんは、初めに設計をして、次に生成し、最後に修正する、という順番をすすめていました。設計とは、どんな画像にするかを指示文（プロンプト）として先に組み立てることです。Bさんは、設計の段階をきちんとやっておくと、あとがとても楽になると考えています。

もう一つのコツは、気になる部分があったときに、画像から直していくのではなく、指示文を直して作り直すことです。作った指示文をためておけば、同じ雰囲気の画像を何度でも作れる、という話もありました。

5. コーディングと公開後の改善：コードの下書きと数字の読み取り

デザインを形にする工程でも、AIは使えます。デザインの画像や説明から、HTMLやCSSの下書きを作ってもらったり、うまく動かないコードの原因を探してもらったりする使い方です。

公開後の改善にも役立ちます。アクセス解析の数字や、問い合わせの数をAIに渡して、変化をまとめてもらうと、報告書づくりの時間を減らせるでしょう。久保田は、分析やレポートづくりはAIでいいと言います。数字を読むだけでなく、実際に動かして数字を作るところまでできて初めて、数字が読めていることになる、という考えです。

デザイナーにとっての「数字を作る」は、まとめた数字から、ボタンの位置や見出しの言葉など、次に直すところを提案することです。報告をAIに任せて、改善の提案に時間を使えると、デザインの仕事が成果の話につながりやすくなります。

制作の流れ別に、よく使われるAIツールの例をまとめました。

ツールの例	主な使いどころ
ChatGPT・Gemini・Claude	ヒアリング内容の整理、提案資料や構成のたたき台、コピーの案出し、コードの下書き、画像の生成
FigmaのAI機能（Figma Makeなど）	ワイヤーフレームやデザイン案、試作品（プロトタイプ）づくり
CanvaのAI機能	バナーやSNS画像の作成、サイズ違いの展開
Adobe Firefly	画像の生成、写真の一部の描き足しや差し替え

ツールの機能や料金、商用利用の条件は変わりやすいので、使う前に公式サイトで確かめてください（2026年11月時点の例です）。

WebデザインにAIを取り入れる4つのステップ

1. 時間がかかっている作業を書き出す

まずは、ここ1か月の仕事を振り返り、時間がかかっている作業を書き出します。ヒアリングのまとめ、ワイヤーフレーム、バナーの展開、修正のやり取り、報告書づくりなど、細かく分けるのがコツです。

書き出した作業を、「判断が要る作業」と「手を動かす量が多い作業」に分けてみてください。AIに任せやすいのは、手を動かす量が多いほうです。判断が要る作業は、これまでどおり自分で持ちます。

一覧にしてみると、思っていた以上に、デザインそのもの以外の作業に時間を使っていると気づく人も多いと思います。そこが、AIを入れる最初の候補です。

2. 1つの作業で小さく試す

候補が決まったら、まずは1つの作業だけで試します。たとえば「次の案件のサイトマップのたたき台だけをAIで作る」のように、範囲を小さく決めると、結果を比べやすくなります。

試すときは、これまでかかっていた時間と、AIを使ったときの時間を、ざっくりメモしておきましょう。時間が縮んだか、仕上がりに満足できたかを見れば、続けるかどうかを判断できます。

久保田は、AIを使わずに仕事をするのは、電車や車があるのに10km、20km先まで歩いていくようなものだと例えています。作業によっては、これまで1週間かかっていたことが1時間でできるようになった、というのが本人の実感です。最初は慣れずに時間がかかっても、何回か使ううちに速くなっていきます。

3. 確かめる項目を先に決める

AIの案を使うときに迷わないように、確かめる項目を先に決めておきます。基準がないと、それらしい案に引っぱられて、どこを直せばいいか分からなくなりがちです。

2026年5月のデザイン勉強会で、Cさんは、デザインはルールと見る順番で整えられていくと思う、と話していました。最初に覚えるのは「近づける・揃える・同じにする・大事なところだけ変える」の4つです。Cさんは、自分で作るときも、AIで出したときも、同じ見方でいいと思う、とも伝えていました。

文字の読みやすさも、確かめる項目に入れておきたいところです。2026年5月のAI最新情報局（勉強会）では、Dさんが、画像の文字はパソコンで見ると十分でも、スマホの画面で見るととても小さい、と注意していました。読む人が何で見ているかを想像して、スマホでも確かめておくと安心です。

AIの案を見極める基準は、新しく覚えるものではなく、デザインの基本そのものです。

4. うまくいった指示文を型にして残す

試してみてうまくいった指示文や手順は、そのまま残しておきます。次の案件では、テーマや色、業種を差し替えるだけで使えるので、毎回ゼロから考えずに済みます。

〇〇の部分は、案件に合わせて置き換えてください。

最後の一文を入れておくと、次の打ち合わせで聞くことの一覧も一緒に手に入ります。型が増えていくほど、AIを使う時間そのものも短くなっていきます。

WebデザインでAIを使うときの注意点

生成物は、そのまま納品しない

AIは、頼んでいない情報を入れてしまったり、事実と違う内容を書いたりすることがあります。画像の中の小さな文字や、サンプルとして入った文章に、間違いが混ざっていることも少なくありません。

Dさんも勉強会で、出てきた画像は、中に書いてある内容を確認してから使うように、と呼びかけていました。質の高いものが出てくるほど、そのまま使いたくなるからこそ、確かめる手間を省かないことが大切です。

納品の前には、文字の誤り、数字や固有名詞、リンク、スマホでの見え方を一通り確かめましょう。確かめる項目を一覧にしておくと、毎回の確認が速くなります。

著作権と商用利用の決まりを確かめる

AIで作った画像やデザインを仕事で使うときは、著作権と、ツールごとの商用利用の決まりに気をつけたいところです。文化庁は「AIと著作権について」のページで、「AIと著作権に関する考え方について」（2024年3月）や「AIと著作権に関するチェックリスト＆ガイダンス」（2024年7月）を公開しています。

実務では、既存の作品や他社のロゴにそっくりなものを作らない、実在の人物や商標を勝手に使わない、の2点に気をつけたいところです。他の人のデザインを読み込ませて、そのまま写すような使い方も避けましょう。

商用利用ができるかどうかや、有料プランだけの条件なのかは、ツールの利用規約で決まります。使うツールの規約を一度確かめ、判断に迷う使い方は、専門家に相談すると安心です。

クライアントさんの情報の扱いを、先に取り決める

ヒアリングの資料や、公開前のサイトの情報には、クライアントさんの大事な情報が含まれています。設定によっては、入力した内容がAIの学習に使われることもあるため、何を入れてよいかは慎重に考えたいところです。

使うツールの設定で、入力内容を学習に使わない設定ができるかを確かめておきましょう。名前や連絡先などの個人情報は入れない、公開前の情報は伏せて入れる、といった自分なりの決まりを作っておくと迷いません。

会社によっては、AIの利用にルールを設けていることもあります。制作にAIを使う場合は、契約や打ち合わせの段階で、どの作業に使うのかを伝えておくと、あとで行き違いが起きにくくなります。

AIで空いた時間を、何に使うか

AIを生かせるのは、デザインの良し悪しが分かる人

久保田は、スキルがないとそもそもAIは使いこなせないと言います。目的地が分からないまま車に乗っても目的地に着かないのと同じで、入り口と出口が分かっている人でないと、AIを生かしきれないからです。デザインなら、良し悪しが分かっていることが欠かせない、という考えです。

2025年4月のAI活用の勉強会でも、同じ考え方が出ていました。人の力が90の人がAIの力を10まで上げれば900になるけれど、人の力が10の人は、どれだけAIを使いこなしても100にしかならない。だから両方を磨く必要がある、という話です。

デザインの基本を身につけてきた人ほど、AIの案を見極められます。これまで積み上げてきた経験は、AIの時代になっても無駄になるわけではありません。

空いた時間は、提案とクライアントさんとのやり取りに回す

久保田は、AIで早くなった分を何に使うかとして、3つを挙げていました。お客さんの成果についてひたすら考える、営業をして新しい仕事を作る、仲間と組んで大きく動く、の3つです。

デザイナーなら、1つ目は、サイトの問い合わせや売上を増やすための提案に時間を使うことにあたります。Aさんが話していたように、制作で一番時間がかかるのはクライアントさんとのやり取りです。AIでたたき台を早く出せた分、目的のすり合わせや、公開後の改善の相談に時間をかけられます。

作業の時間で見積もる仕事は、AIで速くなるほど安く見られやすいものです。成果まで一緒に考えるデザイナーは、作業の速さとは別のところで頼られるようになっていきます。

AIで減る仕事と残る仕事、これからも選ばれるデザイナーの条件は、こちらで紹介しています。

デザイン以外は、得意な人と組んで任せる

AIで一人でできる範囲が広がっても、一人で受けて一人で納品する働き方に、使える時間の上限があるのは変わりません。久保田も、一人でやると収入は「自分の時間×単価」で決まり、どこかで頭打ちになると話しています。

そこで久保田が挙げているのが、一人でやらずに人と組む働き方です。デザイン、文章、営業など、それぞれが得意な領域を受け持ってチームで動くと、一人のときの上限を超えていける、という考えです。AIで文章も画像も作れるからといって、全部を自分で抱える必要はありません。デザインに集中し、文章や集客は得意な人に任せたほうが、仕上がりもクライアントさんの成果も上がりやすくなります。

フリーランス同士でチームを組む始め方は、こちらで紹介しています。

AIを使って作業が速くなっても、気づけば一人で全部を抱えている、ということは少なくありません。自分がどれくらい一人で抱えているかは、自分ではなかなか見えないものです。いまの働き方を、一度タイプで確かめてみるのも一つの方法です。

いまの働き方のタイプと、次に伸ばすヒントがわかる

LINEで5つの質問に答えるだけ（登録無料・60秒で完了）

WebデザイナーのAI活用でよくある質問

AIでWebサイト全体を作ることはできますか？

簡単なページや試作品なら、AIだけでも形にできるようになってきました。ただ、クライアントさんの目的に合わせた構成や、細かな使いやすさ、ブランドらしさまで仕上げるには、人の判断が欠かせません。仕事として請けるサイトでは、AIはたたき台づくりに使い、仕上げは自分で行う進め方が現実的です。

AIを使うと、デザインのスキルが身につかなくなりませんか？

AIに任せきりにすると、自分で考える機会が減ることはありえます。一方で、AIの案を基本のルールで見直し、なぜ良くないのかを言葉にしていけば、むしろ見る目は鍛えられます。AIの案を「添削する練習の材料」として使うのも、一つの方法です。

AIで作ったデザインを、そのままクライアントに提案してもいいですか？

方向性を比べるための案として見せるのはよいと思います。ただ、文字の誤りや、既存の作品に似ていないかなどを確かめずに出すのは避けましょう。AIを使っていることや、どこまでが案の段階なのかを伝えておくと、行き違いが起きにくくなります。

無料のツールだけでも、AIを仕事に使えますか？

無料の範囲でも、文章の整理や構成のたたき台、簡単な画像づくりは試せます。ただ、使える回数や画質、商用利用の条件に制限があることも多いです。まず無料で試し、仕事でよく使う作業が見えてから、有料プランを検討すると無駄がありません。

フリーランスがAIを使うと、単価が下がりませんか？

作業の時間で見積もっていると、AIで速くなった分だけ「安くできるはず」と見られやすくなります。そのため、作業時間ではなく、目的や成果を一緒に考える提案の価値で見積もる考え方に、少しずつ変えていくのがおすすめです。単価の上げ方や伝え方は、こちらで紹介しています。

あわせて読みたい

フリーランスの単価交渉、関係を壊さずに単価を上げる3つの道【例文つき】 単価を上げたいけれど、言い出したら関係が悪くなりそうで怖い。そんな稼働中のフリーランスに向けて、単価交渉を切り出すタイミングと例文、最初の見積もりでの決め方、交渉しなくても単価が上がる働き方を、勉強会の実例とあわせて紹介します。

AIでWebデザイナーの仕事はなくなりますか？

なくなるというより、仕事の中身が変わっていくと考えています。たたき台や展開などの作業はAIに移り、誰に何を伝えるかを決める部分と、最後の判断や仕上げは人の仕事として残るはずです。AIの時代に、どんな働き方なら選ばれ続けるかは、こちらで紹介しています。

あわせて読みたい

AIに仕事を奪われる？Web系フリーランスが生き残る働き方と必要なスキル AIに仕事を奪われるのではと不安なWeb系フリーランスへ。なくなるのは仕事より「作業」です。奪われやすい仕事と奪われにくい仕事、AI時代に必要なスキル、空いた時間の使い方を、勉強会の実例とあわせて紹介します。

まとめ：WebデザイナーのAI活用は「作る時間」を「決める時間」に変えること

• AIに任せやすいのは、たたき台・案出し・展開などの「間の作業」。誰に何を伝えるかと、最後の良し悪しはデザイナーが持つ
• 企画、ワイヤーフレーム、デザイン案、画像・バナー、コーディングと改善の5つの場面で、AIを取り入れられる
• 取り入れるときは、作業を書き出し、1つで小さく試し、確かめる項目を決めて、うまくいった指示文を型にする
• 生成物はそのまま納品せず、著作権や商用利用の決まり、クライアントさんの情報の扱いを確かめる
• 空いた時間は、提案やクライアントさんとのやり取り、人と組むことに使う

AIで作業が速くなるほど、何を決めて、誰と組むかが、デザイナーの差になっていきます。一人で抱え込まず、相談できる人や組める仲間を見つけながら、次の一歩を考えていきましょう。

あなたの働き方のタイプと、次の一歩のヒントが届く

LINEで5つの質問に答えるだけ（登録無料・60秒で完了）