実サイトのヒーロー見出しは PNG 画像。28px 以上の実テキストはトップに 1 要素も存在しない。
高品質な生薬の栽培から均質な製剤に至るまでの一貫した取り組みを、ツムラは続けてきました。養生から、Yojoへ。先人の知恵を、エビデンスに。
日本の自然と伝統文化
大見出し(h3)は 34px / weight 300。太字で詰めるのではなく、細いウェイトで大きく組む。700 はトップに 1 要素も無い。明朝(Noto Serif JP)はブランドの一語だけ(可視 3 要素)。
| フォントサイズ | 実測 letter-spacing | 可視要素数 | 見本 |
|---|---|---|---|
| 14px | 0.84px | 52〜54 | 自然と健康を科学する |
| 16px | 0.96px | 31〜50 | 自然と健康を科学する |
| 20px | 1.2px | 13〜16 | 自然と健康を科学する |
サイズごとに px が変わるのが「各要素が em を宣言している」証拠。px に読み替えると比例が崩れる。ただし .08rem 等の rem 宣言も混在し、そちらは html: 10px 基準の 0.8px 固定。単位ごと写す。
枠線は黒ではなく rgba(119,63,49,.2)=ブランド色の 20%。バッジとトップの CTA は角丸 0、下層のボタンとタグは 100px の完全なピル。
トップの機能面。製品検索タブ、「重要なお知らせ」。可視 10 要素。
下層のコンテンツ面。赤茶を薄めたグレー。可視 9 要素。混ぜない。
border-radius: 30px 30px 0 0 — 実サイトで 3 要素。
同じ生薬でも、育つ土地や気候、時期によって、色も、形も、香りも違う。
漢方製剤の均質性を保つための研究を続けている。
日本・中国等の生産地から直接生薬を調達する。
rgba(14,19,31,.1) 0 0 35px
offset なしの大きなぼかし。黒ではなくわずかに青い黒。可視 1 要素。
writing-mode が付くのは MENU ボタン(34×127px)7 要素だけ。本文の縦組みは無い。
実サイトは vertical-lr を使っているが、日本語の縦組みは右から左に流れるので vertical-rl が正しい。