WebデザインとAI｜制作工程のどこで使えるか実案件で解説

Webデザインの制作にAIを使いたいけれど、どの場面で、どう使えばよいのか分からない。そんな声をよく聞きます。AIツールはたくさんありますが、大切なのはツールの数をそろえることではなく、制作のどの工程で何を任せるかを決めることです。

この記事では、Webデザインの制作工程を分解し、それぞれの工程でAIが使える場面と、人が担う場面を整理します。私たちが自社サービスのLPを、企画から公開まで一通りAIツールを使って作った経験をもとにお話しします。あらかじめお伝えすると、作業時間などの定量的な記録は取っていないため、「何%短縮」といった数値は出しません。その代わり、1本のLPを工程通しにどう作ったかの流れを、そのまま見せます。

Webデザインの工程を分解する

まず、Webデザインの制作がどんな工程でできているかを整理します。1つのページやサイトは、大まかに次の流れで作られます。まず、誰に何を届けるかを決めるリサーチと企画、内容と配置を決める構成づくりがあります。続いて、見た目を形にするデザイン、使いやすさを整えるUIの調整があります。最後に、それをコードにする実装、画像の用意と公開へと進みます。

この工程を意識せずにAIを使うと、「とりあえずツールを触ってみたけれど、うまく使えない」となりがちです。工程ごとに、AIに向く作業と、人がやるべき作業は違います。次に、その違いを見ていきます。

工程別に見る、AIが使える場面と人が要る場面

それぞれの工程で、AIに任せられる部分と、人が担う部分を表に整理しました。私たちがLPを作ったときの実際の分担にもとづいています。

表を見て分かるのは、どの工程でもAIが「案を出す・形にする」作業を担い、人が「決める・調整する・確かめる」作業を担っている点です。AIは制作のすべての工程で使えますが、任せきりにできる工程は1つもありませんでした。この分担を頭に入れておくと、ツールに振り回されずに使えます。

実案件でLPを工程通しに作った流れ

工程別の話を、1本のLPを作る流れとしてつなげてみます。上位の記事はツールを一覧で紹介するものが多いのですが、ここでは実際にどう通して作ったかをお見せします。

はじめに、誰に何を伝えるLPかを決めました。この方針は人が決め、AIには考えを整理する相手になってもらいました。次に、その方針をもとに、AIに構成の案を出させ、載せる要素と順番を組み立てました。デザインの工程では、AIにたたき台を作らせ、それを土台に、ブランドの雰囲気や伝えたい印象に合うように調整しました。ここはAIに大きく助けられた工程です。

そのデザインをコードに落とし込む工程では、AIに指示を出しながら実装し、表示を確認しては直す、を繰り返しました。必要な画像は生成ツールで用意し、最後に、実際の画面での見え方をチェックして公開しました。通してやってみて感じたのは、AIは各工程の作業を速めてくれる、ということです。その一方で、工程と工程をつなぐ判断は人がやる必要があります。たとえば「この構成でこのデザインは合っているか」という判断です。ツールを個別に使うだけでなく、工程を通して見る目が要ります。

工程別に使うAIツールのタイプ

どのツールが一番かを競うより、機能のタイプで捉えると、工程に当てはめやすくなります。Webデザインの制作で使うAIは、大きく次のタイプに分けられます。新しい製品が次々に出るので、個別の名前を追うより、タイプで理解しておくほうが長く役立ちます。

1つ目は、対話しながら文章や構成を助けるタイプです。企画の整理や、見出しや文言の案出しに使います。代表例としては、ChatGPTやClaudeが挙げられます（例・2026年時点）。2つ目は、デザインやレイアウトを生成するタイプです。ラフやワイヤー、ページのたたき台を形にする工程で役立ちます。デザインツールに組み込まれたAI機能や、Framerなどが例に当たります。

3つ目は、画像を生成するタイプです。写真やイラスト、バナーの素材づくりに使えます。CanvaのAI機能やMidjourneyなどが代表例です（例・2026年時点）。4つ目は、デザインからコードへの変換や、コーディングを補助するタイプです。v0やCursorなどが例に挙がります。いずれも入れ替わりが速いので、名前は「そのタイプの一例」として捉え、自分が試す時点で使える製品を選んでください。

大切なのは、自分の制作工程のどこに、どのタイプを当てはめるかです。すべてのタイプを一度にそろえる必要はありません。1つのタイプを手になじませてから、必要に応じて他のタイプを足していくと、無理なく制作に組み込めます。

案件のタイプ別に、AIが効く工程は変わる

同じWebデザインでも、作るものによってAIが力を発揮する工程は変わります。前の章のLPの流れをそのまま当てはめると、うまくいかない場面が出てきます。代表的な3つのタイプで、重心の違いを見てみます。

