MIX DESIGNLAB / LP MINI DESIGN SYSTEM / V1.3
雰囲気から選ぶ、
LPのデザインルール。
見た目を8つの方向から選んで、業種に合わせて情報を組み立てる。読みやすさは共通に、色・文字・形・写真の見せ方を変えられる制作セットです。
共通ルール・雰囲気・業種を独立して選べます。公式資料の考え方を参照し、LP向けの値はMixの提案として整理しました。
カード内で配色・角丸と、日本語／英字／数字の見出し書体を比較できます。書体は端末の代替フォントで表示される場合があります。
雰囲気や業種を選ぶと見本と指示文が更新されます。入力欄も初期状態に戻ります。PC幅はこの画面の幅まで広がります。SP幅は390pxまで狭め、実制作と同じCSSで表示します。画面が狭い場合は両方とも画面内に収まります。
FVの見せ方も、選ぶ。
業種とCTAに合わせて、写真・文字・余白を一緒に設計します。
見出しとCTAは写真に重ねず、読める面を確保します。実際の素材でPC・SPのトリミングを確認してください。
BRAND MIX / COMPONENT CHOICES
色と文字を組み合わせ、部品を選ぶ。
下の5案はMix独自の提案です。配色・見出し・サイズ・余白・角丸をまとめて、新しい参考テーマへ反映します。業種とFVはそのまま引き継ぎます。
参考ライブラリーと素材のメモ
MIYAMAライブラリーを開く（会員ログインが必要な場合があります）。フォント・配色・イラスト・キャラクターの方向を検討するための参照先です。ガイド画像や作例をそのまま公開アプリへ取り込みません。
URLとメモはブラウザ内・JSON・指示文に保存します。URLの自動取得、ガイド画像・写真の転載、キャラクターの複製は行いません。各素材の条件を確認し、自分の素材に置き換えてください。
部品の参考：Web BENTO ボタン ／ カード ／ ホバー。ここでは一般的な表現をMix独自に実装しています。参照元のパーツコード集は再配布しません。
REFERENCE → YOUR THEME
分析結果から、参考テーマへ。
取得できた値を一括反映。不明な値は現在の設定を引き継ぎます。参考サイトの写真は取り込みません。
スクショから
画面幅は自動推定します。高解像度の画像は撮影時のブラウザ幅に直してください。配色・余白・配置は推定、フォント名や文字内容は対象外です。
HTML・CSS／分析JSONから読み込む
参考テーマの一覧
反映結果・引き継いだ項目
業種の情報構成
構成の候補
原稿で確認する情報
写真の方向
選んだ組み合わせを、Codexへ。
下の文は短い設定用です。実制作には、同梱のcodex-prompt.mdで対象・目的・CTAの行き先を埋め、原稿と画像も渡してください。
これは提案プリセットです。URL分析時はHTML・CSSを取得します。スクショ分析に外部AI・APIキーは不要です。字形はOSにより変わります。SP幅は390px以下のブラウザ表示例です。実機の字形・操作は別途確認してください。通常文字の指定色の検証範囲と結果はcontrast-check.md・qa-report.mdに記載。ページ全体のWCAG適合を保証するものではありません。