ヤマキ（YAMAKI） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-16 / 対象: https://www.yamaki.co.jp/, /corporate/

1. Visual Theme & Atmosphere

• デザイン方針: 純黒の太字（weight 700）が既定で、差し色は社章の赤 1 色。 字詰めも字空けもせず、素のまま組む。かつお節屋の素朴さを、加工していない組版で出している
• 密度: 中程度。商品カードを 8px の角丸と薄い影で並べ、1 枚ずつ独立させる
• キーワード: 純黒、weight 700 が既定、ヤマキ赤、字間 normal、break-all

このサイトの核心は4つある。

1. font-weight: 700 が最多（可視 106 / 205 要素）。見出しだけでなくナビ・商品名・カテゴリ名まで太字で、400 は本文 80 要素のみ。**「太字が既定、細いのが例外」**という珍しい構え
2. 字詰めを一切しない。 font-feature-settings の宣言が CSS 全文で 0 件（palt も halt も無い）。letter-spacing も normal が 146 / 205 要素で最多
3. body に word-break: break-all が当たっている（6 幅すべてで確認）。日本語の禁則処理を無効にして、行末で単語・熟語の途中でも折り返す設定。意図的かどうかに関わらず、再現すると改行位置が変わる
4. ルート（html 10px / body 16px）は 6 幅すべて完全固定なのに、見出しだけが 3.4667vw の全域流体。 h3 は 1440px で 49.92px、375px でちょうど 13px まで連続して縮む

CSS Custom Properties は実質 0 個（2 個のうち 1 個は Swiper の既定値）。設計トークンは存在しない。

2. Color Palette & Roles

Primary（ブランドカラー）

