HERO HEADLINE = IMAGE (txt_mv_1.png / 418×260) Web フォントで組まない

実サイトのヒーロー見出しは PNG 画像。28px 以上の実テキストはトップに 1 要素も存在しない。

Headings

漢方医学と西洋医学の融合により、世界で類のない最適な医療の実現を目指す

品質という約束

高品質な生薬の栽培から均質な製剤に至るまでの一貫した取り組みを、ツムラは続けてきました。養生から、Yojoへ。先人の知恵を、エビデンスに。

日本の自然と伝統文化

大見出し(h3)は 34px / weight 300。太字で詰めるのではなく、細いウェイトで大きく組む。700 はトップに 1 要素も無い。明朝(Noto Serif JP)はブランドの一語だけ(可視 3 要素)。

字間 .06em — 各要素に em で当てる(body 継承ではない)

フォントサイズ実測 letter-spacing可視要素数見本
14px0.84px52〜54自然と健康を科学する
16px0.96px31〜50自然と健康を科学する
20px1.2px13〜16自然と健康を科学する

サイズごとに px が変わるのが「各要素が em を宣言している」証拠。px に読み替えると比例が崩れる。ただし .08rem 等の rem 宣言も混在し、そちらは html: 10px 基準の 0.8px 固定。単位ごと写す。

Color Palette

#803b2d生薬の赤茶・面26/文字16
#773f31別値が混在・2要素
#998882バッジ面・15要素
#a79364Gold・明朝と組
#c0163e重要なお知らせ
#333333本文・55/66要素
#666666補助・61要素
#222222見出し h2・12要素
#f1f1f6寒色の面・10要素
#f3eeed暖色の面・9要素
#e9e4e3フィルタ面
#ffffffページ背景

Buttons — 下層はピル、トップは直角

IRニュース イベント

枠線は黒ではなく rgba(119,63,49,.2)=ブランド色の 20%。バッジとトップの CTA は角丸 0、下層のボタンとタグは 100px の完全なピル。

段は面色で作る(影は使わない)

寒色の面 #f1f1f6

トップの機能面。製品検索タブ、「重要なお知らせ」。可視 10 要素。

暖色の面 #f3eeed

下層のコンテンツ面。赤茶を薄めたグレー。可視 9 要素。混ぜない。

上端だけを丸めて前のセクションに重ねる

border-radius: 30px 30px 0 0 — 実サイトで 3 要素。

Cards(下層・6px)

Process
生薬の栽培・調達

同じ生薬でも、育つ土地や気候、時期によって、色も、形も、香りも違う。

Process
生薬の研究

漢方製剤の均質性を保つための研究を続けている。

Movie
生薬の管理

日本・中国等の生産地から直接生薬を調達する。

Depth — 影は全ページで 1 種類だけ

rgba(14,19,31,.1) 0 0 35px
offset なしの大きなぼかし。黒ではなくわずかに青い黒。可視 1 要素。

縦組み(側面タブのみ)

MENU

writing-mode が付くのは MENU ボタン(34×127px)7 要素だけ。本文の縦組みは無い。
実サイトは vertical-lr を使っているが、日本語の縦組みは右から左に流れるので vertical-rl が正しい。