AIでLPやホームページのコーディングはできる？デザインカンプをAIがHTML/CSS化する実践例

AIでLPやホームページのコーディングは本当にできるのか。

最近、このような疑問を持つWebデザイナーやコーダーの方は増えていると思います。

AIで画像を作れることは、すでに多くの人が知っています。
しかし、Web制作の現場で本当に重要なのは、画像を作ることだけではありません。

デザインカンプを見て、

これは画像として使う部分なのか。
これはHTMLテキストとして組むべき部分なのか。
このボタンはCSSで作り、フォームや問い合わせページへつなげるべきなのか。
PCでは横並び、スマホでは縦並びにするべきなのか。

こうした判断をしながら、実際のWebページとして組み上げていく必要があります。

つまり、LPやホームページ制作では、デザインを作るだけでなく、デザインをHTML/CSSに分解して再構築するコーディング工程が欠かせません。

では、AIはこの工程をどこまで支援できるのでしょうか。

今回は、AIが作成したLPファーストビュー用のデザインカンプをもとに、画像として残す部分と、HTML/CSSで組み直す部分を分け、実際のLP実装へ近づけていく流れを紹介します。
（説明をシンプルに、わかりやすくするために今回は　ファーストビュー周りの整理をするところをご紹介します）

アピス問い合わせmini LP 完成版はこちらから

最初に用意したのが、以下のようなAIデザインカンプです。

図A10　AIが作成したLPファーストビュー用デザインカンプ

この画像は、一見するとLPのファーストビューとしてそのまま使えそうに見えます。

左側には見出し、本文、CTAボタンがあります。
右側には、問い合わせ対応に追われる人物イラストがあります。

しかし、このまま画像として貼り付けても、本当の意味でLPにはなりません。

画像内の文字はHTMLテキストではありません。
画像内のボタンもクリックできません。
スマホ表示では文字が小さくなり、後から文言を直すことも難しくなります。

そこで、このカンプをAIと一緒に読み解き、Webページとして実装できる形に分解していきます。

---

H2-1 AIでLPやホームページのコーディングは本当にできるのか？

結論から言うと、AIはLPやホームページのコーディングをかなり支援できる段階に来ています。

ただし、ここでいう「できる」は、AIに一言だけ指示すれば、完璧なWebサイトが自動で完成するという意味ではありません。

実務で重要なのは、AIに対して、

どの部分を画像として使うのか。
どの部分をHTMLテキストにするのか。
どの部分をCSSで再現するのか。
ボタンはどこへリンクさせるのか。
PCとスマホでレイアウトをどう変えるのか。

こうした制作上の判断材料を与えながら、一緒に組み立てていくことです。

今回の例でいうと、最初のAIデザインカンプには、左側に見出しや説明文、ボタンが含まれていました。
右側には、人物イラストやメール、時計、書類、吹き出しなどのビジュアル要素がありました。

この状態をそのまま1枚画像として使うのではなく、まず次のように分解します。

左側の見出し、本文、ボタンはHTML/CSSで作り直す。
右側の人物イラストや装飾要素は画像として使う。
ボタンは画像ではなく、クリックできるHTMLのリンクボタンとして作る。
PCでは左右2カラム、スマホでは縦並びにする。

この分解作業は、まさにコーダーがデザインカンプを見たときに行う作業です。

デザイナーが作ったカンプを見て、
「これは画像で書き出す」
「これはテキストとして組む」
「ここはCSSで再現する」
「このボタンはリンクにする」
「スマホではこの順番に並べる」
と判断していく作業です。

AIは、この判断と作業のたたき台をかなりの精度で手伝えるようになっています。

たとえば今回も、AIに対して次のように指示しました。

この画像をLPファーストビューの参考画像として使います。

左側の文字とボタンはHTML/CSSで作り直すので、
画像として使うのは右側のイラスト部分だけにしたいです。

画像の右側にある、
・困っている人物
・メールのアイコン
・時計
・書類
・吹き出し
だけを残し、
左側の見出し、本文、ボタン、チェック文は含めない形で
LP右側に配置しやすい画像として切り出してください。

その結果、右側のイラスト部分だけを抽出した画像を用意できました。

図B10　AIと相談して、画像として使う部分だけを抽出したイラスト画像

この時点で、元のデザインカンプは次のように整理されました。

画像として使う部分は、右側のイラスト。
HTML/CSSで組む部分は、左側の見出し、本文、ボタン、補足文。
CTAボタンは、画像ではなくクリックできるリンクとして実装する。

ここまで整理できると、次の工程ではHTMLとCSSを作れます。

つまり、AIは単に「それっぽいLP画像を作る」だけではなく、カンプを実装用に分解し、コーディングの入口まで持っていく支援ができます。

もちろん、最終的な判断は人間が行う必要があります。

本当にこの導線で問い合わせにつながるのか。
ボタン文言は適切か。
スマホで読みやすいか。
余白や見出しの強弱はブランドに合っているか。
WordPressのテーマや既存CSSと干渉しないか。

こうした確認は、Web制作者やディレクターの役割です。

しかし、以前ならデザイナー、コーダー、ディレクターの間で何度も確認していた初期の分解作業を、AIと会話しながら短時間で進められるようになってきたことは、大きな変化です。

AIによって、Webデザイナーやコーダーの仕事がすぐになくなるというより、制作工程の中でAIを使いながら、より速く、より実装を意識した形で進める力が求められるようになってきた。

今回の実例は、その変化をかなり分かりやすく示していると思います。

H2-2 デザインカンプをそのまま画像で貼るだけではWebページにならない

AIで作成したLPのデザインカンプを見ると、一見そのままWebページとして使えそうに見えます。

見出しがあり、説明文があり、ボタンがあり、右側には雰囲気のよいイラストも入っている。
「これをそのまま画像として貼れば、LPのファーストビューになるのでは？」と思うかもしれません。

しかし、実際のWeb制作では、デザインカンプを1枚画像としてそのまま貼るだけでは、十分なWebページにはなりません。

なぜなら、画像の中にある文字やボタンは、ブラウザから見ればすべて「画像の一部」だからです。

たとえば、今回のA10画像には、左側に大きな見出しがあります。

「問い合わせ対応に追われて、気づけば夕方。」

というコピーは、LPのメインメッセージとしてとても重要です。
しかし、これを画像の中に入れたまま表示すると、HTML上では見出しテキストとして扱われません。

本来であれば、LPのメインコピーはHTMLの見出しとして組み、検索エンジンやブラウザ、読み上げ環境にも伝わる形にする必要があります。

