NIKKA WHISKY
JPEN
STORE
01 / Colors
COLORS
配色

ブランド色は黒。地色は #e9e9e9、html 側だけアイボリー #f9f7ef を敷いている。黒地の上の第2階層は #cccccc の1色だけで、それ以外に有彩色の面は検索オーバーレイの #92a6a9 しかない。

Black
#000000
★本文(可視 108 要素)/ヘッダー帯 rgba(0,0,0,.8)/フッター全面
Page Gray
#e9e9e9
★実質のページ地色(body の背景)
Ivory
#f9f7ef
html の背景。body に覆われ、通常は見えない
Muted on Dark
#cccccc
★黒地の上の第2階層。フッター・メガメニュー(可視 24 要素)
Search Surface
#92a6a9
検索オーバーレイの面。サイト唯一の有彩色の面
White
#ffffff
黒地の上の見出し(可視 8〜10 要素)

青 #0033ff は採用しない。OneTrust(Cookie バナー)の色で、font-size も 13.008px / 14.4px と CMP 特有の端数。#27455c も採用しない——uniqueBackgrounds に 8 要素あるが可視テキストを持たず、フルページのスクリーンショットでも確認できなかった。

02 / Typography
TYPE
書体と字送り

ルートは 13px。html も body も font-size: 13px で、1rem = 13px。letter-spacing: .18em を body に1回書くと computed は 2.34px になり、多くの子要素はこの px をそのまま継承する。

111213 141518 32405672
Display ★Vollkorn / 72px / 400
lh 1.10 / ls .05em
OUR BRANDS
Display SVollkorn / 56px / 400
lh 0.90 / ls .05em
ABOUT US
Section Title ★Noto Sans JP / 32px / 400
lh 1.30 / ls .18em (5.76px)
ご挨拶
Sub HeadingNoto Sans JP / 32px / 400
lh 1.50 / ls .18em
北海道 余市蒸溜所
Lead ★Noto Sans JP / 18px / 400
lh 3.10 / ls .25em
1934年、北海道余市町に
「大日本果汁株式会社」を設立したことから
ニッカウヰスキーの歴史は始まりました。
Body ★Noto Sans JP / 15px / 400
lh 2.33 / ls .18em (2.7px)
現在は、アサヒグループの中でウイスキーを中心とした国内外のマーケティング、海外事業、国内事業の販売支援などの役割を担っています。
Nav(欧文)Lato / 15px / 300
lh 1.04 / ls .10em
Nav Label(和文)Noto Sans JP / 14px / 400
lh 1.11 / ls .18em (2.52px)
商品紹介  蒸溜所  知る・愉しむ
Base / FooterNoto Sans JP / 13px / 400
lh 1.20 / ls .18em (2.34px)
竹鶴ピュアモルト
BreadcrumbLato, Noto Sans JP / 12px
lh 1.30 / ls .10em
TOP > 会社案内
LegalNoto Sans JP / 11px / 400
lh 1.42 / ls normal
ストップ!20歳未満飲酒・飲酒運転。妊娠中や授乳期の飲酒はやめましょう。

トラックは 3 本しかない

0.05em — Vollkorn
DISTILLERIES
0.10em — Lato
DISTILLERIES
0.18em — 和文(既定)
生きるを愉しむウイスキー。
0.25em — リード文のみ
生きるを愉しむウイスキー。
normal — 参考(不採用)
生きるを愉しむウイスキー。

font-feature-settings: "palt" は 1 要素も使っていない(実測 0 件)。字を詰めるのではなく空ける設計なので、palt を足すと約物が閉じて意図が反転する。

実サイトのフォールバックは誤り。"Noto Sans JP", serif / Lato, serif / Vollkorn, serif と宣言されているが、前 2 つはサンセリフ。Web フォントが落ちると和文ゴシックが明朝に化ける。新規実装では sans-serif に直すこと(Vollkorn, serif だけは正しい)。

Lato の 700 は unloaded。@font-face は宣言されているが参照する要素が無く、欧文に太字は用意されていない。和文の見出しも 32px で weight 400 のまま。

03 / Buttons
BUTTONS
ボタン

主要 CTA は 1px solid #000000 / border-radius: 0 の枠線ボタン1種類だけ。面で塗る CTA は存在しない。字間は body から継承した 2.34px をそのまま使い、15px でも再宣言しない。

詳しくはこちら ホバー時 JP 01 02

青い塗りボタンは OneTrust のもの。#0033ff / border-radius: 2px / weight 600〜700 はすべて Cookie バナーで、ニッカの部品ではない。「目立つボタン」を作りたくなっても、罫線1本に留める。

05 / Cards
CARDS
カード

カードは面でも枠でもなく、画像と余白だけで区切る。角丸も影も付けない。カテゴリは Lato、本文は Noto Sans JP .18em。

TAKETSURU
OUR BRANDS
竹鶴ピュアモルト
YOICHI
DISTILLERIES
北海道 余市蒸溜所
MIYAGIKYO
DISTILLERIES
仙台 宮城峡蒸溜所
06 / Elevation
DEPTH
奥行き

実サイトに box-shadow は事実上存在しない。奥行きは「黒帯 rgba(0,0,0,.8) を重ねる」ことだけで表す。

Level 0(既定)
none — カード・ボタン・見出しすべて
内側リング
rgb(0,0,0) 0 0 0 2px inset(実測 2 要素)。枠線の代用
除外
rgba(0,0,0,.2) 0 0 18px 0 は OneTrust の Cookie バナーだけ(実測 1 要素)
07 / Layout
LAYOUT
レイアウト

コンテナは 1200px。gap はトップ 24px、下層 34px、セクション間 80px。

--container: 1200px(実測 6 要素で最多)
24px
トップの gap
34px
下層の gap
62px
セクション内
80px
セクション間
既定
0px
JP / EN
100px
連番
50%

ブレークポイントは 576px / 767px / 768px / 1280px / 1511px。主要な切替点は screen and (max-width: 767px)(実測 7 回)。