テック技報最新号へ →
デザイン

LPのプロダクトショット(ヒーロー画像・機能カード・ベントー)をAIっぽく見せない5つのルール(Stageshow)

画面の中身はほぼグレーの仮置きにし、本物の文字は3〜7か所だけ。主役を1つ決めて画面の3分の2以上に大きく置き、端からはみ出させる。

@Voxyz_ai · 2026-11-02
#AI×デザイン#LP#プロダクトショット#スキル#ClaudeCode#Codex

どんな問題を解決するか / いつ使うか

Claude Code や Codex はLPを速く作れるが、そこに載せる「製品画面風の画像」(ヒーロー、機能紹介カード、ベントーグリッド)は、ひと目でAI製と分かりがち。実物のスクリーンショットを用意できない段階で、それらしい製品画面の静止画や動きをエージェントにコードで作らせるときに使う。

やり方

エージェントに次のルールを渡す(投稿のプロンプトの要約)。

  1. 画面の構造は全部作るが、色は落ち着いたニュートラルグレーにする。本物の文字を入れるのは中心の領域の3〜7か所だけで、周辺はグレーの仮置きバーで埋める。
  2. 主役を1つにする(ウィンドウ、カード、スマホのどれか)。全部を同じ大きさ・同じ枠付きカードにしない。
  3. 主役は画面の3分の2以上を占め、片方の端からはみ出させる。四方に余白を残して真ん中に浮かべない。
  4. キラキラのアイコンを使わない。四角に1文字だけの偽ロゴを使わない。
  5. 完成したら、実際の表示幅と390px幅でスクリーンショットを1枚ずつ撮り、一番大きな問題から直す。順番は 構図 → 階層 → 細部。

もっと作り込みたいときは、作例集付きのスキル版を入れる。完成後に画面を録画し、1フレームずつ確かめるところまでやる。

bash
npx skills add benjitaylor/skills --skill stageshow

スキルはフェイクのUI静止画、アニメーション、ベントーグリッドなどを作るためのもの(紹介ページ:Stageshow)。

注意点

  • 実在する製品の画面として見せるなら、仮置きの画面は「イメージ」と分かる扱いにする。機能を誤解させる見せ方は避ける。
  • スキルは第三者製。入れる前に中身を確認する。

関連

出典

X の元の投稿を開く