ニッカウヰスキー（NIKKA WHISKY） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 字を空けて「間」を作る。 和文に palt を一切かけず、逆に letter-spacing: 0.18em を body に当てて全文を開く。行間も本文 2.33、リード文 3.10 と極端に広い。角丸・影・面の塗り分けをほぼ使わず、余白と字送りだけで格を出す
• 密度: きわめて低い。1440px 幅のトップページで可視テキストは 105 要素しかない。スクロールのたびに1ブロックずつ現れる
• キーワード: 黒、アイボリー、大きく開いた字送り、欧文セリフの頭文字、罫線1本のボタン

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

1. ルートが 13px。 html / body ともに font-size: 13px。rem は 16px 基準ではない（1rem = 13px）。この前提を外すと全サイズが 1.23 倍ずれる
2. letter-spacing: 0.18em を body に1回書いて全文へ流す。 body の computed 値は 2.34px（= 13px × 0.18）。子要素の多くはこの px をそのまま継承し（15px の CTA でも 2.34px）、見出し・リードなど一部だけ 0.18em を再宣言してサイズに比例させている（32px → 5.76px、14px → 2.52px、16px → 2.88px）。継承と再宣言が混在しているのが実装の実態
3. font-feature-settings: "palt" は 1 要素も無い（実測 0 件）。字を詰めずに空ける設計なので、palt を足すと真逆になる
4. @font-face のフォールバックが全部 serif。 "Noto Sans JP", serif / Lato, serif / Vollkorn, serif。Noto Sans JP も Lato もサンセリフなので、これは実サイトの誤り（Web フォントが落ちると和文ゴシックが明朝に化ける）。新規実装では sans-serif に直すこと

CSS Custom Properties は自社トークン 0 個（トップの 2 個は Swiper の既定値、/about/ は 0 個）。色・字間・サイズはすべて直書き。

2. Color Palette & Roles

Primary（ブランドカラー）

