#7 AIでWebページ（LP）作成、知識ゼロからチャレンジしてみた話。
やったことないけど、やってみたら形になった話。
無料登録していただいた方へ、以下をプレゼントしています。
・私の気に入っているMidjourneyのsrefコード10
・マンガ風画像生成midjourney用プロンプト
・SUZURI 2025年春：売れるデザイン＆企画ガイド
LP（ランディングページ）わかりますか？
セールスでよく使われる縦に長くスクロールでき、途中に数ヶ所に申し込みボタンがあったりするページです。
そのLPをAIで作れないか聞かれ、
やったことなかったけど作ってみました。
AIを使うと知識がなくても、
それなりにできるという話です。
📝 目次
* まずは、ChatGPTで構成を作成
* Gensparkで大枠デザインを作る
* ChatGPTとVS Codeで本格作業スタート
* 試行錯誤しながら、完成へ
---
【まずは、ChatGPTで構成を作成】
見出しや文章の流れなど、
ざっくりとした土台を作るところからスタート。
売りたいものをChatGPTに伝え、
LPの構成を作ってもらいました。
反応の取れる構成を調べて、
〇〇のランディグページの構成を作ってください。
確かこんな感じのことをChatGPTに入力し、
構成を作ってもらいました。
【Gensparkで大枠デザインを作る】
次に、GensparkというチャットAIを使って、
ページの大まかなデザイン（レイアウト）を作成。
ChatGPTに作ってもらった構成と、
エレガントなLPを作ってください、と入力しました。
デザインやweb作成の知識がない私でも、
一応それっぽいページができました。
この段階で、
「もしかしたら最後までいけるかも」と思い始めました。
【ChatGPTとVS Codeで本格作業スタート】
ここから、本格的にコード編集を始めました。
Gensparkで作ったLPのhtmlコードをコピーし、
VS Codeというコードエディタに貼り付けて準備完了です。
VS Codeとは、無料で使えるコードエディタです。
Pythonコードを扱うときに使うものだと思ってましたが、
htmlも使えるのを知りませんでした。
ChatGPTとVS Codeを連携させて、
あとは「ここを直したい」と伝えるだけ。
ChatGPTがVS Codeでhtmlコードを修正してくれました。
【試行錯誤しながら、完成へ】
途中、うまく表示されなくて、
ちょっとつまずきました。
それでも、 ChatGPTに相談したり、
自分でVS Codeを直接修正したりしながら、
時間はかかりましたが、
無事にLPを完成させることができました。
デザインの知識もないので、
プロの人の作るLPに比べたら、
素人っぽさは否めません。
でも、「知識ゼロから形にできた」ことは、
自分でも驚くような大きな一歩でした。
他にもChatGPTと連携できるアプリがありそうですね。
ChatGPTがあったからこそ、
形にすることができました。
やってみたらできるものですね。
気になっていることがあるなら、
試してみると意外とできるかもしれません。
最後まで読んでくれて、ありがとうございます！
SNSもよろしくお願いします。
無料登録していただいた方へ、以下をプレゼントしています。
・私の気に入っているMidjourneyのsrefコード（未公開）
・マンガ風画像生成midjourney用プロンプト
・SUZURI 2025年春：売れるデザイン＆企画ガイド