オンラインショップ お客様相談室 国・地域選択
「米、水、人、酒造りの本質。」
シンプルだからこそ、どこまでも奥深い。
白鶴の酒造りは、この三つに尽きます。
SCROLL
01 / COLORS
白と黒に、金を一点COLORS

唯一の有彩色が金 #d5b45c。これをナビのアクティブ状態、英字ラベル、カルーセルの現在位置にだけ乗せる。金は「面を塗る色」ではなく「現在地と格を示す色」。

Primary / 金
#d5b45c
CSS 154 回。可視 11 要素。ナビのアクティブ・英字ラベル
Gold Dark
#aa9869
CSS 7 回。PREMIUM の文字、帯の端
Text Primary
#000000
可視 67 要素で最多。純黒を使う。薄めない
Text Muted
#666666
パンくず・ユーティリティ
Background
#ffffff
根拠 viewportTopBySample (3/3)
Surface
#f6f7f9
検索窓・淡い面
Surface Gray
#efefef
商品一覧の面(下層で 8 要素)
Border / Inactive
#aaaaaa
罫・カルーセルの非アクティブ(5 要素)

商品グレードは3色のグラデーション帯で表す

プレミアム
PREMIUM
#aa9869 → #cfbd8e
デイリー
DAILY
#67907c → #88b19d
スペシャル
SPECIAL
#8f0100 → #ac4f4e

3色とも linear-gradient(-45deg, 濃 0%, 淡 40%, 淡 60%, 濃 100%) という同じ角度・同じストップで作る。中央 20% を淡い色で通すことで箔の光沢に見せるのがこの意匠の要点。グレードを増やすときも式を保ったまま色だけ差し替えること。

見出しは明朝、本文はゴシックTYPOGRAPHY

書体で役割を分け、見出しはさらに「和文(明朝・黒)+ 欧文(Lato・金・0.1em)」の2段で組む。行送りは全サイズで比率 2.0 を維持する。

Section Title (JA)Noto Serif JP / 30px / 700
lh 1.20 (36px) / ls normal
プレミアム
Section Label (EN)Lato / 12px / 400
lh 2.0 / ls 0.10em / 色 #d5b45c
PICK UP
Page TitleNoto Serif JP / 28px / 700
lh 1.50 (42px) / ls normal
商品ラインアップ
Vertical Copy(縦組み)Noto Serif JP / 28px / 700
lh 2.00 (56px) / ls 1.4px
「米、水、人、酒造りの本質。」
Statement游ゴシック / 24px / 700
lh 2.00 (48px) / ls normal
「日本酒はこんなに楽しい」
Section HeadingNoto Serif JP / 21px / 700
lh 2.00 (42px) / ls normal
商品カテゴリ
LeadNoto Serif JP / 18px / 400
lh 2.00 (36px) / ls normal
大切なひとときを彩る、こだわりの商品です。
Nav Item游ゴシック / 16px / 700
lh 1.40 (22.4px) / アクティブは金
ニュース 商品ラインアップ レシピ
Grade Label (EN)Noto Serif JP / 16px / 700
lh 2.00 (32px) / 色 #aa9869
PREMIUM
Body游ゴシック / 14px / 400
lh 2.00 (28px) / ls normal
日本酒のスタンダードな魅力から意外な一面まで。白鶴が長年かけて積み上げてきた知見を、できるだけやさしい言葉でお伝えします。
Body(明朝)Noto Serif JP / 14px / 400
lh 2.00 (28px) / ls normal
大切なひとときを彩る、こだわりの商品です。
Utility Nav游ゴシック / 12px / 400
lh 2.50 (30px)
オンラインショップ
Breadcrumb游ゴシック / 12px / 400
lh 1.20 (14.4px) / 色 #666
TOP > 商品ラインアップ

字間は既定 normal(実測 365 要素)。開けるのは英字ラベル(0.1em)と縦組みのコピー(1.4px)だけ。縦組みの 28px と 18px がどちらも 1.4px なのは、親(28px 基準の 0.05em)から px のまま継承されているため。0.05em と書き写すと 18px 側が 0.9px になり実サイトと変わる。

実測には -4.34px / -5.6px という極端なマイナス字間も出るが、これはロゴ・見出し画像まわりの詰め処理。本文・UI に持ち込まないこと。

03 / ARTICLE
本文カラムは 860px、行間は 2.0ARTICLE

ひやおろしという飲みごろ

秋になると店先に並ぶ「ひやおろし」。名前は聞くけれど中身は知らない、という方に向けて。

冬に仕込んだ酒は、春にいちど火入れをして夏を越します。この間、蔵の中でゆっくりと熟成が進み、荒さが取れて味がまとまる。秋、外の気温が蔵の中と同じくらいまで下がったころ、二度目の火入れをせずにそのまま出荷する——これがひやおろしです。

火入れを一度省くということ

火入れは酒を安定させる工程ですが、同時に香りの一部を飛ばします。二度目を省くぶん、ひやおろしには仕込んだときの香りが残る。熟成でまろやかになった口当たりと、若い香りが同居するのが、この酒の面白いところです。

冷やしすぎず、常温から少しぬるめが向きます。秋の食材——きのこ、戻り鰹、秋刀魚——と合わせると、酒の膨らみが料理の脂を受け止めてくれます。

黒の枠線が基本形BUTTONS

通常のボタンは透明地に 1px solid #000、角丸なし。塗るのは商品グレードへの誘導だけで、そこにグラデーション帯を使う。

カルーセルのドットは完全な円ではなく border-radius: 5px の角丸。非アクティブは #aaaaaa、アクティブは金 #d5b45c。

05 / CARDS
角丸なし、影は1段だけCARDS
白鶴 大吟醸
華やかな香りと、すっきりとした後味。冷やしてどうぞ。
淡雪スパークリング
やさしい甘みと細かな泡。food と合わせやすい低アルコール。
素材がいきる料理の清酒
煮物の臭みを抑え、素材の味を立てる料理用の清酒。
FormsFORMS

入力欄は淡い面(#f6f7f9)に #aaaaaa の罫。フォーカスすると罫が金に変わり、地が白に起き上がる。エラーはスペシャルの赤で示す。

全角でご入力ください
お問い合わせの返信先になります
20歳未満の方はご利用いただけません
07 / ELEVATION
影はカードの1段のみELEVATION

ボタン・帯・バッジには影を付けない。基本は罫線と面色で階層をつくり、カードだけを浮かせる。

Level 0
none — 罫で仕切る面・ボタン
Level 1
0 5px 10px rgba(0,0,0,0.2) — カード(実測 11 要素)
コンテナ 1380pxLAYOUT

ビューポート 1440px に対し 1380px まで使う、余白の少ない広いレイアウト。本文だけ 860px に絞る。

Viewport 1440px
Container 1380px(実測 8 要素)
Block 1280〜1320px
Column 860px — 本文カラム

Spacing は 4 / 24 / 40 / 80 / 100 / 120px。gap プロパティの使用は実測 0 件で、レイアウトは margin で組まれている。