大橋量器（MASU KOUBOU / Ohashi Ryoki） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 岐阜・大垣の枡メーカー。角丸ゼロ・ぼかしゼロで、四角い枡そのもののような画面を組む。写真は大きく、文字は紺と赤の2色だけで締める
• 密度: 低〜中。line-height: 2 と letter-spacing: .08em をサイト全体に継承させて、本文をゆったり組む
• キーワード: 秀英角ゴシック銀、縦組みヒーロー、字空け 0.08em、ずらし影、角丸ゼロ

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

1. 和文は TypeSquare（モリサワ）配信の「秀英角ゴシック銀」1 書体で、太さをファミリー名で切り替える。 本文＝秀英角ゴシック銀 M（可視 69 / 96 要素）、見出し＝秀英角ゴシック銀 B（可視 53 / 39 要素）。document.fonts で M・B ともに loaded
2. letter-spacing: .08em を body に 1 回だけ書いて全体に継承させている。 実測 1.28px がトップ 133 要素・下層 88 要素（可視 165 / 148 要素中）。サイズの違う要素が全部 1.28px なので、これは「各要素が em を持っている」のではなく絶対値の継承
3. font-feature-settings: "palt" が全面に効いている（トップ 591 要素 / 下層 516 要素）。字空けと約物詰めを同時にかけるのがこのサイトの組み方
4. ヒーローは本物の縦組み。 writing-mode: vertical-rl がトップで 11 要素。見出し（36px）・リード文（18px）・画面右端の ONLINE SHOP / FOLLOW US が縦に流れる。画像に焼き込んだ文字ではない

CSS Custom Properties は 0 個（トップ・下層とも total: 0）。設計トークンは存在せず、値は CSS に直接書かれている。

2. Color Palette & Roles

Primary（ブランドカラー）

紺が 2 つ・赤が 2 つあるのは実装の実態。 #1f284e と #1b244a、#d62116 と #da2616 はそれぞれ肉眼では区別できない差（各チャンネル 4 以内）。新規実装では #1f284e と #d62116 に寄せてよいが、既存ページと並べるときは 2 色あることを前提にする。

Neutral（ニュートラル）