同じように、本文も画像の中にあるだけでは、あとから簡単に修正できません。

「問い合わせmini」という表現を変更したい。
説明文を少し短くしたい。
ボタン下の補足文を変えたい。

このような修正が発生したとき、画像の中に文字が埋め込まれていると、画像そのものを作り直す必要があります。
これは、実務上かなり手間がかかります。

さらに大きな問題は、ボタンです。

A10画像には、

「無料で試す」
「相談してみる」

という2つのボタンが描かれています。

見た目としてはボタンに見えますが、画像の中のボタンはクリックできません。
LPとして成果を出すには、このボタンを実際のリンクとして作り、無料ダウンロード、問い合わせフォーム、相談フォームなどへつなげる必要があります。

つまり、画像内のボタンは、HTML/CSSで本物のボタンとして作り直す必要があります。

この違いは、LP制作ではとても重要です。

デザイン上のボタンは「見た目の部品」です。
Webページ上のボタンは「ユーザーを次の行動へ進める機能」です。

この2つを分けて考えなければ、見た目はLPらしくても、実際には問い合わせや申し込みにつながらないページになってしまいます。

また、スマホ表示の問題もあります。

デザインカンプを1枚画像として貼ると、スマホでは画像全体が縮小されます。
その結果、見出しや本文が小さくなり、読みづらくなる可能性があります。

PCではきれいに見えても、スマホでは、

文字が小さい。
ボタンが押しづらい。
余白が詰まって見える。
画像の左右が切れる。
CTAが目立たない。

ということが起こります。

現在のLPやホームページ制作では、スマホでの見やすさ、押しやすさ、読みやすさが非常に重要です。
そのため、PC用のカンプをそのまま画像化して使うのではなく、HTML/CSSとして再構築し、画面幅に応じてレイアウトを変える必要があります。

今回のようなファーストビューであれば、PCでは左にテキスト、右にイラストを配置します。
スマホでは、テキストを上に、画像を下に並べる方が自然です。

このように、デザインカンプをWebページにするには、

画像として残す部分。
HTMLテキストとして組む部分。
CSSで見た目を再現する部分。
リンクやフォーム導線として機能させる部分。

を分けて考える必要があります。

これは、まさにコーダーが日常的に行っている作業です。

デザインカンプを見て、そのまま画像として貼るのではなく、Webページの構造として読み替える。
そのうえで、HTML、CSS、画像、リンク、レスポンシブ対応に分解して組み上げる。

AIがWeb制作に使えるかどうかを考えるときも、この視点が重要です。

AIでカンプ画像を作れるかどうかだけでは、実務的には不十分です。
本当に重要なのは、そのカンプをもとに、実際のWebページとして使える形に分解し、コーディングへ進められるかどうかです。

今回の実例では、A10のデザインカンプをそのまま使うのではなく、まず「画像として残す部分」と「HTML/CSSで組む部分」に分けました。

この分解こそが、AIをWeb制作の実務に活かす第一歩になります。

H2-3 AIにカンプ画像を見せて、まず構造を分解する

では、AIを使ってデザインカンプから実装へ進める場合、最初に何をするべきでしょうか。

最初に行うべきなのは、コーディングそのものではありません。

まずは、カンプ画像の中身を見ながら、要素を分解することです。

今回のA10画像には、大きく分けて2つの領域があります。

左側には、LPのメッセージがあります。
右側には、問い合わせ対応に追われている人物のイラストがあります。

左側には、さらに次の要素があります。

上部ラベル。
大見出し。
サブコピー。
説明文。
CTAボタン。
ボタン下の補足文。

右側には、次のような要素があります。

困っている人物。
ノートパソコン。
メールアイコン。
時計。
書類の山。
吹き出し。
植物などの装飾。

ここで大事なのは、これらを全部同じ扱いにしないことです。

Webページとして実装するとき、左側の見出しや本文は、画像ではなくHTMLテキストとして組むべきです。
一方、右側の人物イラストや装飾要素は、画像として使う方が自然です。

つまり、A10画像をそのまま1枚で使うのではなく、次のように分解します。

画像として使う部分は、右側のイラスト。
HTML/CSSで組む部分は、左側の文章とボタン。
ボタンは、画像ではなくクリックできるリンクとして作る。
全体の配置は、PCでは左右2カラム、スマホでは縦並びにする。

この整理ができると、カンプ画像は単なる参考画像ではなく、実装の設計図に変わります。

ここでAIに対して重要なのは、ただ「この画像をHTMLにして」と言うのではなく、どのように分解したいのかを具体的に伝えることです。

たとえば、今回であれば、次のように指示します。

この画像をLPファーストビューの参考画像として使います。

左側の文字とボタンはHTML/CSSで作り直します。
画像として使うのは右側のイラスト部分だけにします。

右側にある、
・困っている人物
・メールのアイコン
・時計
・書類
・吹き出し
を残し、
左側の見出し、本文、ボタン、チェック文は含めない形で
LP右側に配置しやすい画像として切り出してください。

このように指示することで、AIはカンプ画像を「1枚の完成画像」としてではなく、「Webページを構成する部品」として扱いやすくなります。

その結果、B10のように、右側のイラスト部分だけを抽出した画像を用意できます。

図B10　AIと相談して、画像として使う部分だけを抽出したイラスト画像

B10は、実装上とても重要です。

なぜなら、B10があることで、右側のビジュアルは画像として配置し、左側のコピーやボタンはHTML/CSSで自由に組めるようになるからです。

この状態になると、次のような実装方針が明確になります。

右カラムにはB10画像を配置する。
左カラムにはHTMLで見出しと本文を入れる。
ボタンはaタグで作成し、CSSでデザインする。
リンク先は未定なら仮で #download や #contact にする。
スマホでは左カラム、右カラムを縦に並べる。

ここまで決まれば、実際のコーディングに入る準備が整います。

この工程は、従来であれば人間のコーダーがカンプを見ながら行っていた作業です。

「この見出しはH1にする」
「この説明文は段落にする」
「このボタンはリンクにする」
「このイラストは画像として配置する」
「PCでは2カラム、スマホでは1カラムにする」

こうした判断をしながら、デザインをWebページの構造へ変換していきます。

AIは、この分解作業をかなり支援できるようになっています。

もちろん、AIに任せきりにするのではなく、人間側が目的を伝える必要があります。

このLPは何を売るページなのか。
一番目立たせたいCTAは何か。
右側の画像はどの程度の大きさで見せたいのか。
スマホでは画像を先に出すのか、文章を先に出すのか。
ボタンは資料請求なのか、相談なのか、無料DLなのか。

