AGENT VENTURESTUDIO / 01
← GPT-AI-LP
DOCUMENT · 4.3 KB

docs/lp-art-direction-system-2026-08-30.md

Workspace snapshot · 08/31 23:51

LP Art Direction System

目的

WF は情報の順番と CV 導線を定義する構成データであり、見た目の完成形ではない。生成工程を次の 4 層に分離し、WF の上へ案件固有のデザインを当てる。

  1. Structure: セクション順、役割、CTA、フォーム
  2. Direction: Brand DNA、トーン 6 軸、配色、書体、写真処理、形状、余白
  3. Composition: セクションごとのグリッド、密度、色面、画像と本文の関係
  4. Production: 画像生成、HTML/CSS、フォーム、レスポンシブ、QA

今回の推奨 Direction

「制作現場を広告紙面として編集する」。KV の赤い現場写真、巨大な日本語、黒い輪郭文字を正本にし、下層も同じブランドの別章としてつなぐ。

  • DNA: 現場感 / 編集力 / 推進力
  • Principle: Editorial 50 / Tactile 30 / Reliable 20
  • 色: Ivory を余白、Ink を本文、Vermilion を行動、Cobalt を論点転換、Acid を小さなシグナルに使用
  • 書体: 太い和文ゴシックを見出し、本文は読みやすい和文ゴシック。明朝は引用など限定用途
  • 写真: 人物だけを並べず、手元、紙、画面、空間、成果物を章ごとに使い分ける
  • 形状: 汎用角丸カードを禁止。直線、色面、罫線、ずらし、重なりで構成する

セクション・コレオグラフィ

役割デザイン処理
Heroコピー内包 KV を全幅表示。フォームだけ HTML で重ねる
Trust短い前提と根拠を低い情報帯で見せ、KV の熱量を一度落ち着かせる
Problemビジュアルを主役にし、課題カードを右へずらして重ねる
RiskCobalt の全幅章。画像と番号付きリストで空気を切り替える
MechanismIvory / Vermilion。画像の下へ工程カードをずらし、物理的なレイヤー感を作る
Use case黒い編集紙面。シーンを縦に切り替え、次の用途章は可変グリッドにする
DifferentiationInk の全幅章。資産ビジュアルと理由リストを左右で対比する
Comparison表の可読性を優先。装飾を抑え、選ぶ列だけ色で強調する
ProcessCobalt の全幅章。実画像と HTML タイムラインを組み合わせる
Proof事例と証拠を編集記事のように扱う
PricingVermilion の色面。価格・次の行動を一つの塊にする
FAQ静かな余白と罫線で読むことに集中させる
Final CTA / FormCTA は高コントラスト。入力欄・ボタン・同意は必ず HTML

画像生成ルール

  • 画像単体を広告バナーとして完結させず、LP の一章として生成する
  • Hero 以外にブランド名、ロゴ、CTA、ページ番号を反復しない
  • セクション見出しと短い補助コピーだけを画像へ組み込む
  • 全画像で色・書体感・写真処理・余白規則を共有する
  • 同じ構図、同じ人物、同じ訴求、同じレイアウトを反復しない
  • フォーム、ボタン、入力欄、価格表、FAQ、比較表は HTML で作る
  • 画像は HTML の代用品ではなく、価値理解と記憶を担う場面に使う

QA

  • 375 / 390 / 414 / 1280 px で横スクロールなし
  • 画像がなくても意味と CV が成立する
  • 画像込みでは KV から最終 CTA まで同一ブランドに見える
  • 連続する 2 セクションが同じ構図・背景色・カード形状にならない
  • h1 は 1 つ、フォーム送信導線は実装、CTA は操作可能
  • 画像内コピーと HTML の意味が矛盾しない

調査元