無料AIにLPを作ってもらおう！

こんにちは、SD Exportデザインチームの瀧口です。

最近のAIって賢いですよね。皆さんもAIに簡単な指示をするだけで、想像以上の回答が返ってくるという経験をしたことがあるのではないでしょうか。

私自身の話でいえば、SNSで流れてくる動画コンテンツを純粋に「すごい！」と感じる前に「これってAIじゃないのか？」と疑うようになり、
最近では街中でおばあちゃんを見て「あの質感はAI生成かも」となぜか考えてしまうくらいには、AI生成というものが生活に溶け込んでいると感じます。

そんなAIを上手く活用すれば、業務が効率化されるのは言うまでもありません。
実際AIはどこまでの実力を持っているのか、 今回は私の業務のひとつでもある「LP作成」をAIに行わせてみようと思います。

この記事内で行うこと

• AIへの指示だけで、フォーム付きのLPを作成する
• 出来上がってきたLPに、細かい指示を出し修正する
• フォームへの入力内容を確認できる環境を構築する

今回使用する生成AIツール

今回はGoogle AI Studioという生成AIツールを使用しました。
Google AI StudioはChatGPTなどの一般的な生成AIツールとは異なり、プロジェクトやアプリなどを作成する開発者向けの生成AIツールです。
また、ブラウザ上で利用できるため特別なソフトをインストールする必要はなく、Googleアカウントがあれば誰でも無料で使用することができます。

早速AIに指示をしてみよう！

今回フォーム付きLPを作成する上で、まず行った指示は以下です。

「架空のパーソナルトレーニングジムのLPをデザインして」

すると たった90秒 で、こちらのものが生成されました。

▼PC版

▼SP版

▼コードも生成されます

正直な感想：「 え...もうAIでよくね？ 」

ゼロの状態からたった90秒で、このクオリティのフォーム付きLPができてしまうのです。
世界中を探してもこのスピードで作業できる人はいません、、。

ですが、もちろん細かいところを見ると 修正点はたくさんあります。
では修正してほしいところも簡単に修正してくれるのか、確かめてみましょう！

AIに修正を指示してみよう！

生成してもらったLPについて、簡単な修正をお願いしてみましょう。
試しにSP版の見出し文字のレイアウトや改行位置、プログラムの価格部分の変更などをお願いしてみます。

▼Before
　　　　

行った指示は以下です。

モバイル版のレイアウトにて、以下の調整をお願いします。
・「理想の自分へ、最短距離で。」の文字を左揃えにしてください。また、「最短距離」の文字サイズをもう少しだけ大きくしてください。
・「ただ痩せるのではない。」を1行で収まるように調整してください。
・「ZENITHが選ばれる3つの理由」を「ZENITHが選ばれる」で改行してください。

その結果がこちらです。

▼After
　　　　

こちらからの指示を反映することができました。
その他に内容の変更やアイコンのカラー変更はもちろん、スムーススクロールの実装もできました。

また、文字サイズや文字間隔の細かい部分は、より厳密な指示をするかコードを直接修正することで調整できます。

フォームを動作させよう！

今回作成したLPでフォームがあるのですが、こちらはまだ実際に送信することはできません
なのでフォームも実用的に動作するようにしてもらいましょう！

フォームに入力した内容を実際に受信したいです

するとAIから次のような返信が来ました。

方法1：外部のフォーム連携サービスを利用する（おすすめ・最も簡単）
「Formspree」「Web3Forms」「formrun」などの無料サービスを利用する方法です。
お客様ご自身でサービスに登録し、通知を受け取りたいメールアドレスを設定します。
サービスから発行された「専用のURL（エンドポイント）」または「アクセスキー」をこのチャットで私に教えていただきます。
私がそのURLをフォームの送信先に組み込みます。
※サーバーの複雑な構築が不要で、セキュリティも担保されるため、LP（ランディングページ）で最もよく使われる手法です。

方法2：独自のバックエンド（サーバー）を構築する
このアプリ内にNode.js（Express）サーバーを立ち上げ、「SendGrid」や「Resend」といったメール配信API、あるいはGmailのSMTP（アプリパスワード）を経由して送信する方法です。
※お客様ご自身でAPIキーなどの取得と、AI Studioの「Secrets（環境変数）」への設定が必要になります。

AIがおすすめしている方法1を試してみましょう。
今回はWeb3Formsを使用してみます。

通知を受け取りたいメールアドレスでWeb3Formsに登録し、アクセスキーを取得してみましょう。
詳しい手順などもAIに聞けば、全て教えてくれます。（長くなるので今回は割愛します）

取得したアクセスキーを伝えることで、フォームの入力内容が指定のアドレス宛に届くようになりました！

気が付けばあっという間にフォーム付きのLPが完成しました！
細かい調整を行えば、あとはサイトを公開するだけでLPとして使用できてしまいます。

今回作成したLPのプレビューを公開いたします。
架空のパーソナルトレーニングジムLP

最後に

それっぽいLPの作成スピードは圧倒的にAIの方が早いです。
今回細かいニーズを指示してのLP作成は行っていないのですが、対応できるのだと思います。

ですが顧客やユーザーの要望を汲み取ってデザインに落とし込む力は、まだまだヒトが勝っていると感じます。
私たちデザイナーには、これからそういう力がより求められるのかなと思います。

現在ラクーンホールディングスではエンジニア・デザイナーを募集中です！
興味を持っていただいた方は、こちらからエントリーをお願いします。カジュアル面談も実施中です！