MICIN（マイシン） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: * { font-feature-settings: "palt" } で全要素を詰めた上から、em の字間を当て直す。 医療 × テクノロジーの企業サイト。白地・紺一色・角丸ゼロで、情報を「詰めて空ける」操作だけで整える
• 密度: 低い。全画面の <canvas> ヒーローに欧文の一文だけを置き、以下はゆったりした 1 カラム
• キーワード: palt 全掛け、em の字間、ネイビー #00245c、角丸ゼロ、和文 Web フォント 0 本

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

1. font-feature-settings: "palt" をユニバーサルセレクタで当てている。 CSS 全文の宣言は * { "palt" } の 1 行だけ。実測はトップ 697 要素、ニュース詳細 180 要素＝ページ上の全要素。見出しだけでも本文だけでもなく、例外なく全部
2. 詰めた上から em で空け直す二段構え。 可視要素の字間は 0.02 / 0.08 / 0.10 / 0.12 / 0.14 / 0.15 / 0.18 / 0.20em の 8 段。palt で詰まった分を、要素ごとに em で戻している。letter-spacing 宣言は CSS 全文で 55 件
3. html, body が 4 段の階段で切り替わる。 14px（≥979px）→ 13px（≤979px）→ 12px（≤479px）→ 11px（≤325px）。rem で組まれた全サイズ・全余白がこれに追従する（11.9px = 0.85rem、15.4px = 1.1rem のような端数はここから出る）
4. 和文 Web フォントは 1 本も読み込んでいない。 フォントファイルの要求は実測 6 件（Lato 4 / Roboto 2）で、すべて欧文。和文は OS ローカルの游ゴシック → ヒラギノ角ゴ Pro

font-family はサイト全体で 1 スタックだけ（トップ 197 要素・ニュース詳細 38 要素が同一）。明朝は 1 要素も無い。 CSS Custom Properties は自社トークン 0 個（60 個すべて WordPress / Gutenberg の preset）。

2. Color Palette & Roles

Primary（ブランドカラー）

面として使う紺は 1 色だけ。 #00245c が枠・文字・面を兼ねる。rgba(0,16,41,0.09) rgba(12,27,51,0.098) はヒーローの薄いオーバーレイ。

Neutral（ニュートラル）

