三陽商会（SANYO SHOKAI） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: html { font-size: 62.5% } で 1rem = 10px。生成り #e8e4d9 の地に、凸版文久ゴシックを palt で詰めて組むアパレルのコーポレートサイト
• 密度: 低〜中。本文 16px / 行間 28px、角丸ゼロ、影ゼロ。線と余白だけで区切る
• キーワード: 62.5% ルート、生成りの地、凸版文久ゴシック、word-break: auto-phrase、400 と 600 の 2 段

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

1. html { font-size: 62.5%; background: var(--color-type1) }。 rem の基準を 10px に落とし、body { font-size: 1.6rem }（= 16px）で戻している。日本の受託 Web 制作で最も普及している rem の置き方で、「px 値をそのまま 10 で割って rem にできる」ことが狙い
2. ページの地色は白ではなく生成り #e8e4d9。 しかも body ではなく html に塗っている（body は rgba(0,0,0,0)）。--color-type1 として変数化されている
3. body に組版の指定を 5 つまとめて書いている。 font-family: var(--font-type2) / font-weight: 400 / font-feature-settings: "palt" / line-height: 1.75em / letter-spacing: .05em / word-break: auto-phrase。palt は可視 583 要素に効いている
4. line-height が em 宣言。 1.75em × 16px = 28px が絶対値として継承される。子要素でサイズを変えても行間は 28px のまま動かない（比率に直すと壊れる）
5. font-weight は 400 と 600 の 2 段だけ。 実測 400 が 146 要素、600 が 3 要素。@font-face も normal と 600 の 2 本しか無いので、700 を当てるとブラウザの合成太字になる
6. 影が無く、代わりに「白の内側 1px 縁」を使う。 inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #fff が 28 要素。生成りの地にカードを浮かせるのではなく彫る

2. Color Palette & Roles

:root の色トークン（17 個・番号で命名されている）

css:root {
  --color-type1:  #e8e4d9;                 /* ★ページ地色。html に塗る */
  --color-type2:  #c5b8a6;                 /* ヘッダー／面の濃いベージュ */
  --color-type3:  #cccccc;
  --color-type4:  #403d3c;                 /* ドロップダウンナビの面・日付の文字 */
  --color-type5:  #a28d73;                 /* 検索ボタン・ロゴ帯 */
  --color-type6:  rgba(255, 255, 255, 0.5);
  --color-type7:  #886d4b;                 /* 「適時開示」バッジの面 */
  --color-type8:  #888888;
  --color-type9:  #f4f2ec;
  --color-type10: #e4e7ab;
  --color-type11: #c6c9d2;
  --color-type12: #2256a2;
  --color-type13: rgba(224, 223, 217, 0.9);
  --color-type14: rgba(255, 255, 255, 0.9);
  --color-type15: #a68a72;
  --color-type16: #8c6e5d;
  --color-type17: #594539;
}

命名が役割ではなく通し番号。 --color-primary のような意味づけが無いので、変数名からは用途が読めない。下の「実測で確認できた用途」の対応表を使うこと。 17 個すべてが描画に出るわけではない。 トップで実際に面として観測できたのは #e8e4d9 / #c5b8a6 / #403d3c / #a28d73 / #886d4b / #cccccc と、変数に無い #655c5d の 7 色だけだった（宣言 ≠ 実装）。

実測で確認できた用途

