03 / Product — 組版サンプル
NEW バッジは 56px の正円
SAKURA PRESS
クレパスという発明
クレヨンは硬く、パステルは粉が落ちる。その両方を解決するために、1925 年にクレパスは生まれました。以来 100 年、日本の図画工作の時間はこの描画材とともにあります。
本文の行間は 1.5、字間は normal。字間を入れるのは見出しだけで、和文見出しは 0.05em、英字見出しは 0.15em まで開けます。
教育・文化・環境に貢献します。
red を 82 箇所(うち background-color:red 10 回)使っていること。新規実装では #ff0302(ブランド/バッジ)と #cb0201(押せる面)の 2 色に整理する。
| 色 | 出所 | 使われている場所 |
|---|---|---|
| #ff0302 | CSS 18 回 | NEW バッジ(56px の正円)・カテゴリ見出し |
| #cb0201 | CSS 9 回 | 主 CTA(radius 8px + 影) |
| #fe0000 | CSS 10 回 | タブの選択状態「ALL」 |
| red (#ff0000) | キーワード 82 回 | ヘッダーの「お問い合わせ」・ONLINE SHOP の枠 |
| #d90000 | CSS 1 回 | 全幅の赤い帯 |
分類のための色であって、押せることを示す色ではない。UI の骨格(ボタン・見出し)には赤しか使わない。
⚠️ Windows の游ゴシック問題:"Yu Gothic Medium" は font-weight: 700 で合成太字になる環境がある。このサイトは見出しの多くが 700 なので、Windows では想定より太く潰れて見える可能性がある。
⚠️ palt は CSS に 106 箇所あるが効いていない。宣言先はすべて採用・スタッフ紹介系のコンポーネントで、トップ・商品ページの computed は全要素 normal。
クレヨンは硬く、パステルは粉が落ちる。その両方を解決するために、1925 年にクレパスは生まれました。以来 100 年、日本の図画工作の時間はこの描画材とともにあります。
本文の行間は 1.5、字間は normal。字間を入れるのは見出しだけで、和文見出しは 0.05em、英字見出しは 0.15em まで開けます。
タブ — 選択状態だけ面を塗る(radius 20px)
主 CTA は #cb0201 / radius 8px / box-shadow: 0 5px 10px 0 rgba(0,0,0,.1)。アウトラインの枠は淡い赤 #ff8080。ハッシュタグだけ角丸を持たない(radius 0)。
0 10px 10px -6px rgba(0,0,0,.25) は CSS 出現 96 回でサイト最多。カードの角丸は 8〜16px。
box-shadow: none;0 5px 10px 0 rgba(0,0,0,.1)0 10px 10px -6px rgba(0,0,0,.25)0 2px 15px 0 rgba(0,0,0,.1)0 5px 10px 3px rgba(0,0,0,.3)全幅の赤い帯(#d90000)で場面を切り替える
| 値 | CSS 出現 | 用途 |
|---|---|---|
| 8px | 85 回 | 主 CTA・入力欄 |
| 16px | 64 回 | カード |
| 10px | 59 回 | ヒーロー・スウォッチ |
| 50% | 58 回 | NEW バッジ・行頭の丸ポチ |
| 20px | 53 回 | チップ・タブ |
| 30px / 9999px | 14 回 | アウトラインピル |
| 0 | 8 回 | ハッシュタグ |
| Name | Width | 宣言回数 |
|---|---|---|
| Mobile | ≤ 767px | 1028(主分岐) |
| Tablet | ≥ 768px | 457 |
| Desktop | ≤ 1279px | 193 |
| Wide | ≥ 1600px | 6 |