テキスト・口頭で話すから空中分解する。AIモックアップで「見せて合意する」LP設計術

モックアップの精度は、ここで決まる。AIに「良い感じのLPを作って」と丸投げしても、出てくるのは「AIっぽい良い感じ」でしかない。

自分で書き出してもいいが、AIに壁打ちさせると整理が早い。

プロンプト例：要件整理シートの作成

あなたはWebディレクターです。
これからLPのモックアップを作成するために、要件を整理したいです。
以下の情報をもとに「LP要件整理シート」を作成してください。

■ わかっていること
- サービス名：techtech.club
- コンセプト：「AIで、一人の限界を超える」
- サブコピー：「"やったことがない"は、もう通用しない。30分後、プロとして動け。」
- ターゲット：少人数で事業を回す人（一人会社、スタートアップ初期、中小企業の何でも屋、副業・独立準備中）
- LPの目的：記事への流入、サイトの認知拡大
- トーン：シンプル、余白多め、テック感はあるが人間味がある、煽らない

■ 作成してほしいもの
以下を含むLP要件整理シートを作成してください。
1. 基本情報（サービス名、目的、ターゲット）
2. 伝えたいこと（優先順位つき）
3. ページ構成（セクション名と各セクションの役割）
4. デザインの方向性（トーン、色味、フォントの方針）
5. 補足事項・注意点

情報が不足していれば質問してください。

ポイントは「わかっていること」と「わかっていないこと」を分けて渡すことだ。AIは不足を質問で埋めてくれる。自分の頭の中を言語化する作業をAIに手伝わせるイメージで使うとよい。

要件が整理できたら、モックアップを生成する。以下のプロンプトを使った。

自身の要件に合わせて内容を修正してほしい。

プロンプト：

以下の要件をもとに、ランディングページのモックアップを作成してください。HTML+CSSで、レスポンシブ対応してください。
実際に動作する完成品ではなく、チーム内での認識合わせやデザイナーへの依頼時に「こんなイメージ」を共有するための叩き台です。

■ 基本情報
- サービス名：techtech.club
- コンセプト：「AIで、一人の限界を超える」
- サブコピー：「"やったことがない"は、もう通用しない。30分後、プロとして動け。」
- ターゲット：少人数で事業を回す人（一人会社、スタートアップ初期、中小企業、副業・独立準備中）

■ ページ構成（上から順に）
1. ファーストビュー：コンセプト＋サブコピー＋CTA
2. 課題提起：ターゲットが抱える「一人で全部やらなきゃいけない」現実
3. 解決策：techtech.clubが提供する価値（30分で実務レベルのノウハウ）
4. 記事カテゴリ一覧（動画作成、リサーチ、画像編集、学習、ツール作成、表計算、資料作成）
5. 最新記事ピックアップ（3本分のカード）
6. CTA：記事を読む

■ デザインの方向性
- シンプルで余白を活かしたレイアウト
- テック感はあるが冷たくない、人間味のあるトーン
- 色味：白ベース、アクセントカラーは控えめに1色
- フォント：読みやすさ重視
- 画像は使わずテキストとレイアウトで構成する

同一のプロンプトを3つのAIに投入した。かかった時間はどのツールも5分以内。

ここでは記事作成時点での各AIの差を出す。使用するAIツールの参考になればと思うが、本質は「目的をスムーズに、そして高速に達成するためのコミュニケーション」だ。

Claude Opus 4.6：85点

Claudeのアーティファクト機能でプレビュー付きのモックアップを生成。

レイアウト、情報構成、トーンのいずれもイメージに近い。ただし「デザインとして完成度が高すぎる」点は注意が必要だ。

デザイナーに渡す際には「これは方向性の共有であって、このデザインを踏襲してほしいわけではない」と明示する必要がある。

Claude Sonnet 4.5：30点

「アーティファクトで作成して」と指示したにもかかわらず、HTMLとCSSのコードをそのまま出力した（上記はソースコードをブラウザに反映してプレビューしている）。

指示を守れていない時点で減点だが、アウトプット自体は質素でシンプル。ただし、考え方を変えると、ワイヤーフレームレベルのシンプルさはデザイナーにとって「余白」になる。指示に縛られず自由に提案しやすいという見方もできる。

ChatGPT（GPT-5.2）：40点