トップページの resolved は信用しない。 heroCover.heroCovered: true で、上部ビューポートは video.movie_container（1600×900）に覆われている。抽出ログも html: rgb(249,247,239) / body: rgb(233,233,233) が本来のページ背景 と注記している。地色は #e9e9e9。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し。可視 108 要素。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): 黒帯・フッター上の見出し（可視 8〜10 要素）
• Text Muted on Dark (#cccccc): フッターとメガメニューのリンク（可視 24 要素）。黒地の上の第2階層はこの1色だけ
• Surface Search (#92a6a9): 検索オーバーレイの面。くすんだ青灰。サイト内で唯一の有彩色の面
• Background (#e9e9e9) / Background (html) (#f9f7ef)

採用しない色

• #0033ff / #cddcf2 / #3860be / #6699cc / #6aaae4 / #f8f8f8 / #f4f4f4 — すべて OneTrust（CMP）由来。interactive の _textPreview が Cookieの利用に同意する すべて許可する Apply 個別に設定する で、font-size も 13.008px / 14.4px と CMP 特有の端数。ブランド色ではない
• #27455c — uniqueBackgrounds に 8 要素あるが可視テキストを1つも持たず、interactive にも出ず、フルページのスクリーンショットでも確認できなかった。不可視要素の可能性が高いので採用しない

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一の和文）: Noto Sans JP。@font-face は可変フォントで weight: 400 700、status: loaded。明朝は使わない
• 実際に使うウェイトは 400 が主体（/about/ で 119/144 要素）。500 は 4 要素、700 は CMP だけ

3.2 欧文フォント

• セリフ（見出し・頭文字）: Vollkorn。weight: 400 700 の可変、loaded。OUR BRANDS ABOUT US のような大きな英字見出し専用（56〜72px）。1文字ずつ <span> に分割されて出る（js_split_text）
• サンセリフ（ナビ・ラベル）: Lato。300 と 400 が loaded、700 は宣言されているが unloaded（参照する要素が無い）。欧文の太字は存在しないと考えてよい
• グローバルナビは Lato 300（Light） 15px

3.3 font-family 指定

css/* 実サイトの宣言（フォールバックが serif なのは誤り） */
font-family: "Noto Sans JP", serif;   /* 和文・UI */
font-family: Lato, serif;             /* 欧文ナビ・ラベル */
font-family: Vollkorn, serif;         /* 欧文の大見出し */
font-family: Lato, "Noto Sans JP", serif;  /* パンくず（和欧混植） */

/* 正しくはこう書く */
font-family: "Noto Sans JP", sans-serif;
font-family: Lato, "Noto Sans JP", sans-serif;
font-family: Vollkorn, "Noto Serif JP", serif;   /* Vollkorn はセリフなので serif で正しい */

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

• 和文は Noto Sans JP 一本。 OS フォントの指定を持たないので、Web フォントが落ちると generic に直行する
• Lato, serif と "Noto Sans JP", serif は直すこと。 Lato も Noto Sans JP もサンセリフで、serif に落ちると別の書体になる。実害が出るのは Web フォント未読込の一瞬と、フォント配信が失敗した環境
• Vollkorn, serif だけは正しい。Vollkorn はセリフ体なので、落ちても系統が変わらない

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

ルートは 13px。 html { font-size: 13px } / body { font-size: 13px }。下表の rem 換算は 13px 基準。

トラックは3本しかない。 0.05em（Vollkorn の大英字）／ 0.10em（Lato の欧文ラベル）／ 0.18em（和文すべて）。例外はリード文の 0.25em と、下層ボタンの 1.95px（13px → 0.15em）だけ。

3.5 行間・字間

• 本文の行間: 2.33（15px / 35px）。日本語本文としても広い部類
• リード文の行間: 3.10（18px / 55.8px）。1行ごとに独立して見えるほど空ける。会社案内の理念文がこれ
• 見出しの行間: 1.30（32px / 41.6px）。大見出しだけ詰める
• UI の行間: 1.04〜1.20。ナビ・ボタン・フッターは1行想定
• 字間の既定: 0.18em。body に1回だけ書いて全体へ流す
• 英字の字間: Vollkorn の大見出しは 0.05em、Lato のラベルは 0.10em

ガイドライン:

• letter-spacing は body に1回だけ書く。 子要素で再宣言するのは、サイズに比例させたい見出し・本文だけ
• 和文に 0.18em を当てても読める理由は行間 2.33 とセットだから。字間だけ真似て行間を 1.6 に詰めると、行が団子になる
• 0.18em を 18px と書き間違えないこと。 13px 基準なので computed は 2.34px

3.6 禁則処理・改行ルール

css/* 和文本文 */
line-break: strict;
overflow-wrap: break-word;
word-break: normal;       /* break-all は使わない */

• 字間を大きく取っているので、break-all を入れると行末が特にばらつく。避けること
• 大英字見出しは1文字ずつ <span> に割られているため、<span> 単位で折り返す。意図した位置で改行させたいときは <br> を明示する
• リード文（行間 3.10）は書き手が改行位置を決めている。自動折り返しに任せず <br> で組む

3.7 OpenType 機能

css/* 実サイトは font-feature-settings を 1 要素も指定していない（実測 0 件） */

• palt を使わない。 このサイトは字を詰めるのではなく空ける設計で、palt を足すと約物が閉じて意図が反転する
• 括弧・句読点の間隔も素のまま。「大日本果汁株式会社」を設立したことから のような鉤括弧の前後も詰めない
• 欧文の kern も明示していない（ブラウザ既定に任せている）

3.8 縦書き

css/* 該当なし。writing-mode の指定は 0 要素 */

縦組みは使っていない（typography.verticalWriting = 0 件）。

4. Component Stylings

Buttons

Primary（枠線ボタン）— このサイトの主要 CTA はこれ1種類だけ

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 0px
• Font: Noto Sans JP / 15px / 500
• Letter Spacing: 2.34px（body から継承。再宣言しない）
• Line Height: 1.04

Language Toggle（ピル）

• Background: transparent
• Border Radius: 100px（JP / EN の切替のみ）
• Font: Noto Sans JP / 13px / 400
• 選択中は黒の塗り＋白文字

Number Badge（連番）

• Border Radius: 50%
• Font: Vollkorn / 40px / 400 / letter-spacing: 2px

面で塗る CTA は存在しない。 青い塗りボタン（#0033ff）は OneTrust の Cookie バナーで、サイトの部品ではない。「目立つボタン」を作りたくなっても、罫線1本に留めること。

Inputs

• Background: #92a6a9（検索オーバーレイの面の上に置く）
• Border: なし
• Border Radius: 0px
• Font: Noto Sans JP / 13px / 400 / letter-spacing: 2.34px
• Placeholder: 検索キーワード入力
• フォーカス: 下線1本（1px solid #000000）

Cards

• Background: transparent（地色 #e9e9e9 のまま）
• Border: なし。カードは面でも枠でもなく、画像と余白で区切る
• Border Radius: 0px（例外は 16px が 2 要素のみ）
• Shadow: なし

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（実測 6 要素で最多）
• 幅いっぱいの帯は 100%（ヘッダー・フッター・ヒーロー）
• Padding (horizontal): 40px 前後（1440px 表示でロゴ左端が 24px）

Grid

• Columns: 2〜4（ブランド一覧は 3 カラム、フッターは 4 カラム）
• Gutter: 24px（トップ）/ 34px（下層）
• 大英字見出しはグリッドの外に置き、左端揃えで大きく張り出す

6. Depth & Elevation

このサイトは影を使わない。 奥行きは「黒帯 rgba(0,0,0,.8) を重ねる」ことだけで表す。box-shadow を足さないこと。

7. Do's and Don'ts

Do（推奨）

• ルートを 13px にする（html { font-size: 13px }）。rem を使うなら 13px 基準で計算する
• letter-spacing: .18em を body に1回書く。子要素は継承させる
• 和文本文は 15px / line-height: 2.33 / 0.18em。字間と行間はセットで指定する
• 大きな英字見出しは Vollkorn（セリフ）、ナビ・ラベルは Lato 300（Light）
• CTA は 1px solid #000000 / border-radius: 0 の枠線ボタン1種類で通す
• リード文は <br> で改行位置を決める（行間 3.10 は自動折り返しと相性が悪い）

Don't（禁止）

• font-feature-settings: "palt" を足さない。 字を空ける設計に対して真逆の効果になる
• letter-spacing を normal に戻さない。 0.18em が無いとブランドの「間」が消える
• font-family のフォールバックを serif のまま真似しない。 "Noto Sans JP", serif / Lato, serif は実サイトの誤り。sans-serif に直す
• Lato の 700 を使わない。 @font-face はあるが unloaded。欧文に太字は用意されていない
• 和文の見出しを 700 にしない。 32px の見出しも weight 400。太らせると別のブランドになる
• box-shadow / border-radius を足さない。 角丸は JP/EN ピル（100px）と連番（50%）だけ
• 青 #0033ff を採用しない。 OneTrust の色であってニッカの色ではない
• 下層ページを直リンクで検証しない。 /story/ /distilleries/ /discover/ 配下は年齢認証ゲートに入り、title が 年齢認証 | NIKKA WHISKY の別デザインになる。ゲート外なのは / と /about/

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。枠線ボタンは padding で高さを確保する

フォントサイズの調整

• 大英字見出し（72px）はモバイルで 40px 前後まで落とす
• 和文本文 15px と 0.18em は据え置く。 狭い画面で字間を詰めると、このサイトらしさが最初に失われる
• リード文の line-height: 3.10 はモバイルでは 2.4 程度に抑えてよい（画面高に対して空きすぎるため）

9. Agent Prompt Guide

クイックリファレンス

Root font-size: 13px   ← 16px ではない
Primary Color:  #000000
Text Color:     #000000
Text on Dark:   #cccccc
Background:     #e9e9e9   （html は #f9f7ef）
Font (和文):    "Noto Sans JP", sans-serif
Font (欧文):    Lato, sans-serif   / 大見出しは Vollkorn, serif
Body Size:      15px
Line Height:    2.33
Letter Spacing: 0.18em   ← body に1回だけ
palt:           使わない
Border Radius:  0px
Box Shadow:     なし
Container:      1200px

プロンプト例

ニッカウヰスキーのデザインシステムに従って、蒸溜所紹介ページを作ってください。
- ルートの font-size は 13px（16px ではない）
- body に letter-spacing: .18em を1回だけ書き、子要素には再宣言しない
- 和文は "Noto Sans JP", sans-serif / 400。見出しも 400 のままで太らせない
- 本文は 15px / line-height: 2.33
- セクション見出しは英字を Vollkorn 56px / letter-spacing: .05em、その右に和文 32px / .18em を添える
- CTA は 1px solid #000000 / border-radius: 0 / 15px / weight 500 の1種類だけ
- font-feature-settings: "palt" は使わない
- box-shadow は使わない。地色は #e9e9e9