こんにちは。カタリストの椎葉です。
ホームページ制作事業の他に、AI活用の企業研修講師や、AIを使った業務効率化支援を行っています。
今回は、AI初心者の方でも簡単に実践できる、AIを使ったLP作成の手順を解説します。
生成AIは様々な種類がありますが、このワークではGoogleが開発した生成AI「Gemini（ジェミニ）」を使います。
「自身のサービスや商品を成約するためにランディングページ（LP）が欲しい」
「LPの制作を外注する前に、まずは手軽に作成してみたい」
そのような方は、以下のようなランディングページが５分で作成できるようになるので、ぜひご覧ください。
【Geminiで5分で作成したLP】
https://vocal-froyo-1166d1.netlify.app
↓動画でご覧になりたい方はこちら
Geminiを活用したLP制作の概要
今回使用するのは、Googleが開発した生成AI「Gemini」です。
Geminiは、私たちが普段使っている言葉で指示（プロンプト）を与えるだけで、文章を作成したり、アイデアを出したり、さらにはプログラミングコードを生成したりと、様々なタスクをこなしてくれます。
Geminiを使って、以下の2つのステップでLPの骨格を作り上げていきます。
- コピーライティング（文章）の作成
- HTMLコード（Webページの設計図）の生成
これらをAIに任せることで、これまで専門知識が必要だった部分をサポートしてもらい、制作のハードルをぐっと下げることが可能になりました。
しかも、無料版のGeminiでも十分に実践できます。
GeminiでLPを作成して無料で公開するまでの5ステップ
それでは、実際に「週末ヨガのオンラインレッスン」のLPを作成する、という例に沿って、具体的な手順を5つのステップで見ていきましょう。
ステップ1：まずは土台作り！GeminiにLPの文章を考えてもらう
LPで最も重要なのは、訪問者の心に響くメッセージ、つまり「コピー」です。
いきなりデザインから入るのではなく、まずはGeminiにLPに掲載する文章を作成してもらいましょう。
今回は、デモンストレーションとして音声入力で指示を出していますが、もちろんテキストで入力してもOKです。
【プロンプト例】
今からランディングページを作成します。週末ヨガのオンラインレッスンのスクールのランディングページです。ターゲットは20代、30代の女性の主婦の方たちで、参加費はワンレッスン3000円で作成してください。Zoomで開催するオンラインレッスンです。週末の朝7時から開催しております。このまずランディングページを作成するために、コピーライティングの文章を作ってください。文章は、典型的なランディングページの型に忠実に作成してください。このように、「誰に」「何を」「どのように」伝えたいのかを具体的に指示するのがポイントです。
この指示を出すと、Geminiは以下のように、一般的なLPの構成に沿った文章をあっという間に生成してくれます。
- キャッチコピー
- こんなお悩みありませんか？（共感）
- サービスの特徴
- お客様の声
- 料金プラン
- よくある質問
- お申し込みへの誘導（CTA）
まずは、このAIが生成してくれた文章をベースにして、LPの全体像を固めていきましょう。
ステップ2：文章をデザインに！HTMLコードを生成する魔法のプロンプト
文章の準備ができたら、次はいよいよLPのデザインを形にするためのHTMLコードを生成してもらいます。
HTMLはWebページを作成するための言語ですが、知識がなくても全く問題ありません。Geminiが全て書き出してくれます。
ステップ1で生成した文章をGeminiのチャット画面に貼り付け、続けて以下の指示を出します。
【プロンプト例】
上記のコピーライティングの文章を元に、魅力的なランディングページを作成します。20代、30代の女性がターゲットですので、その彼女らに刺さるようなデザイン、そして、このサービスのテーマカラーである明るいグリーンを意識しながらランディングページを作成してください。一番上のファーストビューと呼ばれる部分には、ヨガをやってる画像を設置します。HTML形式で出力してください。ここでの最重要ポイントは、最後の「HTML形式で出力してください」という一文です。
これを忘れずに入れることで、GeminiはWebページとして表示できるコードを生成してくれます。
その他にも、
- ターゲット層（20代、30代の女性）
- デザインの雰囲気（刺さるようなデザイン）
- テーマカラー（明るいグリーン）
- 画像配置の指示（ファーストビューにヨガの画像）
といったデザインに関する要望を具体的に伝えることで、よりイメージに近いLPを生成してくれます。
このプロンプトを実行すると、Geminiはプログラムコードを書き始め、しばらくするとプレビュー画面が表示されます。
たったこれだけで、デザインされたLPのプロトタイプが完成です。
ステップ3：AIと対話しながら修正！より魅力的なLPに仕上げるコツ
AIが生成したLPは、あくまでたたき台です。
よく見ると、文字が多すぎたり、表示が少し崩れていたりすることがあります。
ここからが、AI活用の面白いところ。人間がディレクターとなって、AIに対話形式で修正を指示していきます。
【修正指示の例】
- 「参加者の声のところに画像のアイコンを差し込む場所があるんですが、文字化けしているので、画像はなしで文章だけにしてください。」
- 「ファーストビュー（一番上の箇所）の文章が多すぎるので、もっとシンプルに絞ってください。」
このように、気になった点を具体的に指摘するだけで、Geminiは即座にコードを修正し、新しいプレビューを生成してくれます。この「AIとの対話による改善プロセス」を繰り返すことで、LPのクオリティをどんどん高めていくことができます。
ステップ4：ゴールへの導線！申し込みボタンにリンクを設定しよう
LPの目的は、訪問者に何かしらの行動（申し込み、問い合わせなど）をしてもらうことです。
そのため、「申し込みボタン」が正しく機能するように設定する必要があります。
まず、Googleフォームなどで、あらかじめ申し込み用のフォームを作成しておきましょう。
そして、そのフォームの共有リンクをコピーします。
準備ができたら、Geminiに次のように指示します。
【プロンプト例】
（Googleフォームのリンクを貼り付けて）無料体験申し込みボタンに、このリンクを貼ってください。これだけで、Geminiはボタンをクリックした際に指定のGoogleフォームが開くように、HTMLコードを書き換えてくれます。
これで、LPのゴールへの導線が確保できました。
ステップ5：世界へ公開！Netlifyを使って無料でWebサイトをアップロード
さて、Gemini上でLPは完成しましたが、このままでは自分しか見ることができません。
作成したLPをインターネット上に公開し、誰でもアクセスできるようにする作業が必要です。
通常、Webサイトを公開するにはサーバーを契約する必要がありますが、
今回は「Netlify（ネットリファイ）」という便利な無料サービスを使います。
【公開までの流れ】
- コードのコピー：Geminiが生成したHTMLコードをすべてコピーします。
index.htmlファイルの作成：- PCのデスクトップに新しいフォルダを作成します（例：「yoga-lp」）。
- テキストエディタ（Windowsなら「メモ帳」、Macなら「テキストエディット」）を開き、コピーしたコードを貼り付けます。
- ファイルを「index.html」という名前で、先ほど作成したフォルダ内に保存します。（※拡張子を
.txtから.htmlに変更するのがポイントです）
- Netlifyにアップロード：
- Netlifyの公式サイトにアクセスし、アカウントを登録します。
- ログイン後、「Add new site」から「Deploy manually」を選択します。
- 表示された画面に、先ほど作成した「yoga-lp」フォルダをフォルダごとドラッグ＆ドロップします。
たったこれだけの作業で、アップロードが完了し、あなたのLP専用のURLが自動で発行されます。
そのURLにアクセスすれば、世界中のどこからでも完成したLPを見ることができます。
Netlifyは、一定の容量までなら無料で利用できるため、今回のようなシンプルなLPを公開するには最適なサービスです。
GeminiでのLP作成をさらに活用するために
今回は基本的な作成から公開までの流れをご紹介しましたが、Geminiを使えばさらに高度なカスタマイズも可能です。
画像の変更やデザインのカスタマイズ
AIが自動で配置した画像を、自分の持っているオリジナルの写真に変更したり、色やレイアウトをさらに細かく調整したりすることも、プロンプトで指示することで可能です。
よりオリジナリティの高いLPを目指す場合は、ぜひ試してみてください。
WordPressとの連携で広がる可能性
すでにお持ちのブログやサイトがWordPressで構築されている場合、今回作成したLPのパーツを連携させるなど、さらに活用の幅を広げることも考えられます。
AIと既存のツールを組み合わせることで、Webサイト制作の可能性は無限に広がります。
まとめ：GeminiでLP作成の第一歩を踏み出そう
今回は、Google Geminiを活用して、無料でランディングページを作成し、公開するまでの一連の流れを解説しました。
【本日のポイント】
- ステップ1：GeminiにLPの目的やターゲットを伝え、文章を作成してもらう。
- ステップ2：「HTML形式で」と指示を出し、デザインの骨格となるコードを生成する。
- ステップ3：AIと対話するように、具体的な修正指示を出してクオリティを上げる。
- ステップ4：Googleフォームなどで作成したリンクを、申し込みボタンに設定する。
- ステップ5：Netlifyという無料サービスを使い、作成したファイルをアップロードして公開する。
AIの進化により、これまで専門知識や高額な費用が必要だと考えられていたLP作成が、非常に身近なものになりました。
もちろん、複雑なデザインや高度なマーケティング機能を実装するには専門的な知見が必要ですが、まずは「自分のアイデアを形にしてみる」という第一歩として、この方法は非常に有効です。
今回ご紹介した方法は、すべて無料で試すことができます。ぜひあなたもGeminiと共に、新しいLP作成の世界を体験してみてはいかがでしょうか。