こうした判断は、人間が方向性を決めるべき部分です。

しかし、その方針を伝えれば、AIはHTML/CSSに落とし込むための構造整理や、コーディングのたたき台作成を支援できます。

今回の実例で重要なのは、AIがデザイン画像を作ったことではありません。

AIが作ったカンプをもとに、
「画像として残す部分」と「HTML/CSSで組む部分」を分け、
実装に進める状態まで整理できたことです。

これは、AIがWeb制作において、デザイナーやコーダーの作業工程に入り始めていることを示しています。

特にLPのファーストビューのように、構成が比較的明確なパーツであれば、AIと会話しながら分解し、実装方針を固め、HTML/CSSの作成へ進むことは、かなり現実的になっています。

H2-4 実例：LPファーストビュー画像を、画像・テキスト・ボタンに分解する

ここからは、実際にAIで作成したLPファーストビューのデザインカンプをもとに、どのように実装要素へ分解していくかを見ていきます。

最初に用意したA10の画像は、見た目としてはかなり完成に近い状態でした。

左側には、サービスのキャッチコピーがあります。
右側には、問い合わせ対応に追われて困っている人物のイラストがあります。
さらに、左下には「無料で試す」「相談してみる」というCTAボタンも配置されています。

一見すると、このままLPのファーストビューとして使えそうです。

しかし、Webページとして実装する場合、この画像をそのまま貼るのではなく、まず要素ごとに分解して考える必要があります。

今回のカンプ画像を実装目線で見ると、大きく次の3つに分けられます。

1つ目は、画像として使う部分です。

右側の人物イラスト、メールのアイコン、時計、書類、吹き出しなどは、ビジュアルとして見せたい部分です。
これらはHTMLテキストにする必要はなく、LPの右カラムに画像として配置すれば十分です。

2つ目は、HTMLテキストとして組む部分です。

左側にある、

小規模事業者向け｜問い合わせ対応DX
問い合わせ対応に追われて、気づけば夕方。
『あれ、本業どこいった？』
そんな毎日を、そろそろ変えませんか？
顧客対応は大切です。
問い合わせminiは、よくある問い合わせを整理し……

といった文章は、画像内に残すのではなく、HTMLのテキストとして組む方が適しています。

理由は明確です。

HTMLテキストにしておけば、あとから文言を修正できます。
スマホ表示でも読みやすいサイズに調整できます。
検索エンジンにもページの内容として伝わります。
見出しや段落として意味のある構造にできます。

3つ目は、HTML/CSSで機能として作る部分です。

代表的なのがボタンです。

A10の画像には、「無料で試す」「相談してみる」というボタンが描かれています。
しかし、画像内のボタンは、見た目はボタンでもクリックできません。

実際のLPでは、この部分をHTMLのリンクとして作り、CSSでボタンらしく装飾します。

たとえば、リンク先がまだ決まっていない段階では、

#download
#contact

のような仮リンクを設定しておきます。

後から無料ダウンロードページや問い合わせフォームのURLが決まったら、href の中だけ差し替えればよいのです。

つまり、A10のデザインカンプは、完成画像として使うのではなく、次のように分解します。

画像として残す部分：右側の人物イラスト、メール、時計、書類、吹き出し
HTMLテキストにする部分：左側のラベル、見出し、本文、補足文
HTML/CSSで機能化する部分：CTAボタン、リンク導線
CSSで再現する部分：余白、2カラムレイアウト、文字サイズ、ボタン色、スマホ表示

この分解ができると、カンプ画像は単なる見本ではなく、実装の設計図になります。

【画像挿入位置】
図A10　AIが作成したLPファーストビュー用デザインカンプ

A10は、AIが作成した最初のデザイン案です。
この段階では、見出しも本文もボタンも、すべて画像の中に含まれています。

そのため、次にAIへ指示したのが、画像として使う部分だけを抽出する作業です。

左側の文字やボタンはHTML/CSSで作り直すため、画像には不要です。
そこで、右側のイラスト部分だけを残すようにAIへ依頼しました。

このときの指示は、次のような内容です。

この画像をLPファーストビューの参考画像として使います。

左側の文字とボタンはHTML/CSSで作り直すので、
画像として使うのは右側のイラスト部分だけにしたいです。

画像の右側にある、
・困っている人物
・メールのアイコン
・時計
・書類
・吹き出し
だけを残し、
左側の見出し、本文、ボタン、チェック文は含めない形で
LP右側に配置しやすい画像として切り出してください。

背景は白、または透過風でお願いします。

この指示によって、B10のように、右側のビジュアル要素だけを抽出した画像を用意できました。

【画像挿入位置】
図B10　AIと相談して、画像として使う部分だけを抽出したイラスト画像

B10ができると、実装方針はかなり明確になります。

右カラムにはB10画像を配置する。
左カラムにはHTMLで見出しと本文を組む。
ボタンはCSSで作り、リンクとして機能させる。
PCでは左右2カラムにし、スマホでは縦に並べる。

ここまで整理できれば、実際のコーディングに入る準備が整います。

これは、まさに人間のコーダーがデザインカンプを見ながら行う分解作業です。

カンプを見て、どこを画像化し、どこをHTMLにし、どこをCSSで作るかを判断する。
AIは、その判断を一緒に整理し、実装に進めるための材料づくりを支援できます。

この工程を見れば、AI活用は単に「それっぽい画像を作る」段階から、かなり実務寄りに進んでいることが分かります。

LP制作において重要なのは、見た目の画像を作ることだけではありません。
その画像を、Webページとして機能する構造へ分解し、HTML/CSSで再構築することです。

今回のA10からB10への流れは、その第一歩になります。

※この章では、A10とB10を並べて掲載すると非常に分かりやすいです。追加画像生成は不要です。すでにA10・B10があるので、まずはこの2枚を使うのがよいです。

H2-5 AIにどのように指示すればHTML/CSS化できるのか？

デザインカンプを画像部分とHTML/CSS部分に分解できたら、次は実際にコーディングへ進みます。

ここで重要なのは、AIに対して「HTML/CSSを書いて」とだけ指示しないことです。

もちろん、そのような短い指示でも、ある程度のコードは出てきます。
しかし、実務で使えるLPに近づけるには、もう少し具体的に伝える必要があります。

特に、次のような情報をAIに渡すことが大切です。

