カリモク家具（karimoku） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地に影を1つも使わない完全フラット。角丸もほぼ持たず（border-radius: 0 が 77 要素）、罫線と余白だけで面を仕切る。家具の写真を主役に立て、UI は徹底して引く
• 密度: 余白が非常に大きい。セクションの padding-top は 60 / 90 / 120px。本文は 14px と小さく、行送りは 28px で固定
• キーワード: フラット、行送り固定、和欧2段、字空け、無影

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

1. line-height が font-size に関係なく 28px 固定である。 実測 215 要素が 14px / 28px。さらに 18px / 28px（24 要素）、20px / 28px（14 要素）、24px / 28px（10 要素）、16px / 28px（9 要素）、そして 30px / 28px（7 要素、行間が font-size より小さい） まで同じ 28px を使う。比率ではなく絶対値で行送りを揃える、活版の込め物に近い設計
2. @font-face で「游ゴシック」という名前そのものを上書きし、ウェイト 100〜400 をすべて Medium にマッピングしている。 Windows の游ゴシック Regular が細すぎる問題への対処で、SmartHR の AdjustedYuGothic・白鶴酒造の MyYuGothicM と同じ目的を、別名を作らず元の名前を乗っ取る方式で解いている（3.1 参照）
3. セクション見出しは「欧文 + 和文」の2段組みで、欧文側に letter-spacing: 0.1〜0.2em の強い字空けを当てる（Support 16px→3.2px、Selection 34px→3.4px、和文 30px→3px）。実測で 3px 以上の字間を持つ要素が 19 個ある

CSS Custom Properties は 0 個。 設計はトークンではなくクラス名に載っている。

2. Color Palette & Roles

Neutral（このサイトの主役）

Accent（差し色。いずれも面積は小さい）

Badge（ニュースの分類バッジ）

• バッジは border-radius: 0 / padding: 0 4px / 11px の小さな矩形。丸めない
• 4色とも彩度が低く、白文字とのコントラストはぎりぎり。小さい文字に使う前提の配色

#ff0000（純赤）が可視 1 要素にあるが、これは 弊社の偽サイトにご注意ください という注意喚起文の1箇所限り。デザインシステムの色ではない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文・UI）: 游ゴシック Medium（OS ローカル）。@font-face で名前を上書きして Medium を強制している
• 明朝体（見出し）: Noto Serif JP（Web フォント。実測 400 / 500 / 700 が loaded）。商品名・特集の見出しに使う

Windows 游ゴシック問題への対処（このサイトの方式）

css/* 実サイトの宣言。100〜400 をすべて Medium に、bold を Bold に向ける */
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold");   font-weight: bold; }

• 狙い: Windows の游ゴシック Regular は Web 表示で細く掠れるため、Regular 相当の指定が来ても Medium を出す
• 方式の違い: SmartHR は AdjustedYuGothic、白鶴酒造は MyYuGothicM という別名を新設して font-family の先頭に置く。カリモクは**「Yu Gothic」という名前自体を再定義**するので、font-family 側を書き換えずに済む
• トレードオフ: 別名方式と違い、このドキュメント内のすべての Yu Gothic 指定に影響が及ぶ。意図的に Regular を使いたい箇所があっても選べない
• src が local() だけなので、游ゴシックが入っていない環境では解決しない。 実測（macOS / headless Chrome）では font-weight: 400 と bold の 2 宣言が status: error（ローカルに該当フォントが無い）となり、チェーンの次の YuGothic → Hiragino Sans に落ちていた。Windows 向けの補正であり、Mac では効かないことを前提に設計すること
• 指している名前 Yu Gothic Medium は Windows のフォント名。macOS 側の PostScript 名は YuGothic-Medium で別（白鶴酒造はこちらを指している）

3.2 欧文フォント

• Century Gothic（OS ローカル）: セクション見出しの英語・和欧2段の欧文側。幾何学的サンセリフで、字空けを当てて使う
• Font Awesome 5 Free 900 が loaded（アイコン用）

Noto Sans JP は 300 / 400 / 500 / 700 の全ウェイト × 124 サブセットが @font-face 宣言されているが、実測ですべて unloaded。 参照する要素が 1 つも無い。設計フォントとして実装しないこと。

3.3 font-family 指定

css/* 本文・UI（body の既定） */
font-family: "Yu Gothic", YuGothic, "Hiragino Sans", "ヒラギノ角ゴ Pro W3",
             "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
             "ＭＳ Ｐゴシック", Osaka, Arial, Verdana, sans-serif;

/* 見出し（明朝） */
font-family: "Noto Serif JP", 游明朝体, "Yu Mincho", YuMincho,
             "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;

/* 欧文見出し */
font-family: "Century Gothic", serif;   /* ← 実サイトの記述。3.3 の注記を読むこと */

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

• 和文優先。Yu Gothic を先頭に置き、上書きした @font-face を必ず経由させる
• Windows → macOS → レガシーの順に並べる長いチェーン。ＭＳ Ｐゴシック Osaka まで含む古い作法だが、游ゴシック補正と組み合わさっているため実害は小さい

