島津製作所（SHIMADZU） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-28 / 対象: https://www.shimadzu.co.jp/, https://www.shimadzu.co.jp/aboutus/company/profile.html

1. Visual Theme & Atmosphere

このサイトの核心は 4 つある。

1. Web フォントが 1 本も無い。 @font-face は CSS 全文（10 ファイル・728KB）で 2 件だけで、どちらもアイコンフォント（shimadzu_icon / Conv_CONDENSEicon）。フォントファイルの要求は 1 件（shimadzu_icon.woff2）のみ。和文も欧文も OS ローカル書体で組んでいる。
2. line-height を宣言していない。 body に line-height が無く、normal が 139 要素（トップ）/ 200 要素（下層）に降りている。日本語の本文で行送りをブラウザ既定に任せている状態で、再現する側はここを埋める必要がある。
3. 字間もほぼ normal。 可視 229/234 要素（トップ）・240/240 要素（下層）が normal。例外は見出し 4 要素の -0.35px と、下層タイトルの -0.9px というわずかな負の詰めだけ。
4. CSS 変数が 0 個。 Drupal 7 の上に構築されており、色もサイズもすべて直書き。font-size の宣言は px が 378 件に対し rem 59 件で、px 主体。

• デザイン方針: 白地 ・ 赤 1 色のアクセント ・ 角丸ゼロの直線的なカード。研究機器メーカーらしい硬質さ
• 密度: 高い。本文 14px で、1 画面に多くの導線を詰める
• キーワード: 硬質、直線的、欧文見出し ＋ 和文サブの二層、装飾を足さない

2. Color Palette & Roles

CSS Custom Properties は 0 個。 すべて直書き。 （--underlayer / --bg / --SP2Column のような文字列が CSS に出てくるが、これらは .foo--underlayer のような BEM のモディファイア名であって Custom Property ではない）

Primary（ブランドカラー）