どの画像を右側に配置するのか。
左側に入れるテキストは何か。
ボタンの文言は何か。
リンク先は決まっているのか、仮リンクなのか。
PCではどのようなレイアウトにするのか。
スマホではどのように並べるのか。
WordPressに貼るのか、通常のHTMLファイルにするのか。
既存CSSと干渉しないclass名にする必要があるのか。

このような情報を整理して伝えることで、AIはかなり実務に近いHTML/CSSを作りやすくなります。

今回のLPファーストビューであれば、AIへの指示は次のようになります。

この右側画像を使って、LPファーストビューをHTML/CSSで作ってください。

右側画像は、LP右カラムに配置します。
左側の文字とボタンは画像ではなく、HTML/CSSで作ります。

PCでは左にテキスト、右に画像の2カラム。
スマホでは、テキスト、画像の順に縦並びにしてください。

左側に入れる内容：

上部ラベル：
小規模事業者向け｜問い合わせ対応DX

大見出し：
問い合わせ対応に追われて、
気づけば夕方。

サブコピー：
『あれ、本業どこいった？』
そんな毎日を、そろそろ変えませんか？

本文：
顧客対応は大切です。
でも、同じ質問への返信、資料案内、対応状況の確認に
時間を取られ続けると、営業・制作・接客・顧客フォローの
時間が削られてしまいます。

問い合わせminiは、よくある問い合わせを整理し、
人が本当に対応すべき仕事に時間を戻すための仕組みです。

ボタン：
無料で試す → #download
相談してみる → #contact

ボタン下の補足：
まずは無料DLで、小さく試せます。

右画像URL：
まだ未定なので、いったん hero-image.png で仮指定してください。

デザイン方向：
白背景、緑メイン、相談ボタンはオレンジ。
大見出しは太く大きく。
余白を広めに取り、画像の線画イラストと合うシンプルなLPデザインにしてください。

WordPressのカスタムHTMLブロックにそのまま貼れる形で、
HTMLとCSSを1セットで出してください。
CSSは <style> タグ内に入れてください。

既存テーマと干渉しにくいように、
class名には inquiry-mini-hero を接頭辞として付けてください。

スマホ対応も含めてください。

この指示には、コーディングに必要な情報がかなり含まれています。

まず、右画像をどこに置くかを指定しています。
次に、左側に入れるテキストを明確にしています。
さらに、PCとスマホでの並び方も指定しています。
ボタンの文言と仮リンクも決めています。
WordPressのカスタムHTMLブロックに貼れる形、という出力形式も伝えています。

ここまで伝えれば、AIは単に見た目だけのコードではなく、実際にページへ貼り付けて確認できるHTML/CSSを作りやすくなります。

このとき、class名の指定も重要です。

たとえば、単に hero や button というclass名にすると、WordPressテーマや既存CSSとぶつかる可能性があります。
そこで、今回のように inquiry-mini-hero という固有の接頭辞を付けます。

これにより、CSSの影響範囲を限定しやすくなります。

たとえば、

inquiry-mini-hero
inquiry-mini-hero__inner
inquiry-mini-hero__text
inquiry-mini-hero__image
inquiry-mini-hero__button

のようなclass名にしておけば、このLPファーストビュー専用のCSSとして管理しやすくなります。

また、リンク先が未定でも、コーディング作業を止める必要はありません。

今回のように、

無料で試す → #download
相談してみる → #contact

という仮リンクを入れておけば、まずはデザインとレイアウトの確認を進められます。

後から実際のリンク先が決まった時点で、

/download/
/contact/
/inquiry-mini/
/request/

などに差し替えればよいのです。

この進め方は、LP制作ではかなり実務的です。

デザイン、コピー、フォーム、ダウンロード導線がすべて完全に決まるまでコーディングを止めてしまうと、制作スピードが落ちます。
一方で、仮リンクを使って先にレイアウトを組めば、全体像を早く確認できます。

AIを使う場合も同じです。

最初から完璧な指示を出す必要はありません。
まずは、カンプ画像をもとにHTML/CSSのたたき台を作る。
次に、表示を見ながら余白、文字サイズ、ボタン位置、スマホ表示を調整する。
最後に、実際のフォームやダウンロードページへリンクを差し替える。

このように段階的に進めることで、AIはコーディング作業のかなり実用的な補助役になります。

ここで大切なのは、AIに「全部自動で作って」と丸投げするのではなく、人間側が制作意図を整理して伝えることです。

どの要素を画像にするのか。
どの要素をHTMLにするのか。
どのボタンをどの導線にするのか。
スマホでは何を先に見せるのか。
WordPressにどう貼るのか。

これらを伝えれば、AIはかなり具体的なHTML/CSSを返してくれます。

つまり、AIを使ったコーディングでは、プロンプトそのものが簡単な仕様書になります。

デザインカンプを見ながら、実装方針を言語化する。
その言語化した内容をAIに渡す。
AIがHTML/CSSのたたき台を作る。
人間が確認し、修正指示を出す。

この流れができると、LPやホームページ制作の初期コーディングはかなり効率化できます。

なお、このH2-5の後には、実際にAIが作成したHTML/CSSの途中状態を見せる画像があると、記事の説得力が上がります。

【画像挿入候補】
図C10　AIに指示して作成したHTML/CSS版ファーストビューの途中イメージ

C10は、まだ今すぐ生成しなくても大丈夫です。
記事を最後まで書いたあとで、実際のHTML/CSSコードを作成し、ブラウザ表示をスクリーンショット化して挿入する方が自然です。

H2-6 AIが担えるコーダー的な作業

ここまで見てきたように、AIを使ったLP制作では、単に「画像を作る」だけでなく、デザインカンプを実装できる形へ分解していく作業が重要になります。

そして、この分解作業こそ、従来はコーダーが担ってきた領域です。

デザインカンプを見て、

これは画像として書き出す。
これはHTMLの見出しとして組む。
これは本文テキストとして配置する。
これはCSSでボタンにする。
これはPCでは横並び、スマホでは縦並びにする。
これはリンク先が決まったら差し替えられるようにしておく。

このような判断を積み重ねて、1枚のデザインをWebページとして再構築していきます。

今回のLPファーストビューでも、AIとやり取りしながら、まずA10のデザインカンプを確認しました。

A10は、左側にコピーとボタン、右側にイラストがある完成イメージに近い画像です。

しかし、Webページとして使うには、そのまま1枚画像で貼るのでは不十分です。
そこで、右側のイラストだけを画像として抽出し、左側の見出し・本文・ボタンはHTML/CSSで組む方針にしました。

