「セミナーの申し込みページを作りたいけど、デザインどうしよう…」
「UTAGEでゼロから作るのは時間がかかる…」
そう感じたことはありませんか？
AIを使ってLPを作り始めた方の中には、最初にClaudeにHTMLでLP全体を生成してもらった経験がある方も多いと思います。
でも実際にやってみると、こんな壁にぶつかりませんでしたか？
「文章を1か所直したいだけなのに、AIに修正指示を出してHTMLを再生成して、またUTAGEに入れ込む指示をして…」という手間が毎回発生する。
しかも修正のたびにHTMLをまるごと更新されるので、どこが変わったのかも確認しにくい。ちょっとした文言変更でも、結構な時間がかかってしまうんですよね。
「UTAGEの画面上でそのまま直せたら、どれだけ楽だろう…」
そう思った方にぜひ試してほしいのが、Claudeを使ってUTAGEの要素タイプでLPを作る方法です。
AIに「UTAGEの要素タイプで作って」と指示するだけで、ファネルの作成からページの構築まで自動でやってくれます。
そして完成したページはUTAGEの通常エディタで管理される形式になるので、テキストの修正・色の変更・セクションの追加も、UTAGE画面上でそのまま操作できます。
HTMLを触り直す必要はありません。
この記事では、ClaudeでセミナーLPの文章を作るところから、UTAGEに要素タイプで反映してページを完成させるまでの手順を、実際のス画像つきで解説します。
※UTAGEとAIを連携していない方はこちらの記事を最初にお読みください。
Contents
全体の流れを先に把握しておこう
作業は大きく2つのパートに分かれます。
- PART 1：ClaudeでセミナーLPの文章・構成を作る
- PART 2：Claudeに指示して、UTAGEの要素タイプでページを構築する
PART 1でLPの中身を作り込んでおくことで、
PART 2のUTAGEへの反映がスムーズになります。
順番に見ていきましょう。
PART 1｜ClaudeでセミナーLPの文章を作る
ClaudeにセミナーLPの作成を指示する
Claudeを開いて、以下の指示文を参考にセミナーLPの文章を作成します。
以下の条件で、セミナーの申し込みLPの文章を作成してください。
【セミナー名】（例：売上を3倍にする経営戦略の秘密）
【ターゲット】（例：フリーランス・中小企業経営者）
【開催形式】（例：無料オンラインセミナー）
【セミナーで得られること】（例：収益最大化メソッドが学べる）
【参加者の悩み】（例：売上が伸びない、新規顧客が獲得できない）【作成するセクション】
・キャッチコピー（ファーストビュー）
・サブキャッチコピー
・こんなお悩みはありませんか？（5項目）
・セミナー概要（日時・場所・参加費）
・セミナーで学べること（3〜5項目）
・講師プロフィール
・参加者の声（3件）
・よくある質問（3問）
・申し込みへの一言（CTA直前）
生成された文章を確認・調整する
Claudeが各セクションの文章を生成したら、そのまま使うのではなく必ず一度読み返してください。
AIは指示文から内容を推測して文章を作るため、表現が一般的すぎたり、自分のお客さんの実態とズレていたりすることがあります。
以下の2点を特に意識して確認しましょう。
①ターゲットの悩みがリアルに書かれているか
「こんなお悩みはありませんか？」のセクションは、読んだ人が「これ、まさに自分のことだ」と感じるかどうかが勝負です。
AIが生成する表現は「売上が伸びない」「新規顧客が増えない」のように正確ではあっても、言葉が平坦でリアリティが薄くなりがちです。
自分のお客さんが実際に口にする言葉や、相談を受けたときによく出てくるフレーズに書き換えると、一気に刺さる文章になります。
たとえば「売上が伸びない」より「毎月の売上が読めなくて、月末になるたびに不安になる」のほうが、読んだ人の心に引っかかりやすいです。
②セミナーで得られることが具体的か
「マーケティングが学べます」「集客のコツがわかります」のような表現は、読んでいる人に何も伝わっていないのと同じです。
セミナーに参加した後、自分の何がどう変わるのかが具体的に見えないと、申し込みのハードルは下がりません。
「参加後すぐに使える集客導線の設計方法がわかります」「セミナー当日中に自分のサービスの価格設定を見直せます」のように、参加後の行動や変化まで踏み込んだ表現に書き換えましょう。
Claudeに「もっと具体的に、参加後の変化がわかるように書き直して」と追加指示を出すだけで、表現が一段階上がることも多いです。
PART 2｜Claudeに指示してUTAGEに要素タイプでページを構築してもらう
ファネル・ステップの作成をClaudeに指示する
チャット欄に以下のように入力します。
既存のファネルを使う場合はファネル名を、新規の場合はそのまま伝えます。
UTAGEに要素タイプで作りたい
ファネルの新LPの中のステップに名前：経営者向けセミナーとして作成して
Claudeが「ファネルとステップを確認します！」と返答し、UTAGEと連携してステップの作成処理が始まります。
完了すると「ステップ作成完了！次にLPページを全9セクションで作成します」という表示が出て、そのままページの構築に入ります。
このとき「event-form も含めてeventカテゴリの要素定義を取得します」という表示が出ますが、これはClaudeがUTAGEの要素タイプの定義を読み込んでいる処理です。
特に操作は不要なので、そのまま待ちましょう。
UTAGEにページが自動で構築されるのを待つ
ClaudeがUTAGEの要素タイプを使って、セクションごとにページを組み立てていきます。
しばらく待つと、UTAGEのファネル管理画面に「経営者向けセミナー」ステップと「セミナーLP」ページが追加されます。
プレビューを見ると、ファーストビューのキャッチコピー・申し込みボタン・お悩みセクションなど、LPの構成がすでに出来上がっているのがわかります。
UTAGE画面で直接編集できることを確認する
「編集」ボタンをクリックすると、UTAGEのエディタでページの詳細を確認・編集できます。
▼ ▼ ▼
要素ごとに編集ツールバーが表示されていて、テキストの変更・色の調整・セクションの追加・削除がそのまま行えます。
HTMLを一切触らずに、UTAGE画面上だけで修正が完結するのが要素タイプで作る最大のメリットです。
文言を1か所直したいときも、該当のテキストをクリックしてそのまま編集するだけ。
Claudeに再指示してHTMLを再生成する手間は、もう必要ありません。
ページ完成後に必ずやっておきたい4つの確認
①キャッチコピーとターゲットのズレを修正する
AIが生成したキャッチコピーが自分のターゲットに刺さる内容になっているか確認します。
ズレている部分はUTAGE画面上でそのままクリックして書き換えてください。
②要素からイベントを挿入する
イベント申込フォームはこの時点では作られていないため、青いプラスボタンからイベント要素を追加します
▼ ▼ ▼
③申し込みボタンを「指定した要素へスクロール」を選択
ボタンの要素をクリックし、左側の動作から「指定した要素へスクロール」を選択し、②で作成した要素を選択します。
③お客様の声の写真を挿入する
お客様の声の画像をクリックし、左側の画像URLから画像を挿入してください。
④スマホ表示を確認する
セミナーLPはスマートフォンから見られることが多いです。編集画面上部の「SP」ボタンでスマホ表示に切り替えて、文字の大きさ・ボタンの押しやすさ・画像のバランスを確認してください。
よくある質問
Q1. 要素タイプで作るのとHTMLで作るのは何が違いますか？
HTMLで作る方法はページの自由度が高い反面、修正のたびにAIへ再指示してHTMLを再生成・貼り直す手間が発生します。
要素タイプで作る方法はUTAGEのエディタで管理される形式になるため、完成後の修正がUTAGE画面上だけで完結します。
頻繁に内容を更新するページや、細かい修正が多いLPに特に向いています。
Q2. UTAGEの既存のファネルにステップを追加する形でも使えますか？
はい、使えます。
指示文の「ファネルの〇〇の中のステップに」という部分に既存のファネル名を指定するだけで、そのファネルに新しいステップとページを追加できます。
新規ファネルを作らずに既存の構造に組み込みたい場合にも対応できます。
Q3. Claudeで作った文章はどのタイミングでUTAGEに渡せばいいですか？
ファネルとステップの作成指示を出した後、AIがページ構築を始める前に文章を貼り付けて渡すのがスムーズです。
または、ページ構築後に「〇〇セクションの文章をこちらに変更して」とUTAGEのAIチャットで指示することでも反映できます。
Q4. 要素タイプで作ったあと、デザインはどこまで変更できますか？
フォント・カラー・背景・セクションの並び替えなど、UTAGEの通常エディタで操作できる範囲であれば自由に変更できます。
大幅なレイアウト変更が必要な場合は、AIに「〇〇セクションのレイアウトを変更して」と追加指示を出す方法も使えます。
まとめ｜要素タイプで作れば「修正のたびにHTMLを貼り直す」手間がなくなる
この記事でお伝えした内容をまとめるとこうなります。
PART 1：ClaudeでLPの文章を作る
セミナー名・ターゲット・得られることを整理して、Claudeに各セクションの文章を生成させる
PART 2：UTAGEのAIに要素タイプで構築させる
UTAGEに要素タイプで作りたい
ファネルの〇〇の中のステップに名前：〇〇として作成して
HTMLで作ると修正のたびにAIへの再指示と貼り直しが必要でしたが、要素タイプで作ればUTAGE画面上で直接修正できます。
文言変更も色の調整も、エディタをそのまま使うだけで完結します。
この方法は、セミナーLPに限らず、個別相談LPやオプトインLPでも同じ手順で使えます。
まずは「UTAGEに要素タイプで作りたい」の一言から試してみてください。
現在、「UTAGE攻略無料セミナー」を開催しています。
UTAGE攻略無料セミナーの中で、ファネル全体の流れとして
実際の設計例を交えながら、より具体的に解説しています。
UTAGEを使って
・売上が生まれる仕組みを作りたい
・ファネル設計を理解したい
・業務を自動化したい
という方は、ぜひ一度チェックしてみてください。
「シナリオをどう組み立てれば成果につながるのか」を体系的に理解したい方は、
以下のボタンからLINE公式アカウントに登録のうえ、お申し込みください。
UTAGEで売れるファネルを構築したい方は
今なら無料で「累計100億売れたおさる式最新ファネル× UTAGE完全攻略セミナー」にご参加いただけ
更にセミナーに参加するだけで7つのプレゼントを配布中！
セミナーに参加するだけで7つの特典が受け取れる！ - UTAGE操作動画完全マニュアル＆マーケ解説パック
- おさる式最新ファネル解説 プレミアム動画
- おさる式ローンチの闇 シークレッツ動画 おさる×まどか対談
- 高単価コンテンツ販売の極意 おさる×UTAGE開発者いずみさん×講師まどか特別対談動画
- UTAGEでマネタイズできた コンテンツ販売×SNSマーケ電子書籍 P110
- UTAGEで売れるジャンル事例10選 徹底解説 図解版
- おさる式×UTAGEファネル構築テンプレシート