"Century Gothic", serif のフォールバックは誤り。 Century Gothic はサンセリフなので、フォントが無い環境では明朝／セリフに落ちる。新規実装では "Century Gothic", "Questrial", sans-serif と書くこと。（このリポジトリではライオンの Jost, serif、白鶴酒造の Lato, "Times New Roman" にも同じ誤りがある）

下層ページに旧実装が同居している。 /concept/index.html の一部は "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", ... を先頭に持ち、リンク色も #0066cc（UA 既定寄りの青）や #55698a になっている。トップページ側が現行の設計であり、下層の旧実装を写さないこと。

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

3.5 行間・字間

• 行送りは 28px の絶対値で固定する。 これがこのサイトの最大の特徴。font-size 12 / 14 / 16 / 18 / 20 / 24 / 30px のすべてが line-height: 28px を共有する
  • 本文 14px では 2.00
  • 見出し 20px では 1.40、24px では 1.17
  • 30px では 0.93 と、行間が font-size を下回る（2行以上になると字面が重なりかける。実装時は1行で収まる見出しにのみ使うこと）
• ナビ・ラベルは line-height を font-size と同値にして（12px/12px、14px/14px、18px/18px）、和欧2段を密着させる
• 字間は既定 normal（実測 381 要素）。開けるのは2種類だけ
  • セクション見出し（欧文・和文とも）: 0.1〜0.2em（3〜3.6px）
  • ナビ・小さいラベル: 0.05〜0.08em（0.63〜0.98px）

ガイドライン:

• 行送り 28px は「本文 14px に対する 2.0」から来ている。 本文サイズを変えるならこの基準値ごと引き直すこと。28px だけ残すと大きい見出しで破綻する
• 小さい文字ほど字間を開ける（9px で 0.07em、12px で 0.06〜0.08em）。游ゴシックの小級数が潰れるのを防ぐ処置
• letter-spacing は px に解決されて継承される。 0.98px が 14px・18px の両方に出るのは、14px 基準の 0.07em が子へ px のまま渡っているため

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• ソース中に タブと改行がそのまま残っている（Contract Use\n\t\t\t\t業務用家具）。和欧2段の見出しは HTML の改行で組まれており、white-space に依存しない書き方になっている
• 2段見出しは <span> を2つ並べて display: block にする実装。1つの要素に <br> で押し込まない

禁則対象:

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

3.7 OpenType 機能

css/* このサイトでは使用しない */
font-feature-settings: normal;

• palt は実測 0 件。 字詰めは一切していない
• 字面の調整は letter-spacing を開く方向でのみ行う。詰める処理は入れない

3.8 縦書き

使用しない（実測 0 件）。すべて横組み。

4. Component Stylings

Buttons

Outline（このサイトの基本形）

• Background: #ffffff
• Text: #282828
• Border: 1px solid #c8c8c8
• Border Radius: 0
• Padding: 15px 10px（見出し付きは 30px 10px 15px）
• Font Size: 18px / Weight 400
• Shadow: なし
• 例: カリモクのこだわり 一覧へ その他の家具を探す オンラインショップで探す

Surface（淡い面のボタン）

• Background: #ecebea
• Text: #282828
• Border: 1px solid #ffffff
• Border Radius: 0
• Padding: 10px（選択肢は 5px）
• Font Size: 18〜20px / Weight 400〜500
• 例: このモデルのページを見る ソファの選び方 テレビボードの選び方

Solid Dark（オンラインショップ）

• Background: #2c2c2c / Text: #ffffff / Border Radius: 3px / Font Size: 9px

Solid Gray（コーポレートサイト）

• Background: #f0f0f0 / Text: #282828 / Border Radius: 3px / Font Size: 9px

Wide Solid（全幅の誘導）

• Background: #9f9b93 / Text: #ffffff / Border Radius: 0 / Padding: 20px 10px / Font Size: 18px
• 例: お近くのショールーム・ギャラリーを探す

Badges

• Border Radius: 0 / Padding: 0 4px / Font Size: 11px / Text: #ffffff
• 面色は 2. の Badge 表を参照

Carousel Controls

• Background: #999397（グレー）または #99b49b（緑）
• Border Radius: 100px（サイト中で唯一の完全な丸）
• これ以外に pill / 丸を使わない

Cards

• Background: #ffffff または #ecebea
• Border: 罫線のみ（1px solid #c8c8c8）
• Border Radius: 0
• Shadow: なし
• 写真 → 見出し（Noto Serif JP）→ 本文（游ゴシック 14px / 28px）の順

5. Layout Principles

Spacing Scale

padding-top の実測分布から、20 / 40 / 50 / 60 / 65 / 70 / 75 / 90 / 120px が使われている。

• 28px の行送りと 60 / 90 / 120px の余白は、いずれも 28〜30px 系の倍数に近い。行送りを基準に余白を積む設計

Container

• ビューポート幅いっぱい（1440px）の帯を敷き、その中で 1200px に絞る構成

Grid

