実験の素材:自分で、同じ実験を再現する

1. 比べるときのルール

1. プロンプトは、一字も変えずに貼る。
2. 1回で出させる。追加の指示は出さない。出したら、回数を記録する。
3. 別の新しい作業で実行する。(同じ会話の続きにしない)
4. 同じ日、同じ条件で行う。公開はしない。
5. 記録するもの:所要時間、使った量(クレジットなど)、追加指示の回数、完成物のスクリーンショット(スマホ幅・PC幅)、画面に表示されたモデルや機能の名前。

2. 使うプロンプト

(実験では、B =「A を、Claude Code の frontend-design スキルで実行」も行いました。Manus や、スキルのない環境では、行えません。)

D:「確認」の手順(コマンドを使えない環境向け)

C の本文の、「デザインの方針」の後ろ、「最後に」の前に、次を足します。

【確認(必ず行うこと)】
作り終えたら、幅390px×高さ844pxのスマホ画面で、実際に表示して確認し、直してください。
1. 画面を上から順に表示して、実際に見てください。
2. 文字の重なり、見切れ、ボタンに隠れる文字、読みにくい箇所があれば直してください。
3. 直したら、もう一度表示して確認してください。確認は最大3回までです。
4. 最後の報告に、確認で見つけた問題と、直した内容を書いてください。

注意:この D の「コマンドを使わない版」を、Manus で試した結果はありません(未検証)。Claude では、スクリーンショットを撮るコマンドを実行できる条件で、D を行いました。(第7章)

3. 記録シート

コピーして、使ってください。

4. 見るポイント

スマホ幅(390px)で、見てください。

• ファーストビューで、見出しが最後まで読めるか
• ボタン(CTA)が、文字を隠していないか
• 横に、はみ出していないか(画面を左右に動かせてしまわないか)
• 実在しない実績・お客様の声・数字が、作られていないか
• CTA は、1種類か
• 料金・営業時間・住所などが、渡した情報と一致しているか
• 文字が、小さすぎないか。コントラストは十分か
• PC幅でも、崩れないか

横はみ出しの確認のしかた(ブラウザの開発者ツール):画面幅を390pxにして、横にスクロールできてしまわないかを確認する。

「見た目が良い」は、好みで分かれます。
崩れ、間違い、足された内容は、好みと関係なく、事実として比べられます。まず、そこから。

5. 僕の実験の記録(参考)

詳しくは、第7章。各1回。主観を含む。