BASE FOOD（ベースフード） DESIGN.md

BASE FOOD（https://basefood.co.jp/）のデザイン仕様書。 完全栄養食の D2C ブランド。「かんたん、おいしい、からだにいい」がタグライン。 実サイトの computed style 実測（2026-05-21 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 黒いヒーローセクションの力強さと、ウォームイエロー #fac83c のピル CTA で「おいしさ・手軽さ・健康」の前向きさを表現。白い商品面と暖色系ニュートラル #f0f1eb でクリーンかつ温かみのある D2C 体験を構築
• 密度: 本文の line-height は 1.5 と標準的。商品カルーセルや大画面ビジュアル中心で、情報密度より視覚的インパクト優先
• キーワード: ウォームイエロー、D2C ナチュラル、ピル CTA、黒ヒーロー＋白面のコントラスト、完全栄養食の信頼感
• 特徴:
  • 和文フォントに mfw-pishiigothicstdn（ピシーゴシック Std N、Morisawa フォントワークス Web フォント） を採用。Regular（-r）と Bold（-b）の 2 ウェイトを明示的に切り替える設計
  • ブランドカラーは #fac83c（ウォームイエロー／ゴールド）。CSS Custom Property --bf-surface-brand / --bf-accent-brand / --bf-button-primary-bg がすべてこの値。CTA "BASE FOODを始める" の背景、フッター全面の背景、商品ピルバッジ "商品を見る" に使用
  • ホバー時は orange（--bf-button-primary-bg-hover）、アクティブは #ea8900（--bf-button-primary-bg-active）と段階的に深くなる
  • ページ背景は白 #ffffff。ヒーローセクションは黒 #000000 でフルスクリーンの没入感
  • テキストカラーは #2a2a2a（--bf-text-primary）を基本に、#5a5a5a（--bf-text-secondary）で階層を作る。純黒 #000000 は使わず、ソフトな黒
  • ニュートラルサーフェスに #f0f1eb（--bf-surface-neutral）— 緑寄りのウォームグレー。"Cartカート" "My pageマイページ" のピル背景に使用
  • デザイントークンは --bf-* プレフィックスで体系化。font-size（10〜60）、line-height（12〜88）、spacing、色すべてにトークンがある
  • /magazine（HEALTH MAGAZINE）は別システム（WordPress）で、游ゴシック体ベースの独立したタイポグラフィを持つ
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Yellow (#fac83c): メインのブランドカラー。主要 CTA "BASE FOODを始める" の背景、フッター背景、商品ピルバッジ "商品を見る"（--bf-surface-brand / --bf-accent-brand / --bf-button-primary-bg）
• Brand Hover (orange): 主要 CTA のホバー状態（--bf-button-primary-bg-hover）— CSS キーワード orange（≒ #ffa500）
• Brand Active (#ea8900): 主要 CTA のアクティブ／プレス状態（--bf-button-primary-bg-active）
• Brand Disabled (#ffe89f): 主要 CTA の無効状態背景（--bf-button-primary-bg-disabled）

CTA / Buttons

• Primary CTA: 背景 #fac83c / 文字 #2a2a2a / radius 9999px（pill）/ padding 16px 24px / 16px / weight 400（-r ウェイト）
• Secondary CTA: 背景 transparent / 文字 #5a5a5a / border 1px solid #c8c8c8 / radius 9999px（pill）/ padding 12px 16px（"すべての商品を見る" "すべての記事を見る"）
• Neutral Pill: 背景 #f0f1eb / 文字 #5a5a5a / radius 9999px / padding 0 32px 0 24px / height 56px（"Cartカート" "My pageマイページ"）
• Small Promo Pill: 背景 #fac83c / 文字 #5a5a5a / radius 9999px / padding 8px 12px（"商品を見る"）
• Carousel Nav: 背景 transparent / border 1px solid #2a2a2a（active）or 1px solid #c8c8c8（disabled）/ radius 9999px / size 48px

Semantic（アクセント）

• Notice (#f05e88): ピンクの注意喚起（--bf-accent-notice）
• Error (#ff4a24): エラー表示（--bf-accent-error）
• Swiper Pagination (#ff9b00): カルーセルのアクティブドット（--swiper-pagination-color）

Text

Surface

Divider

3. Typography Rules

3.1 和文フォント

• ゴシック体: mfw-pishiigothicstdn（ピシーゴシック Std N） を最優先。フォントワークス（Morisawa グループ）の Web フォント
• 2 ウェイト体制: Regular（mfw-pishiigothicstdn-r）と Bold（mfw-pishiigothicstdn-b）を 別の font-family 名で切り替える 設計。CSS の font-weight ではなく、--bf-font-base（Regular）と --bf-font-bold（Bold）の CSS Custom Property で管理
• フォールバック: Hiragino Kaku Gothic ProN（Apple OS）→ Hiragino Sans（新しい Apple OS）→ sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）
• magazine ページの例外: /magazine は WordPress ベースで 游ゴシック体 → Yu Gothic → YuGothic → Hiragino Kaku Gothic ProN → Hiragino Sans → Meiryo → sans-serif

3.2 欧文フォント

• 専用の欧文書体は持たず、mfw-pishiigothicstdn の欧文グリフを優先
• フォールバックにシステム和文フォントの欧文グリフ
• 純粋な欧文サンセリフ（Helvetica Neue / Inter 等）は font-family に含まれない

3.3 font-family 指定

css/* 本文・通常テキスト（--bf-font-base） */
font-family: "mfw-pishiigothicstdn-r", "Hiragino Kaku Gothic ProN",
  "Hiragino Sans", sans-serif;

/* 見出し・強調テキスト（--bf-font-bold） */
font-family: "mfw-pishiigothicstdn-b", "Hiragino Kaku Gothic ProN",
  "Hiragino Sans", sans-serif;

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

• mfw-pishiigothicstdn は Web フォントのため、フォントワークスの配信 JS 経由でのみ利用可能
• font-weight: 700 ではなく font-family 自体を -b に切り替えるのが BASE FOOD の独自設計。Tailwind の font-bold クラスが --bf-font-bold を参照するよう設定されている
• フォールバックは最小限（Hiragino 系 → sans-serif のみ）。Noto Sans JP や游ゴシックは含まれない

代替フォント注記: mfw-pishiigothicstdn はフォントワークスの Web フォントライセンスのため、デザインのプレビューや社外資料で再現できない場合がある。代替として Noto Sans JP（weight 400 / 700）を使用するとモダンゴシックの印象が近い。M PLUS 1p も丸みのある字面で雰囲気が似る（preview.html はこの代替を使用）。

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

実測値（トップページ、2026-05-21 取得）。BASE FOOD は font-weight ではなく font-family で太さを制御するため、Weight 列は「実際に適用される太さ」を記載

デザイントークン（CSS Custom Properties）

css/* Font Size Scale */
--bf-font-size-10: 0.625rem;   /* 10px */
--bf-font-size-11: 0.6875rem;  /* 11px */
--bf-font-size-12: 0.75rem;    /* 12px */
--bf-font-size-14: 0.875rem;   /* 14px */
--bf-font-size-16: 1rem;       /* 16px — 本文基準 */
--bf-font-size-18: 1.125rem;   /* 18px */
--bf-font-size-20: 1.25rem;    /* 20px */
--bf-font-size-22: 1.375rem;   /* 22px */
--bf-font-size-24: 1.5rem;     /* 24px */
--bf-font-size-28: 1.75rem;    /* 28px */
--bf-font-size-32: 2rem;       /* 32px */
--bf-font-size-40: 2.5rem;     /* 40px */
--bf-font-size-48: 3rem;       /* 48px */
--bf-font-size-60: 3.75rem;    /* 60px */

/* Line Height Scale */
--bf-line-height-12: 0.75rem;   /* 12px */
--bf-line-height-14: 0.875rem;  /* 14px */
--bf-line-height-16: 1rem;      /* 16px */
--bf-line-height-20: 1.25rem;   /* 20px */
--bf-line-height-24: 1.5rem;    /* 24px */
--bf-line-height-28: 1.75rem;   /* 28px */
--bf-line-height-32: 2rem;      /* 32px */
--bf-line-height-36: 2.25rem;   /* 36px */
--bf-line-height-40: 2.5rem;    /* 40px */
--bf-line-height-44: 2.75rem;   /* 44px */
--bf-line-height-48: 3rem;      /* 48px */
--bf-line-height-56: 3.5rem;    /* 56px */
--bf-line-height-64: 4rem;      /* 64px */
--bf-line-height-72: 4.5rem;    /* 72px */
--bf-line-height-88: 5.5rem;    /* 88px */

3.5 行間・字間

行間 (line-height) -- 実測:

• 本文 (16px): 1.5（24px / 16px）-- D2C サイトとして標準的
• 見出し (48px): 1.5（72px / 48px）-- 見出しにしては広め。余白感を重視
• セクション見出し (22px): 1.45（32px / 22px）
• サブ本文 (18px): 1.33（24px / 18px）
• ナビリンク (14px): 1.43（20px / 14px）
• ヒーロースパン (20px): 1.8（36px / 20px）-- ヒーロー内は特に広い

字間 (letter-spacing) -- 実測:

• 全要素: normal（0）-- すべての計測ポイントで letter-spacing は normal
• palt も未使用。字間の手動調整は行わず、フォントのデフォルトメトリクスに委ねる方針

ガイドライン:

• BASE FOOD は letter-spacing を一切カスタマイズしない。フォントのデフォルトメトリクスで統一
• line-height は本文 1.5、見出し 1.33〜1.5 と、見出しを過度にタイトにしないゆったり設計

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: auto;

• ピル系（"Cartカート"）は white-space: nowrap
• ヒーロー内テキストは flex レイアウトで自然に折り返し

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern / halt の明示的有効化は確認されなかった
• mfw-pishiigothicstdn のデフォルトメトリクスに任せる方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（ブランドイエローピル） -- "BASE FOODを始める"

• Background: #fac83c（--bf-button-primary-bg）
• Text: #2a2a2a（--bf-button-primary-fg）— 暗色テキスト on 黄色背景
• Padding: 16px 24px
• Border Radius: 9999px（完全ピル）
• Font: pishiigothicstdn-r, 16px, weight 400
• Border: none
• Hover BG: orange（--bf-button-primary-bg-hover）
• Active BG: #ea8900（--bf-button-primary-bg-active）
• Disabled: BG #ffe89f / Text #5a5a5a

Secondary CTA（白ピル＋ボーダー） -- "すべての商品を見る" "すべての記事を見る"

• Background: transparent
• Text: #5a5a5a
• Border: 1px solid #c8c8c8（--bf-divider-middle）
• Padding: 12px 16px
• Border Radius: 9999px（完全ピル）
• Font: pishiigothicstdn-r, 16px, weight 400
• Hover BG: #f0f1eb（--bf-surface-neutral）

Neutral Pill -- "Cartカート" "My pageマイページ"

• Background: #f0f1eb（--bf-surface-neutral）
• Text: #5a5a5a
• Padding: 0 32px 0 24px
• Height: 56px（h-14）
• Border Radius: 9999px（完全ピル）
• Font: pishiigothicstdn-r, 16px, weight 400
• Border: none

Small Promo Pill -- "商品を見る"（商品カード上の小 CTA）

• Background: #fac83c（--bf-surface-brand）
• Text: #5a5a5a
• Padding: 8px 12px
• Border Radius: 9999px（完全ピル）
• Font: pishiigothicstdn-r, 16px, weight 400

Carousel Nav Button（矢印ナビ）

• Background: transparent
• Border: 1px solid #2a2a2a（active） / 1px solid #c8c8c8（disabled）
• Size: 48px（size-12）
• Border Radius: 9999px（丸）
• Text: #2a2a2a（active） / #c8c8c8（disabled）
• Hover BG: #f0f0f0（--bf-divider-low）

Close / Overlay Button

• Background: #ffffff（--bf-surface-base）
• Border: 1px solid #c8c8c8（--bf-divider-middle）
• Size: 56px（size-14）
• Border Radius: 9999px
• Position: fixed right-16px top-16px z-10
• Backdrop Filter: blur

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #c8c8c8（--bf-divider-middle）
• Border (focus): 1px solid #2a2a2a（--bf-divider-high）
• Border (error): 1px solid #ff4a24（--bf-accent-error）
• Border Radius: 8px
• Padding: 12px 16px
• Font: pishiigothicstdn-r, 16px, weight 400
• Placeholder Color: #a8a8a8（--bf-text-placeholder）
• Height: 48px

Cards / Surfaces

• 商品カード: overflow: hidden + 画像（aspect-ratio: 4/5）+ テキスト、border なし、shadow なし
• ニュートラル面: #f0f1eb（--bf-surface-neutral）
• 区切り付きカード: border-top: 1px solid #f0f0f0（--bf-divider-low）

Header

• Background: transparent（ヒーロー上ではスクロール前は透明、白文字）
• Text: #ffffff（ヒーロー上）
• Position: fixed top-0 left-0 z-[99] w-full
• Transition: transition-all duration-300 ease-in-out
• ナビリンク: pishiigothicstdn-b, 14px, weight 700, px-4, whitespace-nowrap

Footer

• Background: #fac83c（--bf-surface-brand）— ブランドイエロー全面
• Text: #5a5a5a（--bf-text-secondary）— 本文
• Heading: #2a2a2a（--bf-text-primary）— 見出し "かんたん、おいしい、からだにいい。"
• Padding: desktop 120px 80px 80px / mobile 80px 24px 40px

Magazine カテゴリバッジ（/magazine ページ）

• Background: #fac83c
• Text: #ffffff
• Padding: 0 8px
• Border Radius: 16px
• Font: 游ゴシック体, 11px, weight 500

5. Layout Principles

Spacing Scale（--bf-* トークンベース）

Container

• Max Width: 制約なし（フルブリード設計）。コンテンツはセクションごとに max-w-* で制御
• Padding (horizontal): mobile 16〜24px / desktop 80px

Border Radius Scale

Grid

• フルブリードレイアウト中心（Flexbox ベース）
• 商品カルーセル: Swiper.js による横スクロール
• フッターリンク: Flex カラム

6. Depth & Elevation

• 実測ではメインサイト（basefood.co.jp）はほぼ全要素 box-shadow: none
• 立体感はブランドイエロー面 #fac83c、ニュートラル面 #f0f1eb、黒ヒーロー #000000 のコントラストで表現
• 閉じるボタンに backdrop-filter: blur を使用し、半透明の浮遊感を演出

7. Do's and Don'ts

Do（推奨）

• フォントは mfw-pishiigothicstdn-r / -b を最優先、フォールバックは Hiragino Kaku Gothic ProN → Hiragino Sans → sans-serif
• 太字は font-family を -b に切り替える（font-weight: 700 ではなく --bf-font-bold を使う）
• 主要 CTA は #fac83c のイエローピル + #2a2a2a の暗色テキスト
• セカンダリ CTA は transparent + 1px solid #c8c8c8 のピル。ホバーで #f0f1eb に変わる
• テキストカラーは **#2a2a2a（primary）と #5a5a5a（secondary）**の 2 階層で構成
• ニュートラル面は #f0f1eb（ウォームグリーン寄り）を使い、冷たい灰色は避ける
• letter-spacing は normal（0） を維持。フォントのデフォルトメトリクスに委ねる
• ピル形状（border-radius: 9999px）をすべてのボタン・バッジに適用する
• ヒーローセクションは 黒背景 + 白文字で没入感を出す
• フッターは #fac83c 全面塗りでブランドの余韻を残す

Don't（禁止）

• CTA に 角張った直角ボタン（border-radius 0）や 小角丸（4〜8px） を使わない — すべてピル 9999px
• テキストに 純黒 #000000 を使わない — BASE FOOD のテキストは #2a2a2a（ソフトブラック）
• font-weight: 700 だけで太字にしない — 必ず font-family を -b に切り替える（フォールバック時のみ weight で太字化）
• letter-spacing を 手動で追加しない（0.02em 等）。BASE FOOD は字間ゼロが基本
• ニュートラルサーフェスに 冷たいグレー（#f3f4f6、#e5e7eb 等の青みグレー）を使わない — #f0f1eb のウォームトーンを維持
• ブランドイエロー #fac83c の上に 白文字を置かない — イエロー上のテキストは #2a2a2a（暗色）
• magazine ページのスタイル（游ゴシック体）をメインサイトに 混在させない

8. Responsive Behavior

Breakpoints（Tailwind 互換）

実装上、lg: プレフィックスがナビの表示／非表示の分岐点。max-lg: でモバイル専用スタイルを適用。

モバイル時の調整

• フッター見出し（48px）は hidden lg:block — モバイルでは非表示
• フッターサブ見出し: desktop 18px → mobile 16px（max-lg:text-[var(--bf-font-size-16)]）
• 商品カード: desktop aspect-auto lg:flex-1 lg:h-dvh → mobile aspect-[4/5]
• Neutral Pill: desktop lg:w-40 lg:flex-none → mobile flex-1
• フッター padding: desktop 120px 80px 80px → mobile 80px 24px 40px
• ナビ: デスクトップは横並びリンク、モバイルはハンバーガーメニュー

タッチターゲット

• 主要 CTA: 高さ約 56px（padding 16px + 24px line-height = 十分）
• Neutral Pill: 高さ 56px（h-14）
• カルーセルナビ: 48px（size-12）
• Swiper ナビゲーション: 44px（--swiper-navigation-size）
• 閉じるボタン: 56px（size-14）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Yellow (CTA / Footer / Badge): #fac83c
Brand Hover: orange (≒ #ffa500)
Brand Active: #ea8900
Brand Disabled BG: #ffe89f
CTA Text on Yellow: #2a2a2a

Text Primary: #2a2a2a
Text Secondary: #5a5a5a
Text Placeholder: #a8a8a8
Text Disabled: #c8c8c8
Text Inverse (white): #ffffff

Surface Base (BG): #ffffff
Surface Neutral: #f0f1eb
Surface Brand: #fac83c
Surface Inverse: #2a2a2a
Hero BG: #000000

Divider High: #2a2a2a
Divider Middle: #c8c8c8
Divider Low: #f0f0f0

Accent Notice: #f05e88
Accent Error: #ff4a24

Font Base: "mfw-pishiigothicstdn-r", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
Font Bold: "mfw-pishiigothicstdn-b", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
（mfw-pishiigothicstdn 不在時の代替提案: Noto Sans JP または M PLUS 1p）

Body: 16px / line-height 1.5 / weight 400 / letter-spacing normal / color #5a5a5a
Display: 48px / line-height 1.5 / weight 700 (font-bold) / color #2a2a2a
Section Heading: 22px / line-height 1.45 / weight 700 (font-bold) / color #2a2a2a
Nav: 14px / line-height 1.43 / weight 700 (font-bold) / color #ffffff

Border Radius: 9999px（全 CTA・ピル・ナビボタン）/ 8px（入力欄推奨）
Shadow: 基本 none。階層はブランドイエロー面・ニュートラル面・黒ヒーローで表現

プロンプト例

BASE FOOD のデザインに従って、完全栄養食の商品一覧ページを作成してください。
- フォント（通常）: "mfw-pishiigothicstdn-r", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
- フォント（太字）: "mfw-pishiigothicstdn-b", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
- 大見出し: 48px / weight 700（font-bold） / line-height 1.5 / color #2a2a2a
- セクション見出し: 22px / weight 700（font-bold）/ line-height 1.45 / color #2a2a2a
- 本文: 16px / weight 400 / line-height 1.5 / letter-spacing normal / color #5a5a5a
- letter-spacing はすべて normal（フォントのデフォルトに委ねる）
- 主要 CTA: 背景 #fac83c（ブランドイエロー）/ 文字 #2a2a2a / border-radius 9999px / padding 16px 24px
  - hover: 背景 orange / active: #ea8900 / disabled: 背景 #ffe89f, 文字 #5a5a5a
- セカンダリ CTA: 背景 transparent / 文字 #5a5a5a / border 1px solid #c8c8c8 / radius 9999px / padding 12px 16px
  - hover: 背景 #f0f1eb
- ニュートラルピル: 背景 #f0f1eb / 文字 #5a5a5a / radius 9999px / height 56px
- ページ背景: #ffffff（白）
- ニュートラル面: #f0f1eb（ウォームグリーン寄り）
- フッター: 背景 #fac83c 全面塗り
- カード: border なし、shadow なし、overflow hidden
- box-shadow は基本 none。立体感は色面（黄・黒・ニュートラル）で表現
- テキストに純黒 #000000 は使わない（primary は #2a2a2a、secondary は #5a5a5a）
- すべてのボタン・バッジは pill 形状（radius 9999px）
- 冷たいグレー（#f3f4f6 等）は使わない