ヤマキは創業以来百年にわたり、「鰹節屋・だし屋」の道を一筋に歩んできました。日本が世界に誇れるかつお節・だしに心底惚れ込み、その伝統を守り、研鑽を重ねてきました。
ヒーローのコピーは 48px / weight 700 / letter-spacing .05em の実テキスト（画像ではない）。生成りの半透明帯 rgba(250,246,239,.8) に載せる。
ブランド一覧
html: 10px / body: 16px は 6 幅すべて完全固定。流体なのは見出しだけで、式は全域で font-size: 3.4667vw の 1 本。
1440px→49.92px ／ 1200px→41.6px ／ 1024px→35.4987px ／ 834px→28.912px ／ 768px→26.624px ／ 375px→13px ちょうど（モバイル設計幅 375px）。
ルートが固定なので rem では追従しない。見出しに vw を直接書く。
かつお節・だしのおいしさと健康に貢献する研究を行っています。創業から変わらぬ想いを未来へと繋げています。
weight 700 が最多（可視 106 / 205 要素）。ナビも商品名もカテゴリ名も太字で、400 は本文 80 要素のみ。600 は Cookie バナーの 1 要素だけで設計には存在しない。
実サイトは赤の面に黒い文字を載せている（コントラスト比 約 3.1:1 で WCAG AA を満たさない）。見え方を再現するなら黒のまま、新規実装なら白文字を推奨する。
ヤマキ 『めんつゆ』
かつお節屋のだしが決め手。
ヤマキ割烹白だし®
料理の味が決まる白だし。
旨さ、別格。だし屋の鍋
鍋つゆシリーズ。
鰹節屋のだしパック
手軽に本格的なだしを。
商品名は 10px / weight 700 / letter-spacing -0.6px。-0.06rem の rem 宣言なので html: 10px 基準の絶対値で、フォントサイズを変えても追従しない。em に読み替えない。
日本が世界に誇れるかつお節・だしに心底惚れ込み、その伝統を守り、研鑽を重ねてきました。今も変わらぬ私たちの心意気です。
日本が世界に誇れるかつお節・だしに心底惚れ込み、その伝統を守り、研鑽を重ねてきました。今も変わらぬ私たちの心意気です。
左は禁則処理が無効で、行末で熟語の途中でも折り返す。句読点が行頭に来ることもある。見え方を再現するには必要だが、日本語組版として推奨はできない。
創業から変わらぬ想いを未来へと繋げています。
| 役割 | サイズ | ウェイト | 行間 | 字間 |
|---|---|---|---|---|
| ヒーローのコピー | 48px | 700 | — | 2.4px（.05em） |
| セクション見出し h3 | 49.92px（3.4667vw） | 700 | 1.7 | normal |
| 中見出し h2 | 24px | 700 | 1.25 | 2.4px（.1em） |
| カード見出し | 18px | 700 | 1.44 | 0.9px（.05em） |
| ナビ | 14px | 700 | 1.4 | 0.56px（.04em） |
| 本文 | 16px | 400 | 1.58 | 0.8px（.05em） |
| 商品名 | 10px | 700 | 1.3 | -0.6px（-.06rem） |
| ユーティリティ | 12px（可視75要素で最多） | 500 | — | 1.2px（.1em） |
body の line-height は normal（宣言なし）。本文ブロックには必ず line-height を書く。書かないとブラウザ既定の約 1.2 で詰まる。