この時点で、AIは単なる画像生成ツールではなく、コーディング前の設計整理を支援する役割を果たしています。

たとえば、AIが支援できるコーダー的な作業には、次のようなものがあります。

デザインカンプの構造を読み取る。
画像として残す部分を判断する。
HTMLテキストとして組む部分を整理する。
見出し、本文、ボタン、補足文などの構造を作る。
PCとスマホでのレイアウト方針を提案する。
CSSで余白、文字サイズ、色、ボタン形状を指定する。
CTAボタンをリンクとして機能させる。
WordPressのカスタムHTMLブロックに貼れる形へまとめる。

これは、かなり実務的なコーディング支援です。

もちろん、AIがすべてを完璧に判断するわけではありません。
しかし、人間が「何をしたいのか」を整理して伝えれば、AIはその方針に沿って、HTML/CSSのたたき台を作ることができます。

今回のようなLPファーストビューであれば、AIに次のような条件を伝えることで、かなり具体的なコード化が可能になります。

PCでは、左にテキスト、右に画像の2カラムにする。
スマホでは、テキスト、画像の順に縦並びにする。
大見出しは太く大きくする。
緑をメインカラーにする。
相談ボタンはオレンジで目立たせる。
ボタンは画像ではなく、クリックできるaタグにする。
リンク先は未定なので、仮で #download と #contact にする。
WordPressに貼れるように、HTMLとCSSを1セットで出す。
既存テーマとぶつからないよう、class名には固有の接頭辞を付ける。

このように条件を渡せば、AIは単なる見た目の再現だけでなく、実装に必要な構造まで含めてコードを作成できます。

ここで特に重要なのは、AIが「コーダーの代わりに全部やる」というより、コーダーが最初に行う分解と下書きを高速化するという点です。

ゼロからHTML/CSSを書き始める前に、まずAIにたたき台を作らせる。
そのコードを見ながら、余白、文字サイズ、行間、ボタンの大きさ、スマホ時の見え方を調整する。
さらに、WordPress上で実際に貼り付けて確認する。

この流れにすると、制作の初動がかなり速くなります。

従来であれば、デザインカンプを見て、コーダーが頭の中で構造を整理し、HTMLを書き、CSSを書き、ブラウザで確認しながら調整していました。

AIを使うと、この最初のたたき台作成までを短時間で進められます。

たとえば、次のようなコード構造をAIに作らせることができます。

<section class="inquiry-mini-hero">
  <div class="inquiry-mini-hero__inner">
    <div class="inquiry-mini-hero__text">
      <p class="inquiry-mini-hero__label">小規模事業者向け｜問い合わせ対応DX</p>
      <h1>問い合わせ対応に追われて、<br>気づけば夕方。</h1>
      <p class="inquiry-mini-hero__lead">『あれ、本業どこいった？』<br>そんな毎日を、そろそろ変えませんか？</p>
      <div class="inquiry-mini-hero__buttons">
        <a href="#download">無料で試す</a>
        <a href="#contact">相談してみる</a>
      </div>
    </div>
    <div class="inquiry-mini-hero__image">
      <img src="hero-image.png" alt="問い合わせ対応に追われる担当者のイラスト">
    </div>
  </div>
</section>

このようなHTML構造ができれば、あとはCSSでカンプの雰囲気に近づけていきます。

ここで、AIが出したコードをそのまま完成品として使う必要はありません。
むしろ、最初は「たたき台」として見るべきです。

実際の制作では、

見出しが大きすぎないか。
本文の行間は読みやすいか。
ボタンはスマホで押しやすいか。
画像は大きすぎないか。
右側画像と左側テキストのバランスは良いか。
WordPressテーマのCSSと干渉していないか。

こうした点を確認しながら、人間が調整していきます。

ただ、最初の骨組みをAIが作れるだけでも、制作工程はかなり変わります。

特に、LPのファーストビューやサービス紹介ブロックのように、構成がある程度決まっているパーツでは、AIはかなり実用的です。

見出し。
本文。
画像。
ボタン。
補足文。
2カラム。
スマホ縦並び。

このような定番の構造であれば、AIは十分にコーディング支援として使えます。

つまり、AIが担えるコーダー的な作業とは、単にHTMLタグを書くことではありません。

デザインカンプを見て、Webページの構造に置き換えること。
画像とHTMLテキストを分けること。
CSSで再現すべき部分を整理すること。
CTAやフォーム導線を実装要素として組み込むこと。
レスポンシブ対応を前提にレイアウトを考えること。

この一連の作業を、AIと会話しながら進められるようになってきたことが大きなポイントです。

【画像挿入候補】
図C10　AIに指示して作成したHTML/CSS版ファーストビューの途中イメージ

この画像は、実際にHTML/CSSを組んだ段階で、ブラウザ表示をスクリーンショットとして用意するとよいです。
記事の流れとしては、A10、B10に続いて、C10で「ここまでコーディングできた」という途中状態を見せると、非常に分かりやすくなります。

H2-7 それでも人間のデザイナー・コーダーが必要な理由

AIがここまでコーディング支援できるようになると、デザイナーやコーダーの中には不安を感じる人もいるかもしれません。

AIでデザインカンプを作れる。
AIで画像部分とHTML/CSS部分を分解できる。
AIでHTML/CSSのたたき台も作れる。
ボタンもリンクも、レスポンシブ対応もある程度できる。

そう聞くと、「では、人間のデザイナーやコーダーは不要になるのではないか」と感じるのも自然です。

しかし、実際にはそう単純ではありません。

AIは、たたき台を作ることは得意です。
定番のレイアウトを組むことも得意です。
指示された条件に沿って、HTML/CSSを生成することもできます。

ただし、LPやホームページ制作で本当に重要なのは、コードが書けることだけではありません。

そのページで何を達成したいのか。
誰に向けたページなのか。
どのメッセージを一番強く伝えるべきなのか。
どのボタンを最優先で押してほしいのか。
フォームまでの導線は自然なのか。
スマホで見たときに、本当に読みやすいのか。

こうした判断は、まだ人間の役割が大きい部分です。

たとえば、AIが作ったファーストビューのコードが、見た目としてきれいだったとしても、それが成果につながるとは限りません。

見出しが弱ければ、読者は読み進めてくれません。
ボタン文言が曖昧なら、クリックされません。
右側の画像が大きすぎれば、肝心のメッセージが目立たなくなります。
スマホでボタンが下に行きすぎれば、行動されにくくなります。

こうした実務上の判断は、単にHTML/CSSが書けるかどうかとは別の問題です。