赤は 1 色だけ。 #e60012 は日本の企業ロゴで広く使われる標準的な赤（DIC 系）。ホバー用の濃い赤は用意されていない。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し・ナビ。可視 182 要素。このサイトは純黒で組む（#333333 に逃げない）
• Text on Dark (#ffffff): 赤面の上のテキスト（可視 9 要素）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255)）
• Surface (#f8f8f8): ニュース欄・ブランド一覧の面（可視 15 要素）
• Border (rgba(0,0,0,.16)): カードの枠（下層で可視 9 要素）。黒の 16%
• Border 2 (#cccccc): 区切り線（可視 6 要素）
• Hero Veil (rgba(250,246,239,.8)): ヒーローのコピーを載せる生成りの半透明帯。純白ではなく、わずかに黄みのある紙色

外部ウィジェット由来（実装しない）

• #3174c3（Cookie 同意バナーの 同意する）、#202020（同バナー本文）、#0066cc（同リンク）は Cookie 同意バナーの色
• 同バナーだけが -apple-system, "system-ui", "ヒラギノ角ゴ Pro W3", … メイリオ, Meiryo という別のフォントスタックを持つ（可視 4 要素）。サイト本体の書体ではない

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（Google Fonts）。可視 201 要素でサイトのほぼ全部。400 / 500 / 700 の 3 ウェイトがすべて loaded
• 明朝体: 使わない。セリフ系の和文は 2 ページとも可視 0 要素

3.2 欧文フォント

• 専用の欧文書体は読み込んでいない。英数字も Noto Sans JP が担当する
• フォント要求は 44 件、すべて fonts.gstatic.com。@font-face の宣言は 373 件あるが、これは Noto Sans JP の unicode-range サブセット分割によるもの（正常）

3.3 font-family 指定

css/* 実サイトの宣言をそのまま */
font-family: "Noto Sans JP", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;

ただし游ゴシックのフォールバックに Medium が入っていない。 Noto Sans JP が落ちた Windows では Regular に当たり、本文が細く出る。正しくは Medium を先に置く:

css/* 正しい並び（Windows で Medium を拾わせる） */
font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;

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

ウェイトは 700 が既定（可視 106 要素）。400 は本文 80 要素、500 はユーティリティナビ 18 要素。600 は Cookie バナーの 1 要素のみで、設計には存在しない。

3.5 行間・字間 — 原則は normal、例外だけ em で当てる

css/* body には何も書かない */
letter-spacing: normal;   /* 可視 146 / 205 要素 */

CSS の宣言は全部で 44 箇所しかない:

• 符号が両方向にある。 見出しは空け（.05em / .1em）、小さい商品名は詰める（-0.06rem / -0.056em）
• -0.06rem は rem 宣言なので html: 10px を基準にした -0.6px の絶対値。フォントサイズを変えても追従しない。em に読み替えない

3.6 禁則処理・改行ルール

cssbody { word-break: break-all; }   /* ★6 幅すべてで確認 */

• 日本語の禁則処理を無効にする設定。 行末で熟語・単語の途中でも折り返す
• 結果として、句読点が行頭に来たり、漢字熟語が割れたりする
• 再現するときは、この 1 行を書くかどうかで改行位置が変わる。 日本語の組版として推奨はできないが、実サイトの見え方を再現するには必要

css/* 一般的な日本語組版に直すなら */
body { word-break: normal; overflow-wrap: anywhere; }

行間

• body の line-height は normal（宣言なし）。各ブロックが自分で宣言する
• 最頻値は 1.58（可視 51 要素）、次いで 1.3（37 要素）、1.25（15 要素）
• CSS の宣言は 1.5 / 1.25 / 1.7 / 1.8 / 1.3 が各 3〜5 箇所と散らばっており、共通の基準値が無い
• body が normal なので、本文ブロックでは必ず line-height を宣言する（書かないとブラウザ既定の約 1.2 で詰まる）

3.7 OpenType 機能

このサイトは font-feature-settings を一切使っていない（CSS 全文で宣言 0 件、可視要素 0）。

• palt も halt も足さないこと。 Noto Sans JP の既定の字送りのまま組むのがこのサイトの設計
• 約物の多い商品名（ヤマキ 『めんつゆ』 ヤマキ割烹白だし®）でも詰めない。詰める代わりに letter-spacing: -0.06rem を当てている

3.8 縦書き

該当なし。writing-mode が horizontal-tb 以外の要素は 2 ページとも 0 要素。縦組みは使わない。

4. Component Stylings

Primary Button（赤の面）

cssbackground: #e60012;
color: #000000;            /* ★赤面の上が黒文字（白ではない）*/
font-size: 16px;
font-weight: 400;
line-height: normal;
letter-spacing: normal;
border-radius: 10px;
border: none;

赤の面に黒い文字を載せるのがこのサイトの実装。 コントラスト比は約 3.1:1 で WCAG AA（4.5:1）を満たさない。新規実装では白文字（#ffffff）にすることを推奨するが、実サイトの見え方を再現するなら黒のまま。

Secondary Button（枠線のみ）

cssbackground: transparent;
color: #000000;
font-size: 16px;
font-weight: 400;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 8px;

Product Card

cssbackground: #ffffff;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px;   /* ★可視 41 要素。このサイトの主役の影 */

• カード内の商品名は 10px / weight 700 / letter-spacing -0.6px

角丸の実測

24px / 16px の角丸は Cookie バナー由来。実装しない。

5. Layout Principles

• ヒーローは全幅の写真の上に、**生成りの半透明帯（rgba(250,246,239,.8)）**を右半分に敷いてコピーを載せる
• 商品・レシピはカードのグリッド。1 枚ずつ 8px の角丸と薄い影で独立させる
• ニュース欄・ブランド一覧は #f8f8f8 のベタ面で区切る

6. Depth & Elevation

影は 1 種類をほぼ全部に使う。

cssbox-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px;   /* ★可視 41 要素 */

• 0 1px 2px という極端に浅い影。 カードを紙のように 1mm だけ持ち上げる
• グローバルナビのボタンだけ rgba(0,0,0,.16) 0 2px 6px（1 要素）とわずかに深い
• 色は黒 16% で統一。そのまま写す
• rgba(0,0,0,.15) 0 0 2px, rgba(0,0,0,.3) 0 2px 10px は Cookie バナーの影。実装しない

7. Do's and Don'ts

Do

• 本文も見出しも純黒 #000000 で組む
• weight 700 を既定にする。 本文（400）の方が例外
• 字間は normal が原則。 見出しだけ .05em / .1em、10px の商品名だけ -0.06rem
• カードは border-radius: 8px ＋ 0 1px 2px の浅い影
• 枠線は rgba(0,0,0,.16)
• 本文ブロックには必ず line-height を宣言する（body が normal なので、書かないと行が詰まる）

Don't

• font-feature-settings を書かない。 このサイトは palt も halt も使っていない（CSS 全文で 0 件）
• 字間を em で一律に配らない。 既定は normal
• -0.06rem を em に読み替えない（rem 宣言＝ html: 10px 基準の絶対値 -0.6px）
• 影を深くしない。 0 1px 2px の浅さがこのサイトの質感
• ルートを流体にしない。 html / body は 6 幅すべて固定で、流体なのは見出しだけ
• 赤 #e60012 以外の差し色を足さない
• Cookie バナーの書体（-apple-system / メイリオ系）をサイトの書体と取り違えない

8. Responsive Behavior

ルートは完全固定

見出しだけが全域流体（3.4667vw）

• 式は全幅で font-size: 3.4667vw の 1 本。ブレークポイントによる切り替えが無く、375px でちょうど 13px に着地する（375 × 0.034667 = 13.0）。モバイル設計幅は 375px
• line-height: 1.7 は無単位なので自動で追従する
• ルートが固定なので rem では追従しない。 見出しに vw を直接書く必要がある

9. Agent Prompt Guide

このサイトの見た目でUIを作るときは、次を守る。

1. 書体は Noto Sans JP（400 / 500 / 700）。游ゴシックのフォールバックには Medium を Regular より前に置く
2. weight 700 を既定にする。本文だけ 400
3. 文字色は 純黒 #000000、差し色は #e60012 1 色だけ
4. letter-spacing は normal が既定。見出し .05em / .1em、10px の商品名のみ -0.06rem
5. font-feature-settings は書かない（実サイトに 0 件）
6. カードは 8px の角丸 ＋ rgba(0,0,0,.16) 0 1px 2px の浅い影
7. html: 10px / body: 16px は固定。見出しだけ 3.4667vw で流体にする
8. 本文ブロックに line-height を必ず書く（body は normal）
9. 実サイトの見え方を再現するなら body { word-break: break-all }。一般的な日本語組版に直すなら normal にする