LPのプロダクトショット(ヒーロー画像・機能カード・ベントー)をAIっぽく見せない5つのルール(Stageshow)
画面の中身はほぼグレーの仮置きにし、本物の文字は3〜7か所だけ。主役を1つ決めて画面の3分の2以上に大きく置き、端からはみ出させる。
どんな問題を解決するか / いつ使うか
Claude Code や Codex はLPを速く作れるが、そこに載せる「製品画面風の画像」(ヒーロー、機能紹介カード、ベントーグリッド)は、ひと目でAI製と分かりがち。実物のスクリーンショットを用意できない段階で、それらしい製品画面の静止画や動きをエージェントにコードで作らせるときに使う。
やり方
エージェントに次のルールを渡す(投稿のプロンプトの要約)。
- 画面の構造は全部作るが、色は落ち着いたニュートラルグレーにする。本物の文字を入れるのは中心の領域の3〜7か所だけで、周辺はグレーの仮置きバーで埋める。
- 主役を1つにする(ウィンドウ、カード、スマホのどれか)。全部を同じ大きさ・同じ枠付きカードにしない。
- 主役は画面の3分の2以上を占め、片方の端からはみ出させる。四方に余白を残して真ん中に浮かべない。
- キラキラのアイコンを使わない。四角に1文字だけの偽ロゴを使わない。
- 完成したら、実際の表示幅と390px幅でスクリーンショットを1枚ずつ撮り、一番大きな問題から直す。順番は 構図 → 階層 → 細部。
もっと作り込みたいときは、作例集付きのスキル版を入れる。完成後に画面を録画し、1フレームずつ確かめるところまでやる。
bash
npx skills add benjitaylor/skills --skill stageshowスキルはフェイクのUI静止画、アニメーション、ベントーグリッドなどを作るためのもの(紹介ページ:Stageshow)。
注意点
- 実在する製品の画面として見せるなら、仮置きの画面は「イメージ」と分かる扱いにする。機能を誤解させる見せ方は避ける。
- スキルは第三者製。入れる前に中身を確認する。
関連
- AIっぽさは「全部が主役」から来る。配色より先に、強調を1つに絞る5つの修正をする
- AIっぽいUIを「監査→5行の方向性→1項目ずつの修正パス」で直させるプロンプト(unslop)
- ガイド:画像生成からUI・LPを作る