• Text Primary (#1a1a1a): 本文・見出し（可視 118 要素＝最多）。純黒ではない
• Text on Navy (#ffffff): 紺面・ヒーロー上のテキスト（トップ 26 要素 / ニュース詳細 28 要素）
• Text Muted (#8a8a8a): 日付・補助情報（可視 14 要素）
• Surface Wash (rgba(148,148,148,0.1)): ニュース一覧の面（5 要素）
• Surface Wash 2 (rgba(148,148,148,0.2)): 事業カードの面（5 要素）
• Border (#eeeeee): ENGLISH ボタンの枠
• Divider (#cccccc): 区切り線
• Background (#ffffff): ページ背景

pageBackground.resolved は信用しない。 トップは全画面の <canvas>（1440×900）に覆われ、html / body とも塗り指定が無い。コンテンツ領域の地色は UA 既定の白。

実サイトの誤り（Don't）

• ニュース詳細に rgb(0,0,255) の要素が 1 件ある。<a> 直下に文字を直接置いたため UA 既定のリンク青が出ている。新規実装では #00245c を明示すること

3. Typography Rules

3.1 和文フォント

• ゴシック体のみ。明朝は使わない（実測 0 要素）
• Web フォントは読み込んでいない。 游ゴシック → ヒラギノ角ゴ Pro → Osaka → MS Pゴシック → メイリオ の OS ローカル依存

3.2 欧文フォント

• Lato（Google Fonts）: 300 / 400 / 700 / 900 が loaded。スタックの先頭にあり、英数字はすべて Lato で出る
• Roboto のファイルが 2 件要求されているが、document.fonts には現れない（埋め込み要素由来）

3.3 font-family 指定

css/* サイト全体で唯一のスタック */
font-family: Lato, 游ゴシック, YuGothic, "Yu Gothic", YuGothic,
             "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Osaka,
             "ＭＳ Ｐゴシック", "MS PGothic", メイリオ, Meiryo, sans-serif;

フォールバックの考え方:

• 欧文優先。 Lato を先頭に置き、英数字を和文書体の欧文グリフより優先する
• 実サイトはこうだが、正しくはこう — YuGothic が 2 回重複している（3 番目と 5 番目）。後ろの 1 つは到達せず無意味。重複を削って構わない
• 実サイトはこうだが、正しくはこう — 游ゴシックの Medium 指定が無い。 Windows では YuGothic が Light にマッピングされて細く出る。"游ゴシック Medium", "Yu Gothic Medium" を 游ゴシック の前に足すこと
• ヒラギノは Pro（ProN ではない）。 字形が違うので書き換えない
• generic family（sans-serif）は末尾だけ。スタックの途中に無いので全候補が生きている

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

ルートが画面幅で切り替わる。 下表は 1440px（root = 14px） の実測値。

ウェイトは 400 / 600 / 700 / 900 の 4 段（実測 700 が 78 要素で最多、次いで 400 が 72、600 が 42、900 が 5）。

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

3.5 行間・字間

• 本文の行間: 1.80（実測 50 要素で最多）。読み物は 2.20（ニュース詳細で 16 要素）
• 見出しの行間: 1.10（実測 20 要素）。詰める
• UI の行間: 1.50（43 要素）
• 特異値: 7.20（24 要素）は 10px の縦ラベル。line-height で縦位置を取っている
• 字間は全要素が em。 要素のサイズが変われば px も比例して変わる（継承ではなく、各要素が自分で宣言している）

ガイドライン:

• palt と em の字間は必ずセットで再現する。 palt だけだと詰まりすぎ、em だけだと約物が空いたままになる
• 字間は px ではなく em で書く。 ルートが 4 段で切り替わるので、px 固定にすると小さい画面で字間だけが相対的に広がる
• line-height を宣言し忘れない。 body { line-height: 1 }（無単位）が降りてくる

3.6 禁則処理・改行ルール

css/* 実サイトは word-break / overflow-wrap / line-break を一切宣言していない（実測 0 件） */

• word-break: auto-phrase は使っていない。 改行位置はブラウザ既定
• 長い URL・英単語の折り返し対策が無いので、新規実装では overflow-wrap: break-word を足すこと

3.7 OpenType 機能

css* {
  font-feature-settings: "palt";
}

• ユニバーサルセレクタで全要素に palt。 CSS 全文でこの 1 宣言だけ。実測トップ 697 要素 / ニュース詳細 180 要素
• tnum halt などは使っていない
• palt は仮名漢字を含む全文字の字送りを詰める。 そのため上の em の字間で空け直している。どちらか片方だけ再現すると別物になる

3.8 縦書き

css/* writing-mode の宣言は 0 件 */

• 縦組みは使っていない（実測 verticalWriting 0 要素）
• ヒーロー左右の ARTIFICIAL INTELLIGENCE / MEDICAL は縦に見えるが縦組みではない。10px / letter-spacing: 0.20em / line-height: 7.2 の横組みを回転させている。writing-mode: vertical-rl で実装しない

4. Component Stylings

Buttons

Primary（ENGLISH）

• Background: #00245c
• Text: #ffffff / 13px / weight 700
• Line Height: 23.4px
• Letter Spacing: 0.12em（1.56px）
• Padding: 3px 6px
• Border: 1px solid #eeeeee
• Border Radius: 0

Outlined（カテゴリタグ）

• Background: transparent
• Text: #00245c / 11px / weight 700
• Letter Spacing: 0.10em（1.1px）
• Border: 1px solid #00245c
• Padding: 0
• Border Radius: 0

Badges / Chips

SNS Share（ニュース詳細）

• シェア: Background #315096 / ポスト: Background #55acee
• Text: #ffffff / 11px / weight 700 / letter-spacing: 0.08em
• Border Radius: 3px

• これは SNS 公式色。ブランドカラーではない

Cards

News Card

• Background: rgba(148,148,148,0.1)
• Border Radius: 0

Business Card

• Background: rgba(148,148,148,0.2)
• Border Radius: 6px（実測 4 要素）／ 上側だけ丸める 3px 3px 0 0 も 1 要素

Inputs

• 実測した 2 ページに入力欄が無い。新規実装では border-radius: 0 ＋ 1px solid #00245c に合わせる

5. Layout Principles

Spacing Scale

余白も rem。 root 14px のときの実測値:

Container

• max-width の宣言が無い（実測 0 件）。コンテンツは padding で寄せる
• Padding (horizontal): 56px（デスクトップ）/ 28px（内側）

Grid

• Gap: 42px（3rem）

6. Depth & Elevation

影は 0 種類。 box-shadow の実測が両ページとも空。階層は面の濃度（rgba(148,148,148,0.1) → 0.2）と紺の面でのみ表現する。

• filter: drop-shadow() も使っていない。ヒーローの欧文は白背景の上なので影が要らない設計

7. Do's and Don'ts

Do（推奨）

• * { font-feature-settings: "palt" } を入れる。 これがこのサイトの字面を決めている
• その上で letter-spacing を em で当て直す。 本文 0.08em / 見出し 0.12〜0.20em
• サイズ・余白はすべて rem。 ルートが 14 / 13 / 12 / 11px の 4 段で切り替わる前提で組む
• 角丸は 0 が既定。例外はカードの 6px と SNS ボタンの 3px だけ
• 本文色は #1a1a1a（純黒ではない）
• line-height は本文 1.80、読み物 2.20、見出し 1.10

Don't（禁止）

• palt を外さない。 外すと全要素の字送りが広がり、上から当てた em の字間と二重に効いて間延びする
• letter-spacing を px で書かない。 ルートが 4 段で変わるため小さい画面で破綻する
• font-weight: 600 を新規に使わない。 Lato にも游ゴシックにも実体が無く、700 に丸められる
• 縦に見えるラベルを writing-mode で実装しない。 実サイトは横組みの回転
• <a> の直下に文字を置かない。 ニュース詳細で UA 既定の #0000ff が 1 件出ている
• 影を足さない（実測 0 種類）
• 明朝を混ぜない。 実測 0 要素
• 和文 Web フォントを足さない。OS ローカル依存それ自体が設計（フォント要求は欧文の 6 件のみ）

8. Responsive Behavior

Breakpoints

css@media only screen and (min-width: 979px) { html, body { font-size: 14px; } }
@media only screen and (max-width: 979px) { html, body { font-size: 13px; } }
@media only screen and (max-width: 479px) { html, body { font-size: 12px; } }
@media only screen and (max-width: 325px) { html, body { font-size: 11px; } }

• ルートの切替（979 / 479 / 325px）とレイアウトの切替（760px）がずれている。 760px はカラム構成だけを変え、文字サイズは 13px のまま
• 実測: 1440px → 14px / 1200px → 14px / 834px → 13px / 768px → 13px / 767px → 13px / 375px → 12px

タッチターゲット

• ENGLISH ボタンは高さ 23.4px ＋ padding: 3px 6px ＝ 約 30px。44px に満たない。新規実装では縦 padding を足す

フォントサイズの調整

• 個別に書かない。 rem で組んでおけばルートの 4 段切替が全部面倒を見る。モバイルでは 14px の本文が 12px になる

9. Agent Prompt Guide

クイックリファレンス

Primary Color:  #00245c
Deep Navy:      #001029
Text Color:     #1a1a1a
Muted:          #8a8a8a
Background:     #ffffff
Font:           Lato, "游ゴシック Medium", 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro", sans-serif
Root Size:      14px (≥979px) / 13px / 12px (≤479px) / 11px (≤325px)
Body Size:      1rem (= 14px @desktop)
Line Height:    1.80 (本文) / 2.20 (読み物) / 1.10 (見出し)
Letter Spacing: 0.08em (本文) / 0.12〜0.20em (見出し)
palt:           * { font-feature-settings: "palt" }  ← 全要素に必須
Border Radius:  0
Shadow:         none

プロンプト例

MICIN のデザインシステムに従って、お知らせ一覧セクションを作成してください。
- グローバルに * { font-feature-settings: "palt" } を当てる
- その上で letter-spacing は本文 0.08em、見出し 0.12em を em で指定する
- サイズと余白はすべて rem（root 14px 基準。979/479/325px で段階的に縮む）
- 本文は 1rem / line-height 1.80 / color #1a1a1a
- カテゴリタグは border 1px solid #00245c / color #00245c / 11px / weight 700 / radius 0
- カードの面は rgba(148,148,148,0.1)、角丸 0、影なし
- font-weight は 400 と 700 の 2 段だけ使う