2026.07.31 令和8年熊本地震により被災した弊社製品の修理対応につきまして
企業情報 オンラインストア 法人様向けページ

灰色の地に、白い面を浮かべる

ページ背景が #ffffff ではなく #e4e4e4(body 直指定・実測 289 要素)。カードだけが白く抜ける。影を一切使わず、面の区別は明度差だけでつけている。

水色が3つある。#11ade6(リンク・バッジ)、#0098d5(ヘッダーのボタンの面)、#0faee8(インジケータ)。#11ade6 を基準にしてよいが、既存ページと並べるときは3つあることを前提にする。

siroca Blue
#11ade6
主アクセント。可視 5 要素 / CSS 26 回
Blue Dark
#0098d5
ヘッダーのボタンの面。CSS 10 回
Indicator
#0faee8
カルーセルの選択中(可視 2 要素)
Text
#000000
本文。可視 87 / 163 要素。純黒を使う
Background
#e4e4e4
ページ背景。実測 289 要素。白ではない
Surface
#ffffff
カード。地色との明度差で面を作る
Chip
#eef2f3
製品カテゴリのチップ(可視 4 要素)
Muted
#a5a5a5
日付(Montserrat 300)

詰めずに、空ける

font-feature-settings の宣言は CSS 全文で 0 件(palt を使わない)。約物サブセットフォントも入れていない。代わりに letter-spacing を .1em と .2em の2段階でほぼ全要素に当てる(CSS 全文で .1em が 95 回、.2em が 50 回)。

letter-spacing: normal の要素はトップで 6 / 96、下層で 4 / 174 しかなく、その中身は Previous / Next / Launguage / English といった英語ラベルだけ。「日本語は必ず空ける、英語は触らない」という明確なルール。

製品情報・レシピ・読みもの
letter-spacing: .1em
CSS 95 回。小さい文字(製品名・お知らせ・チップ・日付)
製品情報・レシピ・読みもの
letter-spacing: .2em
CSS 50 回。見せる文字(ナビ・見出し・ページタイトル)
Previous / Next / English
letter-spacing: normal
英語ラベルのみ。日本語には当たらない

約物は詰まらない。 palt も約物サブセットも無いので、「、。「」()・」の前後には全角分の空きがそのまま残る。この状態の上に .2em を重ねるのが、このサイトの字面の作り方。palt を足すと約物が詰まり、字空けと喧嘩する。

Light を主役に組む

最も多いウェイトは 300(Light)(トップ 44 要素 / 下層 40 要素)。次いで 700(31 / 54)、400(20 / 79)。500 は 1 要素だけ。300 と 700 の対比で組む。

製品情報
36.5px / 300 / line-height: 1.50 / letter-spacing: .2emページタイトル。Light で大きく、最大限に空ける
毎日をちょっと特別に
29px / 700 / line-height: 1.50 / letter-spacing: .1emヒーロー見出し
毎日がちょっと特別に。
28px / line-height: 1.95 / ヒラギノ明朝 ProNトップの惹句 1 要素のみ。Web フォントではなく OS ローカル
ピックアップ オススメの製品 ニュース
20px / 700 / line-height: 1.50 / letter-spacing: .2emセクション見出し
製品情報 レシピ 読みもの お客様サポート
14px / 700 / line-height: 1.50 / letter-spacing: .2emグローバルナビ。23〜38 要素
炊飯器
16px / 700 / line-height: 1.50 / letter-spacing: normal
家族団らんの時間。趣味に没頭する時間。そんなかけがえのない時間を、もっと豊かにする道具をつくっています。
16px / 400 / line-height: 24px(1.50)/ letter-spacing: normal本文
自動調理鍋おうちシェフクッカー5L 冷却プレート付きハンディファン 3D サーキュレーター
10px / 400 / line-height: 1.60 / letter-spacing: .1em製品名・一覧ラベル。下層 107 要素で最多
TOP > 製品情報 > キッチン家電
12px / 500 / line-height: 1.50 / letter-spacing: .2em
2026.09.25 2026.09.04 2026.07.31
12px / 300 / Montserrat / letter-spacing: .1em日付。loaded は 300 だけ

300 / 400 / 700 の3段で組む

@font-face は Noto Sans JP の 300 / 400 / 500 / 700 の4本で、すべて loaded。ただし CTA の1つに font-weight: 900 が当たっている(ヘッダーの「法人様向けページ」)。900 の @font-face は無いので、ブラウザの合成太字で出る。

Noto Serif JP を 400/500/600/700 の4本読み込んでいるが、document.fonts で全部 unloaded・可視 0 要素。1文字も使われていないので、新規実装では @font-face を削ってよい。

毎日を、特別に
300 Light
★最多(44 / 40 要素)。ページタイトルに使う
毎日を、特別に
400 Regular
本文・製品名(20 / 79 要素)
毎日を、特別に
700 Bold
ナビ・見出し(31 / 54 要素)
毎日を、特別に
900 Black
@font-face が無く合成太字。使わない

角丸 8px、影なし

カードとチップは 8px、アウトラインのバッジは 10px、ヘッダーのボタンだけ 0px。box-shadow は実測 0 種 / 0 要素。

ボタンの padding は左右非対称(15px 10px 17px 43px)。アイコンの分を左に確保する書き方。

プレスリリース キッチン家電 季節家電 生活家電
かまどさん電気
おうちいろり
コーン式全自動コーヒーメーカー
3D サーキュレーター
部品・消耗品のご購入
製品ごとの部品一覧よりご購入ページにアクセスしてください。

896px で body ごと切り替わる

コンテナは 1200px。ルート(html)は全幅 10px で固定だが、body の font-size と line-height が 896px で切り替わる。見出しやナビはサイズだけでなくウェイトも変わる。

画面幅htmlbodyグローバルナビh2
1440px10px16px / lh 24px12px / 400 / ls 1.2px29px / 700 / ls 2.9px
1200px10px16px / lh 24px12px / 400 / ls 1.2px29px / 700 / ls 2.9px
834px10px10px / lh 15px10px / 300 / ls 1px15px / 700 / ls 1.5px
375px10px10px / lh 15px10px / 300 / ls 1px15px / 700 / ls 1.5px

字間は em 宣言なので比率で追従する(ナビの 1.2px → 1px はどちらも .1em)。字間を px に読み替えて固定するとモバイルで崩れる。 ナビのウェイトは 400 → 300 に落ち、モバイルでより細くなる。

NameQueryCSS 出現
Mobile / Tablet(max-width: 896px)57〜58 回
Desktop(min-width: 897px) and (max-width: 1280px)4〜5 回
補助(max-width: 374px)3 回
モーション(prefers-reduced-motion: reduce)2 回