site-specification

サイト仕様スキル

ユーザーの説明から詳細なサイト仕様を抽出し、テーマの生成に役立てます。ユーザーが画像、画像 URL、その他のドキュメントを提供している場合は、ブランドやデザインの好みに関する追加の手がかりを得るために分析します。たとえば、既存のロゴ画像はブランドの美的感覚、トーン、価値観を知るうえで非常に参考になります。また、文書にはブランドアイデンティティやデザインの好みに関する明確な記述が含まれている場合があります。

サイト仕様のスキーマ

完全なサイト仕様には、次の JSON 構造を使用します。

{
  "siteBrief": {
    "siteName": "Name of the site/business",
    "siteType": "Type of site (e.g., e-commerce, portfolio, blog, SaaS, restaurant)",
    "primaryGoal": "Main purpose or conversion goal of the site",
    "audience": "Target audience description",
    "tone": "Voice and tone for the content",
    "brandKeywords": "Keywords describing the brand aesthetic and values"
  },
  "layoutNotes": [
    "Each layout requirement as a separate string",
    "Sections, features, and visual elements"
  ],
  "typography": {
    "primaryFont": "Main font for headings",
    "secondaryFont": "Font for body text",
    "usage": "How fonts should be applied",
    "fontImport": "Google Fonts import URL"
  }
}

すべてのフィールドは任意です。ユーザーの説明から妥当に推測できるものだけを含めてください。

サイトの種類ごとの推測パターン

SaaS／テクノロジー

推測する内容：

• 主な目標：登録やデモの申し込みを促す
• 対象者：技術系の意思決定者、開発者、ビジネスユーザー
• トーン：プロフェッショナル、革新的、信頼できる
• ブランドキーワード：モダン、効率的、パワフル、シームレス

一般的なレイアウト：

• 価値提案と CTA を含むヒーロー
• 機能グリッドまたは比較
• 社会的証明（ロゴ、推薦文）
• 料金セクション
• FAQ
• 最終 CTA

タイポグラフィの傾向：

• クリーンな幾何学系サンセリフ
• ざっと読める明確な階層構造
• 検討候補：Satoshi、Plus Jakarta Sans、Outfit

E コマース／小売

推測する内容：

• 主な目標：購入を促す
• 対象者：特定の関心を持つ消費者
• トーン：ブランドによって異なる（高級、カジュアル、手頃な価格など）
• ブランドキーワード：位置づけによって異なる

一般的なレイアウト：

• 注目商品やプロモーションを含むヒーロー
• カテゴリーナビゲーション
• 注目商品のグリッド
• 信頼性の指標（レビュー、保証）
• ニュースレターの登録

タイポグラフィの傾向：

• ブランドの位置づけに合わせる
• 高級感：洗練されたセリフ体
• モダン：幾何学系サンセリフ
• 遊び心：ディスプレイフォント

専門サービス（法律、金融、コンサルティング）

推測する内容：

• 主な目標：問い合わせを獲得する、または信頼性を確立する
• 対象者：ビジネス上の意思決定者、専門知識を求める個人
• トーン：プロフェッショナル、権威ある、信頼できる
• ブランドキーワード：専門性、誠実さ、確立された、信頼性

一般的なレイアウト：

• 実績や価値を示すヒーロー
• サービス／業務分野
• チームのプロフィール
• 事例または成果
• 顧客からの推薦文
• 問い合わせ／相談の CTA

タイポグラフィの傾向：

• 見出しには伝統的なセリフ体（信頼感）
• 本文には読みやすいサンセリフ体（可読性）
• 検討候補：Cormorant Garamond、DM Serif Display、Source Sans Pro

レストラン／飲食サービス

推測する内容：

• 主な目標：予約や来店を促す
• 対象者：近隣の食事客、食に関心のある人
• トーン：温かく、親しみやすく、食欲をそそる
• ブランドキーワード：新鮮、手作り、居心地のよさ、本格的

一般的なレイアウト：