• Text Primary (#000000): 本文。可視 91 要素（トップ）/ 81 要素（下層）。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): 紺面・写真上のテキスト（可視 25 / 19 要素）
• Surface Pale (#eff2f5): 可視 22 要素。Message Shop セクションの地、電話 CTA の面。青みのある最も淡い面
• Surface Gray (#e6e6e6): スライダーの非アクティブドット、およびずらし影の色（後述）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body）
• Page Title Band (#eeeeee): 下層ページの .page_ttl--bg（ページタイトル帯）。下層でビューポート上部の最大面積

heroCover が true（img.img-cover 1454×1051 がビューポートを覆う）。 トップの第一印象は写真だが、ページの地色は白。pageBackground.resolved の根拠は body なので取り違えないこと。

Semantic（意味的な色）

専用の semantic パレットを持たない。エラー・警告・成功の色は実測できなかった（該当コンポーネントが無い）。実装するなら #d62116 を danger に転用せず、CTA 専用のまま残すこと。

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文）: 秀英角ゴシック銀 M（DNP 秀英体 / モリサワ TypeSquare 配信）
• ゴシック体（見出し・太字）: 秀英角ゴシック銀 B
• 明朝体: 使用しない（可視 0 要素）

配信は TypeSquare（モリサワ）。 https://typesquare.com/3/tsst/script/ja/typesquare.js?<eid>&auto_load_font=true を読み込み、JS が @font-face を動的に注入する。注入後の宣言は次のとおり:

css/* TypeSquare が注入する @font-face（実測。手で書くものではない） */
@font-face { font-family: "秀英角ゴシック銀 M"; font-weight: bold; src: url("//wf.typesquare.com/3/tsst/dist/ja/ts?...") }
@font-face { font-family: "秀英角ゴシック銀 B"; font-weight: bold; src: url("//wf.typesquare.com/3/tsst/dist/ja/ts?...") }

font-weight: bold で宣言されているのは TypeSquare の仕様で、書体の太さとは無関係。 各ファミリーに実体は 1 つしか無いので、CSS 側が font-weight: 500 と書いても M（Medium）がそのまま描画される。 逆に、秀英角ゴシック銀 M のファミリーに font-weight: 700 を当てても太くならない（宣言が bold なので「完全一致」と判定され、合成太字も起きない）。太さを変えたいときは font-weight ではなくファミリー名（M ↔ B）を切り替える。

TypeSquare が適用された要素には typesquare_op / typesquare_option クラスが自動で付く。このクラスを手で書かないこと（JS が付けるマーカー）。

3.2 欧文フォント

• サンセリフ: Poppins（Google Fonts）。font-en クラスで、MENU Information Contact ONLINE SHOP と電話番号に使う。実測 loaded は 300 / 400 / 500 の 3 ウェイト（可視 34 / 13 要素）
• セリフ: 使用しない
• 等幅: 使用しない

Montserrat 600 が @font-face で宣言されているが、フォントファイルの要求は 0 件・可視 0 要素。 Google Fonts の CSS だけ読み込んで 1 文字も使っていない。宣言を真似しないこと。

3.3 font-family 指定

css/* 本文（body に 1 回） */
font-family: "秀英角ゴシック銀 M", "Shuei KakuGo Gin M",
             YuGothic, "Yu Gothic",
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif;

/* 見出し・太字（.font-jp） */
font-family: "秀英角ゴシック銀 B", "Shuei KakuGo Gin B",
             YuGothic, "Yu Gothic",
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif;

/* 欧文（.font-en） */
font-family: Poppins, sans-serif;

和文名と英名を 2 つ並べるのは TypeSquare の定石（環境によってどちらで解決されるか分からないため）。

フォールバックの考え方 — 実サイトの 2 つの引っかかり:

• "ヒラギノ角ゴ Pro W3" の次が "Hiragino Kaku Gothic ProN" になっている。 和名は Pro、英名は ProN で別の書体（ProN は JIS2004 字形）。正しくは "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN" のように世代を揃える
• Windows の游ゴシック問題に未対応。 YuGothic, "Yu Gothic" しか書いていないので、TypeSquare が落ちた Windows では Light にマッピングされて細く出る。新規実装では "Yu Gothic Medium" / "游ゴシック Medium" を必ず挟む

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

html は 16px 固定（4 幅すべてで 16px）。rem は使っていない。

ウェイトは実質 2 段（500 / 700）。トップの 300 4 要素は slick（スライダー）の数字で Arial、400 は Poppins。和文で 600 や 900 は 1 要素も無い。

3.5 行間・字間

• 本文の行間: line-height: 2（単位なし）。実測 2.00 がトップ 98 要素・下層 106 要素で最多。単位なしなので各要素が自分のサイズで再計算する（16px→32px、15px→30px、14px→28px）
• 見出しの行間: 1.40（39 / 34 要素）。32px の大見出しだけ 1.70
• 本文の字間: letter-spacing: .08em を body に 1 回。computed は 1.28px で、子要素へは絶対値 1.28px として降りる（サイズが違っても同じ 1.28px）
• 見出しの字間: 32px / 25.6px の見出しは 自分で .1em を宣言（3.2px / 2.56px）。16px の .ttl-01 も .1em（1.6px）

CSS に現れる letter-spacing の宣言値は 5 つだけ: .08em（body）/ .1em / .15em / .02em / 0。

ガイドライン:

• line-height は単位なし、letter-spacing は body に em で 1 回。 この組み合わせを崩さない
• 子要素で letter-spacing: .08em を再宣言しない。 継承で 1.28px が降りてくるので、再宣言すると見出しだけ字間が広がる
• 逆に .1em を足したいときは要素に直接書く（そこから下は絶対値で継承される）

3.6 禁則処理・改行ルール

css/* 実測（767px 以下で有効） */
word-break: break-word;

• word-break: break-word はモバイルのみ。 1440 / 1200 / 834px では normal、375px で break-word に切り替わる
• line-break / overflow-wrap の明示的な宣言は無い（UA 既定）
• word-break: auto-phrase は使っていない

禁則対象（ブラウザ既定に任せている）:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* トップ 591 要素 / 下層 516 要素 */

• palt は body に書いてサイト全体に効かせている。 可視テキストの実質すべてが "palt"
• 字空け（.08em）と約物詰め（palt）を同時にかけるのがこのサイトの流儀。 palt で約物を詰めたぶんを letter-spacing で均して戻す構図
• "tnum" "halt" "kern" の宣言は無い
• CSS には font-feature-settings: normal で打ち消している箇所も 1 つある（slick の数字）

3.8 縦書き

css/* ヒーロー見出し・リード文 */
writing-mode: vertical-rl;

本物の縦組み。トップで vertical-rl が 11 要素（下層は固定サイドバーの 2 要素だけ）。

• 縦組みでも letter-spacing: 1.28px がそのまま効いている（縦方向の字送りになる）
• 英字（Poppins）も縦組みにしている。text-orientation の宣言は無いので既定の mixed（英字は寝る）
• 縦組みは画像ではない。 スクリーンショットで縦組みを見ても typography.verticalWriting が 0 なら画像だが、このサイトは実装されている

4. Component Stylings

Buttons

Primary（赤 CTA — サイト中で 1 つだけ）

• Background: #d62116
• Text: #ffffff
• Font: 秀英角ゴシック銀 M / 24px / 500 / line-height 48px
• Letter Spacing: 1.28px（継承）
• Size: 600 × 210px（固定。中央寄せの面として置く）
• Border Radius: 0px
• Shadow: none

Secondary（枠線＋ずらし影）

• Background: transparent
• Text: #000000
• Font: 秀英角ゴシック銀 B / 14px / 500 / line-height 28px
• Border: 1px solid #1b244a
• Padding: 18.06px 63px 18.06px 14px（右に 63px の余白＝矢印のスペース。左右非対称）
• Size: 338.36 × 66.09px
• Border Radius: 0px
• Shadow: 6px 6px 0 0 #e6e6e6（ぼかし 0 のずらし影。トップ 8 要素 / 下層 6 要素）

Tel（電話 CTA）

• Background: #eff2f5
• Text: #1f284e
• Font: 秀英角ゴシック銀 B / 16px / 700 / line-height 22.4px
• Size: 600 × 210px / Border Radius 0px

Text Link

• Color: #1f284e / 14px / 500 / padding 2.52px 14px（左にアイコン分の余白）

Inputs

実サイトのトップ・下層に入力欄が存在しない（input / select / textarea の実測が 0 件）。問い合わせは別ページ（/contact/）。

実装するときは、他のコンポーネントに合わせて:

• Background: #ffffff
• Border: 1px solid #1b244a
• Border Radius: 0px（このサイトに角丸は無い）
• Font: 秀英角ゴシック銀 M / 16px / 500 / line-height 2
• フォーカスは角丸を足さず、枠を 2px solid #d62116 に太くする

Cards

• Background: #ffffff（または #eff2f5 のセクション地の上に白）
• Border: なし（写真＋テキストで区切る）
• Border Radius: 0px
• Shadow: なし。ボタンだけが 6px 6px 0 0 #e6e6e6 を持つ
• 商品名: 秀英角ゴシック銀 M / 25.6px / 700 / letter-spacing .1em / 中央寄せ

5. Layout Principles

Spacing Scale

実測から確認できた値（CSS Custom Properties は 0 個なので、スケールは暗黙）。

Container

• Padding (horizontal): 20px 前後（.inner）

Grid

• 商品カードは 3 列（下層 .lps_sec）
• gap の宣言は実測 0 件。カラムの余白は margin で取っている（Flexbox + margin の旧来型）

6. Depth & Elevation

影は 1 種類しか無い。

• ぼかし（blur）が 0。 紙を重ねたような段差ではなく、版ずれのような平らな影。rgba(0,0,0,.1) 系のソフトシャドウに置き換えないこと
• border-radius は 50% が 2 要素だけ（スライダーの丸ドット）。それ以外はすべて 0px

7. Do's and Don'ts

Do（推奨）

• letter-spacing: .08em と line-height: 2 は body に 1 回だけ書く。 子要素は継承に任せる
• font-feature-settings: "palt" を body に書いて全体へ効かせる（実測 591 要素）
• 太さはファミリー名で切り替える（秀英角ゴシック銀 M ↔ B）。font-weight だけ変えても TypeSquare の書体は太くならない
• border-radius: 0 を既定にする。 丸みを足すとこのサイトでは無くなる
• 影を使うなら 6px 6px 0 0 #e6e6e6 の 1 種類だけ
• 縦組みを使うのはヒーローとサイド固定のラベルだけ。本文は横組み
• 和文フォントのスタックには和名と英名を両方書く（"秀英角ゴシック銀 M", "Shuei KakuGo Gin M"）

Don't（禁止）

• 子要素で letter-spacing: .08em を再宣言しない。 継承で 1.28px が降りているので、再宣言すると大きい文字だけ字間が開く
• line-height を px で書かない。 このサイトは単位なしの 2 で、サイズごとに再計算される設計
• 秀英角ゴシック銀 M に font-weight: 700 を当てない。 太くならず（宣言が bold のため完全一致扱い）、意図とズレる
• typesquare_op / typesquare_option クラスを手書きしない（TypeSquare の JS が付けるマーカー）
• Montserrat を読み込まない。 実サイトは宣言だけで 1 文字も使っていない
• "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN" をそのまま写さない。 Pro と ProN は別書体なので世代を揃える
• Windows 用の游ゴシック Medium を省かない。 実サイトは未対応だが、新規実装では "Yu Gothic Medium" / "游ゴシック Medium" を挟む
• box-shadow にぼかしを入れない。このサイトの影は blur 0
• 本文の色を #333333 に薄めない。実測は純黒 #000000（可視 91 要素）

8. Responsive Behavior

Breakpoints

実測した @media のうち出現回数が多いもの。

幅ごとの実測値（body）

モバイルで body が 14px に切り替わる（html は 16px のまま）。line-height: 2 と letter-spacing: .08em は比率で書かれているため 28px / 1.12px に自動で追従する。 字間を px に読み替えると、モバイルで 1.28px のまま残って字間が開きすぎる。 必ず em のまま書くこと。

タッチターゲット

• セカンダリボタンの実測高さ 66px、CTA は 210px。44px 基準は満たしている
• グローバルナビのリンクは padding: 0 11.25px / 高さ 30px。モバイルではハンバーガーに切り替わる

フォントサイズの調整

• 本文: 16px → 14px（375px）
• 見出しは比率指定ではなく個別に縮小される（max-width: 767px のメディアクエリ 42 件がこれを担う）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #d62116   (赤 CTA。サイト中で1つだけ)
Accent Color:  #1f284e   (紺。見出し・テキストリンク)
Surface:       #eff2f5
Text Color:    #000000
Background:    #ffffff
Font (body):    "秀英角ゴシック銀 M", "Shuei KakuGo Gin M", YuGothic, "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", sans-serif
Font (heading): "秀英角ゴシック銀 B", "Shuei KakuGo Gin B", YuGothic, "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", sans-serif
Font (en):      Poppins, sans-serif
Body Size: 16px (375px 以下は 14px)
Font Weight: 500 (本文) / 700 (見出し)
Line Height: 2        ← 単位なし
Letter Spacing: .08em ← body に 1 回だけ
font-feature-settings: "palt"
Border Radius: 0
Box Shadow: 6px 6px 0 0 #e6e6e6 (セカンダリボタンのみ)

プロンプト例

大橋量器のデザインシステムに従って、商品一覧ページを作成してください。

- body に以下を 1 回だけ書き、子要素では再宣言しない:
    font-family: "秀英角ゴシック銀 M", "Shuei KakuGo Gin M", YuGothic, "Yu Gothic Medium", sans-serif;
    font-size: 16px; font-weight: 500;
    line-height: 2;            /* 単位なし */
    letter-spacing: .08em;     /* 子へは 1.28px として継承される */
    font-feature-settings: "palt";
- 見出しは font-weight ではなくファミリー名を "秀英角ゴシック銀 B" に切り替える
- セクション見出しは 32px / line-height 1.7 / letter-spacing .1em / color #1f284e
- 商品名は 25.6px / letter-spacing .1em / 中央寄せ
- カードは枠線も影も無し。角丸は全要素 0
- 「商品詳細へ」ボタンは 1px solid #1b244a・背景透明・影 6px 6px 0 0 #e6e6e6・
  padding 18px 63px 18px 14px（右を広く取る）
- ページ末尾の CTA は #d62116 の面に白 24px、600×210px
- 375px 以下で body を 14px にし、word-break: break-word を足す