01 / Colors
COLORS

紺は 1 色、角丸は 0

面として使う紺は #00245c ひとつだけ。枠・文字・面を兼ねる。本文は #1a1a1a(可視 118 要素)で純黒ではない。階層は面の濃度(rgba(148,148,148,.1) → .2)だけで作り、影は 0 種類。

MICIN Navy
#00245c
★文字 37 要素 + 塗り面 4 要素。枠・文字・面を兼ねる
Deep Navy
#001029
ヒーロー直下のセクション面(1 要素)
Ink
#1a1a1a
★本文・見出し(可視 118 要素)。純黒ではない
Muted
#8a8a8a
日付・補助情報(可視 14 要素)
Accent Magenta
#951f5e
可視 2 要素のみ。極めて限定的
Wash
rgba(148,148,148,.1)
ニュース一覧の面(5 要素)
Wash 2
rgba(148,148,148,.2)
事業カードの面(5 要素)
Border
#eeeeee
ENGLISH ボタンの枠

pageBackground.resolved は信用しない。トップは全画面の <canvas>(1440×900)に覆われ、html / body とも塗り指定が無い。コンテンツ領域の地色は UA 既定の白。
実サイトの誤り: ニュース詳細に rgb(0,0,255) の要素が 1 件ある。<a> 直下に文字を直接置いたため UA 既定のリンク青が出ている。新規実装では #00245c を明示すること。

02 / Typography
TYPOGRAPHY

全部詰めて、em で空け直す

* { font-feature-settings: "palt" }。CSS 全文の宣言はこの 1 行だけで、実測はトップ 697 要素、ニュース詳細 180 要素=ページ上の全要素。見出しだけでも本文だけでもなく、例外なく全部に当たっている。その上から em の字間を当て直す二段構え(letter-spacing 宣言は CSS 全文で 55 件)。

10110.85rem 131rem1.1rem 1.4rem2rem
Heading 12rem (28px) / 600・700
lh 1.10 / ls 0.20em
医療をつなぐ
Heading 21.4rem (19.6px) / 600
lh 1.30 / ls 0.12em
メディカルエクスペリエンス事業
Heading 31.1rem (15.4px) / 700
lh 1.60 / ls 0.10em
臨床開発デジタルソリューション
Body ★1rem (14px) / 400
lh 1.80 / ls 0.08em
すべての人が、納得して生きて、最期を迎えられる世界へ。デジタル技術で医療と人をつなぎ、意思決定を支えています。
Body Wide1rem (14px) / 400
lh 2.20 / ls 0.10em
ニュース詳細の本文はさらに行間を広げる。読み物として 2.20 まで開く一方、見出しは 1.10 まで詰める。この落差が余白の印象を作っている。
Caption ★0.85rem (11.9px) / 400・700
lh 1.50 / ls 0.08em(可視 70 要素)
可視要素で最も多いサイズ。日付・注記・カード本文に使う
Nav13px / 700
lh 1.80 / ls 0.15em
BUSINESS
Tag11px / 700
lh 1.90 / ls 0.10em / radius 0
メディア掲載 お知らせ
em実測 px(root 14px)用途
0.02em0.28px @14px長文の本文
0.08em1.12px @14px / 0.952px @11.9px本文・キャプションの既定(合計 59 要素で最多)
0.10em1.4px @14px / 1.54px @15.4px小見出し・タグ
0.12em1.428px @11.9px / 2.352px @19.6pxラベル・中見出し
0.14em1.666px @11.9px強調ラベル
0.15em1.95px @13pxナビ
0.18em2.772px @15.4px見出し
0.20em2px @10px / 5.6px @28px大見出しと縦ラベル

palt と em の字間は必ずセットで再現する。palt だけだと詰まりすぎ、em だけだと約物が空いたままになる。字間は px ではなく em で書くこと——ルートが 4 段で切り替わるので、px 固定にすると小さい画面で字間だけが相対的に広がる。

font-weight: 600 は実体が無い。Lato は 300 / 400 / 700 / 900 しか loaded しておらず、和文側の游ゴシックも Regular / Bold が基本。600 を指定しても 700 か Medium に丸められる。新規実装では 400 / 700 の 2 段に寄せてよい。

03 / Side Labels
SIDE LABELS

縦に見えるが、縦組みではない

実サイトの writing-mode の宣言は 0 件。ヒーロー左右の ARTIFICIAL INTELLIGENCE / MEDICAL は、10px / letter-spacing: 0.20em / line-height: 7.2 の横組みを回転させている。

ARTIFICIAL INTELLIGENCE
再現するときも writing-mode: vertical-rl で組まない。欧文を縦に積むと字が横倒しになるか一文字ずつ立ってしまい、実サイトの見え方と変わる。左のサンプルは比較用に vertical-rl で置いたもので、実サイトとは別の組み方。

line-height: 7.2 は実測 24 要素あり、行間ではなく縦位置を取るために使われている。
04 / Components
COMPONENTS

角丸ゼロ、影ゼロ

角丸は 0 が既定。例外は事業カードの 6px(4 要素)と SNS ボタンの 3px だけ。box-shadow の実測は両ページとも空で、filter: drop-shadow() も使っていない。

ENGLISH お問い合わせ メディア掲載 シェア ポスト

#315096 / #55acee は SNS の公式色で、ブランドカラーではない。ここだけ radius: 3px が付く。

News

2026.10.3メディア掲載ABEMA TV「Abema Prime」に代表の原が生出演しました 2026.8.28お知らせ本社移転のお知らせ

Business

BUSINESS 01
メディカルエクスペリエンス事業
BUSINESS 02
臨床開発デジタルソリューション事業
BUSINESS 03
デジタルセラピューティクス事業

Inputs

実測した 2 ページに入力欄が無い。border-radius: 0 + 1px solid #00245c に合わせる。

全角でご記入ください
確認のご連絡をお送りします
ご所属を入力してください
05 / Layout
LAYOUT

ルートが 4 段で切り替わる

html, body の font-size が 14px → 13px → 12px → 11px の 4 段。rem で組まれた全サイズ・全余白がこれに追従するので、個別のサイズ調整を書かなくてよい。11.9px = 0.85rem、15.4px = 1.1rem のような端数はここから出ている。

14pxmin-width: 979px
13pxmax-width: 979px
12pxmax-width: 479px
11pxmax-width: 325px

ルートの切替(979 / 479 / 325px)とレイアウトの切替(760px)がずれている。max-width: 760px は CSS 全文で 74 宣言と最多だが、ここではカラム構成だけを変え、文字サイズは 13px のまま。
実測: 1440px → 14px / 1200px → 14px / 834px → 13px / 768px → 13px / 767px → 13px / 375px → 12px。

max-width の宣言は 0 件。padding で寄せる
padding-left/right 4rem = 56px(最多・5 要素)
内側 2rem = 28px / grid gap 3rem = 42px

Elevation

Level 0
none / 全要素
Wash
rgba(148,148,148,.1)
Wash 2
rgba(148,148,148,.2)

影は 0 種類。階層は面の濃度と紺の面でのみ表現する。