DOCUMENT · 2.0 KB
docs/ui-benchmark-v2.md
Workspace snapshot · 08/31 23:51
AI LP Studio UI / UX benchmark v2
採用した原則
| 参考 | 観察した体験 | AI LP Studioへの反映 |
|---|---|---|
| Spotify | 候補を最初から視覚的に並べ、3つ以上の選択で即座に個人化する | 選択カードを主役にし、回答ごとにLP仮説プレビューを更新 |
| Typeform | 1画面1判断と前回回答の引き継ぎ | 質問を一つに集中し、過去回答は小さな編集チップに縮約 |
| Wix AI / Wix Studio | 回答→site brief→生成、キャンバスとInspector、AIと手動編集の往復 | 入力中からbriefとLPの方向性を可視化。後工程はキャンバス中心 |
| Relume | sitemapとwireframeの相互同期、section promptによる局所再生成 | 構成・WF・デザインのセクションIDを一貫させる |
| Framer | AI出力を完成品にせず、editable canvasの初期値にする | 生成後は「採用」ではなく、直接編集・コメント・局所再生成へ移行 |
| Canva | 作るものを視覚カテゴリから選び、テンプレートを早く見せる | 文字だけのラジオボタンではなく、意味と差が見える視覚タイルにする |
廃止したパターン
- 最初から7工程を大きな左サイドバーで見せる。作業量が先に見え、成果への期待より重さが勝つ。
- 右側を空の回答ログにする。選択の対価が見えず、フォーム入力に感じる。
- 低彩度のベージュとえんじを広範囲に使う。制作ツールとしての速度・新鮮さが出ない。
新しい色役割
- Ink
#0A0A0B: 主文字、制作レール、プレビューの軸。 - White
#FFFFFF/ Cloud#F3F4F6: キャンバスとサーフェス。色を濁らせない。 - Action Orange
#FF4F00: 生成・価値・クリエイティブの主信号。 - System Blue
#2447FF: 進行、リンク、選択に使う。 - Signal Yellow
#FFD928: 数字・注意・視線誘導の小面積に限定。 - Success Green
#23D18B: 保存、完了、品質ゲートのみ。