DOCUMENT · 2.2 KB
docs/wf-layout-principles.md
Workspace snapshot · 08/31 23:51
LPワイヤーフレーム・レイアウト原則
PENGINの複数実案件を横断し、クライアント固有の文言・数値・社外秘を持ち込まずに、情報設計の型だけを抽象化したものです。単一案件の見た目をテンプレート化せず、情報量・素材・証拠・CV方法からレイアウトを選びます。
調査母集団
- 店舗向けBtoBサービス:FV内フォーム、ロゴ帯、仕組み図、検知サンプル、用途グリッド、円形ステップ
- 士業セミナー:悩み、選ばれる理由、解決マップ、遅延リスク、当日の流れ、専門家、申込フォーム
- AI業務支援:概念提示、Before/After、業務別ユースケース、効果指標、4週間工程、3プラン
- 業務改善支援:人とAIの役割比較、支援メニュー、代替比較、業界実績、支援チーム
- 住宅設備商品:商品ステージ、権威性、3ステップ、商品ラインナップ、写真付き事例、サンプル請求
- 個人向け相談:診断導線、放置リスク、費用構造、活用例、利用者の声、予約フォーム
選定ルール
- FVはCVがフォームなら
hero-form、商品理解が先ならhero-product-stage、強い実績があるならhero-proof-split、新概念の理解が最優先ならhero-copy-led。 - 課題は短い並列項目ならカード、具体チェックならチェックリスト、前提説明が必要ならナラティブ。
- 仕組みは順序ならステップ、変化の対比ならBefore/After、複数要因の関係なら解決マップ。
- 実績は数値だけならメトリクス、顧客の背景から結果まで読ませるなら事例特集、声が主証拠ならレビューカード。
- 価格は同条件のプラン比較ならカード、商品群ならラインナップ、個別要件で変わるなら見積説明。
- CTAはページ途中の再提示ならバナー、体験物があるならサンプルCTA、入力が主目的ならフォーム分割。
同一のレイアウトを連続させず、各セクションの「読者がここで何を判断するか」に合わない型は使いません。