第一三共について

01 / Colors

4 ストップのグラデーションと、青が 4 つ

実サイトに CSS Custom Properties は 0 個。DNN(Portals/ Skins/DAS/)の上に素の CSS が書かれていて、色はすべて hex の直書き。結果として ブランド青 #005baa と CTA 青 #116dc9 が別物として併存し、さらに #0075c0 / #0070c0 という 5 違いのゆらぎがある。

コーポレートグラデーション

#005baa 0%#00acea 42%#89ba17 86%#cfd300 100%

42% / 86% という偏ったストップ位置が特徴。等間隔にすると別物になる。ロゴ下の帯と下層ページの見出し帯に使う。

Primary / Neutral

Corporate Blue
#005baa
文字・アイコン・リンク。可視 18 / 7 要素
CTA Blue
#116dc9
★ボタンの面専用。塗り面 13 要素
Heading
#000000
見出しは純黒。可視 49 / 48 要素
Body
#4d4f53
本文・リスト。可視 39 要素
Stat
#232526
数値のラベル。可視 9 要素
Border
#dddddd
カードの枠・丸ボタンの枠

ニュースのカテゴリ色(角 1 つだけ丸める)

サステナビリティ
製品情報
DX
その他
サイエンス&テクノロジー

border-radius: 20px 0 0。対になる要素は 0 20px 0 0 で反転させる。文字は白・16.875px・新ゴ DB。

ESG トピックのピル(淡い面+濃い文字の対)

Social Environment

border-radius: 96px / 12px / weight 400 / padding 3px 12px。面と文字は必ず対で使う。

02 / Typography

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

和文はモリサワ「新ゴ」の 2 ウェイトを TypeSquare(wf.typesquare.com)で配信している。注入される @font-face は 4 本すべて font-weight: bold(新ゴ R / Shin Go Regular / 新ゴ DB / Shin Go DeBold、いずれも loaded・unicodeRange: U+0-10FFFF)。ファミリーに実体が 1 本しか無いので、CSS が 400 でも 700 でも同じファイルが返る。

このプレビューでは Adobe / モリサワのドメインライセンスのため新ゴを表示できない。同じモリサワ系で字面の近い Zen Kaku Gothic New(Google Fonts)で代替し、--font-r / --font-db という 2 つの変数に分けて「ファミリー名で切り替える」構造だけを再現している。

CSS の書き方実サイトの挙動
font-family: "新ゴ R"; font-weight: 400;新ゴ Regular が出る(正しい)
font-family: "新ゴ DB"; font-weight: 700;新ゴ DeBold が出る(正しい)
font-family: "新ゴ R"; font-weight: 700;新ゴ Regular のまま。太くならず、合成太字も起きない
font-family: "新ゴ DB"; font-weight: 400;新ゴ DeBold のまま。細くならない

目印は フォント要求の typesquare.com / wf.typesquare.com と typesquare.js の読み込み(実測 5 件)。欧文の HelveticaNeueeTextPro-* は Web フォント配信されておらず、実機に無ければ Helvetica Neue 以降へ落ちる。

字間を設計に入れていない

可視 137 要素中 121 要素が letter-spacing: normal(下層は 133 中 114)。font-feature-settings も 0 要素で、約物も詰めない。開けるのはフッターリンク(1px)とグローバルナビ(0.288px = 16px × 0.018em)だけ。

★実装:letter-spacing: normal / palt なし

病気と生きる誰かを思う。それが、より良い医療を実現するすべての原動力になる。

参考:letter-spacing: .05em を足した場合(このサイトの設計ではない)

病気と生きる誰かを思う。それが、より良い医療を実現するすべての原動力になる。

フッターリンクだけ letter-spacing: 1px

第一三共個人情報保護方針 クッキーポリシー ソーシャルメディアコミュニティガイドライン

階層(デスクトップ:body 15px のとき)

