青山フラワーマーケット（Aoyama Flower Market） DESIGN.md

青山フラワーマーケット（https://www.aoyamaflowermarket.com/）のデザイン仕様書。 パーク・コーポレーション運営のプレミアムフラワーショップブランド。花のある暮らしを提案し、全国に店舗を展開。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調に、ウォームレッド #c8391c の CTA と ゴールド #b39b56 のアクセントでプレミアムなフラワーショップの品格を表現。見出しにセリフ体（Frank Ruhl Libre）を使い、植物園のような上品さを演出
• 密度: 本文の line-height は 1.5。スライダーやカードを中心としたビジュアル重視のレイアウト。情報密度よりも余白と写真の美しさを優先
• キーワード: ボタニカル、エレガント、ナチュラルプレミアム、セリフ×ゴシックの二層構造、花のある暮らし
• 特徴:
  • 見出し・セクションタイトルに Frank Ruhl Libre（Google Fonts セリフ体）を採用。ジェントルで有機的な印象の欧文セリフで、花屋のブランドイメージと一致
  • 本文は 游ゴシック体 を中心としたシステムフォントスタック。可読性とOS互換性を重視
  • ブランドカラーは #c8391c（ウォームレッド）。主要 CTA「全国の店舗情報」やページトップボタン、価格表示に使用。花の赤を想起させる色
  • ゴールド #b39b56 はランキングやプレミアム要素に使用。高級感の演出
  • セクション背景に #fafbf3（ごく薄いグリーンクリーム）を使い、植物のナチュラルさを暗示
  • ナビゲーションのテキストは 10px と極小で、letter-spacing: -0.8px の密なトラッキング。限られたスペースに多くのメニュー項目を収める設計
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Brand Red (#c8391c): メインのブランドカラー。主要 CTA の背景、ページトップボタン、価格表示に使用。温かみのある赤橙色
• Brand Gold (#b39b56): ランキング・プレミアム要素のアクセント。ゴールドは花束の高級感を連想させる
• Banner Red (#c91435): お知らせバナーや警告に使用。Brand Red よりやや深い赤

CTA / Buttons

• Primary CTA: 背景 #c8391c / 文字 #ffffff / radius なし（角形）/ 花のブランドを象徴する温かい赤
• Secondary CTA: 背景 transparent / 文字 #222222 / border 1px solid #969696 / radius 8px / padding 0 30px / height 38px
• Online Shop CTA (#f2b300): ゴールデンイエロー。オンラインショップ遷移ボタンに使用（404ページ等）

Neutral

Accent

• Brown (#a27769): 季節のフラワーアレンジメント等で使用されるアクセントカラー。花の温かみを補強

Semantic（推奨値）

実サイトには明確なエラー／成功色は表面化していない。EC 向けに推奨する補完値:

• Danger: #c91435（Banner Red を流用）
• Success: #4a8c5c（植物のグリーンに寄せた成功色）
• Warning: #f2b300（Online Shop CTA のゴールデンイエローを流用）

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体（Yu Gothic） を最優先。モダンで端正な印象の和文ゴシック
• フォールバック: ヒラギノ角ゴ ProN W3（Apple OS）→ ヒラギノ角ゴ Pro W3（旧 Apple OS）→ Meiryo（Windows）→ ＭＳ Ｐゴシック（古い Windows）→ sans-serif
• 明朝体: 使用しない（見出しの装飾は欧文セリフ体で担当）

3.2 欧文フォント

• セリフ（Display）: Frank Ruhl Libre（Google Fonts）。セクション見出し・ディスプレイテキストに使用。クラシカルで有機的なセリフ体
• サンセリフ: 専用の欧文サンセリフは持たず、游ゴシック体内の欧文グリフを使用

3.3 font-family 指定

css/* 本文・ナビ・商品情報 */
font-family: 游ゴシック体, "Yu Gothic", YuGothic,
  "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
  Meiryo, メイリオ, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;

/* 見出し・セクションタイトル（欧文セリフ） */
font-family: "Frank Ruhl Libre", serif;

フォールバックの考え方:

• 本文は游ゴシック体を最優先。和文名と英語名を併記して確実にマッチさせる
• Hiragino は ProN（JIS2004 字形）と Pro（JIS90 字形）の両方を指定し、新旧 macOS に対応
• 見出しの Frank Ruhl Libre は Google Fonts から配信。未読込時は generic serif へフォールバック
• フォントスタック全体が和文対応フォントで構成されており、欧文専用フォント（Helvetica 等）は含まない

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文の行間 (line-height): 1.5
• 見出しの行間: 1.3（Display）〜 1.5（H3/H4）
• 本文の字間 (letter-spacing): normal（游ゴシックのデフォルト字送り）
• Display 見出しの字間: 2px（0.05em）。セリフ体に広めのトラッキングで上品な間合い
• ナビの字間: -0.8px（-0.08em）。極小文字で密に詰める

ガイドライン:

• 本文の line-height: 1.5 は日本語としては標準的な値。商品情報中心のため、記事メディアほど広い行間は不要
• Display 見出し（Frank Ruhl Libre）は letter-spacing: 2px を必ず適用。ゆったりとした字間がブランドの優雅さを表現する
• ナビの letter-spacing: -0.8px は例外的に詰める指定。限られたスペースに多くのメニュー項目を収める実用的な処理

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: break-all;
overflow-wrap: break-word;
line-break: strict;

禁則対象:

• 行頭禁止: ）」』】〕〉》」】、。，．・：；？！
• 行末禁止: （「『【〔〈《「【

3.7 OpenType 機能

css/* 本サイトでは palt・kern の明示的な指定は確認されていない */
font-feature-settings: normal;

• palt: 適用なし。本文・見出しともにデフォルトの字送り
• kern: 適用なし
• 游ゴシック体はデフォルトでプロポーショナル処理が控えめなため、明示的な palt なしでも可読性に問題なし

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（ブランドレッド）

• Background: #c8391c
• Text: #ffffff
• Padding: 適宜（CTA によりサイズ可変）
• Border Radius: 0（角形）
• Font Size: 16px
• Font Weight: 400

Secondary（枠線付き）

• Background: transparent
• Text: #222222
• Border: 1px solid #969696
• Padding: 0 30px
• Border Radius: 8px
• Height: 38px（line-height で中央揃え）

Page Top Button

• Background: #c8391c
• Text: #ffffff
• 固定位置表示

Inputs

• Background: #ffffff
• Border: 1px solid #969696
• Border (focus): 1px solid #c8391c（推定、ブランドカラー準拠）
• Border Radius: 4px
• Padding: 8px 12px
• Font Size: 16px

Cards（商品カード）

• Background: #ffffff
• Border: なし
• Border Radius: 0（角形）
• Padding: 16px
• Shadow: なし（フラットなレイアウト）
• 商品画像 + 商品名（16px bold）+ 説明（13px）+ 価格（18px, #c8391c）の構成

Slider / Carousel

• Active Dot: #222222 / border-radius 20px（pill）
• Inactive Dot: #b1b1ac / border-radius 20px（pill）/ inset box-shadow

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定、コンテンツ領域の実測値に基づく）
• Padding (horizontal): 16px

Grid

• 商品一覧: 4カラムグリッド（デスクトップ）
• 特集エリア: フルワイドのスライダー
• Gutter: 16px〜24px

6. Depth & Elevation

サイト全体がフラットデザイン基調で、影の使用は最小限。商品写真とホワイトスペースでコンテンツの階層を作る。

7. Do's and Don'ts

Do（推奨）

• Display 見出し（Frank Ruhl Libre）には必ず letter-spacing: 2px を適用する
• 価格表示は #c8391c（Brand Red）で統一する
• 商品カードはフラット（影なし）にし、写真の美しさで訴求する
• セクション背景には #fafbf3（クリーム）を使い、植物的な温かみを出す
• 游ゴシック体の font-family には和文名と英語名を両方記述する（OS 互換性）
• ボタンは角形（Primary）と角丸 8px（Secondary）を使い分ける

Don't（禁止）

• Frank Ruhl Libre を本文テキストに使用しない（見出し・ディスプレイ専用）
• Brand Red (#c8391c) を背景の広い面に使わない（CTA とページトップのみ）
• ナビゲーション以外に letter-spacing: -0.8px の密なトラッキングを適用しない
• 商品カードに過度な影（box-shadow）をつけない（フラットデザインを崩す）
• 日本語本文に line-height: 1.2 以下を使わない
• font-family に游ゴシック体を1つだけ指定しない（フォールバック必須）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• ナビゲーションは 10px テキストだが、タップ領域は padding で確保

フォントサイズの調整

• モバイルでは Display 見出しを 28px 程度に縮小
• 本文 16px はモバイルでも維持
• 商品価格 18px はモバイルでも維持（視認性重視）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #c8391c (Brand Red)
Accent Gold: #b39b56
Text Color: #222222
Background: #ffffff
Section BG: #fafbf3 (cream)
Display Font: "Frank Ruhl Libre", serif (40px / 400 / letter-spacing: 2px)
Body Font: 游ゴシック体, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif
Body Size: 16px
Line Height: 1.5

プロンプト例

青山フラワーマーケットのデザインシステムに従って、商品一覧ページを作成してください。
- プライマリカラー: #c8391c（CTA、価格表示）
- Display 見出しフォント: "Frank Ruhl Libre", serif / 40px / letter-spacing: 2px
- 本文フォント: 游ゴシック体, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif
- 行間: 本文は line-height: 1.5
- セクション背景: #fafbf3（薄いクリーム）
- 商品カード: フラットデザイン（影なし）、写真 + 商品名(16px bold) + 説明(13px) + 価格(18px, #c8391c)
- ボタン: Primary は #c8391c 角形、Secondary は border 1px solid #969696 角丸 8px