• 食欲をそそる料理の画像を含むヒーロー
• メニューのセクション
• 紹介／ストーリー
• 場所と営業時間
• 予約 CTA
• Instagram またはギャラリー

タイポグラフィの傾向：

• 個性を表現するディスプレイフォント
• メニューには読みやすいセリフ体またはサンセリフ体
• 検討候補：Playfair Display、Lora、Josefin Sans

クリエイティブ／ポートフォリオ

推測する内容：

• 主な目標：作品を紹介し、クライアントを獲得する
• 対象者：見込み客、アートディレクター、協業相手
• トーン：クリエイティブ、個性的、作り手の人柄が表れた
• ブランドキーワード：独創的、丹念に作られた、芸術的、唯一無二

一般的なレイアウト：

• 全画面表示のポートフォリオヒーロー
• プロジェクトギャラリーまたは事例
• 紹介／プロフィールのセクション
• 提供サービス
• 問い合わせまたは相談フォーム

タイポグラフィの傾向：

• 個性的なディスプレイフォント
• 作り手のスタイルに合わせたもの
• 検討候補：Clash Display、Fraunces、Syne

ブログ／メディア

推測事項：

• 主な目標：読者を惹きつけ、読者層を広げる
• 対象読者：特定の関心を持つ読者
• トーン：分野によって異なります（権威ある、カジュアル、楽しめる雰囲気など）
• ブランドキーワード：情報豊富、魅力的、信頼できる

一般的なレイアウト：

• 注目記事のヒーローセクション
• 最近の記事のグリッドまたはリスト
• カテゴリーのナビゲーション
• 著者紹介
• ニュースレターの登録
• 人気記事／トレンドセクション

タイポグラフィの傾向：

• 読みやすい本文用フォント（長文では特に重要）
• すっきりした見出し用フォント
• 検討するフォント：Merriweather、Source Serif Pro、DM Sans

非営利団体／組織

推測事項：

• 主な目標：寄付、ボランティア、または認知度向上を促す
• 対象読者：支援者、寄付を検討している人、地域コミュニティのメンバー
• トーン：思いやりがある、切迫感がある、信頼できる
• ブランドキーワード：インパクト、コミュニティ、変革、希望

一般的なレイアウト：

• ミッションステートメントとCTAを含むヒーローセクション
• 活動の成果を示す統計
• プログラム／取り組み
• 活動がもたらした成果のストーリー
• 支援方法（寄付、ボランティア）
• ニュースレター／最新情報の登録

タイポグラフィの傾向：

• 温かみがあり、親しみやすいフォント
• 冷たい企業的な印象は避ける
• 検討するフォント：Lato、Open Sans、PT Serif

例

例 1：コーヒーショップ

ユーザーのプロンプト：「Bean & Brew という名前のコーヒーショップのテーマを作成してください」

{
  "siteBrief": {
    "siteName": "Bean & Brew",
    "siteType": "coffee shop",
    "primaryGoal": "Attract local customers and showcase menu",
    "audience": "Coffee enthusiasts, local community members, remote workers looking for a cozy workspace",
    "tone": "warm, inviting, artisanal, community-focused",
    "brandKeywords": "cozy, handcrafted, aromatic, rustic wood, warm browns, cream accents"
  },
  "layoutNotes": [
    "Hero with inviting coffee shop interior or signature drink",
    "Menu section with categories (espresso, specialty drinks, pastries)",
    "About section with story and values",
    "Location and hours with embedded map",
    "Instagram feed integration",
    "Warm color palette (browns, creams, coffee tones)"
  ],
  "typography": {
    "primaryFont": "\"Playfair Display\", serif",
    "secondaryFont": "\"Lato\", sans-serif",
    "usage": "Playfair Display for elegant headings, Lato for readable body text",
    "fontImport": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap"
  }
}

例 2：法律事務所

ユーザーのプロンプト：「Harrison & Associates という法律事務所のテーマが必要です。企業法務と合併を専門としています。とてもプロフェッショナルで、信頼感のある雰囲気にしてください。」

