「LPを作って」と頼んだのに、思ったような仕上がりにならず困っていませんか？

私も最初は一言で頼んで失敗しました。

この回では、LPを安定して作る3段階の手順と、Webアプリやアンケート集計の事例を紹介します。

デザインが苦手な方も、ぜひ読んで下さい！


LPは事前の整理で決まる

LP（ランディングページ）とは、特定の商品やサービスを売るために作るWebページです。

Claude Codeを使えば、短時間で質の高いものが作れます。

ただし、「◯◯のLPを作って」の一言では、期待した精度にはなりにくいです。


目的、ターゲット、伝えたいメッセージ、必要な要素を先に整理し、具体的に指示することが仕上がりを左右します。

手順はシンプルで、売りたいものの構成を作り、その構成をもとにLPを作ります。

デザインの方針はSkillsに設定しておくのもおすすめです。

複数のデザインを試したいなら、Skillsを複数読み込ませて、使い分けることもできます。


第1段階：構成をChatGPTと壁打ちで作る

私の題材は、Kindle出版にまつわるサービスのLPでした。

サービスの内容や狙いを文章にしてChatGPTに読み込ませ、構成を出してもらいます。

出てきたのは、ファーストビュー、問題提起、サービス概要、特徴、プラン、メリット、自己紹介、行動を促すボタン、クロージングという流れです。


便利ですが、AIの答えには間違いが混じることもあります。

必ず内容を確認し、納得できない箇所はAIと壁打ちして解消してから進みましょう。


第2段階：デザインの指示書をClaudeに作らせる

次はデザインです。

デザインが分からなくても、レイアウトまでAIが作ってくれます。

ChatGPTで作った構成をClaudeに見せて、次の3つを伝えます。

  • サービスの概要
  • 読者が得られるベネフィット
  • 先ほど作ったLPの構成（そのまま貼り付ける）

すると、Claude Codeに入力するための「LP作成用の指示書」を作ってくれます。

中身は、デザインコンセプト（トーン、配色、フォント、余白、モバイル対応）、セクションごとの構成と文言、技術仕様（HTML・CSS・JSを1ファイルにまとめる、フェードインの動きなど）です。

画像は使わず、絵文字やCSS図形で代用する指定も入っていました。

色のコードやボタンの位置まで書いてあるので、細かく考えなくて済みます。


第3段階：Claude Codeで生成して仕上げる

あとは、できた指示書をClaude Codeに貼るだけです。

先にLP用のフォルダを作っておきます。

私は慣れているため「編集を自動承認」にしていますが、初めての方は「プランモード」から始めて下さい。


できあがったLPには、私のプロフィールがない、問い合わせフォームがないといった課題が残りました。

それでも少し直すだけで、クオリティはかなり上がります。

コツは、一気に全体を作らず、セクションごとに分けることです。

全体を一度に作ると、修正のたびに全部作り直しになることがあります。

先に共通のデザイン（色・フォント・雰囲気）を決め、ヘッダーやキャッチコピー、本文、ボタンを順に作ると、直しやすく仕上がりも良くなります。

ちなみにGeminiでも、意外と高いクオリティのLPが作れました。


事例1：プロ向けカラーピッカーのWebアプリ

Claude Codeなら、Webアプリも作れます。

過去に作ったカラーピッカーを、Webデザイナー向けに高度にしてもらいました。

まずChatGPTに、プロのWebデザイナー向けのカラーピッカーを作りたいと伝え、Claude Code用のプロンプトを磨いてもらいます。


返ってきたプロンプトには、次のような項目が入っていました。

  • 目的と技術制約（HTML・CSS・JavaScriptのみ、単一ファイル）
  • 必須機能（HEX・RGB・HSLの表示、補色・類似色・トライアドなどの配色生成、色の保存と管理）
  • 追加機能（コントラスト比のチェック、グラデーション生成、CSS変数形式での出力）
  • デザイン要件（余白とタイポグラフィ重視、ダークモード対応）

これをそのままClaude Codeに入れると、アプリに加えて、取扱説明書（Word）と活用アイデアのテキストファイルまでできあがりました。


事例2：アンケート画像10枚をExcelに集計

データ収集にも使えます。

スーパーの「お客様の声」を想定したサンプルのアンケート画像を10枚用意し、画像を入れるだけでExcelに集計されるようにしました。

プロンプトには、条件を細かく書きました。

  • 作業フォルダの画像（jpg、pngなど）をすべて取得し、1枚を1回答として読み取る
  • 出力は survey.xlsx、シート名は「アンケート集計」、列は固定
  • 空欄は「未記入」、読み取れないものは「要確認」、自由記述は要約せずそのまま転記
  • ヘッダー固定、フィルタ有効化、列幅の自動調整
  • 推測で補完せず、読み取れない画像も記録する

実行は、まず1件だけテストして内容を表示し、問題なければ全画像を処理し、最後に処理画像数、転記件数、要確認件数を報告させます。

Excelの結果は、Geminiに「図解にして」と頼んで見やすくしました。

アンケート以外のデータ集計にも使えるので、マーケティングの仕事をしている方は、ぜひ試してみて下さい！