運用・デプロイ
Web UI 指針
管理画面の見た目・情報設計。
UI デザイン指針 v0（Swipe LP Web）
コンセプト
- 作成LPはSP向け: **このサービスで作るLP（訪問者が見る画面）**はスマートフォン表示・タッチ操作を前提にする（縦持ち・親指・スワイプ）。管理コンソールのUIは別物で、プレビューはそのLPをスマホ相当の枠で確かめる。素材だけ上げても自動では最適化されないため、画像・動画とSPのギャップをどう埋めるかは spec/creative-sp-pipeline-v0.md で段階的に整理する。
- 情報ファースト: 装飾より伝達と整理。誰向けか・何を伝えるか・順序・強弱を先に決める。
- 編集・雑誌的: 余白・リズム・写真（プレビュー）と文字の共存。ベタ置きではなく構図として扱う。
- 静かな上品さ: quiet luxury / minimal but warm。色数を抑え、統一感で美しさを出す。
トークン（実装）
| 項目 | 方針 |
|---|---|
| フォント | 本文 Noto Sans JP、見出し Noto Serif JP、コード IBM Plex Mono（Next next/font/google） |
| ベース背景 | 暖かみのあるオフホワイト（stone-50 系） |
| テキスト | メイン stone-800、補助 stone-600、さらに弱く stone-500 |
| 境界 | stone-200 / stone-200/80、シャドウは弱く（shadow-sm） |
| 主ボタン | stone-900 地に stone-50 字、ホバーで一段階のみ |
| 副ボタン | 白地 + stone-300 境界 |
| 状態バッジ | 彩りを抑え、stone 系のリングで区別（公開はやや濃いトーン） |
レイアウト
- 1カラム中心、
max-wで読み幅を制限。モバイルでも十分なpx/py。 - セクション間は
space-y-10〜12程度の余白。 - 主役は1つ（トップではプレビュー、管理では一覧またはフォーム）。
避けること
- 情報の詰め込み、装飾過多、意味のないグラデーション、多色、可読性を落とす細字・低コントラスト。
参照キーワード
information first · editorial layout · refined typography · elegant whitespace · quiet luxury · minimal but warm