{
  "siteBrief": {
    "siteName": "Harrison & Associates",
    "siteType": "law firm",
    "primaryGoal": "Establish credibility and generate client inquiries for corporate law services",
    "audience": "Business executives, corporate decision-makers, companies seeking M&A legal counsel",
    "tone": "professional, authoritative, trustworthy, sophisticated",
    "brandKeywords": "corporate excellence, integrity, deep navy, gold accents, marble textures, clean lines"
  },
  "layoutNotes": [
    "Hero with professional office imagery or abstract corporate graphics",
    "Practice areas section highlighting corporate law and M&A expertise",
    "Attorney profiles with credentials and specializations",
    "Case studies or notable transactions (anonymized)",
    "Client testimonials from business leaders",
    "Contact section with consultation booking",
    "Color palette: navy blue, white, gold accents"
  ],
  "typography": {
    "primaryFont": "\"Cormorant Garamond\", serif",
    "secondaryFont": "\"Source Sans Pro\", sans-serif",
    "usage": "Cormorant Garamond for prestigious headings, Source Sans Pro for professional body text",
    "fontImport": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap"
  }
}

例 3：eスポーツチーム

ユーザーのプロンプト：「eスポーツチーム、NeonPulse Gaming のテーマを作成してください。FPS ゲームで競技しており、エッジの効いたスピード感のあるデザインを希望します。」

{
  "siteBrief": {
    "siteName": "NeonPulse Gaming",
    "siteType": "esports team",
    "primaryGoal": "Build fan community, attract sponsors, and recruit talented players",
    "audience": "Gaming enthusiasts, esports fans, potential sponsors, aspiring pro gamers",
    "tone": "edgy, high-energy, competitive, bold",
    "brandKeywords": "neon glow, cyberpunk, electric purple, hot pink, dark backgrounds, glitch effects, speed lines"
  },
  "layoutNotes": [
    "Hero with team action shots or dynamic gaming footage background",
    "Player roster with stats and social links",
    "Match schedule and live stream integration",
    "Tournament achievements and trophies",
    "Sponsor showcase",
    "Merchandise store link",
    "News/blog for team updates",
    "Dark theme with neon accents (purple, pink, cyan)"
  ],
  "typography": {
    "primaryFont": "\"Rajdhani\", sans-serif",
    "secondaryFont": "\"DM Sans\", sans-serif",
    "usage": "Rajdhani for aggressive tech headings, DM Sans for clean readable content",
    "fontImport": "https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=DM+Sans:wght@300;400;600&display=swap"
  }
}

例 4：簡潔な依頼

ユーザーのプロンプト：「ブログ用のカスタムテーマを作成してください」

{
  "siteBrief": {
    "siteType": "personal blog",
    "primaryGoal": "Share content and build readership",
    "tone": "personal, approachable"
  },
  "layoutNotes": [
    "Hero with featured post or welcome message",
    "Recent posts grid or list",
    "About the author section",
    "Categories/tags navigation",
    "Newsletter signup"
  ],
  "typography": {
    "primaryFont": "\"Outfit\", sans-serif",
    "secondaryFont": "\"Merriweather\", serif",
    "usage": "Outfit for clean headings, Merriweather for comfortable long-form reading",
    "fontImport": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Merriweather:wght@300;400;700&display=swap"
  }
}

提示形式

抽出した仕様をユーザーに提示し、確認を求めてください。呼び出し元のコマンドで別の提示形式が指定されていない限り、以下の表形式を使用してください。

項目	値
サイト名	[name]
サイトの種類	[type]
主な目標	[goal]
対象読者	[audience]
トーン	[tone]
ブランドキーワード	[keywords]
主要セクション	[layoutNotes から抽出したカンマ区切りのリスト]
タイポグラフィ	[primaryFont] + [secondaryFont]

次に、次のように尋ねてください：「ご希望のイメージを反映できていますか？デザイン案に進む前に調整したい点があればお知らせください。」