--color-type12: #2256a2（青）は IR 系のリンク色だが、トップ・企業情報では 1 要素も描画されなかった。 変数にあるからといって使わない。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し
• Text Meta (#403d3c): ニュースの日付
• Text on Dark (#ffffff): 濃ベージュ／墨の面の上
• Background (#e8e4d9): ページ地色。html に塗る
• Surface (#ffffff): カード・白抜きバッジ

pageBackground.resolved は html を根拠に rgb(232, 228, 217) を返しており、これは正しい。 heroCover.heroCovered は false。ただし viewportTopByArea の上位は <a> の白い面（972,000px²）なので、面積だけ見て白と判断しない。

3. Typography Rules

3.1 和文フォント

• 本文ゴシック: 凸版文久ゴシック Pr6N（toppan-bunkyu-gothic-pr6n・Adobe Fonts）。可視 134 要素。このサイトのほぼ全文
• 見出し明朝: ヒラギノ明朝 ProN（hiragino-mincho-pron・Adobe Fonts）。下層ページの h2 など。「TIMELESS WORK．ほんとうにいいものを」のブランドステートメント
• 両方とも Adobe Fonts で、document.fonts の状態は loaded

3.2 欧文フォント

• セリフ: Minion Pro（minion-pro・Adobe Fonts）。News / IR News / Pick Up / Brands / About Us の欧文見出し（36px・50px）
• サンセリフ: FF Basic Gothic Pro（ff-basic-gothic-pro・Adobe Fonts）。言語切替（JP / EN）だけ
• 和文と欧文でセリフ／サンセリフが逆。 和文はゴシック（本文）、欧文はセリフ（見出し）という組み合わせ

3.3 font-family 指定

css/* ★実サイトの宣言をそのまま。フォールバックが 2 箇所とも誤っている */
:root {
  --font-type1: "hiragino-mincho-pron", sans-serif;      /* ★明朝なのに sans-serif */
  --font-type2: "toppan-bunkyu-gothic-pr6n", serif;      /* ★ゴシックなのに serif */
  --font-type3: "minion-pro", serif;                     /* 正しい */
  --font-type4: "ff-basic-gothic-pro", sans-serif;       /* 正しい */
}

body {
  font-family: var(--font-type2);
  font-weight: 400;
  font-feature-settings: "palt";
  line-height: 1.75em;
  letter-spacing: .05em;
  word-break: auto-phrase;
}

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

• 実サイトは --font-type1 と --font-type2 の generic family を取り違えている。 Adobe Fonts が落ちると、本文ゴシックが明朝に、見出し明朝がゴシックに化ける
• 正しくは --font-type1: "hiragino-mincho-pron", serif / --font-type2: "toppan-bunkyu-gothic-pr6n", sans-serif
• Adobe Fonts はドメインライセンスなので、手元で再現するときは同じ系統の代替を置く。凸版文久ゴシック → Zen Kaku Gothic New（ふところが近い）、ヒラギノ明朝 ProN → Zen Old Mincho または Noto Serif JP

3.4 Web フォントの実際

hiragino-mincho-pron は W3（Light）1 本。 実測の h2 は font-weight: 400 だが、描画は 300 のまま（合成が効く環境では太る）。ブランドステートメントの繊細さはこの 1 本で作られている。

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

★ 1rem = 10px。px 値を 10 で割ればそのまま rem になる（16px = 1.6rem）。

font-weight: 700 は 2 ページの実測で 1 要素も出ない。 強調は太さではなくサイズと面色で作る。

3.6 行間・字間

• 本文の行間: body に line-height: 1.75em。16px に対して 28px が絶対値として継承される
• 見出しの行間: 個別に上書き。1.00（欧文見出し）/ 1.17（ナビ大項目）/ 1.40（リード）/ 1.94（実績カウンター）
• 本文の字間: body に letter-spacing: .05em。16px で 0.8px（可視 146 要素中 102 要素）
• 見出しの字間: 継承のまま。大見出しだけ 3.5px / 1.5px / 1.3px を個別に当てる

css/* ★ line-height を em で書いているので、継承されるのは比率ではなく px */
body { line-height: 1.75em; letter-spacing: .05em; }
/* 16px × 1.75 = 28px が確定し、13px のバッジも 20px のリードも
   上書きしない限り 28px のまま動く */

line-height: 1.75em を 1.75（単位なし）に書き換えてはいけない。 単位なしなら各要素のサイズに比例して伸縮するが、em は計算済みの 28px が子へ降りる。実測で lineHeightRatio が 0.00 / 1.17 / 1.56 / 1.75 / 1.87 と散らばるのはこのため。 字間は逆に em 宣言のまま比例する。 モバイル（375px）では body が 14px になり、字間も 0.7px（= 0.05em）に追従した。px に読み替えない。

3.7 OpenType 機能

cssbody { font-feature-settings: "palt"; }

• palt を body に書いて全体に効かせている。 実測 583 要素（トップ）/ 293 要素（企業情報）
• palt ＋ letter-spacing: .05em の併用。詰めてから 0.05em 空けるのがこのサイトの字送り
• tnum などの数値系は使っていない

3.8 縦書き

css/* 実測: writing-mode が horizontal-tb 以外の要素は 0。縦組みは使わない */

該当なし。

3.9 禁則処理・改行ルール

cssbody { word-break: auto-phrase; }   /* ★文節で折り返す */
.break-auto { word-break: auto-phrase; }

• word-break: auto-phrase を body に書いている。 日本語の文節単位で改行位置を決める新しい値で、<br> や <wbr> を手で入れずに「ほんとうにいい/ものを」のような不自然な折り返しを避ける
• ユーティリティクラス .break-auto も用意されている
• 未対応ブラウザでは normal にフォールバックするだけなので、書いておいて損が無い

4. Component Stylings

Buttons / Links

このサイトに「面で塗った CTA ボタン」はほぼ無い。 押せるものは下線リンクとして表現される。

Text Link（主役）

• Background: transparent
• Text: #000000（濃い面の上では #ffffff）
• 下線は border-bottom ではなく background-image: linear-gradient(90deg, …)（ホバーで左右に伸ばすため）
• Padding: 0 0 4px（下線との間隔）/ 大きいものは 20px 0
• Border Radius: 0
• Font: 16px / 400 / line-height: 28px / 字間 0.8px / palt

Search Button（唯一の面ボタン）

• Background: #a28d73（--color-type5）/ Text: #eeeeee
• Padding: 0 7.5px / Border Radius: 0 3px 3px 0（サイト内で唯一の角丸）
• Font: Arial 16px / 400

Badges（ニュース種別）

バッジも角丸ゼロ。 面色だけで種別を分け、形は変えない。文字は 13px まで落とすが、字間を 1.3px（= 0.1em）まで広げて読ませる。

Cards

• Background: #ffffff
• Border: なし
• Border Radius: 0
• Shadow の代わりに白の内側 1px 縁: inset 1px 1px 0 0 #ffffff, inset -1px -1px 0 0 #ffffff（実測 28 要素）
• Font: 15px / 400 / line-height: 21px

Nav（ドロップダウン）

• Background: #403d3c（--color-type4）
• Text: #ffffff
• Item Font: 24px / 600（大項目）/ 16px / 400（小項目）/ 字間 0.9px・0.8px
• Border Radius: 0

Counter（実績数字）

• Font: 80px / 400 / line-height: 1.94 / 字間 0.05em
• ラベルは 16px / 400。数字も本文と同じ凸版文久ゴシックで組む（欧文書体に切り替えない）

5. Layout Principles

Root / rem

csshtml {
  font-size: 62.5%;            /* ★1rem = 10px */
  background: var(--color-type1);
}

@media screen and (min-width: 769px) {
  body { font-size: 1.6rem; }              /* = 16px */
}
@media screen and (max-width: 768px) {
  body { font-size: 3.7333333333vw; }      /* ★モバイルだけ流体。375px で 14px */
}

html は 10px 固定だが、body はモバイルだけ vw。 375px 幅で 14px、letter-spacing: .05em が 0.7px、line-height: 1.75em が 24.5px に追従する（実測で確認）。「このサイトの本文は 16px」と一言で書かない。

Container

• 実測: .guide::before { width: calc(100% - 80px); max-width: 1200px }
• Max Width: 1200px / 左右余白: 40px ずつ

Spacing Scale

余白トークンは無い。実測のパディングは 4 / 5 / 6 / 7.5 / 8 / 20 / 40px。 角丸が無い分、余白の刻みも粗い（4 / 8 の倍数に寄せてよい）。

Grid

• 明示的なグリッド変数は無い
• カラムはフレックスで、コンテナ幅 1200px を基準に分割する

6. Depth & Elevation

影が 1 種類しかなく、しかもそれは inset（内側の縁）。 面を浮かせるのではなく、地色 #e8e4d9 との境界に白い 1px の光を入れて彫る。 新規実装で 0 2px 8px rgba(0,0,0,.1) のような一般的なドロップシャドウを足さない。 生成りの地の上では汚れて見える。

7. Do's and Don'ts

Do（推奨）

• html { font-size: 62.5% } を先に置く。 以降の px は 10 で割って rem で書ける（16px → 1.6rem）
• ページ地色 #e8e4d9 は html に塗る。 body は透明のままにする
• body に組版をまとめて書く: font-feature-settings: "palt" / line-height: 1.75em / letter-spacing: .05em / word-break: auto-phrase
• ウェイトは 400 と 600 の 2 段だけにする
• 角丸は書かない。 例外は検索ボタンの 0 3px 3px 0 のみ
• カードの縁は inset の白 1px で作る
• フォールバックは正しい generic family を書く（実サイトの取り違えは写さない）

Don't（禁止）

• line-height: 1.75em を 1.75（単位なし）に直さない。 継承されるのは 28px という絶対値で、そこが設計の要
• letter-spacing を px に読み替えない。 モバイルで body が vw になるため、0.8px 固定にすると字間だけ比率が崩れる
• font-weight: 700 を当てない。 @font-face が normal / 600 の 2 本しか無く、合成太字になる
• ヒラギノ明朝 ProN に 600 以上を当てない。 読み込んでいるのは 300（W3）1 本だけ
• border-radius を足さない。 実測は検索ボタン 1 箇所と円 9 個だけ
• ドロップシャドウを足さない。 このサイトの奥行きは inset の白縁と面色の明度差で作る
• --color-type12: #2256a2（青）など、描画に出ていない変数を使わない。 17 個のうち実際に面として観測できたのは 6 個 ＋ ベタ書きの #655c5d だけ

8. Responsive Behavior

Breakpoints

実測（幅ごとの body）

html は全幅で 10px。変わるのは body だけ。 0.05em / 1.75em の宣言が、そのまま比率を保って縮む。

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）
• 下線リンクは padding: 20px 0 で高さを稼いでいる箇所がある。13px のバッジは押せる要素ではないので対象外

9. Agent Prompt Guide

クイックリファレンス

Root Font Size: 62.5%（= 1rem 10px）★ px を 10 で割って rem にする
Background:  #e8e4d9   （html に塗る。body は透明）
Surface:     #ffffff
Primary Face:#c5b8a6   （ヘッダー・告知帯）
Dark Face:   #403d3c   （ドロップダウンナビ）
Accent:      #a28d73 / #886d4b / #655c5d
Text Color:  #000000（濃い面の上は #ffffff）
Font (本文): "toppan-bunkyu-gothic-pr6n", sans-serif  ※実サイトは serif と誤記
Font (明朝): "hiragino-mincho-pron", serif            ※実サイトは sans-serif と誤記
Font (欧文): "minion-pro", serif
Body Size: 16px（1.6rem） / Weight 400
Line Height: 1.75em  ★em。28px が絶対値で継承される
Letter Spacing: .05em（= 0.8px）
font-feature-settings: "palt"
word-break: auto-phrase
Weight: 400 と 600 の2段だけ（700 を使わない）
Radius: 0
Shadow: inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #fff

プロンプト例

三陽商会のデザインシステムに従って、IR ニュース一覧を作成してください。

- html に font-size: 62.5% と background: #e8e4d9 を書く（body の背景は透明のまま）
- body に font-family: "toppan-bunkyu-gothic-pr6n", sans-serif /
  font-weight: 400 / font-feature-settings: "palt" / line-height: 1.75em /
  letter-spacing: .05em / word-break: auto-phrase を書く
  （line-height は必ず em。単位なしに直さない）
- 欧文の見出し「IR News」は "minion-pro", serif で 36px / 400 / line-height 1.0
- 記事行: 日付 14px / #403d3c、見出し 16px / 400 / line-height 28px、
  下線は border-bottom ではなく background-image: linear-gradient(90deg, …) で引く
- 種別バッジ: 面 #655c5d（プレスリリース）/ #886d4b（適時開示）、文字 #ffffff、
  13px / 400 / letter-spacing 1.3px、padding 5px 8px、border-radius 0
- カード: 背景 #ffffff、border-radius 0、
  box-shadow: inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #fff
- font-weight は 400 と 600 だけ。700 は使わない
- border-radius とドロップシャドウは書かない
- コンテナは max-width 1200px、左右余白 40px