デザインシステム
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 — 洗練された、ハイエンドサービス