LP（ランディングページ）は、1ページで伝えて行動してもらうのが目的です。そのため、構成づくりと、ファーストビューのデザインの案出しにAIが効きます。伝える順番と見せ方が成果を左右するので、AIに案を多く出させ、人が選ぶ進め方が向いています。一方で、コーポレートサイトは、複数ページの一貫性が大切です。ここではデザインの量産よりも、全体のトーンをそろえる判断が中心になり、AIは各ページの下書きを速める補助にとどまります。

ECサイトは、商品数が多く、同じ形の要素を数多く作ります。商品バナーや説明文の下書きなど、型が決まった量産の工程でAIが大きく効きます。逆に、購入までの導線や決済まわりは、慎重な設計と確認が要るため、人の判断が重くなります。このように、作るものによって「AIに任せてよい工程」と「人が握る工程」の比率が変わります。自分の案件がどのタイプに近いかを考えると、どの工程にAIを寄せるべきかが見えてきます。

自分に合うAIツールの選び方

ツールを選ぶときは、まず自分の制作でいちばん時間がかかっている工程を見つけます。そこを助けるタイプのツールから試すと、効果を実感しやすくなります。多くのツールは無料で試せる範囲があるので、いくつか触って、自分の作り方や好みに合うものを選びます。

選ぶときの基準は、機能の多さより、自分の工程に自然に組み込めるかどうかです。高機能でも、使い方が複雑で工程が止まるなら、かえって遅くなります。また、複数の工程で使うなら、あるツールの出力を次のツールに渡しやすいか、という受け渡しのしやすさも見ておくと、制作全体がスムーズになります。

無料と有料、商用利用の見分け方

仕事で使うなら、料金と利用範囲の確認は欠かせません。まず、無料の範囲でどこまでできるかを見ます。試すだけなら無料で十分なことが多いですが、書き出しの画質や生成回数、透かしの有無などに制限がかかる場合があります。仕事で使う量に耐えるかを、無料のうちに確かめておきましょう。

次に、商用利用が認められているかです。生成した画像やデザインを納品物やLPに使うなら、そのツールの規約で商用利用が許されているかを必ず確認します。ここはツールごとに違い、しかも改定されることがあるため、断定せず、利用する時点の公式情報を見てください。あわせて、日本語での指示にどこまで対応しているか、チームで使う場合に共有や権限の仕組みがあるかも、実務では効いてきます。

課金形態の見分け方

料金そのものは変わりやすいので、金額を覚えるより、課金の「形」を見分けられるようにしておくと迷いません。AIツールの課金は、大きく3つの形に分けられます。月額で使い放題に近い形、使った分だけ払う従量の形、そしてクレジットやポイントを購入して消費する形です。

毎日たくさん使うなら月額の形が向き、たまに使うなら従量やクレジットの形が向きます。自分の制作で「どれくらいの頻度で、どの工程に使うか」を思い浮かべ、その使い方に合う課金の形を選ぶと、無駄が出ません。個別の金額は変わるため、契約する時点で公式の料金ページを確認するのが確実です。

公開前チェックを工程に組み込む

AIを制作に取り入れるとき、いちばん差が出るのが、チェックをどう仕込むかです。何を確認するかという中身も大切ですが、それをどの工程で挟むかを決めておかないと、公開直前にまとめて直す羽目になります。ここでは、工程の設計としてチェックをどこに置くかを整理します。何を確認するかの具体は、WebデザイナーのAI活用の記事にまとめているので、あわせてご覧ください。

ポイントは、公開前に一度だけ確認するのではなく、工程の区切りごとに小さく確認を挟むことです。AIの出力は、後の工程になるほど直しにくくなります。早い工程で気づけば、修正はわずかで済みます。以下では、工程の節目にどんなチェックを置くとよいかを見ていきます。

企画・構成の区切りで挟むチェック

AIに構成案を出させたら、コードにする前に、方針とずれていないかを確認します。誰に何を届けるという最初の方針に、その構成が沿っているか。AIは見栄えのする案を出しますが、目的から外れることがあります。ここで方針との一致を見ておくと、後の工程での大きな作り直しを防げます。

デザインの区切りで挟むチェック

AIが出したデザインのたたき台は、実装に進む前に、ブランドや全体のトーンと合っているかを確認します。1つのページだけを見ると良くても、サイト全体で見るとちぐはぐになることがあります。実装してからだと直すのに手間がかかるため、デザインの段階で全体の一貫性を見ておくのが効きます。

実装の区切りで挟むチェック

