一行の指示からランディングページを公開する

必要なページを伝えるだけで、Okou が全体の構成を組み立て、各セクションの文章を書き、GitHub の PR を作成し、公開前に確認できるプレビューリンクまで用意します。

Okouの接続先:GitHubVercelPlausible

AIランディングページビルダーとは

AIランディングページビルダーとは、書かれたブリーフを、セクション構成・コピー・画像まで含む完成したレスポンシブなランディングページに変える仕組みです。デザイナーやフロントエンドエンジニアが手作業で組み立てる必要はありません。Okouはホスティング型のページビルダーより一歩踏み込みます。サイトを実際のコードベースとして書き、GitHubにコミットし、Vercelにデプロイします。手元に残るのは、他社のエディタに閉じ込められたページではなく、自分たちが所有し編集し続けられる本番サイトです。成果物は、確認でき、普通の言葉で変更でき、キャンペーンの遷移先にできるライブURLです。

単純なランディングページに、いまだに1週間かかる理由

キャンペーンの準備は整っているのに、ランディングページだけが間に合っていない。オファーもターゲットも、ページにどんなことを書くべきかも、おおよそ頭の中にある。けれどそれを実際のページにするには、デザインへの依頼書、エンジニアリングへのチケット、何度かの文章修正、そして次のデプロイ枠を待つ時間が必要です。ページが公開される頃には、もう旬は過ぎている。Okou はその工程を一気に縮めます。誰に向けたページで、訪問者にどんな行動を取ってほしいかを伝えれば、構成全体(ヒーロー、バリュープロップ、ソーシャルプルーフ、FAQ、コールトゥアクション)を組み立て、文章を書き、PR を作成し、プレビュー URL を渡します。モックアップではなく、実際のインフラ上の本物のページを確認し、自然な言葉で修正を依頼できます。

Okouがランディングページを構築してデプロイする流れ

ステップ1:ツールを接続する

GitHub
GitHub
必須
Okou がページを新しいブランチにコミットし、プルリクエストを作成します。ページの構築と公開に必須です。
接続
Vercel
Vercel
必須
Okou がプレビューデプロイを読み取り、PR とまったく同じページのライブ URL を渡せるようにします。プレビューリンクに必須です。
接続
Plausible
Plausible
オプション
Okou がページのアナリティクスを追加・取得し、公開後のパフォーマンスを計測できるようにします。任意です。
接続

ステップ2:Okouに聞く

Okou がブリーフをページ構成に変換します
Okou はあなたのゴールとターゲットを受け取り、コンバージョンするページに必要なセクションを設計します。明確な見出しを持つヒーロー、バリュープロポジション、ソーシャルプルーフ、反論に答える FAQ、そして1つの主要なコールトゥアクションです。
Okou が文章を書き、ページを構築します
Okou は各セクションをあなたのプロダクトのトーンで書き起こし、コードベースの中でページを組み立て、新しいブランチにコミットします。既存のデザインシステムに沿うので、後付け感のない、自然に馴染むページに仕上がります。
Okou がプレビューデプロイ付きの PR を作成します
Okou は GitHub のプルリクエストを作成し、プレビューデプロイの完了を待ちます。実際のインフラ上の本物のページを表示するライブ URL が手に入るので、確認したものがそのまま訪問者の見るものになります。
自然な言葉で修正を重ねられます
見出しをより鋭く、FAQ の順序を入れ替え、コールトゥアクションを変える、といった希望を返信するだけで、Okou はブランチを更新し、マージできる状態になるまでプレビューを再デプロイします。

ステップ3:さらに活用する

アナリティクスを設定する
ページ単位のトラッキングを追加し、初日からパフォーマンスを計測できるようにします
テスト用のバリアントを用意する
最初のページと A/B テストするための2つ目のバージョンを作成します
定例化する
新しいキャンペーンブリーフを渡せば Okou がページを作るようにします

ランディングページ向けのGitHub・Vercel・Plausible連携

このワークフローは、間にエージェントが入るGitHubとVercelの連携です。Okouがサイトを書き、GitHub経由でコミットし、Vercel経由で公開します。各コネクターは個別に許可され、ワークフローが実際に使う範囲に限定されるため、デプロイの権限が他のリポジトリへのアクセスを意味することはありません。

GitHub

GitHub連携:Okouが書き込むリポジトリ

必須

Okouはリポジトリを作成し、ページとアセットをコミットし、指定されたブランチにプッシュします。サイトがホスティング型エディタではなくGitに置かれるため、すべての変更は読み・レビュー・取り消しができる通常のコミットになり、社内のエンジニアはエクスポート作業なしでいつでもページを引き継げます。既存のサイトがある場合、Okouはその中で作業します。既存のデザインシステムに従い、リポジトリにプルリクエストを開くので、新しいページはすでに運用しているレビュープロセスを通って公開されます。書き込み権限は、許可したリポジトリだけに限定されます。

Vercel

Vercel連携:Okouが公開するデプロイ

必須

OkouはVercelのプロジェクトを作成し、コミット済みのサイトをデプロイし、そのデプロイを読み返して、実際に配信されているURLを手渡します。この読み返しが重要です。ビルドが始まったという約束ではなく、ビルドが完了してからリンクが渡されますし、ビルドが失敗した場合は死んだリンクではなくエラーが報告されます。プレビューのデプロイも同じ仕組みなので、本番URLになる前に実際のインフラ上でページを確認できます。プッシュによる自動再デプロイのためにVercelプロジェクトをGitHubと接続するのは、あなた自身が一度だけ行う認可であり、それによって以降のすべての更新が自動でデプロイされるようになります。

