3,980円以上のご購入で送料無料 ※沖縄・離島は対象外

Yamazaki Home, Simplified

暮らしの「ちょっと不便」を、道具で解く。

2 / 5

01 — COLORS

無彩色 ＋ バッジ 3 色だけ

Neutral（UI の全部）

Text Primary
#4e4e56
既定の文字色。青みを含んだグレー
Text Strong
#3d3d43
セクション見出し・カート系ボタン
Text Strongest
#35353a
商品名
Muted
#626267
ページネーションの数字
Subtle
#7e7e88
アウトライン枠・COMING SOON
Caption
#9e9eaa
品番・補足（Heebo 12px w300）
Border
#d9d9d9
区切り線
Surface
#f4f4f6
通知バー・淡い面
Surface Alt
#f7f7f9
ランキングの下地
Surface Dark
#26373e
フッター・About。唯一「色」を持つ面
Fill Black
#000000
プライマリボタン・選択中バリアント

Badge（サイト唯一の彩度）

NEW
#aa2b2b
朱に寄せた深い赤。純赤にしない
BEST SELLER
#c3a856
くすんだ金。レビュー星と同色
COMING SOON
#7e7e88
入荷予定

Accent（部分的な差し色）

Brown
#734e30
木目シリーズの帯
Beige
#e7d0a9
上記と対になる淡色
Lavender Gray
#dcdce3
カテゴリカードの下地

02 — TYPOGRAPHY

和文も欧文も IBM Plex Sans JP 1 書体

収納は、暮らしの設計だ
Display / IBM Plex Sans JP 40px w400 / lh 1.3 (52px) / ls normal / #4e4e56
TOP RANKING
Section (欧文) / Roboto 27px w500 / lh 1.2 (32.4px) / ls normal
PICK UP — 今月のおすすめ
Heading 2 / IBM Plex Sans JP 24px w400 / lh 1.3 (31.2px) / font-feature-settings: normal（palt をここだけ解除） / #3d3d43
tower マグネットキッチンペーパーホルダー
Product Name / IBM Plex Sans JP 18px w400 / lh 1.3 (23.4px) / ls 0.06em (1.08px) / #35353a
スチールに粉体塗装を施し、キッチンの油汚れにも耐える仕上げにしています。マグネットで冷蔵庫の側面に固定でき、調理台の上を占有しません。ホワイトとブラックの 2 色展開です。
Body / IBM Plex Sans JP 16px w400 / lh 1.7 (27.2px) / ls normal / #4e4e56
サイズと素材について
Sub Heading / 15px w400 / lh 1.5 (22.5px) / ls 0.02em (0.3px)
キッチン収納 ／ バス・サニタリー ／ 玄関収納
List Item / 14px w400 / lh 1.5 (21px) / ls 0.02em (0.28px)
※ 商品の色味はご覧の環境により実物と異なる場合があります
Caption / 13px w400 / lh 1.3 (16.9px) / ls 0.02em (0.26px)
品番：1842 / 1843
Caption (数値) / Heebo 12px w300 / lh 1.2 (14.4px) / #9e9eaa — サイト唯一の Light
NEW BEST SELLER COMING SOON
Badge / Yantramanav 10–11px w400 / ls 0.02em / border-radius: 0px / padding: 1px 5px 0
ウェイトを振らない。 実サイトのトップページに font-weight: 700 は 1 箇所もない。和文はすべて 400 で、500 が付くのは欧文見出し（Roboto / Yantramanav）だけ、300 は Heebo のキャプションだけ。階層はサイズと色でつくる。

03 — PRODUCT

商品グリッド（角丸ゼロ・影なし）

product image
NEW
TOWER
マグネットキッチンペーパーホルダー
品番：1842
￥1,980
product image
BEST SELLER
TOSCA
キッチン自立式コーナーラック
品番：2439
￥3,300
product image
COMING SOON
PLATE
スリムタオルハンガー
品番：3021
￥2,200
product image
TOWER
レンジ上棚
品番：1990
￥4,400

Skeleton（読み込み中のシマー）

04 — BUTTONS

角丸は 0px。3px はアウトラインだけ

Primary
#000000 / radius 0
Cart
#3d3d43 / radius 2px
VIEW MORE
Outlined（欧文）
radius 3px / Yantramanav
山崎実業について
Outlined（和文）
radius 3px
Secondary
#d0d0d0 枠 / radius 3px

Variant Selector（カラー選択）

選択中は #000000 ベタ。border-radius: 0px（CSS 変数 --variant-pills-radius: 40px とは食い違う）
VIEW ALL
濃い面の上では枠と文字を白に
Yamazakiのニュースレター配信登録
#26373e の上
CSS 変数と実装値が食い違う。 --badge-corner-radius: 4.0rem（= 40px） と --variant-pills-radius: 40px が宣言されているが、実装はどちらも border-radius: 0px。変数を信じて pill を作ると実サイトと別物になる。一方 --font-body-family / --font-heading-family / --ss-color-text-primary: #4E4E56 は実装と一致する。

05 — FORMS

フォーム要素（3 状態）

ニュースレターの配信に使用します
2 重リング：白の内輪 ＋ rgba(78,78,86,.3) の外輪
メールアドレスの形式が正しくありません

06 — ELEVATION

影を持たないことがルール

Level 0 — 既定
box-shadow: none;
ボタン・カード・画像すべて
Level 1 — 固定タブ
box-shadow: 0 0 25px rgba(0,0,0,0.2);
画面端のお気に入りタブのみ
Focus ring
0 0 0 .3rem #fff, 0 0 .5rem .4rem rgba(78,78,86,.3)
1rem = 10px なので内側 3px

階層は面色でつくる

#ffffff — 地
#f7f7f9 — ランキング
#f4f4f6 — 通知バー
#26373e — フッター

07 — LAYOUT

1rem = 10px（Shopify Dawn の 62.5% ベース）

項目値備考
Root font-size10pxrem を 16px 基準で読むと 1.6 倍ずれる
Body font-size16px (1.6rem)375px〜1920px で固定。流体タイポグラフィなし
Container1440pxワイドセクションは 1890px
Card width250px記事幅は 450px
Gutter6.5px最頻出。写真同士を近づける詰めたガター
Breakpoints750px / 990px主軸。ほかに 480px / 768px / 1024px
Border radius0pxアウトラインボタンのみ 3px、ページャのみ 11px
font-feature-settings"palt"body からグローバル継承。解除は PICK UP 見出しのみ