AIに書かせたコードは、公開前に、正しく動くかとスマホでの表示を確認します。パソコンの画面では整って見えても、スマホで崩れることは珍しくありません。生成されたコードをそのまま信じず、実際の画面で見え方と動きを確かめる工程を必ず入れます。ここは人の目が最後の砦になります。

公開直前に挟む最終チェック

公開の直前には、作った本人とは別の視点で、通して見る確認を入れます。ずっと作っていると、思い込みで見落としが生まれます。可能なら別の人に、難しければ時間を置いて自分で、まっさらな目で見直します。誤字や表示崩れ、リンク切れといった細かな抜けは、この最終の確認で拾えます。

最後にまとめて確認すると、なぜ手戻りが増えるのか

チェックを工程に分けず、公開直前に一度だけ行うと、直しが重くなります。たとえば、構成のずれに公開直前で気づくと、デザインも実装もやり直しになります。早い工程での小さな見落としが、後の工程を全部巻き込んで大きな作り直しに育ってしまうためです。AIで各工程を速く進めるほど、この巻き込みは起きやすくなります。

工程の節目でこまめに確認するのは、遠回りに見えて近道です。各工程の区切りで方針とのずれを小さく直しておけば、公開直前に残るのは細かな仕上げだけになります。AIの速さを活かすほど、チェックを前の工程へ分散させる設計が効いてきます。どこで何を直すかを工程の地図の上に置いておくと、速さと品質を両立できます。

こうして工程の節目ごとにチェックを置くと、AIを使っても品質が崩れません。チェックは、AIの速さを打ち消す手間ではなく、速さを安心して活かすための仕組みだと考えてください。

AIツールを使うときの注意点

制作にAIを使うとき、気をつけたい点がいくつかあります。1つ目は、AIの出力はあくまでたたき台だということです。そのまま使えることもありますが、多くはブランドや目的に合わせた調整が必要です。品質を最終的に担保するのは人だと考えてください。

2つ目は、著作権や商用利用の扱いです。AIが生成した画像やデザインを仕事で使う場合、そのツールの規約で商用利用が認められているかを確認します。ここはツールごとに違うので、断定せず、必ず利用するツールの規約を確かめてください。3つ目は、ツールの料金や機能が変わりやすいことです。無料と紹介されていた機能が有料になることもあります。導入する前に、その時点の公式情報を確認するのが安全です。便利さだけでなく、こうした注意点も込みで使うと、失敗が減ります。

工程にAIを組み込むときのコツ

最後に、AIを制作に取り入れるときのコツをまとめます。いきなり全工程で使おうとせず、いちばん時間がかかっている工程から試すのが確実です。デザインのたたき台づくりや画像生成など、効果を感じやすいところから始めて、慣れたら他の工程に広げていきます。

大切なのは、ツールをいくつ使うかではなく、どの工程で何を任せ、どこを自分で判断するかを決めることです。この使い分けさえ持っていれば、新しいツールが出てきても、自分の工程に組み込めます。Webデザイナーという仕事がAIでどう変わるかという職務の視点はWebデザイナーのAI活用にまとめています。なくなるのかという不安全体はWebデザイナーはなくなるのかをご覧ください。記事やサイトづくりにAIを使う手順はChatGPTをSEOに使う実務手順も参考になります。

よくある質問

AIだけでWebデザインは完成しますか

完成しません。AIは各工程の作業を速めますが、方針を決めることや、ブランドに合わせた調整、品質の最終確認は人が担います。AIはたたき台を作る道具、と考えるのが実際に近いです。

無料のAIツールでも実務に使えますか

使えます。ただし、書き出しの画質や生成回数に制限がある場合があり、料金や機能も変わりやすいので、導入前にその時点の公式情報を確認してください。無料の範囲でできることと、有料で広がることを見比べて選ぶとよいです。

AIで作ったデザインを仕事で使ってよいですか

使えるかどうかは、ツールの規約によります。商用利用が認められているかを、必ず利用するツールの規約で確認してください。ここは一律に断定できない部分です。

ツールはいくつそろえればよいですか

数をそろえる必要はありません。まず、いちばん時間がかかる工程を助けるタイプを1つ手になじませ、必要に応じて足していくのがおすすめです。工程のどこに当てるかが決まっていれば、少ない数でも十分に効きます。

本文中のAIツールでできる範囲や工程の分担についての記述は、当サイト運営元が自社サービスの制作でAIツールを実際に用いた経験にもとづくものです。作業時間などの定量的な計測は行っていないため、数値は掲載していません。ツール名は執筆時点の代表例であり、特定の製品を推奨するものではありません。AIツールの機能・料金・利用規約は更新される場合があるため、利用時に各ツールの公式情報をご確認ください。