Vermicular（バーミキュラ） DESIGN.md

Vermicular 公式サイト（https://www.vermicular.jp/）のデザイン仕様書。 愛知ドビー株式会社が手がける名古屋発の精密鋳造ホーロー鍋ブランド。 町工場の職人技術と日本の美意識を融合させた「暮らしの道具」を提案する。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 「明朝体 + ウォームトーン + 極細ウェイト」で構成された、日本の工芸品としての佇まいを持つブランドサイト。和文見出しに Morisawa A1 明朝（MFW-A1MinchoStd-Bold）、欧文に Crimson Pro セリフ、本文に游ゴシック Medium を使い分ける二重書体システム。全体を weight 300（極細）で統一し、温かみのあるオフホワイト #faf7f5 を背景に敷くことで、鍋の鋳物肌のような素朴な質感を表現
• 密度: ゆったりとしたエディトリアル型。大判の製品写真と余白を贅沢に使い、テキストは最小限。料理・暮らしのシーンを主役に据える
• キーワード: 明朝体、Warm Off-white、Charcoal Brown、Weight 300、palt、広い字間、職人、鋳物、温もり、余白、静謐
• 特徴:
  • 和欧二重書体システム — 和文見出しは A1 明朝（Morisawa Web Font）の明朝体、欧文は Crimson Pro セリフ。本文ゴシックは游ゴシック Medium。用途に応じて書体を使い分ける
  • weight 300 で全体を統一 — 見出しも本文もすべて ultralight。力強さではなく繊細さで世界観を作る
  • palt をグローバル適用 — body に font-feature-settings: "palt" を指定し、全テキストにプロポーショナル字詰めを適用
  • 和文見出しの広い字間 — letter-spacing: 0.1em〜0.2em で文字を大きく開ける。日本の伝統的な組版に通じる品格
  • ウォームカラーパレット — 背景 #faf7f5（温かいオフホワイト）、ダーク面 #46413c（チャコールブラウン）。純黒・純白を使わない
  • CTA は pill 型 — border-radius: 27px の丸ボタン。クラフトブランドとしては珍しいが、柔らかさを演出
  • 欧文キャプションはミュートカラー — Crimson Pro 12.6px / #beb9b4 で控えめに英語サブタイトルを添える

2. Color Palette & Roles

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

Brand

