お薬をご使用の方医療関係者の方採用情報健康と病気製品 FAQお問い合わせ
English
123
令和8年熊本地震による被害への支援について
01 / Colors
Color Palette

オフホワイトの地に、白いカード

ページの地色は #f5f4f2(可視 64 要素)。その上に角丸 20px の白いカードを敷く二層構造。青は「読む・進む」、赤は「新しい」と役割が完全に分かれていて、赤を CTA の面色には使わない。

Otsuka Blue
#426bba
★リンク 41 要素 / 下層 19 要素。アウトラインボタンの枠と文字
Otsuka Red
#b01c2e
New バッジの面 7 要素。カルーセルの現在位置
Pale Blue
#bac4e3
カテゴリタブの面(可視 5 要素)
Background
#f5f4f2
★ページ背景。可視 64 要素 / 根拠 body
Surface
#ffffff
角丸 20px のカードの面
Text Primary
#000000
★本文・見出し。可視 77 要素。純黒を使う
Text Muted
#5c5c5c
フッターの規約リンク(可視 11 要素)

トップは heroCovered: true。1440×777 のヒーロー画像が全面を覆うので、ヒーローの青空をページ背景色だと思わないこと。地色は #f5f4f2。

Typography

TBUDゴシック、行間 2.0、字間ゼロ

和文は TBUDゴシック R(モリサワ TypeBank の UD 書体)を TypeSquare で配信。実測 160 要素。letter-spacing は全要素 normal(トップ 143/143・下層 74/74)で、palt も 0 件。詰めも空けもせず、行間 2.0 で余裕を作る。

3224201614131210
Section HeadingTBUDゴシック R / 32px / 500
lh 1.60 / ls normal
世界の人々の健康に貢献する
LeadTBUDゴシック R / 24px / 500
lh 1.75
一人ひとりの可能性に、向き合ってゆく。
Business NameTBUDゴシック R / 20px / 500
lh 1.90
ニュートラシューティカルズ関連事業
Body ★TBUDゴシック R / 16px / 500
lh 2.00 / ls normal
大塚製薬は1964年に設立されました。世界の人々の健康に貢献する革新的な製品を創造するという企業理念のもと、医療関連事業とニュートラシューティカルズ関連事業の2つを柱に事業を展開しています。
Nav / Card TitleTBUDゴシック R / 14px / 500
lh 2.00(CTA は 1.42)
サステナビリティ 研究開発 企業情報
Utility NavTBUDゴシック R / 12px / 500
lh 2.00
個人情報・特定個人情報保護宣言 サイトのご利用について
English ★Sharoa Pro Regular / 12px / 500
代替: Lato
Otsuka-people creating new products for better health worldwide

太さはファミリー名で切り替える

TypeSquare はウェイトごとに別ファミリーを配信する。実サイトの @font-face は R も B も Sharoa も すべて font-weight: bold 宣言で、font-weight の値は描画される太さを決めない。

font-family: "TBUDゴシック R" / font-weight: 500
大塚製薬について
★実測 160 要素。サイトのほぼ全部がこれ
font-family: "TBUDゴシック B" / font-weight: 700
バーチャル工場見学
★実測 1 要素。太字はファミリーごと差し替える
NG: "TBUDゴシック R" に font-weight: 700 を当てる
バーチャル工場見学
✕ 太くならない(@font-face が bold 宣言のため)
03 / Buttons & Badges
Components

角丸 20px が基準

border-radius: 20px が実測 46 要素で最多。ボタンもカードもタブもここに揃う。例外はピル型(100px)とリボン型バッジ(0 100px 100px 0)。

キャンペーン一覧 New New

アウトラインボタンの枠・文字はブランド青 #426bba。赤 #b01c2e は New バッジ専用で、CTA の面色には使わない。

Cards

白いカードと浅い影

影は 0 3px 4px rgba(0,0,0,0.1) の 1 種類(実測 33 要素)で足りる。黒 10%・ぼかし 3〜6px と浅く、浮かせるのではなく「紙を一枚置いた」程度の段差にする。

05 / Forms
Forms

フォーム

実サイトに独立したフォーム部品は少ないため、カードの角丸 10px と枠色から構成した参考実装。フォーカスリングはブランド青、エラーは #b01c2e。

全角でご入力ください
確認のご連絡に使用します
必須項目です
Depth

影はすべて黒 10%

Card ★
0 3px 4px rgba(0,0,0,0.1)
実測 33 要素
Card(下層)
0 3px 3px rgba(0,0,0,0.1)
実測 12 要素
Header
0 6px 6px rgba(0,0,0,0.1)
実測 2 要素

色味を付けていない。3 種とも rgba(0,0,0,0.1) で、違うのは offset とぼかしだけ。

07 / Layout
Layout

コンテナ 1220px

Full bleed — 1920px(ヒーロー)
Container — 1220px ★実測最多
Column — 900px
Narrow — 460px
20px ★46 要素
18px
15px
10px
100px pill
20px 0 0 20px
Responsive

750px を境に body が切り替わる

html は 6 幅すべてで 10px 固定(1440 / 1200 / 834 / 768 / 767 / 375px で実測)。流体ではない。動くのは body だけで、行間比まで 2.0 → 1.75 に変わる。

750px 以上 — body 16px / line-height 32px(= 2.0)/ weight 500
世界の人々の健康に貢献する革新的な製品を創造する。
749px 以下 — body 12px / line-height 21px(= 1.75)/ weight 400
世界の人々の健康に貢献する革新的な製品を創造する。

メディアクエリには print が併記されている(print, screen and (min-width: 750px))。印刷時は PC レイアウトで出る設計。