Page Title新ゴ DB / 36px / lh 1.30
letter-spacing normal
第一三共について
Section Heading新ゴ DB / 38px / lh 1.30
サイエンス&テクノロジーでイノベーションを起こす
Heading M新ゴ DB / 26px / lh 1.50
私たちの企業理念
Statement新ゴ R / 24px / lh 1.70
★ここだけ 0.48px(0.02em)
私たちは、「イノベーションに情熱を。ひとに思いやりを。」を企業理念に掲げています。
Lead新ゴ R / 20px / lh 1.80
可視 15 / 16 要素
医療技術の進歩や人類が生み出してきた医薬品は、多くの人の人生を支えてきました。
Article Title新ゴ R / 19px / lh 1.38
color #005baa / 可視 14 要素
患者さんに安全な医薬品を届け続けるために。品質試験の現場から
Nav新ゴ DB / 16px / lh 1.30
★0.288px(0.018em)
第一三共について Our Stories サステナビリティ
Body新ゴ R / 15px / lh 1.80
letter-spacing normal
第一三共グループは「革新的医薬品を継続的に創出し、多様な医療ニーズに応える製品を提供することで、人々の健康で豊かな生活に貢献する」ことを使命としています。
Caption新ゴ R / 12px / lh 1.38
可視 50 / 44 要素(最多)
2026年10月05日 ホーム > 第一三共について

行間は 4 段

line-height実測(トップ / 下層)用途
1.8052 / 45 要素(最多)本文(body の既定。27px ÷ 15px)
1.5028 / 4 要素ボタンラベル・中見出し
1.306 / 21 要素見出し
1.2014 / 17 要素ナビ・小見出し
1.0019 / 31 要素1 行で収める UI ラベル
03 / Components

ピル型の CTA と、角 1 つだけのタブ

CTA は #116dc9 + border-radius: 50px、padding は 13px 68px 14px 44px と左右で大きく違う(右に矢印が入る)。ラベルは太らせない(weight 400)。

詳しく見る フォーカス状態

カード(角丸なし・画像に 10% の膜)

border-radius: 0
サイエンス&テクノロジー
「当たり前」の裏側にある想い─現場での対話が照らすもの
2026年09月17日
rgba(0,0,0,.1) の膜(26 要素)
サステナビリティ
「誰かの力になりたい」を原動力に。営業職から人事への挑戦
2026年09月02日
影を使わない
製品情報
CM制作の裏側にある熱い想い。たった30秒に込めたこと
2026年07月22日

数値

従業員数
20,171 名
グループ企業数
45 社
法人を有する国・地域
29
04 / Forms

入力は角丸なし

border-radius: 0 / 1px solid #bbbbbb / padding: 0 15px / 15px。input はフォント継承が効かないので font-family を明示的に当て直す。

05 / Elevation

影は 1 種類、しかも輪郭が見えない

実測された自前の box-shadow は rgba(0,0,0,.07) 0 3px 60px 0 の 1 件だけ。blur: 60px / alpha: 0.07 と極端に広く薄いので、落ち影というより面の下の空気のように見える。

rgba(0,0,0,.07) 0 3px 60px 0 トップのカルーセル枠にだけ使われている。ほかの要素はすべて none で、区切りは 1px solid #dddddd の枠が担当する。

もう 1 件測れる rgba(0,0,0,.2) 0 0 18px は OneTrust の Cookie バナーのもので、サイトの設計ではない。

06 / Layout

html は 10px 固定、body だけが 2 段で流体

html は 4 幅すべて 10px 固定(62.5% 相当)。動くのは body の方で、タブレット域とスマートフォン域で別々の vw 式が当たっている。

画面幅body font-size式
≥ 1000px15px(lh 27px)固定
999px14.985px1.5vw
860px12.9px1.5vw
768px11.52px ← 最小1.5vw
767px26.5894px ← 2.3 倍に跳ぶ3.46667vw(750px で 26px)
550px19.0667px3.46667vw
375px13px3.46667vw
320px11.0933px3.46667vw

1 幅だけ測って「このサイトの本文は 15px」と書かない。rem は html 固定なので素直に 10 倍でよいが、body 基準の相対指定は幅で変わる。なお 768px の 11.52px は日本語本文として小さすぎるので、新規実装では下限を 14px 程度で止める。

コンテナ

幅実測用途
1000px12 件(下層で最多)下層の本文カラム
1240px11 / 2 件トップのセクション
1600px / 1920px2 / 1 件ヒーロー・ワイド帯
560px / 456px14 / 2 件カード

gap の宣言は 60px の 1 件のみ。グリッドではなく float / margin 主体の旧来のレイアウト。メディアクエリは print, screen and (…) の形で書かれていて、印刷にも同じレイアウトが当たる。