目次
はじめに｜AIでLP作ってみたら、意外といけた
最近、個人開発している日記アプリ「omamori」のアカウント登録動線を整える必要があり、ランディングページ（LP）の準備に取りかかることになりました。
LP制作はWeb制作の一部ですが、わたしはコーダー・エンジニアなので普段は実装がメインです。
デザインは好きなものの、正直ちょっと苦手意識があり「なんか垢抜けない」「なんかちょっとイマイチなんだよな・・・」と悩むことが多く、納得のいくデザインに仕上げるにはかなりの時間と試行錯誤が必要でした。
もちろん、ライティングも専門外なので、やろうとするとそれだけで数日かかってしまうことも・・・
でも最近、AIツールが一気に増えていて「使いこなせたらかなり時短になるのでは…？」という期待もあり。せっかくなので今回はLP制作を “実装以外まるっとAIに頼ってみる” ことにしました！
（ちなみに実装については、最近はhtmlのたたきをAIに作ってもらうことが多いです）
【実体験】私のAI LP制作ワークフロー全公開
今回、私がLP制作で実際にAIをフル活用したワークフローは以下の通りです。
それぞれのフェーズで最適なAIツールを選定し、連携させることで、驚くほどの効率化が図れました 🎉
- LP骨格構図: Perplexityで競合調査＆事業計画の作成 → ChatGPTで仕上げ
- ワイヤーフレーム＆デザインたたき: Relume
- デザイン: FigmaでRelumeからインポートしたデザインたたきをベースに仕上げる → ChatGPTにフィードバックをもらいブラッシュアップ
- 画像生成: Sora
それでは、各フェーズでAIをどのように活用したのか、具体的にご紹介していきます。
LP骨格構図：PerplexityとChatGPTで“伝わる”構成を設計する
このフェーズは、Perplexityで競合調査・構成のたたき台を作成し、chatGPTでブラッシュアップを行うという体制で進めました。
Perplexity｜競合調査と構成のたたき台作りに
まずは「そもそもLPってどう構成すればいいんだっけ？」というところからスタート。
今回はすでにアプリのコンセプトや仕様は決まっていたので、それを伝えた上で競合を調査してもらいました。
それを踏まえてどのように差別化すべきかを相談しつつ、似たジャンルのプロダクトのLP構成を分析し、LPの骨格構図の作成を指示。
Perplexityは、特定の質問に対してWeb上の情報をまとめてくれるので、リサーチの手間が大幅に削減できます。
出てきた情報をもとに、「どんなセクションを入れるべきか」「どんな順番が自然か」といったたたき台を作るのにすごく便利でした。
ChatGPT｜自分の文脈を理解してくれる相棒🤝
構成がある程度見えてきたところで、文言の調整やセクションの目的整理などはChatGPTにお任せ。
普段からアプリのターゲット層や背景を相談するなど使い倒していたので、ざっくりと「このアプリのコンセプトに合った表現にしたい」と伝えるだけでも、かなり的確な提案をしてくれました。
文章の“トーン”を整えてくれる感覚に近く、ライティングに苦手意識がある人には特にありがたい存在です。
ワイヤーフレーム＆デザインたたき：Relumeでアイデアを形にする高速プロトタイピング
LPの骨格構図が固まったら、いよいよワイヤーフレームとデザインたたきの作成です。ここで今回試したのがRelumeというツールです。
今回初めて使ったのですが、驚くほど簡単にセクション構成をもとにワイヤーフレーム〜簡易デザインまで自動で出してくれます。色やフォントもいくつか選べるので、完全に“ゼロから考える”必要がないのがありがたい。
出力してもらったワイヤーフレームがこちら。
ベータ版のようですが、デザインはこんな感じで仕上げてくれます。
そこまでこだわらないようであれば、改行位置や文字サイズ・画像の差し替えくらいである程度使えるデザインになりそうです。
Relumeはエクスポート先としてFigmaを選択できるので、この後の調整フェーズもスムーズに進めました。
Figma + ChatGPT｜見た目のブラッシュアップもAIと一緒に
RelumeからFigmaにエクスポートした後、細かいデザインの仕上げに入ります。
この時も「ボタンの色、これで浮いてないかな？」「この文言、ちょっと硬すぎるかな？」みたいな微調整をChatGPTに聞きながら進行。
デザインでフィードバックが欲しい部分は、スクショを添付してアドバイスをもらいつつブラッシュアップしていきました。
画像を提供しての指示はあまり的確なものが返ってきたことがなかったので、正直期待していなかったのですが🥹
予想外に的確なアドバイスをもらえて、個人的には満足のいく仕上がりになりました。
仕上がりはこんな感じ👇
Sora｜画像生成もAIにおまかせ
ビジュアル面で助けになったのがSora。
参考画像をアップロードして似た雰囲気の画像を生成・調整できるので、デザインにぴったりのビジュアルが用意できました。
実写っぽくもできるし、イラスト調もOK。画像生成の自由度が高く、時間のかかる素材探しからも解放されました。
この辺のアイコンイラストもSoraで作成しました。
作業時間、体感で半分以下でした
普段なら「構成考えるのに半日」「文言を考えるのに1日」「ワイヤー作るのに1-2日」「デザインの微調整でさらに半日…」と積み上がっていく作業が、今回は全体で1〜2日で完了。
特にライティングとデザインへのハードルが一気に下がったのが大きく、「とりあえずやってみるか」と思えたことで前に進みやすくなったのも良かったポイントでした。
まとめ｜AIを活用したLP制作は、エンジニアの強い味方になる
今回やってみて思ったのは、「AIに助けてもらえば、自分ひとりでも“ちゃんとしたLP”が作れるんだな」ということ。
もちろん、人の手で仕上げる部分はまだまだあるけど、ゼロから悩んで進まないよりずっといい。特に自分のプロダクトのためのLPなら、クオリティ的にも十分満足できるレベルでした。
私と同じように「デザインもライティングも、ちょっと自信ないな…」というフロントエンドの人には特におすすめ。
AIの力を借りることで、開発スピードもモチベも爆上がりしたので、今後もこの流れはどんどん取り入れていきたいなと思いました😊
