【募集終了】「鶴屋吉信で京菓子をつくって食べてみよう!」開催のお知らせ
「ヨキモノ」を
創る
公式オンラインショップでお買い物
COLORS
Base — サイトの色はこれだけ
Ink
#000000
本文・見出し・罫線のすべて。グレーに逃がさず純黒を使う
Paper
#ffffff
地色・カードの面・ヘッダーの面
Neutral — 数少ない中間色
Gray Button
#666666
「ページの先頭へ戻る」だけ。サイトで唯一の塗られた UI
Field
rgba(0, 0, 0, .07)
入力欄の面。枠線ではなく薄い面で示す
Hairline Soft
rgba(0, 0, 0, .25)
淡い区切り罫
Photo — 色は写真が持つ
(参考)淡い水色
写真の背景
CSS の値ではない。商品写真の撮影背景として現れる
(参考)生成り
写真の背景
同上。実装でブランドカラーとして起こさないこと
TYPOGRAPHY
店舗を探す
明朝 42px / 400 / lh 1.5(63px) / ls .09375em(3.94px)下層ページの見出し
ロングセラー・定番
明朝 36px / 400 / lh 1.5(54px) / ls .09375em(3.375px) / padding: 0 70pxセクション見出し
ご利用用途
明朝 24px / 400 / lh 1.5(36px) / ls .09375em(2.25px)小見出し
本蕨
明朝 20px / 500 / lh 1.2 / ls .09375em(1.875px)商品名 — 700 は使わない
公式オンラインショップでお買い物
明朝 18px / 500 / lh 1.3(23.4px) / ls .09375em(1.6875px) / padding: 13.5px 0ナビ・明朝リンク
直営店舗の営業日時のお知らせ
ゴシック 17px / 600 / lh 1.71(29.14px) / ls .09375em(1.59375px)ニュース見出し
貴重な本蕨粉などを活かした“ぷるぷる”食感の生菓子です。本文はシステムフォント(-apple-system, "system-ui", Arial, sans-serif)で組み、行間 1.71・字間 .09375em を守ります。字間は px ではなく em で持つため、サイズが変わっても比率が崩れません。
ゴシック 14px / 400 / lh 1.71(24px) / ls .09375em(1.3125px)本文 — 明朝にしない
鶴屋吉信 本店 京都・西陣
ゴシック 15px / 400 / lh 1.29 / ls .09375em(1.40625px)店舗一覧の行
トピックス イベント 店舗 重要
ゴシック 10.5px / 400 / lh 1.7 / ls .125em / border-bottom: 1px solid #000 / padding: 0 5.25pxカテゴリタグ — 塗らずに下線で示す
鶴屋吉信 本店京都・西陣
明朝 22px / 500 / lh 1.2 / ls .136em(3px) / 色 #fff写真に重ねる店名 — さらに開く
ロングセラー・定番
つばらつばら

薄く焼いた生地で粒あんを包んだ、しっとりとした半生菓子です。「つばらつばら」は万葉集にある言葉で、しみじみ、心ゆくままにという意味。名の通り、ゆっくりと味わっていただきたい一品です。

見出しは明朝で立て、説明はゴシックで組む。書体で役割を分けることで、装飾を足さずに階層をつくります。字間は全サイズ共通の .09375em、行間は明朝 1.5 / ゴシック 1.71。

オンラインショップで購入する
最新情報
BUTTONS
Text Button(サイトの標準)
background: #fff / border: 1px solid #000 / radius 0 / padding: 14px 17.5px / 14px / 600 / ls .09375em
Chip Button(絞り込み)
padding: 15px 30px / 15px / 600 / radius 0
Prefecture Header(サイト唯一の黒ベタ)/ Back to Top(唯一のグレー塗り)
黒帯: #000 / #fff / 14.4px / 700(サイトで唯一)  TOP へ戻る: #666666 / 12px / 600
Mincho Link(明朝の導線)
明朝 18px / 500 / padding: 13.5px 0 / border-bottom: 1px solid #000。塗らない
CARDS
本蕨
貴重な本蕨粉などを活かした“ぷるぷる”食感の生菓子。
京観世
こしあんの村雨と小豆羊羹を巻き上げた、渦模様の棹菓子。
柚餅
柚子の香りを求肥に閉じ込めた、創業以来の代表銘菓。
radius 0(画像も角丸なし)/影は em 基準。カードの font-size を変えると影も追従する
店舗(写真に重ねる)
鶴屋吉信 本店京都・西陣
IRODORI京都駅八条口
tubara cafe京都・西陣
FORMS
デフォルト — background: rgba(0,0,0,.07) / 枠線なし / radius 0 / ls -0.025em(入力欄だけマイナス字間)
フォーカス — 黒の可視リング(実サイトは UA 既定のため、実装では明示する)
メールアドレスの形式をご確認ください
エラー — 赤を足さず、内側 1px の黒罫と下線で示す
ELEVATION

影は em 基準の 2 枚重ね。要素の font-size に比例して大きさが変わるため、下の 4 枚はすべて同じ CSS で、font-size だけが 9.75 / 10.5 / 15 / 40.5px と異なります。

9.75px 基準
0 0 9.75px rgba(0,0,0,.05), 2.6px 2.6px 3.25px rgba(0,0,0,.075)
10.5px 基準
最頻出(37 箇所)。商品カード
15px 基準
0 0 15px …, 4px 4px 5px …
40.5px 基準
ヒーロー級のブロック
box-shadow: 0 0 1em rgba(0,0,0,.05), .267em .267em .333em rgba(0,0,0,.075) / px に書き直さないこと
LAYOUT
Spacing Scale
5
12
25
40.5(SP)
54
70(PC の左右)
Container
max-width: 1600px / padding: 0 70px / margin-inline: auto

一般的な 1200px より広い 1600px。写真を大きく見せるための設定です。ブレークポイントは 1024px と 1280px の 2 つだけ(モバイルファースト)。

このページは tsuruyayoshinobu.jp の computed style 実測(2026-08-18)に基づくデザインシステムのショーケースです。
実サイトの見出しは dnp-shuei-mincho-pr6n(DNP 秀英明朝 Pr6N / Adobe Fonts)。ドメインライセンスのためローカルでは表示できず、
ここでは Shippori Mincho に差し替えています。本文は実サイトと同じくシステムフォントです。