日本語

1805年の創業より 無添加自然熟成

発酵の力で日本を元気に

The Kuzumochi ReBIRTH Declaration.

詳しくはこちら
01 / Colors

黒と白。色は日付と通販ボタンだけ

可視テキスト 56 要素のうち、色が付いているのは日付ラベルの 5 要素だけ。赤が 2 つあるのは実装の実態で、#cf1030 は文字色、#b93242 は右下に固定される通販ボタンの面色。役割が違うので統一しない。

Notice Red
#cf1030
★日付ラベルの文字色。CSS 6 回 / 可視 5 要素
Shop Red
#b93242
ONLINE SHOP ボタンの面のみ。CSS 5 回 / 可視 1 要素
Sumi
#080604
SNS アイコンの面(可視 6 要素)。純黒ではない
Black
#000000
★本文・見出し・ナビ。可視 56 / 53 要素
Dark Maroon
#450510
下層フッターの通販ダイヤル(可視 2 要素)
Pale Pink
#f0b3be
トップの通販ダイヤル(枠は #f1b7c1)
Label Gray
#747474
カテゴリバッジの面(可視 5 要素)
Surface Lavender
#f6f5f8
グローバルナビの引き出しの面

トップは全画面写真がビューポートを覆う(heroCover.heroCovered: true)。それでもページの地色は写真の色ではなく #ffffff(pageBackground.resolved / 根拠 body)。

約物は CSS ではなくフォントで詰める

font-family の 1 番目は書体ではなく YakuHanMP_Noto。括弧と句読点のグリフしか持たないので、残りの文字は 2 番目の Noto Serif JP が描く。letter-spacing も palt も使わずに、約物だけが半角になる。

YakuHanMP_Noto あり(実サイトと同じ)

明治初頭に出たかわら版「大江戸風流くらべ」において、『元祖くず餅・船橋屋』は(亀戸天神前)と記されている。

YakuHanMP_Noto なし(比較用)

明治初頭に出たかわら版「大江戸風流くらべ」において、『元祖くず餅・船橋屋』は(亀戸天神前)と記されている。

YakuHanMP(明朝用)と YakuHanJP(ゴシック用)は別物。明朝と組むときは MP を選ぶ。読み込みは yakuhanjp@3.2.0 を jsDelivr から。Regular・SemiBold・Bold の 3 ウェイトが loaded している。

font-feature-settings: "palt" は 1 要素も使っていない(CSS 全文でも 0 回)。約物フォントの上に palt を重ねると二重に詰まって字面が壊れる。

03 / Typography

明朝一書体。本文の weight は 600

サイト全体で和文書体は Noto Serif JP ひとつ(可視 63 / 54 要素)。ゴシック体は 1 要素も無い。欧文は日付・電話番号・コピーライトだけに Neuton を使う(可視 7 / 2 要素)。

121516 1920 2124 2730
Section Heading ★Noto Serif JP / 27px / 600
lh 1.70 / ls 0.12em
船橋屋の創業と「くず餅」のはじまり
Feature Heading30px / 600
lh 1.70 / ls 0.12em
本店に訪れた文化人
Block Heading24px / 400
lh 1.00 / ls 0.15em
9月の商品情報
Global Nav21px / 400
lh 3.52(74px)/ ls 0.10em
くず餅乳酸菌について
Article Body ★16px / 600
lh 2.00 / ls 0.06em
東京の下町情緒が色濃く残る江東区亀戸三丁目、亀戸天神のすぐ側に「船橋屋」があります。船橋屋は、江戸は文化二年(1805年)、十一代将軍徳川家斉の頃、創業致しました。
Figure Caption16px / 700
lh 1.50 / ls normal
現在の船橋屋
News Date ★Neuton / 19px / 700
lh 1.00 / ls 0.15em / #cf1030
2026.08.31
List Item ★15px / 400
lh 1.70 / ls 0.15em(可視 32 要素)
和フィナンシェ|新作「黒糖と柚子」登場
Category Badge12px / 400
lh 1.00 / ls 0.15em
催事情報 お知らせ
Update Label16px / 400
lh 1.50 / ls 0.08em
UPDATE 2026.08.31

本文の weight は 600。明朝の本文を Regular ではなく SemiBold で組むのがこのサイトの調子で、400 に落とすと本文が消える(字間 0.06em と噛み合わなくなる)。

03-b / Letter spacing

字間は em の 3 段階だけ

本文 — 0.06em(CSS 全文で 15 回・最多)くず餅は、小麦澱粉を十五ヶ月間乳酸発酵させた和菓子です。
一覧・日付・小見出し・バッジ — 0.15em(CSS 6 回)くず餅は、小麦澱粉を十五ヶ月間乳酸発酵させた和菓子です。
大見出し — 0.12em(CSS 2 回)くず餅は、小麦澱粉を十五ヶ月間乳酸発酵させた和菓子です。

字間は必ず em で書く。実サイトに px 宣言の字間は 1 つも無い(0.06em 15 回 / 0.15em 6 回 / 0.12em 2 回)。本文と大見出しで倍の差をつけるのがこのサイトの調子。

下層は「本文 / 写真」の 2 カラム

江戸名物として番付

明治初頭に出たかわら版「大江戸風流くらべ」において、当時の江戸の名物が番付として記されています。その中に「元祖くず餅・船橋屋」の名を見ることができます。

亀戸天神の参道に店を構え、参拝客に供してきた菓子が、いつしか江戸の名物として数えられるようになりました。

大江戸趣味風流くらべ

亀戸天神前 元祖くず餅 船橋屋

現在の船橋屋

見出しの行間も 1.70 と広く取る。見出しを詰めないのがこのサイトの特徴で、詰めるのはトップの 24px ブロック見出し(line-height: 1.00)だけ。

05 / News

新着情報:日付は Neuton、本文は明朝

2026.08.31催事情報
2026.9月催事情報
2026.08.28お知らせ
店舗限定 くず餅の日特別企画
2026.08.27委託販売スポット
2026年9月 委託販売スポット情報

日付は Neuton 19px / weight 700 / letter-spacing: 0.15em / #cf1030。実サイトは Neuton, sans-serif と宣言しているが、Neuton はセリフ体なので serif が正しい。このプレビューは正しい方で組んでいる。

商品一覧:15px / lh 1.70 / ls 0.15em

中秋の名月しるこ

中秋の名月しるこ プレミアム

六穀おはぎ

和フィナンシェ|新作「黒糖と柚子」登場

文豪の蜜パン

カードに枠線も影も付けない。実サイトの box-shadow は 0 種。カードの区別は写真と余白だけで行う。

07 / Components

角丸は 0px。円は 2 つだけ

Floating Shop Button

ONLINE
SHOP
bg #b93242 / color #fff
border-radius 100%
右下に固定。唯一の面色 CTA

Hero Button

詳しくはこちら
bg rgba(0,0,0,.8) / color #fff
border-radius 0
白い 1px の額の中に置く

Tel Button(トップ)

0120-8-27848
border 1px solid #f1b7c1
color #f0b3be / radius 0
Neuton 16px / lh 1.88 / ls 0.15em
★実サイトでもほぼ白の地(bg.png 平均 rgb(251,250,251))に
載っており、コントラストは低い。実測どおり

Tel Button(下層)

0120-8-27848
color #450510
下層フッターでは濃い臙脂に変わる

Category Badge

催事情報
bg #747474 / color #fff
padding 6px 10px / radius 0
12px / 400 / ls 0.15em

Update Label

UPDATE 2026.08.31
bg #333333 / color #fff
16px / ls 0.08em / radius 0

SNS Icon

bg #080604 / border-radius 100%
可視 7 要素。テキストは font-size 0 で隠す

Focus(キーボード操作)

詳しくはこちら
outline 2px solid #cf1030 / offset 3px
フォーカスにも日付と同じ赤を使う

Recruit Bar

採用情報
bg #3e3e3e / color #fff
23px / lh 1.00 / radius 0

余白・コンテナ・影

6
10
20
40
80

コンテナは 1400px(CSS 全文で 4 回・最頻)。広いセクションは 1600px、本文セクションは 1200px。ブレークポイントは 780 / 781px の 1 本だけ(max-width: 780px 3 回 / min-width: 781px 3 回)。

影は 0 種。階層は「写真か、白地か」「額の中か、外か」で作る。カードに box-shadow を足さないこと。