• カードは 2〜4 カラム
• gap プロパティの使用は実測 0 件。 レイアウトは margin / padding と float 系の旧来手法で組まれている。新規実装では gap を使ってよいが、値は 20 / 40 / 60px に合わせること

6. Depth & Elevation

• box-shadow の実測は 0 件。サイト全体で影を1つも使っていない。
• 階層は 罫線（1px solid #c8c8c8）と面色（#ffffff / #ecebea）の差だけで表現する
• モーダル・ドロップダウンにも影を付けない。 浮かせたいときは面色を変えるか罫を引く

7. Do's and Don'ts

Do（推奨）

• line-height は 28px の絶対値で統一する（本文 14px に対する 2.0 が基準）
• border-radius: 0 を既定にする。 丸めるのはカルーセルの操作ボタン（100px）と極小のユーティリティボタン（3px）だけ
• box-shadow を使わない。 階層は罫線と面色で作る
• セクション見出しは「欧文 + 和文」の2段で組み、欧文側に letter-spacing: 0.1〜0.2em を当てる
• 小さい文字（9〜12px）には letter-spacing: 0.06〜0.08em を入れて潰れを防ぐ
• 游ゴシックは @font-face で Medium にマッピングしてから使う（3.1 の宣言をそのまま採用してよい）
• 見出しには Noto Serif JP（明朝）、本文には游ゴシックと、書体で役割を分ける
• 本文色は純黒ではなく #282828

Don't（禁止）

• box-shadow を足さない。 1箇所でも入れるとこのサイトの質感から外れる
• カードやボタンを角丸にしない（border-radius: 0 が既定）
• font-size: 30px に line-height: 28px をそのまま流用しない。 実サイトにはこの組み合わせがあるが、2行になると字面が重なる。新規実装では 30px 以上の見出しに line-height: 1.3 程度を別途当てること
• "Century Gothic", serif と書かない（サンセリフにセリフのフォールバックは誤り）。"Century Gothic", "Questrial", sans-serif とする
• Noto Sans JP を実装しない（宣言はあるが実測ですべて unloaded）
• /concept/ 系の旧実装（ＭＳ Ｐゴシック 先頭・#0066cc のリンク）を写さない
• バッジを丸めない（border-radius: 0 / padding: 0 4px）
• #ff0000 を設計色として使わない（注意喚起の1箇所限り）
• font-feature-settings: "palt" を足さない

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• ユーティリティボタン（9px / border-radius: 3px）は実サイトでタッチ基準を下回る。 モバイルでは 12px 以上に拡大し、タップ領域を 44px 確保すること

フォントサイズの調整

• 本文 14px は据え置き（line-height: 28px も維持）
• セクション見出し 30〜34px → モバイルでは 20〜24px。このとき letter-spacing は 0.1em のまま比率で維持する（px 固定で持ち込まない）
• 和欧2段の見出しは、モバイルでも2段を崩さない

9. Agent Prompt Guide

クイックリファレンス

Text Primary:   #282828   (純黒は使わない)
Text Secondary: #505050
Background:     #ffffff
Surface:        #ecebea
Border:         #c8c8c8
Accent (Brown): #725941
Accent (Green): #557857

Font (本文・UI): "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif
                 ※ @font-face で 100〜400 を local("Yu Gothic Medium") に上書きする
Font (見出し):   "Noto Serif JP", 游明朝体, "Yu Mincho", serif
Font (欧文):     "Century Gothic", "Questrial", sans-serif

Body Size:      14px
Line Height:    28px （絶対値。全サイズ共通）
Letter Spacing: normal（既定）/ 0.1〜0.2em（セクション見出し）/ 0.06〜0.08em（9〜12px）
palt:           使わない
Border Radius:  0   （カルーセル操作のみ 100px、極小ボタンのみ 3px）
Shadow:         なし（サイト全体で 0 件）
Container:      1200px
Section Gap:    60px / 90px / 120px

プロンプト例

カリモク家具のデザインシステムに従って、商品一覧ページを作成してください。

- 背景は白、カードの面は #ecebea、罫線は 1px solid #c8c8c8
- 本文色は #282828、補助テキストは #505050
- 本文は "Yu Gothic" 系 14px / line-height: 28px（絶対値）
- @font-face で "Yu Gothic" の font-weight 100〜400 を local("Yu Gothic Medium") に向ける
- 商品名の見出しは "Noto Serif JP"（明朝）20〜24px / line-height: 28px
- セクション見出しは英語（"Century Gothic", "Questrial", sans-serif / 16px / letter-spacing: 0.2em）と
  日本語（Noto Serif JP / 30px / letter-spacing: 0.1em）の2段で組む。ただし 30px には line-height: 1.3 を当てる
- box-shadow は一切使わない。border-radius は 0
- ボタンは白地 + 1px solid #c8c8c8 + padding: 15px 10px + 18px、角丸なし
- バッジは border-radius: 0 / padding: 0 4px / 11px / 白文字、面色は #bba685（重要）#a0ccc4（お知らせ）#e1cc84（イベント）
- セクション間の余白は 60px / 90px、コンテナは 1200px
- font-feature-settings: "palt" は使わない