• Primary Red (#DD0000): ブランドの赤。見出しの短い罫、ホバー時の文字色。実測 面 2 要素
• #FF0000 も 1 要素あるが、これは CMP（Cookie バナー）の OK ボタン。サイト本体の赤は #DD0000

Neutral（ニュートラル）

• Text Primary (#464646): body に宣言。実測 94 要素
• Text Strong (#111111): 下層の見出し。8 要素
• Text on Dark (#FFFFFF): 122 要素（黒帯のナビ・カードのオーバーレイ）
• Background (#FFFFFF): ページ背景（viewportTopBySample (3/6)、下層は 3/3 で白）
• Surface Grey (#F3F3F3): セクションの地（.grayWideContainer）
• Surface Grey 2 (#F5F5F5): 交互配色の偶数行
• Surface Grey 3 (#EEEEEE): 拠点ラベルなど。6 要素
• Dark Bar (#595757): 見出しの帯。8 要素
• Black (#000000 / rgba(0,0,0,.8)): ナビ・カードのオーバーレイ
• Divider (#ADADAD): 6 要素

Link / Category（意味色）

• Link (#004ECC): フッターのリンク。4 要素
• Badge: プレスリリース (#3192BF): 青。3 要素
• Badge: お知らせ (#74A642): 緑。2 要素

3. Typography Rules

3.1 和文フォント

• Web フォントは 0 本。 和文は完全に OS ローカル書体
• スタックは "Hiragino Kaku Gothic ProN", メイリオ, sans-serif の 3 つだけ。macOS はヒラギノ角ゴ ProN、Windows はメイリオ
• @font-face の 2 件はどちらもアイコン専用（shimadzu_icon は loaded、Conv_CONDENSEicon は unloaded ＝ そのページで使われていない）

3.2 欧文フォント

• 専用の欧文フォントは無い。 セクション見出しの Featured Products & Topics / News / Products（40px）も和文と同じスタックで、ヒラギノ／メイリオの欧文字形で描かれている
• CSS には Verdana, sans-serif と "Helvetica Neue", sans-serif の宣言が残っているが、主要な面では使われていない

3.3 font-family 指定

cssbody {
  color: #464646;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}

• これで全部。 Web フォントを読まないこと自体が設計なので、親切のつもりで Noto Sans JP を足すと別物になる
• 游ゴシック を入れていない。 Windows はメイリオで統一される
• CSS には font-family: Conv_CONDENSEicon !important という宣言もあるが、これは数字のコンデンス表示用のアイコンフォントで、そのページでは unloaded

3.4 文字サイズ・ウェイト階層

ルートは html { cursor: auto; font-size: 62.5% } ＝ 10px。1440 / 1200 / 1024 / 834 / 768 / 767 / 375px の 7 幅すべてで 10px から動かない。 body は 16px で、375px でだけ 14px に落ちる。

• ウェイトは 400 / 600 / 700 の 3 段（下層では 800 も 8 要素）
• 和文書体のウェイトは OS 任せ。 ヒラギノ角ゴ ProN は W3 / W6 の 2 本しか持たないので、600 は W6 に素直に当たるが、700 と 800 は合成太字になる。メイリオも Regular / Bold の 2 本
• つまり 600 と 700/800 の差は、環境によっては出ない。再現するなら 400 / 600 の 2 段に寄せるのが安全

3.5 行間・字間

このサイトで最も注意が要る点。

• body に line-height が無い。 計算値は normal で、それが トップ 139 要素 / 下層 200 要素に降りている
  • normal はブラウザと書体が決める値で、ヒラギノ角ゴ ProN ではおおむね 1.17 前後。日本語の本文としては詰まりすぎている
  • 一部のブロックだけが個別に宣言し直している（1.60 ×45、1.48 ×10、1.43 ×10、1.40 ×12、1.30 ×6、1.50 ×6）
• 再現するときは本文ブロックに必ず line-height を宣言する。 normal を継承させると行が潰れる
• 字間は normal が支配的（トップ 229/234、下層 240/240）。例外は 2 つだけ:

• 「字間を開ける」設計ではなく、大きい見出しだけわずかに詰める設計。+0.1em のような字空けは 1 箇所も無い
• CSS には letter-spacing: 1.1 と letter-spacing: 1（単位なし）という宣言が残っている。letter-spacing に単位なしの数値は無効で、ブラウザに無視される。写さないこと

3.6 禁則処理・改行ルール

• body の word-break は normal
• CSS には word-break: break-word / break-all が部分的にある
• word-break: auto-phrase は使っていない

3.7 OpenType 機能

• 実測 0 要素。 font-feature-settings が 1 つも適用されていない
• ただし CSS には palt 系の記述が 4 箇所ある。 定義だけされていて、可視要素には 1 つも当たっていない（ユーティリティクラスが使われていない型）。grep の件数を使用の証拠にしないこと
• 実測では palt を当てると 「日本語」、約物。（テスト） が 518px → 419.61px（19% 縮む）。詰める余地はあるが、このサイトの再現としては「詰めない」が正

3.8 縦書き

• writing-mode: vertical-rl は 0 要素。縦組みは使っていない

4. Component Stylings

Buttons

css/* 黒地の「一覧へ」ボタン */
.btn-list {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;            /* 14px */
  color: #FFFFFF;
  background: #000000;
  border-radius: 0;          /* 角丸は使わない */
  letter-spacing: normal;
}

/* グレー地のタブ */
.tab {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;          /* 18.2px */
  color: #464646;
  background: #EEEEEE;
  border-radius: 0;
}

/* 写真の上の白抜きボタン */
.btn-outline-light {
  font-size: 14px;
  color: #FFFFFF;
  background: transparent;
  border: 1px solid #FFFFFF;
  border-radius: 0;
}

• 角丸は実質ゼロ。 border-radius の実測は 50%（円形アイコン 4 要素）だけで、矩形の角丸は 0 種類
• 面で塗る CTA は黒。ブランドの赤 #DD0000 はボタンの地色には使わない

Badges / Chips

ニュース一覧のカテゴリ表示。枠線だけで地色を持たないのが特徴。

css.badge {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 2px 8px;
}
.badge--press  { color: #3192BF; }  /* プレスリリース */
.badge--notice { color: #74A642; }  /* お知らせ */

• 文字色と枠線色が同じ（currentColor）。塗らずに色分けする

Section Heading（このサイトの看板）

欧文を大きく、和文を小さく横に添える二層構成。上に短い赤い罫を置く。

css.section-heading::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #DD0000;
  margin-bottom: 16px;
}
.section-heading__en {
  font-size: 40px;
  line-height: 1.48;        /* 59.2px */
  color: #464646;
}
.section-heading__ja {
  font-size: 20px;
  line-height: 1.43;
  letter-spacing: -0.35px;  /* わずかに詰める */
  color: #464646;
}

Cards

css.card {
  background: #FFFFFF;
  border-radius: 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);  /* 実測 31 要素 */
}
.card__overlay {
  background: rgba(0, 0, 0, 0.8);   /* 画像の上のラベル帯・6 要素 */
  color: #FFFFFF;
}

5. Layout Principles

Container

• ヒーローは 1200×370px のバナーをカルーセルで横送り（中央寄せ・両側に余白）。全画面幅ではない
• 以降のセクションは白と #F3F3F3 / #F5F5F5 の帯を交互に敷く

Grid

• 製品カテゴリは 3 列、ニュースは 1 列のリスト、取り組み紹介は 2 列
• 偶数行に #F5F5F5 を敷く交互配色（.foo--bg:nth-child(even)）

Spacing

• 余白のトークンは無い。px の実値指定（font-size 宣言が px 378 件 / rem 59 件という比率が、サイト全体の書き方を表している）

6. Depth & Elevation

• 影は 1 種類: 0 5px 20px rgba(0, 0, 0, 0.2)（実測 31 要素）
• 下方向に 5px の offset を持つ素直なドロップシャドウ。不透明度 0.2 をそのまま写す
• CMP の 0 5px 15px rgba(0,0,0,.5) は Cookie バナー由来なので採用しない
• 角丸ゼロ ＋ 影ありという組み合わせ。直線的な矩形が浮いている状態が、このサイトの質感

7. Do's and Don'ts

Do（推奨）

• Web フォントを読み込まない。 font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; の 3 つだけで組む。これ自体が設計
• line-height を本文ブロックに必ず宣言する。 実サイトは body に書いておらず normal が 139〜200 要素に降りているが、それは再現すべき美点ではない。1.6 前後を補うこと（実サイト内で個別に宣言されている最多値も 1.60）
• 字間は normal。 例外は大きい見出しの -0.35px（20px に対し -0.0175em）と -0.9px（30px に対し -0.03em）だけ
• 角丸を使わない。 border-radius: 0 が既定。円形アイコンの 50% のみ例外
• 影は 0 5px 20px rgba(0,0,0,.2) の 1 種だけ
• 面で塗る CTA は黒。赤 #DD0000 は短い罫とホバーに限る
• バッジは地色を持たせず、文字色と同色の 1px 枠線で色分けする
• セクション見出しは欧文 40px ＋ 和文 20px の二層 ＋ 上に 40×3px の赤い罫

Don't（禁止）

• Noto Sans JP などの和文 Web フォントを足さない。 フォント要求はアイコンの 1 件だけというのが実装の事実
• font-feature-settings: "palt" を書かない。 CSS に 4 箇所あるが可視要素への適用は 0 件。grep の件数を使用の証拠にしない
• letter-spacing: 1 / 1.1（単位なし）を写さない。 無効な値でブラウザに無視されている
• font-weight: 700 / 800 の差を当てにしない。 和文は OS ローカル書体で、ヒラギノ角ゴ ProN は W3 / W6 の 2 本、メイリオも Regular / Bold の 2 本。600 までは実体に当たるが、700/800 は合成太字になる
• 角丸を足さない。 矩形の border-radius は 1 種類も実装されていない
• #FF0000 を赤として使わない。 これは Cookie バナーの OK ボタンの色。本体の赤は #DD0000
• ヒーローの Explore SHIMADZU を Web フォントで実装しない。 ヒーローは 1200×370px の JPG バナー（bnr_explore_corp_pc.jpg）で、文字は画像に焼き込まれている。DOM 上で最大の実テキストは 40px のセクション見出し
• CSS 変数を期待しない。 0 個。色もサイズも直書きで、-- で始まる文字列は BEM のモディファイア名
• CSS が <link rel="stylesheet"> で読まれていない点に注意。 初期 HTML には CSS のリンクが無く、JavaScript が 10 本の CSS を後から読み込む。素の HTML だけを見ると「スタイルが無いサイト」に見える

8. Responsive Behavior

Breakpoints

実測で描画が変わるのは 375px のみ（1440 / 1200 / 1024 / 834 / 768 / 767px は完全に同一）。

• h2 はモバイルでだけ letter-spacing: -0.9px（-0.03em）が付く。デスクトップでは normal
• p はモバイルで line-height の宣言まで外れて normal に戻る。再現するなら比率を維持すること
• 流体（vw / clamp()）は 1 箇所も使っていない

タッチターゲット

• タブは 13px / line-height 1.4 ＋ パディングで 36px 前後。44px に拡げることを推奨（実サイトはこうだが、正しくは拡げる）

9. Agent Prompt Guide

クイックリファレンス

書体    : "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif
          （Web フォントは読み込まない。これが設計）
ルート  : html { font-size: 62.5% }  → 10px 固定・全幅で不変
本文    : 14px / #464646 / letter-spacing normal
          ※ 実サイトは line-height を宣言せず normal が降りている。再現では 1.6 を補う
見出し  : 欧文 40px（lh 1.48）＋ 和文 20px（ls -0.35px）の二層 ＋ 上に 40×3px の赤罫
ウェイト: 400 / 600 の 2 段に寄せる（700・800 は合成太字になる）
主色    : #DD0000（短い罫・ホバーのみ。面塗りはしない）
文字色  : #464646 / 強調 #111111 / 白 #FFFFFF
面      : #FFFFFF / #F3F3F3 / #F5F5F5 / #EEEEEE / 黒帯 #000000・rgba(0,0,0,.8)
リンク  : #004ECC
バッジ  : #3192BF（プレス）/ #74A642（お知らせ）— 枠線のみ・地色なし
角丸    : 0（円形アイコンの 50% のみ例外）
影      : 0 5px 20px rgba(0, 0, 0, .2) の 1 種のみ
CSS変数 : 0 個（すべて直書き）
OpenType: 使わない
縦組み  : 使わない

プロンプト例

島津製作所のコーポレートサイト風に、製品カテゴリのセクションを作ってください。 書体は "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif のみで、 Web フォントは一切読み込まないでください（それがこのサイトの設計です）。 ルートは font-size: 62.5%（10px）固定。本文 14px / #464646 / letter-spacing: normal。行間は 1.6 を明示的に宣言してください （実サイトは宣言を省いて normal が降りていますが、日本語では詰まりすぎます）。 セクション見出しは欧文 40px と和文 20px の二層にして、和文側にだけ letter-spacing: -0.35px を当て、見出しの上に 40×3px の #DD0000 の罫を置いてください。 角丸は使わない（border-radius: 0）。カードは影 0 5px 20px rgba(0,0,0,.2) のみ。 「一覧へ」ボタンは黒地に白文字。カテゴリバッジは地色を持たせず、 文字色と同色の 1px 枠線だけにしてください（プレスリリース #3192BF、お知らせ #74A642）。 font-feature-settings は指定しないでください。