こんにちはNappsの榎本です。今日は5/28にXで紹介したGPT4oとSTUDIOで爆速でLPを作る方法を詳細に紹介します。
LP設計を行う
まず初めにLPの全体設計を行うためにLPの目的を示し、構成案を考えてもらいます。
結果を全て載せるとこうなります
STUDIOでパーツを配置する
次に構成案にそってSTUDIO上でパーツを配置していきます
新しくページを作成し、追加→セクションと選択し、構成に沿って近しいパーツを選択し追加しワイヤフレームを作成します
GPT-4oでデータを流し込む
ワイヤーフレームが完成したらパーツ単位でスクリーンショットを撮影します
このスクリーンショットをGPT4oに渡して下記のプロンプトを入力します
ChatGPT上はこのようになります
スクリーンショット内の構成をGPT-4oが解析し、それぞれの要素に対応する文章を作成出力してくれます。H1タグP1タグなどの指定なく画像で指示を出せるのでスクリーンショットを渡すだけでサクサク文章が完成します
この文章をコピペでSTUDIOに流し込んで行きます。
FAQなどは適当にQとAを考えてくれます(笑)
色味を調整
この状態では、白黒のLPになってるので、色についてアドバイスくださいと書くと色を教えてくれます
カラーコードの出力をお願いするとコードを出力してくれるので、STUDIOに適用していきます
画像の作成
画像についてもDALLEで作ってもらえますが、ここは画面キャプチャをベースに、CanvaのSmartMockupで枠を入れるのが速そうです
まとめ
STUDIOとGPT4oを使うと1時間程度でページの作成ができるのでぜひ皆さんもやってみてください。実際作成できたページは下記になります