プレビューは表示されるが、一部崩れている。具体的には、背景色が途中で黒から白に切り替わり、白系の文字が見えなくなるバグが発生した。

GPT-5.2 Thinkingモードでも差はなし。デザインの「AIっぽさ」も残る。1度の出力でそのまま使うのは厳しい。

Gemini Canvas（Flash）：55点

出力としては問題なし。プロンプトに忠実で、情報の構成に違和感もない。

ただしデザインのAIっぽさは抜けきれていない。「悪くないが、そのまま共有するには物足りない」という印象。

Gemini Canvas（Pro）：80点

Flashとは明確に差が出た。デザインとして十分使えるレベルで、意思疎通ツールとしてはまったく問題ない。Claude Opusと並ぶ選択肢になる。

しかし、「これはデザインではない、考えている方向性はこんな感じ」という共有は必須になる。

1度の出力で完璧を目指す必要はない。ただし、何度も修正を重ねると使用制限にかかったり、意図と違う出力が続いて「AIは使えない」という結論に至りかねない。

前提や要件は人間が整理しておく。AIとの壁打ちで整理してもいい。そのうえで、少ない修正でゴールに到達させる。

今回は以下の修正指示を出した。

全体的にやや重たい印象です。もう少しカジュアルに、ただし煽りにはならないように修正してください。

修正結果

Claude Opus 4.6：

全体のデザインは維持しつつ、文言がカジュアルな方向に調整された。最もイメージに近い。修正の意図を正確に汲み取っている。

Claude Sonnet 4.5：

引き続きアーティファクトを作れず。修正後も大きな変化なし。

ChatGPT（GPT-5.2）：

修正後も表示のバグが残ったまま。文言は変わったが、根本的な問題が解消されていない。

Gemini：

カラー絵文字が追加された。これは指示していない。AIが「カジュアルにする＝装飾を足す」と解釈した結果だ。

意図と違うアウトプットが出る典型例で、「おまかせ」にすると起きる現象だと言える。正確に指示するか、不要な変更は「やらないで」と明示する必要がある。

この工程で得た気づき：

修正指示は「抽象的すぎる」と意図しない方向に行く。「カジュアルに」だけでは、文言を変えるのか、レイアウトを変えるのか、色味を変えるのかが伝わらない。

人間同士の会話でも同じことが起きるが、AIは「とりあえずやれること全部やる」傾向がある。

修正指示のコツは、変えたいことだけでなく「変えないでほしいこと」も伝えることだ。例えば以下のように。

以下を修正してください。
-文言のトーンをもう少しカジュアルにする（煽りにはしない）
- レイアウト、配色、構成はそのまま維持する
- 装飾要素（絵文字、アイコンなど）は追加しない

モックアップが「これで方向性は伝わる」レベルになったら、デザイナーやチームに渡す「ビジュアルブリーフ」にまとめる。

モックアップ単体で渡すと「これがデザインの正解」と受け取られかねないので、要件テキストとセットにすることが重要だ。

以下のプロンプトで、AIにブリーフの形に整理させる。

ここまでのやり取りをもとに、デザイナーに渡すための「ビジュアルブリーフ」を作成してください。

以下の構成でまとめてください：
1. プロジェクト概要（サービス名、目的、ターゲット）
2. ページ構成と各セクションの役割
3. デザインの方向性（トーン、色味、参考イメージ）
4. モックアップの位置づけ：「認識共有用の叩き台であり、このデザインをそのまま実装するものではない」

※ このチャットで生成したモックアップのスクリーンショットを添付して渡す想定です。

モックアップの画面録画やスクリーンショットを添付し、このブリーフと一緒に渡す。「見せて合意する」ための一式がこれで揃う。

今回の検証結果を整理しておく。どのツールを使うかで体験は変わるので、判断材料として。

ただし、どのツールを使うかで体験が変わるのも事実なので、判断材料として整理しておく。

迷ったらClaude Opus 4.6を使えばよい。1度目のアウトプットの質、修正の正確さ、プレビューの安定性のバランスが最も良い。Gemini Proも十分実用的で、デザインの好みによってはこちらが合う場合もある。

大事なのは、どのツールを選んでも5分でモックアップが出るという事実だ。ツール選びに時間をかけるより、まず1つ試して「見せて合意する」体験を1回やってみることを勧める。