Sweets of Hokkaido
しあわせをつくるお菓子
CSS 変数は 0 個。色はコンポーネント CSS への直書きで、彩度を持つのは #005bac と #be9a60 の 2 色だけ。
#0e6cc1 をブランド色として使わない。 uniqueBackgrounds と interactive に 4〜5 件出るが、すべてチャットボット（「価格や取扱店舗などよくある質問」）由来で、該当要素の getBoundingClientRect() はすべて 0×0px。border-radius が 3px / 4px / 10px 10px 0 0 と半端なのも見分けどころで、サイト本体の radius は 0 / 36px / 50% の 3 つしかない。ナビの About は Playfair Display（セリフ）。その真下に 11px のゴシックで和文を添える 2 段組みが、このサイトの型。
字間は全階層で一律 0.1em。 Playfair Display の英字だけ 1 段狭い 0.08em、10px 級の極小英字だけ 0.18em まで開く。palt は使わず（実測 583 要素中 1 件のみ・外部ウィジェット由来）、字送りはすべて letter-spacing のベタ組みで作る。詰め組みではなく開き組みのサイトなので、palt を足すと設計と逆方向に動く。
root の font-size が 15px（16px ではない）。rem で組むと 1rem = 15px になり、1.34rem = 20.1px のような半端な実測値が並ぶ。
LANGUE DE CHAT
北海道の澄んだ空気と雪をイメージして生まれたラングドシャ。オリジナルのホワイトチョコレートを、さっくりと焼き上げた生地ではさみました。冬の石狩平野に降り積もる雪の情景を、そのままお菓子にしたいという思いから名付けられています。
発売から半世紀近く、配合も焼成温度も少しずつ見直しながら、変わらない口どけを守り続けてきました。
| 内容量 | 12枚入 / 18枚入 / 24枚入 / 36枚入 |
|---|---|
| 賞味期限 | 製造日より 150 日 |
| 保存方法 | 直射日光・高温多湿を避けて保存してください |
| 取扱店舗 | 直営店、北海道内の主要空港・駅、公式オンラインショップ |
テーブルの th は Noto Sans JP 15px / 700 / #005bac、字間 0.08em。罫線は 1px solid #dddddd。
左右のパディングは 50〜60px と極端に広く、下パディングだけ 2px 厚い（和文の字面の視覚補正）。
Primary は padding: 11px 50px 13px / border-radius: 0。ヘッダーの EC 導線だけ border-radius: 36px のピル。
写真・濃色面の上では Ghost（枠だけ・ラベルは Noto Serif JP / 500）と Inverse（白地に青文字）の 2 種に切り替わる。
枠も角丸も影も持たない。写真とテキストを 40px の余白で並べるだけ。
季節の意匠を刷新しました
工房見学とお菓子づくり体験
ギフト包装の選択肢を拡充
実サイトの問い合わせフォームは Bootstrap の form-control をそのまま使っている（本体のデザインシステムとは別系統）。新規実装では下記のように角丸 0・影なしへ寄せる。
全角でご入力ください
フォーカスリングは #005bac
電話番号の形式が正しくありません
セレクトも同じ枠・角丸なし
可視要素で影を持つのは 3 件だけ。奥行きは「白地 / 写真 / 濃色面」の 3 層で表現する。
box-shadow: none7px 7px 20px rgba(4,0,0,.1)カードに影を足さないこと。 このサイトの平面性は、影ではなく余白と 1px の罫線で成立している。
コンテナは 1040px。ブレークポイントは実質 960px の 1 本。
| Token | Value | 用途 |
|---|---|---|
| XS | 7px | インラインの隙間 |
| S | 10px | 小さなギャップ |
| M | 40px | カード間 / グリッドの gutter |
| L | 50px | ボタンの左右パディング |
| XL | 60px | 金茶ボタンの左右パディング |
| Breakpoint | Width | 説明 |
|---|---|---|
| Mobile | ≤ 600px | 細かい調整（12箇所） |
| 主 | ≤ 960px | レイアウトが総入れ替わる（393箇所） |
| Desktop | ≥ 961px | print, screen and (min-width: 961px)（103箇所） |
| Wide | ≥ 1041px | コンテナ 1040px を超えたときの調整 |
商品キャンペーンページはヘッダー・フッターだけ共通で、中身は総取り替えになる。「ISHIYA のデザイン」としてはコーポレート側を採用する。
和文 Noto Sans JP / 英字 Playfair Display
背景 #ffffff ／ 本文 15px・行間 2.0・字間 0.1em
radius は 0 / 36px / 50%
和文 Zen Maru Gothic（丸ゴシック）
背景 #021336 ／ 本文 14px・行間 2.0・字間 normal
見出しの字間は −1.3px のマイナス、radius 2px