メルマガ登録ページをAIで3時間で作った方法｜Claude Codeで構成から公開まで

メルマガ登録ページをリニューアル

どうも、ドバイ在住ひとり起業家13年目の加藤です。

先日、メルマガの登録ページをリニューアルしました。構成、文章、デザイン、写真選び、公開の設定まで、ほとんどの作業をClaude Codeに任せ、3〜4時間ほどで完成させています。今回は、その手順を順番にご紹介します。

準備：パソコンにインストールするアプリ版を使う

使用したのは、Claude Codeのデスクトップアプリ版です。ブラウザ版ではパソコン内のファイルをAIが扱えないため、写真の読み込みなどができません。モデルはOpus 5.5を使いました。

手順1：目的を伝えて構成を考えてもらう

最初に、ページの目的を伝えます。今回は「メールアドレスを登録してもらうためのランディングページ（LP）を作りたい」と伝えました。そのうえで、全体の構成をAIに考えてもらいます。僕のページは次の流れにしました。

• ファーストビュー（何のメルマガかを伝える）
• こんな方のためのメルマガです
• メッセージ（自分の考え）
• このメルマガで得られるもの
• 40か国を旅してきた経験
• プロフィール

参考にしたいページがあれば、そのリンクを渡すとより精度が上がります。

手順2：デザインより先に文章を固める

ここが大きなポイントです。いきなりデザインに入るのではなく、まず各パートに何を書くかを決めます。僕は、これまでのメルマガや動画の内容をAIに読み込ませて、たたき台を作ってもらいました。あとは、音声入力で「ここの言い回しを変えて」と人に話すように修正していきます。

手順3：デザインと配色を決める

文章が固まったら、デザインと配色を決めます。僕のページは、紺とゴールドを基調に、白とベージュを組み合わせました。読者に40代以上の方が多いため、落ち着いていて高級感のある配色にしています。女性向けの商品であれば、ピンクやオレンジなどの暖色系が合うでしょう。ターゲットを伝えれば、AIが配色の候補を提案してくれます。

手順4：HTMLでサンプルを作ってもらう

文字で考えるより、実際の画面を見たほうが早く判断できます。「HTMLでサンプルを作ってほしい」と依頼すれば、5〜10分ほどでプレビューが表示されます。それを見ながら、色やパートの内容を調整していきます。

手順5：写真の選定もAIに任せる

旅行で撮った写真を100枚ほどフォルダにまとめておき、AIに「各パートに合う写真を入れてほしい」と依頼しました。AIが写真の中身を確認して自動で配置してくれ、6割ほどはそのまま使えるレベルでした。合わないものだけ差し替えを依頼しています。画像生成のAPIを使えるようにしておけば、AIで画像を作って挿入することも可能です。

手順6：公開まで任せる

最後は、完成したページを公開します。僕はLP作成やメルマガ配信ができるUTAGEを使っており、Claude Codeと連携しているため、「このページをUTAGEで使えるようにして」と伝えるだけで、登録後にメルマガが届く設定まで完了しました。

LPはWeb上の営業マン

ランディングページは、訪れた人に登録や購入を決めてもらう「Web上の営業マン」です。広告アフィリエイトでも記事LPを何パターンも作ってテストする必要があるため、このやり方は大きな武器になります。ヒートマップなどの計測ツールの設置も、AIに頼めば簡単に行えます。

まとめ

構成、文章、デザイン、公開の順に進めれば、AIと対話するだけで本格的なLPを短時間で作ることができます。やり方が分からない場合は、この記事や動画の内容をそのままAIに渡して「この通りに作りたい」と伝えるのが近道です。

こうしたAIの活用法や、ここでは書ききれない話はメルマガでお伝えしています。よろしければぜひご登録ください。

無料で登録できますのでぜひご登録ください → https://utage-system.com/page/y42ERXRwJxPY