本文・見出し・CTA の面・アイコンまで、すべて #4b4b4b(--accent / --text-primary / --button-background-primary が同じ値)。
実測で 文字 208 要素・面 101 要素。純黒 #000000 が出るのは「売り切れ」バッジの文字だけで、
#1a1a1a はフッターと告知バーの面に限られる。
CSS 変数 124 個は Shopify テーマ(Impact 系)の語彙で、値が及源の選択。
--spacing-* / --text-h0..h6 / --rounded-* という命名はテーマ由来なので「自社設計のトークン」とは書かない。
一方で色・書体・radius・shadow の値は管理画面で設定されたものなので、そのまま仕様として使える。
見出し=Zen Old Mincho 600(実測 120 要素)、本文・UI=Zen Kaku Gothic New 400・700(実測 275 要素)。
letter-spacing は body に 0.02em を 1 回だけ書き、子は 0.26px を継承する(実測 262 要素)。
見出しだけ 0.015em を別に持つ。本文の font-size は 0.8125rem = 13px。
配信されているのは 3 ファイルだけ(zenoldmincho_n6 / zenkakugothicnew_n4 / zenkakugothicnew_n7)。
実サイトには font-weight: 900 を当てている要素が 3 つあるが、900 の実体は来ていないのでブラウザの合成太字で出ている。
再現実装では 700 に寄せるか、そもそも 900 を使わない。500・800 も同様に実体が無い。
line-height は 1.1。13px 本文の 1.6 とは別系統で組む機能性やデザインだけでは品質を語ることはできません。鉄が鉄であるために必要な手順を、 ひとつずつ確かめながら残してきました。南部鉄器の一般的な仕上げ塗装をあえて行わず、 鋳肌をそのまま使う。熱を遮断する層がないからこそ、繊細かつ大胆に、素材の持ち味を引き出せます。
使い捨てが溢れる今だからこそ、そう私たち及源鋳造は考えています。
本文は 13px / line-height: 1.6 / letter-spacing: .02em。
字間は body に 1 回だけ書いてあり、この段落は 0.26px を継承しています。
--rounded 系はすべて 0.0rem なのに、--rounded-button だけ 3.75rem(60px)。
アウトラインボタンは border ではなく box-shadow: 0 0 0 2px inset で枠を描く。
商品名だけ明朝(--text-h5 = 17.6px / 600 / LH 1.4)、価格はゴシックの --text-lg(17px / 700)。
カードの border-radius は 0、box-shadow は none。行間隔は --product-list-row-gap: 3rem、列間隔は 1.5rem。
--shadow-sm / --shadow / --shadow-md / --shadow-block の 4 つが宣言されているが、
すべて rgb(75 75 75 / 0.0)。このサイトに影は存在しない。
実測で box-shadow として現れるのは、影ではなく枠線の代わりのリングだけ。
| Query | 出現 | 用途 |
|---|---|---|
| screen and (min-width: 700px) | 123 | タブレット。主要な切り替え点 |
| screen and (min-width: 1150px) | 47 | 小型デスクトップ |
| screen and (min-width: 1000px) | 37 | ナビの展開 |
| screen and (min-width: 1400px) | 33 | ワイド |
| screen and (pointer: fine) | 21 | ★ホバー演出はマウス環境だけ |
| (prefers-reduced-motion: no-preference) | 4 | アニメーションの出し分け |
モバイルファースト(min-width 主体)で、700 / 1000 / 1150 / 1400 / 1600 / 1800px の 6 段。
@media (pointer: fine) で 21 件も分岐しており、下線アニメーションやカスタムカーソルはタッチ環境では出さない。
スティッキー領域は --sticky-area-height: calc(1 * 49px + 1 * 73px) = 122px(告知バー 49px + ヘッダー 73px)。