Plausible

Plausible連携:Okouが追加して読み取る解析

オプション

Plausibleは任意で、価値を発揮するのは公開後です。Okouは作ったばかりのページに計測スクリプトを追加し、数えるべきイベントに名前を付け、依頼があればその数値を読み返します。つまり「今週このページはどうだったか」を、ページを生み出したのと同じ会話の中で聞けます。ページを作ることと、それがコンバージョンするかを知ることがつながり、そこからバリエーションのテストが始まります。Plausibleがなくてもワークフローは最後まで動きます。結果を別の場所で測るだけです。

Okou、ドラッグ&ドロップのページビルダー、デザイン・開発サイクルの比較

ランディングページ作りは、たいてい速さと所有権のどちらを取るかの選択になります。ホスティング型ビルダーは速いがページはツールの中に留まり、デザインと開発のサイクルは本物のコードが手に入るが1週間かかります。Okouは、コードとデプロイを1回の実行で生み出すAIサイトビルダーの道筋です。

ドラッグ&ドロップのページビルダー

テンプレートとビジュアルエディタでページはすぐ公開できますが、見出しはすべて自分で書き、画像もすべて自分で選び、セクションの並びも自分で決めることになります。さらにページはツールの中に留まるため、後から移すには作り直しが必要で、サブスクリプションは終わりません。

デザインと開発のサイクル

デザインへのブリーフ、エンジニアリングへのチケット、コピー修正の往復、そしてデプロイの枠。求めたとおりの結果が完全に自社の資産として得られますが、たいていキャンペーン側が待たされますし、単発のページがロードマップより優先されることはめったにありません。

Okouのランディングページ ワークフロー

Okouは一度の実行で全工程を進めます。構成、コピー、ライセンス画像、GitHubへのコミット、そしてライブURLを返すVercelのデプロイまでです。成果物は自社リポジトリの中のコードなので、修正はチャットでの一言で済み、エンジニアへの引き渡しにエクスポートは要りません。

より良い結果のためのヒント

ブリーフは、訪問者に取ってほしい行動(登録する、デモを予約する、トライアルを始める)から書き始めましょう。ゴールが明確なほど、機能の羅列よりも鋭いページに仕上がります。
気に入っている既存ページを参考として Okou に示すと、新しいページが実績のある構成とあなたのデザインシステムを引き継ぎます。
初日からアナリティクスを有効にして、推測ではなく実際の訪問者の行動をもとに改善できるようにしましょう。

よくある質問

AIでランディングページを作るにはどうすればよいですか。

GitHubとVercelをOkouに接続し、ブランド、想定する読み手、そして訪問者に取ってほしい行動を説明してください。Okouはセクションを設計し、コピーを書き、画像を集め、サイトをリポジトリにコミットし、デプロイします。ライブURLが返ってくるので、あとは普通の言葉で返信して調整していきます。

AIエージェントがランディングページをVercelに自動でデプロイできますか。

できます。Vercelのコネクターを許可すると、Okouはプロジェクトを作成し、コミット済みのサイトをデプロイし、URLを渡す前にデプロイ状態を読み返します。したがって渡されるリンクは、すでにページを配信しているものです。プッシュによる自動再デプロイのためにVercelプロジェクトをGitHubと接続するのは、あなた自身が一度だけ行う認可で、それ以降の変更はすべて自動で再デプロイされます。

Okouはレイアウトだけでなく、ランディングページのコピーも書きますか。

書きます。ページ制作を止めがちなのはたいていコピーなので、Okouはヒーローの見出し、価値提案、プロセスの説明、FAQの回答、行動喚起まで、指定されたトーンで各セクションを下書きします。トーンと参考にしたいブランドを2〜3社挙げれば、最初の下書きの精度が大きく上がります。

ページの画像はどこから来ていますか。

OkouはUnsplashやPexelsなどライセンス済みのストックライブラリから写真を取得し、各画像の撮影者クレジットをページに記録します。このページのサンプルストアフロントでは、クレジット付きの写真が29点でした。自社のアセットフォルダやブランドライブラリを指定すれば、そちらを使います。

既存のサイトとデザインシステムの中にページを作れますか。

作れますし、すでにサイトがある場合はそちらの方が適しています。Okouにリポジトリを指定すると、既存のコンポーネントとトークンからページを組み立て、独立したプロジェクトを作る代わりにプルリクエストを開きます。サイトの他の部分と同じ部品で作られているため、見た目も自然になじみます。

作った後でページを変更するにはどうしますか。

変えたい内容を返信するだけです。Okouがコードを編集し、コミットし、再デプロイします。本番URLは変わりません。すべての変更がGitのコミットなので、差分を確認したり、以前のバージョンに戻したりもできます。

AIエージェントが生成したコードの所有権は誰にありますか。

あなたにあります。サイトは自分のGitHubリポジトリにコミットされ、自分のVercelアカウントにデプロイされるため、エクスポート作業も、ページを公開し続けるためにOkouに依存することもありません。コネクターの許可を取り消しても、リポジトリと稼働中のデプロイはそのまま残ります。

このランディングページのワークフローにはどのツールが必要ですか。

GitHubとVercelが必須です。GitHubがコードを保持し、Vercelがそれを配信します。Plausibleは任意で、公開後にページの解析を追加し、成果を測ったりバリエーションをテストしたりできるようにします。

最初のページを作る

GitHubとVercelを接続し、ブランドと訪問者に取ってほしい行動を説明してください。上のストアフロントを生んだのと同じプロンプトが、あなたのページを生み出します。

Help me with: 一行の指示からランディングページを公開する