にんべん（NINBEN） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-03 / 対象: https://www.ninben.co.jp/, /about/, /company/philosophy/

1. Visual Theme & Atmosphere

1699年（元禄12年）創業、日本橋の鰹節専門店。「この国の味、ここから。」を掲げる。 サイトは生成りの地色 #f8f8f5 にヒラギノ明朝の大見出しを置き、 本文はヒラギノ角ゴで line-height: 2.0 に開く。朱赤 #e7190a は ロゴ・カレント・ホバー下線にだけ現れる。

• デザイン方針: 生成り地＋明朝の大見出し。朱赤を1点だけ差す
• 密度: 中〜低。写真を大きく使い、本文は2.0の行送りでゆったり読ませる
• キーワード: 生成り、明朝の大見出し、朱赤の下線、角丸なし、影なし

このサイトの特徴的な癖（他サイトと違う点）

1. ページ地色が #f8f8f5（生成り）。html / body は透明で、 セクションの面色として敷かれている。純白ではない
2. Webフォントを一切使わない。CSS Custom Property もわずか2つ。 ヒラギノ／メイリオ／游明朝のプラットフォームフォントだけで組む
3. ゴシックが Pro、明朝が ProN。本文は "ヒラギノ角ゴ Pro"（ProN ではない）、 見出しは "ヒラギノ明朝 ProN"。同じサイト内で Pro と ProN が混在する
4. font-weight がほぼ全部 400。h1〜h3 も本文も 400。太字はロゴだけ。 階層は書体（明朝／ゴシック）とサイズでつくる
5. リンクのホバー下線が linear-gradient で実装されている。 background: linear-gradient(rgba(0,0,0,0) calc(100% - 1px), #e7190a 0) を リンク内側の <span> に当て、下1pxだけを朱赤で塗る。text-decoration は使わない
6. border-radius は 50% と 3px しか存在しない。角丸の矩形が事実上ない。 丸いのは円形バッジと PAGE TOP ボタンだけ
7. box-shadow が1件もない。影を完全に排除している
8. キャッチコピーの letter-spacing が 0.13em（42px に 5.46px）と極端に広い

2. Color Palette & Roles

Base（基調）

• Background (#f8f8f5): ページ地色。生成り。トップ・下層の主面
• Surface White (#ffffff): 記事本文エリア、カードの面
• Ink (#1b120f): 見出し・本文・ナビ。黒茶（純黒ではない）
• Text Sub (#6e6765): サブナビ、補足リンク、タグ文字
• Text on Photo (#ffffff): 写真の上に置く見出し・本文

Brand（ブランド）

• Brand Red (#e7190a): 朱赤。ロゴ、カレントページ、ホバー下線、円形バッジ
• Ink Fill (#1b120f): 塗りリンク・PAGE TOP ボタンの面色

Neutral（ニュートラル）

• Surface Tag (#efefec): 「ニュースリリース」等のタグ面
• Text Muted (#6e6765): 二次情報

注意: 有彩色は朱赤 #e7190a の1色だけ。緑・青・黄を足さない。 朱赤は「いま居る場所」と「触れる場所」にだけ現れる。

3. Typography Rules

3.1 和文フォント

役割で明確に2系統に分ける。

• 明朝体（見出し・キャッチコピー）: "ヒラギノ明朝 ProN", HiraMinProN-W3, 游明朝体
• ゴシック体（本文・ナビ・UI）: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ

Webフォントを1本も読み込んでいない。老舗の声を、端末の標準搭載書体だけでつくる。

Pro / ProN の混在に注意: ゴシックは Pro、明朝は ProN を指定している。 ProN は JIS2004 字形（辻・﨑などの正字）、Pro は JIS90 字形。 本文と見出しで字形が変わるが、実サイトがそう書いているのでそのまま踏襲する。

3.2 欧文フォント

専用の欧文フォントを持たない。和文チェーンの sans-serif / serif フォールバックに委ねる。 「ENGLISH」「PAGE TOP」「NIHONBASHI」等の欧文もヒラギノの欧文グリフで表示される。

3.3 font-family 指定

css/* 見出し・キャッチコピー（明朝） */
font-family: "ヒラギノ明朝 ProN", HiraMinProN-W3,
             游明朝体, "Yu Mincho", YuMincho, serif;

/* 本文・ナビ・UI（ゴシック） */
font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
             メイリオ, Meiryo, sans-serif;

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

• 和文優先チェーン。欧文フォントを先頭に置かない
• Mac（ヒラギノ）が先、Windows（メイリオ／游明朝）が後
• 游ゴシックをチェーンに入れていない。Windows はメイリオで受ける割り切り
• Webフォントを積まないぶん、表示は端末依存で揺れる前提の設計

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

ウェイトは 400 一択。h1 のロゴだけ 700。 明朝と角ゴの切替、サイズ、行送りの3つで階層をつくる。

3.5 行間・字間

• 和文本文の line-height は 2.0（16px → 32px）。老舗の読み物としての余裕
• 明朝の大見出しは 1.55〜1.71。42px → 65.33px / 72px。 サイズが大きいほど行送りを比率で詰めないのがこのサイトの選択
• 写真の上に重なる見出しだけ 1.18 と極端に詰める（24px → 28.24px）
• letter-spacing の基本は 0.05em（本文 0.8px ÷ 16px、写真見出し 1.2px ÷ 24px）
• キャッチコピーだけ 0.13em（5.46px ÷ 42px）。「この国の味、ここから。」は 縦組みなので、この字間は一文字ずつの縦の間隔として効く（3.8 参照）
• 写真上の本文は 0.1em（1.6px ÷ 16px）と本文より広げる
• カタカナのユーティリティは負の字間。「ネットショップ」は -0.07em、 タグは -0.04em。狭い枠に収めるために詰める

css/* 本文 */
.body {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-size: 16px;
  line-height: 2.0;
  letter-spacing: 0.05em;
  color: #1b120f;
}

/* キャッチコピー */
.catch {
  font-family: "ヒラギノ明朝 ProN", HiraMinProN-W3, 游明朝体, serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.556;
  letter-spacing: 0.13em;
}

3.6 禁則処理・改行ルール

• 「この国の味、ここから。」は縦組みの1行に収める前提。読点で折らない
• 「本枯鰹節」「フレッシュパック」「つゆの素」は途中で折らない
• 商品カテゴリ名の中黒（「つゆ・白だし・たれ・ぽん酢」）は行頭に来ないようにする

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt を使っていない。実測ですべての要素が normal
• 詰め組は palt ではなく letter-spacing の正負で手当てしている （見出しは +0.13em で開き、狭いユーティリティは -0.07em で詰める）
• プロポーショナル詰めを前提にしたレイアウトを組まないこと

3.8 縦書き

使う。ただし1箇所だけ。ブランドステートメント「この国の味、ここから。」の h2（p-about__title）が writing-mode: vertical-rl の縦組みで置かれている。

css.brand-statement {
  writing-mode: vertical-rl;
  font-family: "ヒラギノ明朝 ProN", HiraMinProN-W3, 游明朝体, serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.556;
  letter-spacing: 0.13em;   /* 縦組みでは行間ではなく字間として効く */
}

• 縦組みは 42px の明朝、letter-spacing: 0.13em。この字間は 横組みの見出しではなく縦組みの一文字ずつの間隔として設計されている
• 本文・ナビ・カード・フッターはすべて横組み。縦組みを増やさない
• 縦組みにするのは「店の名乗り」に相当する一文だけ、という使い分け

3.9 preview.html でのフォント代替

Mac 環境ではフォールバックが実サイトと一致するため、 font-family に実サイトの指定をそのまま先頭に置き、Google Fonts をその後ろに置く。

4. Component Stylings

Links（このサイトの主役 — グラデーション下線）

ホバー時に朱赤の下線が伸びる。これがサイト全体の基本インタラクション。

css.link span {
  background: linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), #e7190a 0);
  background-size: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 5px;
  transition: background-size .3s;
}
.link:hover span { background-size: 100% 100%; }

• text-decoration: underline を使わない。linear-gradient で下1pxだけを塗る
• 下線の色は必ず #e7190a（文字色が #1b120f でも下線は朱赤）
• padding-bottom で下線位置を調整（ナビ 5px / 見出し 1px / 本文リンク 1px）
• カレントページはテキスト自体が #e7190a になる

Buttons

Block Link（塗り）

• Background: #1b120f / Text: #ffffff
• Border Radius: 0px
• Padding: 5px 0 / Width: 244px（固定）/ Height: 57px
• Font: 15px / weight 400 / letter-spacing: 0.053em (0.8px)

css.btn-block {
  display: flex; align-items: center; justify-content: center;
  width: 244px; height: 57px;
  background: #1b120f;
  color: #fff;
  border-radius: 0;
  font-size: 15px;
  letter-spacing: .053em;
}

Text Link（既定の「もっと見る」）

塗りのボタンではなく、グラデーション下線のテキストリンクが既定。

• Font: 16px / weight 400 / Color: #1b120f
• 「すべての商品を見る」「レシピ一覧を見る」「一覧を見る」

Badges

Circle Badge（円形の札）

• Background: #e7190a / Text: #ffffff
• Border Radius: 50%
• Size: 80px（大・「今月のレシピ」2行）/ 40px（小・「お勧め」）
• Font: 13px（大）/ 12px（小）/ weight 400

写真の左上に重ねる。矩形のリボンではなく円。

Tag（分類ラベル）

• Background: #efefec / Text: #6e6765
• Border Radius: 3px / Padding: 5px
• Font: 11px / letter-spacing: -0.04em

用例: 「ニュースリリース」

PAGE TOP

• Background: #1b120f / Border Radius: 50% / Size: 56px × 56px
• フッターに固定

Cards

• Background: #ffffff（生成り地の上に白の面）
• Border / Shadow: なし
• 構成: 写真（16:9 または 1:1）→ 見出し（角ゴ 20px / 1.5）→ 説明（角ゴ 15px / 1.667）
• 写真の上に文字を置くときは白文字 ＋ 写真そのものを暗く処理した画像を使う （CSS のスクリムを重ねていない）

Navigation

• ヘッダー: ロゴ（朱赤の家紋 ＋ 明朝の「にんべん」）左、ナビ中央、 検索・ネットショップ・カート右
• ナビ: 角ゴ 15px / line-height: 1.733 / #1b120f。カレントは #e7190a
• ドロワー内の子リンクは 12px / line-height: 2.0 / #6e6765
• ユーティリティ（ENGLISH / サイトマップ / プライバシーポリシー）は 12px

5. Layout Principles

Container

Grid

• 商品カテゴリ: 4カラム（c-cardCol4）
• 企業情報カード: 3カラム（c-cardCol3）
• レシピ / 店舗: 写真グリッド（c-gridRecipe / c-gridShop）
• スライダー: 3〜4カラムの横スクロール（c-swiperCol3 / c-swiperCol4）

Hero

• 全幅の写真スライダー。中央に明朝の縦組み・横組みコピーを重ねる
• 生成り #f8f8f5 の面がヒーローの外側を囲む

Spacing Scale

6. Depth & Elevation

box-shadow が実測で1件もない。カード・ヘッダー・ドロワー・モーダルすべて影なし。

奥行きは以下でつくる:

• 面色の差（生成り #f8f8f5 の上に白 #ffffff のカード）
• 写真そのもの（暗く処理した写真の上に白文字）
• 1px の罫線

7. Do's and Don'ts

Do（推奨）

• ページ地色は #f8f8f5（生成り）。カードだけ #ffffff に上げる
• 見出しはヒラギノ明朝 ProN、本文・UIはヒラギノ角ゴ Proで分ける
• font-weight は 400 で通す。ロゴ以外に太字を使わない
• 和文本文の line-height は 2.0、letter-spacing は 0.05em
• ブランドステートメントは writing-mode: vertical-rl の縦組み・明朝 42px / letter-spacing: 0.13em
• リンクのホバーは linear-gradient の朱赤1px下線で表現する
• カレントページの文字色を #e7190a にする
• バッジは円形（border-radius: 50%）。矩形のリボンにしない
• 狭い枠のカタカナ（「ネットショップ」）は負の字間で詰める

Don't（禁止）

• 影を使わない（box-shadow はサイト全体で0件）
• 角丸の矩形をつくらない（border-radius は 50% と 3px のみ）
• 朱赤 #e7190a 以外の有彩色を足さない
• 見出しを太字にしない（明朝の 400 で十分な階層がつく）
• text-decoration: underline を使わない（グラデーション下線に統一）
• font-feature-settings: "palt" を当てない（このサイトは詰め組を使わない）
• Webフォントを追加しない（プラットフォームフォントで組む設計）
• 本文の line-height を 1.8 未満にしない

8. Responsive Behavior

Breakpoints

999px / 1000px を主境界とする（一般的な 768px ではない）。

さらに 320 / 340 / 360 / 370 / 375 / 500 / 600px の細かい分岐があり、 小型端末での明朝見出しの折返しを1pxずつ調整している。

Print

@media print を持つ。企業情報・お客様窓口ページの印刷を想定。

モバイルでの変化

• グローバルナビ → ハンバーガー。展開後は c-accordion の階層メニュー （親 15px / 子 12px #6e6765）
• 明朝見出し 56px → 32px 前後、42px → 24px 前後。 縦組みのステートメントと letter-spacing: 0.13em は維持する
• 本文 16px / 2.0 は変えない
• カード 4カラム → 2カラム → 1カラム

タッチターゲット

• 最小 44px × 44px。円形バッジ 40px は装飾のため対象外
• Block Link は 57px の高さを確保済み

9. Agent Prompt Guide

クイックリファレンス

Background:      #f8f8f5（生成り・ページ地色）
Surface:         #ffffff（カード・本文エリア）
Ink:             #1b120f（見出し・本文）
Text Sub:        #6e6765（サブナビ・タグ文字）
Brand Red:       #e7190a（ロゴ・カレント・ホバー下線・円形バッジ）
Surface Tag:     #efefec
Heading Font:    "ヒラギノ明朝 ProN", HiraMinProN-W3, 游明朝体, "Yu Mincho", serif
Body Font:       "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
Base Size:       16px
Line Height:     2.0（本文）/ 1.55〜1.71（明朝見出し）/ 1.18（写真上の見出し）
Letter Spacing:  0.05em（本文）/ 0.13em（キャッチコピー）/ -0.07em（狭い枠のカタカナ）
Font Weight:     400（すべて。ロゴのみ 700）
Border Radius:   50%（円形バッジ・PAGE TOP）/ 3px（タグ）/ 0px（それ以外すべて）
Shadow:          none（サイト全体で0件）
palt:            off（font-feature-settings: normal）
Container:       1200px（標準）/ 1000px（読み物）
Vertical:        writing-mode: vertical-rl（ブランドステートメント1箇所のみ）
Hover:           linear-gradient(rgba(0,0,0,0) calc(100% - 1px), #e7190a 0)

プロンプト例

にんべん（NINBEN）のデザインシステムに従って、商品カテゴリページを作成してください。
- ページ背景は #f8f8f5（生成り）。カードだけ #ffffff
- 文字色は #1b120f、補足は #6e6765
- 見出しは "ヒラギノ明朝 ProN", HiraMinProN-W3, 游明朝体, "Yu Mincho", serif
  ページ見出し 56px / line-height 1.4
  セクション見出し 42px / line-height 1.714
  キャッチコピー 42px / line-height 1.556 / letter-spacing 0.13em
- 本文・ナビは "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
  16px / line-height 2.0 / letter-spacing 0.05em
- font-weight はすべて 400。太字を使わない
- リンクのホバーは text-decoration ではなくグラデーション下線で実装する
  background: linear-gradient(rgba(0,0,0,0) calc(100% - 1px), #e7190a 0);
  background-size: 0 100% → hover で 100% 100%
- カレントページの文字色は #e7190a
- 写真の左上に置く札は円形（border-radius: 50% / 背景 #e7190a / 白文字 / 40px または 80px）
- 分類タグは #efefec の背景に #6e6765、border-radius 3px、11px、letter-spacing -0.04em
- 主要CTAは #1b120f の塗り、border-radius 0、幅244px / 高さ57px / 15px
- box-shadow を一切使わない。角丸の矩形をつくらない
- 有彩色は #e7190a のみ。他の色を足さない
- font-feature-settings は normal（palt を当てない）
- コンテナ幅 1200px、商品カテゴリは4カラム