特にLPでは、デザインとコーディングだけでなく、マーケティング導線が重要です。

「無料で試す」というボタンを上に置くべきか。
「相談してみる」を目立たせるべきか。
最初は資料ダウンロードに誘導するべきか。
問い合わせフォームへ直接つなげるべきか。
ページ内の下部に料金や事例を置いた方がよいのか。

このような判断は、事業内容、顧客層、商品単価、営業フローによって変わります。

AIは一般的な提案はできますが、その会社の事情、サービスの売り方、顧客対応の現場感までは、最初から完全には分かりません。

だからこそ、人間のディレクター、デザイナー、コーダーが必要になります。

ただし、その役割は少し変わっていくと思います。

これまでのように、すべてを手作業でゼロから作る役割から、AIを使ってたたき台を作り、それを判断し、修正し、完成度を上げる役割へ変わっていく可能性があります。

つまり、これから重要になるのは、AIに置き換えられるかどうかではなく、AIを使って制作工程をどう速く、どう正確に進めるかです。

人間が担うべき役割は、次のような部分に残ります。

目的に合った構成を決める。
誰に向けたページなのかを整理する。
コピーやCTAの優先順位を決める。
ブランドの雰囲気に合っているか確認する。
PCとスマホで本当に使いやすいか検収する。
WordPressや既存サイトに組み込んだときの表示を確認する。
フォーム導線やコンバージョン導線を最終判断する。

これらは、単純なコード生成とは違います。

AIが作ったHTML/CSSを見て、
「この構造でよい」
「ここは見出しを変えた方がよい」
「ボタンをもう少し上に出した方がよい」
「スマホでは画像より先にCTAを見せたい」
「このclass名は既存テーマとぶつかりそう」
と判断できる人間が必要です。

むしろ、AI時代には、この判断力の価値が上がる可能性があります。

AIがコードのたたき台を速く作れるようになるほど、人間側には、より的確な指示と検収が求められます。

なんとなく「いい感じに作って」ではなく、

この画像は右カラムに使う。
左側はHTMLテキストで組む。
ボタンは2つ。
リンク先は仮でよい。
スマホでは縦並び。
WordPressに貼れる形にする。
class名は固有化する。

このように、実装方針を言語化できる人が、AIをうまく使えます。

これは、デザイナーやコーダーにとって脅威であると同時に、大きなチャンスでもあります。

AIによって、単純な作業や初期コード作成は速くなります。
その分、人間は、より上流の設計、判断、調整、品質確認に時間を使えるようになります。

今回のA10からB10、そしてHTML/CSS化へ進める流れも、AIだけで勝手に完成したわけではありません。

人間が、カンプ画像を見て、
「左側はHTML/CSSで作る」
「右側は画像として使う」
「ボタンは本物のリンクにする」
「スマホ対応まで考える」
と判断したから、実装に進める形になりました。

AIは強力な相棒ですが、制作意図を決めるのは人間です。

その意味で、AI時代のWeb制作者に求められるのは、単にコードを書く力だけではありません。

デザインをWebページの構造として読み解く力。
AIに的確に指示する力。
出てきたHTML/CSSを判断する力。
ユーザー導線や事業目的に合っているかを確認する力。

こうした力が、これからますます重要になっていくと感じます。

AIによって、デザイナーやコーダーの仕事がすぐになくなるわけではありません。
ただし、作業の進め方は確実に変わっていきます。

AIを使わない人と、AIを使って制作工程を短縮できる人の差は、少しずつ大きくなるはずです。

だからこそ、これからのWeb制作者は、AIに仕事を奪われるかどうかを心配するだけでなく、AIを使って自分の制作力をどう拡張するかを考える必要があります。

H2-8 AIで仕事はなくなるのか？むしろ変わるのは制作工程

AIでLPやホームページのコーディングができるようになってくると、どうしても出てくる疑問があります。

それは、

「AIでコーダーの仕事はなくなるのか？」
「AIでWebデザイナーの仕事はなくなるのか？」
「デザインカンプからHTML/CSSまでAIが作れるなら、人間は不要になるのか？」

という不安です。

この不安は、とても自然なものだと思います。

実際、今回のようにAIとやり取りしながら、LPのデザインカンプを作り、画像部分を切り出し、HTML/CSSで組む方針まで整理できるようになると、これまで人間が時間をかけていた作業の一部は、かなり短縮されます。

たとえば、LPのファーストビューであれば、

デザイン案を作る。
画像として使う部分を分ける。
HTML化するテキストを整理する。
ボタンをリンクとして作る。
PCとスマホのレイアウトを考える。
WordPressに貼れるHTML/CSSのたたき台を作る。

こうした作業は、AIによってかなり効率化できます。

では、それによって人間の仕事はなくなるのでしょうか。

私は、単純に「なくなる」と考えるより、制作工程が変わると考えた方が現実的だと思います。

これまでのWeb制作では、デザイナーがカンプを作り、コーダーがそれをHTML/CSSに変換し、ディレクターが全体を確認する、という流れが一般的でした。

もちろん、今でもこの流れは重要です。

しかし、AIを使うことで、この中の一部の作業をかなり前倒しで進められるようになります。

たとえば、デザインカンプを作った段階で、すぐにAIに見せて、

どこを画像にするか。
どこをHTMLテキストにするか。
どこをCSSで再現するか。
スマホではどう並べるか。
ボタンはどの導線につなげるか。

を相談できます。

これは、従来であればコーダーが実装に入るタイミングで考えていたことです。

しかしAIを使えば、デザイン段階から実装視点を入れられます。

この変化はかなり大きいです。

なぜなら、デザインを作ってから「これは実装しづらい」「スマホで崩れそう」「ボタンが画像になっていて使いにくい」と気づくのではなく、最初から実装しやすい構造に近づけられるからです。

つまりAIは、単にコーダーの仕事を奪う存在ではなく、デザインとコーディングの間にある確認作業を早める存在として使えます。

今回のA10からB10への流れもそうです。

A10は、AIが作成したLPファーストビューのデザインカンプです。
この時点では、見出しも本文もボタンも画像の中に含まれていました。

しかし、そのままでは実用的なLPにはなりません。

そこで、AIと相談しながら、

右側のイラストだけを画像として使う。
左側の見出し、本文、ボタンはHTML/CSSで組む。
ボタンはクリックできるリンクとして作る。
スマホ対応も前提にする。

という方針に変えました。

この工程は、AIが勝手にすべて判断したわけではありません。

人間が「この画像はそのまま使うのではなく、実装用に分解する必要がある」と判断し、その意図をAIに伝えたことで進められました。