• Warm Off-white (#faf7f5): メイン背景色。鋳物のホーロー釉薬を思わせる温かいオフホワイト。ブランドを象徴する色。出現回数 11（最多）
• Charcoal Brown (#46413c): セクション背景・ダークモード面。鉄鋳物の素地を連想させるチャコールブラウン。出現回数 7
• Dark Brown (#413c37): フッター背景。Charcoal Brown よりわずかに深い

Accent

• Vermicular Red (#c11920): 極めて限定的に使用（出現回数 1）。ブランドロゴやハイライトの赤。鋳物の炎を想起させる

Neutral

• Text Primary (#222426): 本文テキスト。純黒ではなく、わずかに青みを含む深いチャコール
• Text Heading (#46413c): 見出しテキスト。背景のダーク色と同じ値
• Text Heading Light (#faf7f5): ダークセクション上の見出し。背景のオフホワイトと同値で反転使用
• Muted Caption (#beb9b4): 欧文キャプション・補助テキスト。温かみのあるソフトグレー
• Surface Alt (#ecebe7): 代替面色。カード・セパレータに使用

Note: Vermicular のパレットは 「温かいオフホワイト」と「チャコールブラウン」の2色が軸。純黒 #000000 も純白 #ffffff も使わず、すべての色に茶系の温度感を持たせることで、鋳物の素材感と料理の温もりを表現する。赤はロゴに限定し、UIでは使わない。

3. Typography Rules

3.1 和文フォント

明朝体（見出し用）:

• MFW-A1MinchoStd-Bold（Morisawa A1 明朝 — Morisawa Web Font）
• ヒラギノ明朝 ProN / HGS明朝B / MS P明朝（OS フォールバック）
• YuMincho, 游明朝（Windows フォールバック）

ゴシック体（本文用）:

• Yu Gothic Medium, 游ゴシック Medium（本文の基本書体）
• YuGothic, 游ゴシック体（バリエーション指定）
• ヒラギノ角ゴ Pro W3（macOS フォールバック）
• メイリオ（Windows フォールバック）

3.2 欧文フォント

• Crimson Pro（Google Fonts。セリフ体。見出し・欧文キャプション用）
• sans-serif（generic family。ゴシック本文のフォールバック末尾）
• serif（明朝見出しのフォールバック末尾）

3.3 font-family 指定

css/* 和文見出し（明朝体） */
font-family: "MFW-A1MinchoStd-Bold", "ヒラギノ明朝 ProN", "HGS明朝B",
             "MS P明朝", serif, "YuMincho", "游明朝", "Meiryo";

/* 欧文見出し・キャプション */
font-family: "Crimson Pro", serif;

/* 本文（ゴシック体） */
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
             "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

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

• 和文見出しは明朝体スタック — Morisawa Web Font を最優先とし、各 OS の明朝体にフォールバック。スタック末尾に Meiryo（ゴシック）が混在しているのは Windows での最低限の表示保証
• 欧文は Crimson Pro 単独指定 — serif のみでフォールバック。本文ゴシックの欧文グリフは游ゴシック内蔵のものを使用
• 本文は游ゴシック Medium を最先頭 — Medium ウェイト指定で Windows の游ゴシック細字問題を回避。font-weight: 300 との組み合わせで繊細な表現を実現

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

実サイトの computed style に基づく。

3.5 行間・字間

• 本文の行間 (line-height): 1.67（13.5px × 1.67 = 22.5px / 13px × 1.67 = 21.7px）。日本語本文としては標準〜やや詰まった範囲
• 見出しの行間: 1.67〜1.78。本文と近い値で統一感を持たせる
• 本文の字間 (letter-spacing): 0.04em（0.54px / 13.5px）。和文のプロポーショナル字詰めと合わせて読みやすさを確保
• 見出しの字間: 0.1em〜0.2em。和文見出しは非常に広い字間を取る。日本の伝統的な組版や書道の空間感覚に通じる
• 欧文キャプションの字間: normal または 0〜0.03em。欧文は控えめな字間

ガイドライン:

• 和文見出しの letter-spacing: 0.2em は Vermicular の世界観の核心。安易に詰めない
• 本文の 0.04em は palt との併用を前提とした値。palt なしで 0.04em を使うと開きすぎる
• 欧文見出し（Crimson Pro）は 0〜0.03em で控えめに。明朝の広い字間とのコントラストを作る

3.6 禁則処理・改行ルール

• 特別な CSS 指定は確認されていない。ブラウザのデフォルト挙動を尊重
• 和文コピーは短文で構成されるため、禁則処理が問題になる場面は少ない

3.7 OpenType 機能

css/* body に指定（グローバル適用） */
font-feature-settings: "palt";

• palt（プロポーショナル字詰め）がグローバル適用 — body 要素に指定されており、見出しから本文まですべてのテキストに効く
• 見出しの広い letter-spacing: 0.1–0.2em と palt の組み合わせにより、文字間の微調整が自動で入る
• 游ゴシック Medium の本文にも palt が効いている（note は見出し専用だったが、Vermicular は全域）

3.8 縦書き

• 未使用

4. Component Stylings

Buttons

Primary CTA（pill 型）

実例: 「ONLINE SHOP」ヘッダーボタン

• 背景: #faf7f5（ブランドオフホワイト）
• 文字色: #222426
• 罫線: なし
• font-family: "Crimson Pro", serif
• font-size: 10.8px / weight 300
• border-radius: 27px（pill 型）
• padding: 推定 8px 24px
• text-transform: uppercase

Filter Button（テキストボタン）

実例: 製品フィルター "Shallow" / "Deep"

• 背景: transparent
• 文字色: #222426
• font-size: 11.7px / weight 400
• border-radius: なし
• 装飾: 選択時にアンダーラインまたはウェイト変更

Cards

• 背景: transparent または #faf7f5
• 罫線: なし
• 影: なし（フラット）
• 角丸: なし
• 製品写真が主役。テキストは下部に Crimson Pro + A1 明朝で製品名・コピー

Navigation

• 背景: transparent → スクロール時 #faf7f5
• 文字色: #222426
• font-family: 游ゴシック / Crimson Pro（混在）
• font-size: 13px / weight 300
• ロゴ "VERMICULAR" は 26px / weight 300 / 游ゴシック

5. Layout Principles

Spacing Scale

Container

• Max Width: 推定 1200–1440px
• Padding (horizontal): 推定 24–48px

Grid

• 製品一覧: 2–3 列グリッド
• 写真と余白を贅沢に使うエディトリアルレイアウト
• 左右交互に画像とテキストを配置するジグザグ構成

Layout 原則

• 余白が主役 — テキストと画像の間に大きな余白を取り、呼吸感を持たせる
• ダークセクションとライトセクションの交互配置 — #faf7f5 と #46413c を交互に使い、ページにリズムを作る
• 画像はフルブリード — 製品写真・シーン写真は画面幅いっぱいに配置
• テキストは中央寄せ + 短文 — 和文コピーは 1〜2 行、letter-spacing 0.2em で品格を持たせる

6. Depth & Elevation

• 影: 使用しない。完全にフラット
• 段階表現: #faf7f5（ライト面）と #46413c（ダーク面）の背景色切り替えで奥行きを表現
• 角丸: CTA の pill（27px）以外はなし。カードや画像は角丸を持たない
• 透過: ヘッダーナビゲーションがスクロール時に透過 → 背景色に遷移

7. Do's and Don'ts

Do's

• 和文見出しは A1 明朝 + weight 300 + letter-spacing 0.1–0.2em で組む。広い字間が Vermicular の品格
• 欧文は Crimson Pro を使う。セリフ体で A1 明朝との調和を図る
• 本文ゴシックは游ゴシック Medium を font-family の先頭に指定する（Windows 細字問題回避）
• 背景は #faf7f5（温かいオフホワイト）を基調とする。純白 #ffffff は使わない
• ダークセクションは #46413c（チャコールブラウン）で。純黒 #000000 は使わない
• テキスト色は #222426 を使う。純黒ではなく、わずかに柔らかい深いチャコール
• font-feature-settings: "palt" を body に指定 し、全テキストにプロポーショナル字詰めを適用
• CTA は pill 型（radius 27px） で柔らかさを表現する
• 写真は大判でフルブリード に配置し、余白を十分に取る
• weight 300 を全体で統一 する。Bold や 700 は使わない

Don'ts

• 純黒 #000000 を使わない — テキストは #222426、ダーク面は #46413c を使う
• 純白 #ffffff を使わない — 背景は #faf7f5、代替面は #ecebe7
• ゴシック体で見出しを組まない — 見出しは必ず明朝体（A1 明朝）
• weight 400 以上を見出しに使わない — 全体を weight 300 で統一する繊細さがブランドの核心
• 和文見出しの letter-spacing を 0.1em 未満にしない — 狭い字間は Vermicular の世界観を壊す
• 角丸を多用しない — pill CTA（27px）以外に角丸をつけない。カード・画像は角丸なし
• box-shadow を使わない — 深度は背景色の切り替えで表現する
• 欧文にサンセリフ体を使わない — Crimson Pro（セリフ）を使い、和文明朝との調和を保つ
• 彩度の高いアクセントカラーを安易に使わない — 赤 #c11920 はロゴ限定。UI には使わない
• palt を外さない — body のグローバル適用が前提。palt なしだと字間バランスが崩れる

8. Responsive Behavior

Breakpoints

タッチターゲット

• pill CTA のサイズは 10.8px テキスト + padding で推定 40px 程度。モバイルでは padding を拡大し 44px 以上を確保すること

フォントサイズの調整

• 和文ヒーロー見出し: デスクトップ 37.8px → モバイル推定 24–28px（60–75% に縮小）
• セクション見出し: デスクトップ 25.2px → モバイル推定 20–22px
• 本文: 13–13.5px はモバイルでも維持（縮小しない）
• 欧文キャプション: 12.6px 固定

レイアウトの変化

• デスクトップのジグザグ（画像 + テキスト横並び）→ モバイルで縦積みに
• 製品グリッド: デスクトップ 3 列 → タブレット 2 列 → モバイル 1 列
• ダークセクションとライトセクションの交互配置はモバイルでも維持

9. Agent Prompt Guide

Vermicular らしい UI を生成するときは以下を伝えるとよい：

- 和文見出し font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "YuMincho", "游明朝", serif
  （※ A1 明朝の代替として Shippori Mincho を使用）
- 欧文見出し・キャプション font-family: "Crimson Pro", serif
- 本文 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "ヒラギノ角ゴ Pro W3", sans-serif
- 全要素 font-weight: 300（極細で統一）
- 和文見出し letter-spacing: 0.1–0.2em（広い字間が品格の源泉）
- 本文 font-size: 13.5px / line-height: 1.67 / letter-spacing: 0.04em
- body に font-feature-settings: "palt"（グローバル適用）
- 背景色 #faf7f5（温かいオフホワイト。純白 #ffffff は使わない）
- ダーク面 #46413c（チャコールブラウン。純黒 #000000 は使わない）
- テキスト色 #222426（深いチャコール）
- 欧文キャプション色 #beb9b4（ミュートグレー）
- CTA は pill 型: border-radius: 27px / bg: #faf7f5 / font: Crimson Pro 10.8px
- 影を使わない（box-shadow: none）
- 角丸は CTA の pill のみ。カード・画像は角丸なし
- ダークセクション（#46413c）とライトセクション（#faf7f5）を交互配置
- 写真を大判フルブリードで配置し、余白を贅沢に取る
- 彩色アクセントは使わない。温もりは色温度（ウォームグレー系）で表現

フォント代替ガイド