デザインシステム
Draftlyがユニークなデザインシステムを生成する方法 — テーマ、CSS変数、タイポグラフィ。
デザインの生成方法
Draftlyは固定テンプレートを適用せず、プロンプトからユニークなデザインシステムを生成します。計画フェーズで2つの重要なシグナルを抽出します：
•カラームード — 説明から推測（「温かみのある素朴」→ アンバー/ブラウン；「暗い映画的」→ ティールアクセント付きの深いネイビー）
•フォントムード — ブランドボイスに合致（「エディトリアル」→ セリフ；「テックスタートアップ」→ ジオメトリックサンズ）
これらはサイト全体に適用されるCSS カスタムプロパティになります。結果は汎用的なテーマではなく、統一されたビジュアルアイデンティティです。
テーマムード
| ムード | 色 | タイポグラフィ | 適合業種 |
|---|---|---|---|
| ダーク シネマティック | 深いネイビー、黒、ティール | ワイドトラックサンズ | テック、SaaS、エンターテインメント |
| ウォーム ラスティック | アンバー、ブラウン、オフホワイト | ゆったりセリフ | 食、ホスピタリティ、クラフト |
| クリーン ミニマル | ホワイト、ライトグレー、ブラック | ジオメトリックサンズ | ポートフォリオ、プロフェッショナルサービス |
| バイブラント ボールド | 高彩度プライマリー | ヘビーディスプレイ | ファッション、コンシューマーブランド |
| ラグジュアリー ダーク | ブラック、ゴールド、クリーム | シンセリフ | 高級品とサービス |
| ネイチャー オーガニック | フォレストグリーン、アーストーン | ヒューマニストサンズ | ウェルネス、サステナビリティ |
CSSカスタムプロパティ
すべての生成サイトは標準のCSS変数セットを使用します：
css
:root {
--bg: #0a0a0f; /* ページ背景 */
--surface: #111118; /* カード / サーフェス背景 */
--accent: #3B82F6; /* プライマリアクセント / CTAカラー */
--accent-2: #6366F1; /* セカンダリアクセント */
--text: #E5E7EB; /* 本文テキスト */
--text-muted: #6B7280; /* セカンダリ / ミュートテキスト */
--heading: #FFFFFF; /* 見出し */
--border: rgba(255,255,255,0.08); /* ボーダー */
--font-display: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
}色を変更するには、コードタブで編集するか、チャットを使用してください：「--accent を#FF6B35に変更する」。
タイポグラフィ
DraftlyはCSS clamp() を使用してシームレスなスケーリングのための流体レスポンシブタイポグラフィを生成します：
•ヒーロー見出し —
clamp(2.5rem, 6vw, 5rem) — モバイルから大型デスクトップまでスケール•セクション見出し —
clamp(1.75rem, 3.5vw, 2.5rem)•本文テキスト —
1rem（16px）、行間 1.6•キャプション —
0.875rem（14px）フォントはGoogle Fontsで読み込まれます。ムード別によく生成されるペア： - Inter + Inter — クリーン、汎用的、ほとんどのSaaS - Playfair Display + Lato — エディトリアル、ラグジュアリー、レストラン - Space Grotesk + DM Sans — テック、ジオメトリック、スタートアップ - Cormorant Garamond + Karla — 洗練された高級サービス