ここに、これからのWeb制作者の役割が見えてきます。

AI時代のWeb制作者は、ただ手を動かしてHTML/CSSを書く人ではなくなっていくかもしれません。
しかしその代わりに、AIに対して的確に指示し、出てきたものを判断し、実務に使える形へ整える役割が重要になります。

たとえば、AIが作ったコードを見て、

このHTML構造でよいか。
見出し階層は自然か。
class名は管理しやすいか。
CSSは他のページと干渉しないか。
スマホ表示でCTAが見えやすいか。
フォーム導線が分かりやすいか。
WordPressに貼ったときに崩れないか。

を確認する必要があります。

これは、経験がない人にはなかなか難しい部分です。

AIがコードを出せるようになっても、そのコードが本当に実務で使えるかどうかは、人間が判断しなければなりません。

つまり、AIによって変わるのは、仕事が完全になくなるというより、作業の重心が変わるということです。

これまで時間がかかっていた初期コーディングやたたき台作成は、AIで短縮できるようになります。
その分、人間は、構成、導線、品質確認、スマホ表示、実装後の調整に時間を使うようになります。

これは、Web制作者にとって脅威でもありますが、同時にチャンスでもあります。

AIを使えば、これまでより短時間でたたき台を作れます。
複数案を比較することもできます。
カンプ段階で実装方針を確認できます。
小さなLPやサービス紹介ページなら、かなりスピーディーに形にできます。

ただし、そのためには、人間側に「AIへ何を頼むか」を整理する力が必要です。

AIに対して、

「いい感じに作って」

だけでは、実務に耐えるものはなかなか出てきません。

一方で、

「このカンプをもとに、右側画像と左側HTMLに分ける」
「PCでは2カラム、スマホでは縦並び」
「ボタンはaタグで、リンクは仮で #download と #contact」
「WordPressのカスタムHTMLに貼れる形」
「class名は固有化して既存テーマと干渉しにくくする」

と伝えれば、AIはかなり具体的な作業を進められます。

これからのWeb制作では、このような指示力が重要になります。

AIによって、コーディングの手作業そのものは減るかもしれません。
しかし、デザインを実装可能な構造へ分解する力、AIに伝える力、出てきたものを検収する力は、むしろ重要になります。

だからこそ、「AIで仕事がなくなるのか」と考えるだけでなく、
「AIを使って、自分の制作工程をどう変えるのか」と考えることが大切です。

AIは、Web制作のすべてを自動化する魔法の道具ではありません。
しかし、制作工程を大きく短縮し、デザインからコーディングへの橋渡しを強力に支援する道具にはなりつつあります。

今回の実例は、その変化をかなり分かりやすく示していると思います。

【画像挿入候補】
図D10　AIで作成したHTML/CSS版ファーストビューのPC表示イメージ

この画像は、実際にHTML/CSSを作成したあと、PCブラウザで表示したスクリーンショットを使うとよいです。
A10、B10、C10と続けて見せることで、「カンプから実装へ進んでいる」流れが伝わりやすくなります。

H2-9 AIを使ったLP制作で人間が見るべきチェックポイント

AIを使えば、LPやホームページのたたき台はかなり速く作れるようになります。

しかし、AIが作ったHTML/CSSをそのまま公開するのは危険です。

実務では、必ず人間が確認する必要があります。

特に、デザインカンプからHTML/CSSへ変換した場合は、見た目が似ているかどうかだけでなく、Webページとして機能しているかを確認することが大切です。

まず確認したいのは、構造が正しいかです。

たとえば、LPのファーストビューであれば、メインの見出しはH1として扱うのか、それともページ全体の構成上、別の見出しにするのかを考える必要があります。

画像内にあった文字をそのまま段落にするだけではなく、

上部ラベル。
大見出し。
サブコピー。
本文。
CTAボタン。
補足文。

というように、意味のある構造になっているかを確認します。

次に、画像とテキストの分担が適切かを確認します。

今回の例では、右側の人物イラストは画像として使い、左側の見出しや本文、ボタンはHTML/CSSで組む方針にしました。

この分け方は自然です。

しかし、別のカンプでは、アイコンだけ画像にした方がよい場合もあります。
背景装飾はCSSで再現した方がよい場合もあります。
ロゴや図解は画像として残した方がよい場合もあります。

AIが提案した分け方をそのまま受け入れるのではなく、保守性や表示速度、スマホ対応を考えて判断する必要があります。

次に、ボタンやリンク導線が正しいかを確認します。

LPでは、ボタンはとても重要です。

見た目としてボタンになっていても、リンク先が間違っていれば意味がありません。
リンク先が仮のまま公開されても問題です。
また、資料請求へ誘導したいのに、問い合わせフォームへ飛ばしてしまうと、ユーザーの行動とページの目的がずれてしまいます。

AIに作らせた段階では、

#download
#contact

のような仮リンクを使うことがあります。

これは制作途中では便利です。

しかし、公開前には必ず本番のURLへ差し替える必要があります。

たとえば、

/download/
/contact/
/request/
/inquiry-mini-download/

のように、実際の導線に合わせて設定します。

この確認は、人間が責任を持って行うべきです。

次に、スマホ表示を確認することも重要です。

AIがレスポンシブ対応のCSSを作っていても、実際にスマホで見たときに読みやすいとは限りません。

PCではきれいに見えても、スマホでは、

見出しが大きすぎる。
本文が長く感じる。
ボタンが下に行きすぎる。
画像が大きすぎる。
余白が広すぎる。
CTAがファーストビュー内に収まらない。

ということがあります。

特にLPでは、スマホで最初に見える範囲がとても大切です。

ユーザーがページを開いたときに、

何のページか。
どんな悩みを解決するのか。
次に何をすればよいのか。

がすぐに分かる必要があります。

そのため、AIが作ったレスポンシブCSSは、必ずスマホ表示で確認し、必要に応じて調整します。

次に、既存サイトやWordPressテーマとの干渉を確認します。

WordPressにHTML/CSSを貼る場合、テーマ側のCSSやプラグインのCSSとぶつかることがあります。

たとえば、

button
hero
container
title

のような一般的なclass名を使うと、他のCSSの影響を受ける可能性があります。

今回のように、

inquiry-mini-hero
inquiry-mini-hero__inner
inquiry-mini-hero__text
inquiry-mini-hero__button

のように固有の接頭辞を付けると、干渉を避けやすくなります。

AIにコードを作らせるときも、このようにclass名のルールを指定しておくと安全です。

次に、コピーや表現が事業目的に合っているかを確認します。

AIは自然な文章を作れます。
しかし、その文章が本当にサービスの売り方に合っているかは、人間が判断しなければなりません。

たとえば、「無料で試す」というボタンが良いのか。
「無料ダウンロード」の方が良いのか。
「まずは相談する」の方が良いのか。
「問い合わせ対応を自動化する」という表現が強すぎないか。
「小さく試せます」という表現がサービスの導入ハードルを下げているか。

こうした微妙な判断は、サービス内容や顧客層を理解している人間の方が得意です。

また、画像の印象がページの目的に合っているかも確認します。

今回のB10画像は、問い合わせ対応に追われている人物を表現しています。
これは、LPの導入部分としては分かりやすい表現です。

ただし、あまり不安を強く見せすぎると、ページ全体が暗くなる可能性もあります。
逆に、明るすぎるイラストだと、課題感が伝わりにくくなります。

このバランスも、人間が見て判断する必要があります。

AIを使ったLP制作では、次のようなチェックリストを持っておくと安全です。

□ カンプをそのまま画像で貼っていないか
□ HTML化すべき文字が画像内に残っていないか
□ ボタンが本物のリンクになっているか
□ 仮リンクが本番URLへ差し替えられているか
□ PC表示でレイアウトが崩れていないか
□ スマホ表示で読みやすいか
□ 画像が大きすぎないか
□ 見出しと本文の強弱が適切か
□ CTAが分かりやすいか
□ class名が既存CSSと干渉しにくいか
□ WordPressに貼ったときに表示が崩れないか
□ フォーム導線が目的に合っているか
□ コピーがサービス内容と合っているか

このように、AIが作ったものを確認する視点を持つことが重要です。

AIを使えば、制作スピードは上がります。
しかし、品質確認を省略してよいわけではありません。

むしろ、AIがたたき台を速く出してくれるからこそ、人間は検収や改善に時間を使うべきです。

これからのWeb制作では、AIにコードを書かせる力だけでなく、AIが作ったものを正しく評価する力が必要になります。

AIに任せる部分と、人間が判断する部分を切り分ける。
この考え方が、LPやホームページ制作でAIを実務活用するうえで、とても大切です。

【画像挿入候補】
図E10　スマホ表示で確認したLPファーストビューのイメージ

この画像は、実際のHTML/CSSをスマホ幅で表示したスクリーンショットを使うのがよいです。
PC表示だけでなくスマホ表示も見せることで、レスポンシブ対応まで行っていることが伝わります。

H2-10 まとめ｜AIはWeb制作の代替ではなく、実装支援の相棒になる

今回の記事では、AIが作成したLPファーストビュー用のデザインカンプをもとに、Webページとして実装していく流れを紹介しました。

最初に用意したA10は、AIが作成したデザインカンプです。

見出し、本文、ボタン、右側イラストまで含まれており、一見するとそのままLPとして使えそうに見えます。

しかし、実際のWebページとして考えると、そのまま1枚画像として貼るだけでは不十分です。

画像内の文字はHTMLテキストではありません。
画像内のボタンはクリックできません。
スマホ表示では文字が小さくなる可能性があります。
あとから文言や導線を修正するのも大変です。

そこで、A10をもとに、AIと相談しながら構造を分解しました。

右側の人物イラスト、メール、時計、書類、吹き出しは画像として使う。
左側のラベル、見出し、本文、補足文はHTMLテキストとして組む。
ボタンはHTMLのリンクとして作り、CSSでデザインする。
PCでは2カラム、スマホでは縦並びにする。
リンク先が未定なら、まずは仮リンクで組み、後からフォームURLへ差し替える。

このように分解した結果、B10のような右側イラストだけの画像を作成し、左側はHTML/CSSで組む方針を明確にできました。

この流れは、まさにコーダーがデザインカンプを見て行う作業です。

どこを画像として使うか。
どこをHTMLとして組むか。
どこをCSSで再現するか。
どこをリンクやボタンとして機能させるか。
スマホではどの順番で表示するか。

AIは、このような分解とたたき台作成をかなり支援できるようになっています。

もちろん、AIがすべてを自動で完璧に仕上げるわけではありません。

LPやホームページ制作には、まだ人間の判断が必要です。

このページは誰に向けたものか。
どのCTAを優先するべきか。
コピーはサービス内容に合っているか。
スマホで読みやすいか。
フォーム導線は自然か。
WordPressに貼ったときに崩れないか。
公開してよい品質になっているか。

こうした判断は、人間のディレクター、デザイナー、コーダーが見るべき部分です。

しかし、AIを使うことで、制作工程は大きく変わります。

これまで時間をかけていた初期の分解作業やHTML/CSSのたたき台作成を、AIと会話しながら進められるようになります。

これにより、LPやホームページ制作では、

最初の案を早く出す。
複数パターンを比較する。
実装前に構造を確認する。
スマホ対応を早い段階で考える。
フォーム導線まで含めて設計する。

といったことがしやすくなります。

つまりAIは、Web制作者を完全に置き換える存在というより、制作工程を短縮し、実装のたたき台を作る相棒として捉えるのが現実的です。

特に、LPのファーストビューやサービス紹介ブロックのように、構造がある程度決まっているパーツでは、AIはかなり実用的です。

デザインカンプを読み取り、画像とHTMLを分け、CSSで再構築し、CTAボタンをリンクとして組み込み、レスポンシブ対応まで進める。

ここまでできるようになっていることは、Web制作の現場にとって大きな変化です。

これからのWebデザイナーやコーダーに求められるのは、AIに仕事を奪われるかどうかを心配することだけではありません。

AIに何を任せるか。
人間がどこを判断するか。
どのように指示すれば実務に使えるコードが返ってくるか。
出てきたコードをどのように検収し、改善するか。

この力がますます重要になります。

AIでLPやホームページのコーディングはできるのか。

今回の実例から言えば、答えは「かなりできるようになってきている」です。

ただし、それは人間が不要になるという意味ではありません。

AIを使いこなす人間が、これまでより速く、実装を意識したWeb制作を進められるようになる、ということです。

デザインカンプをそのまま画像で終わらせるのではなく、Webページとして機能する形へ分解し、HTML/CSSで再構築する。

この工程をAIと一緒に進められるようになったことこそ、今回の大きなポイントです。

AIは、Web制作の代替ではなく、実装支援の相棒になる。

これからのLP制作やホームページ制作では、そのようなAI活用がますます現実的になっていくはずです。