Karimoku New Standard（カリモク ニュースタンダード） DESIGN.md

Karimoku New Standard 公式サイト（https://www.karimoku-newstandard.jp/）のデザイン仕様書。 2009 年に老舗木製家具メーカー「カリモク家具」が設立した、新しい日本の家具デザインを提案するブランド。 国内外のデザイナーと共同で広葉樹の未利用材を活用した高品質な家具を作る。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白 #ffffff × 純黒 #000000 のみ で構成された、極限まで切り詰めた展示図録的ミニマリズム。家具の写真を主役にし、UI は文字組と余白だけで成立する
• 密度: 情報密度は中程度。商品グリッドはゆとりを持って配置され、画像と短い英日テキストが並ぶ図録レイアウト
• キーワード: モリサワ A-OTF 太ゴ B101 Pr6N、nimbus-sans、純白純黒、全 weight 400、和欧二段組、negative letter-spacing、square、ALL CAPS、CTAなし
• 特徴:
  • メインフォントはモリサワ「A-OTF 太ゴ B101 Pr6N」（a-otf-futo-go-b101-pr6n、Adobe Fonts 経由）— 日本語ゴシックの古典的名作。クセのある独特の骨格で家具のクラフト感と相性が良い
  • 英文セカンダリは nimbus-sans（Adobe Fonts のサンセリフ）— 「特集 / featured」「カテゴリー / category」のように日本語 + 英訳の二段組 で表記する展示図録スタイル
  • 全要素 weight 400 のみ — 太字を一切使わず、文字の太さで階層を作らない
  • negative letter-spacing（-1.6px / -8.05px）が大きな特徴 — 大見出しの和文には -1.6px（約 -0.08em）、英文サブ見出しには -8.05px（約 -0.35em の極端な詰め）を入れて、書体の塊として読ませる
  • CTA らしい CTA がほぼ存在しない — uniqueBackgrounds と interactive は両方とも 0 件。すべてのリンクがテキストリンク（黒文字 + 黒下線 or 矢印「→」のみ）
  • font-feature-settings: "halt" が h3 で使われる — halt は「半角約物のメトリクス字幅」OpenType 機能。約物の幅を半角扱いし、和文の組み版を引き締める
  • 全テキスト純黒 #000000 — ソフトブラックではない、明確な純黒を選ぶ硬派な姿勢
  • すべて padding: 0px — コンポーネントレベルでの装飾的余白を取らず、レイアウトレベルで間隔を制御
  • border-radius: 0px — すべての要素が完全な直角

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand / Foreground

• KNS Black (#000000): すべてのテキスト・罫線・アイコンの色。純黒を一貫して使用
• KNS White (#ffffff): ページ背景・面色（コンポーネント単位の背景は透過）

Surface

• Page White (#ffffff): ページ標準背景（background-color: rgba(0, 0, 0, 0) で透過 = body 背景の白が透ける）
• すべて透過 — カードやセクション単位で背景色を変えない徹底ぶり

Border / Hairline

• Hairline Black (#000000): ナビ間の細罫線・商品カードの区切り線として使う場合あり

Note: Karimoku New Standard のパレットは 「黒と白の二色のみ」。色を一切使わず、写真（家具の木目・素材感）が誌面の唯一の彩りとなる。展示図録・モノグラフ的な視覚言語。

3. Typography Rules

3.1 和文フォント

ゴシック体（Webフォント先頭 + システムスタック）:

• a-otf-futo-go-b101-pr6n（Adobe Fonts 経由のモリサワ「A-OTF 太ゴ B101 Pr6N」、最優先）
• 游ゴシック体（カナ表記、フォールバック先頭）
• YuGothic（Macmac 旧表記）
• "Yu Gothic"（クォート付き）
• "ヒラギノ角ゴ Pro W3"（macOS フォールバック）
• "Hiragino Kaku Gothic Pro"（同上、英語表記）
• メイリオ / Meiryo（Windows）
• "ＭＳ ＰゴシックMS PGothic"（Windows レガシー）

3.2 欧文フォント

• nimbus-sans（Adobe Fonts のサンセリフ、英文サブ見出し専用）
• フォールバック: sans-serif

3.3 font-family 指定

css/* 本文・UI 全般（メインフォント） */
font-family: a-otf-futo-go-b101-pr6n, 游ゴシック体, YuGothic, "Yu Gothic",
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
             メイリオ, Meiryo, "ＭＳ ＰゴシックMS PGothic", sans-serif;

/* 英文サブ見出し（featured / category 等） */
font-family: nimbus-sans, sans-serif;

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

• Adobe Fonts の Webフォント先頭 — a-otf-futo-go-b101-pr6n（モリサワ太ゴ B101 Pr6N）が最重要
• 和文先頭スタック — Webフォントが読み込めない場合は OS フォントの 游ゴシック → ヒラギノ → メイリオ
• 二系統の使い分け — 和文は太ゴ B101 Pr6N、英文サブ見出しのみ nimbus-sans

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

3.5 行間・字間

• 本文 line-height: 1.8（36px / 20px）— 日本語本文として広め
• 商品名・連載タイトル line-height: 1.6（32px / 20px）
• 見出し line-height: 1.0（タイトな組み）
• letter-spacing:
  • 通常テキスト: normal
  • 和文大見出し（「特集」「カテゴリー」）: -1.6px（-0.08em）の負の字詰め
  • 英文サブ見出し（「featured」「category」）: -8.05px（-0.35em の極端な詰め） — nimbus-sans の文字を密集させる
• 意図: ALL CAPS の英文を「文字の塊」として配置するため、極端なネガティブトラッキングで密度を上げる

3.6 禁則処理・改行ルール

• デフォルト挙動を尊重 — word-break: keep-all 等は明示的に指定しない
• 商品説明等のブランドテキストは line-height 1.8 で十分なゆとりを確保

3.7 OpenType機能

css/* h3（連載タイトル等） */
font-feature-settings: "halt";  /* 半角約物の幅で和文を引き締める */

/* その他はすべて normal */
font-feature-settings: normal;

• halt: 「Half-width Alternates」— 約物（、。「」など）を半角字幅で表示する。日本語組版を引き締めるための機能。h3 タイトルでのみ使用
• palt は使わない — モリサワ太ゴ B101 Pr6N の素の組版を尊重

3.8 縦書き

• 通常コンテンツでは未使用

4. Component Stylings

Buttons

• CTA ボタンは存在しない — interactive 抽出で 0 件。すべてのリンクがテキストリンク
• ボタン要素は MENU / category 等の極小なナビ要素のみで、装飾なし
• font-size: 20px / weight 400
• 背景透過、罫線なし、padding 0px、border-radius 0px

Links

• 文字色: #000000
• text-decoration: 通常は none、ホバー時に下線
• 末尾に「→」を付けて遷移を示すパターン（line-height 36px）
• 装飾は控えめ、テキストそのものがリンクであることを示す

Navigation

• font-family: a-otf-futo-go-b101-pr6n
• font-size: 20px（メイン）/ 14px（サブ）/ 10px（極小）
• font-weight: 400
• letter-spacing: normal
• 背景透過、罫線なし
• 横並びの ALL CAPS（PRODUCTS / ABOUT / NEWS / CONTRACT / DESIGNERS / SHOP / STORIES）

Section Title (和欧二段組)

css/* 和文部分 */
.section-title-jp {
  font-family: a-otf-futo-go-b101-pr6n, sans-serif;
  font-size: 22px;       /* または 20px */
  font-weight: 400;
  letter-spacing: -1.6px; /* -0.08em の負の字詰め */
}

/* 英文部分 */
.section-title-en {
  font-family: nimbus-sans, sans-serif;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -8.05px; /* -0.35em の極端な負の字詰め */
}

• 「特集 featured」「カテゴリー category」 のように、日本語と英語を並べる図録的構成
• 英文には極端なネガティブトラッキングを適用し、文字の塊として表現

Cards (Product Card)

• 背景: 透過（白が透ける）
• 罫線: なし、または極細
• 影: なし（フラット）
• 角丸: 0px
• padding: 0px（コンポーネント内余白なし、レイアウト側で制御）
• 商品画像 + h2 商品名（20px / 32px line-height）+ 価格（控えめ）

5. Layout Principles

• コンテンツ幅: 制約は緩く、商品画像をフルブリードで配置することも多い
• ヒーロー: 大判の家具画像 + 極小タイポ（h1 10px のロゴ）
• 商品グリッド: 2〜3 列、画像主役、テキストは商品名 + 価格のみ
• 余白で語る — コンポーネント単位の padding は 0px、セクション単位で大きな余白を取る
• 和欧二段組 — セクションヘッダーは「日本語 / English」の縦・横並び
• ALL CAPS のナビゲーション — グローバルナビは PRODUCTS / ABOUT / NEWS のように全大文字

6. Depth & Elevation

• 影: box-shadow: none 完全フラット
• 段階表現: 影や面色の差を一切使わず、写真と余白だけで奥行きを作る
• 罫線: 1px solid #000000 を最小限。見出しの下線や商品カードの区切りに使う場合あり

7. Do's and Don'ts

Do's

• a-otf-futo-go-b101-pr6n（モリサワ太ゴ B101 Pr6N） を本文・UI で使う
• nimbus-sans を英文サブ見出しに使い、和欧二段組を作る
• 文字色は純黒 #000000、背景は純白 #ffffff
• font-weight は 400 のみ — 太字を使わず、サイズと余白で階層を作る
• letter-spacing は normal（本文）と -1.6px / -8.05px（大見出し）の二択
• border-radius: 0px、padding: 0px が基本
• CTA はテキストリンク + 「→」矢印で遷移を示す
• line-height: 1.8（本文）/ 1.0（見出し） で抑揚を作る
• font-feature-settings: "halt" を必要に応じて使う

Don'ts

• 色を使わない — 黒白二色を徹底
• 太字を使わない — weight 400 のみ
• 影や立体感を作らない — 完全フラット
• 角丸を入れない — すべて直角
• palt を使わない — モリサワ書体の素の組版を尊重
• 罫線を多用しない — 黒罫は最小限
• CTA に塗りボタンを使わない — テキストリンクが基本
• ソフトブラック（#101010 等）を使わない — 純黒一択
• Webフォントが読み込めない場合のフォールバック先を 1 つに絞らない — 游ゴシック → ヒラギノ → メイリオの順で広く対応

8. Responsive Behavior

• デスクトップ: 2〜3 列の商品グリッド + ALL CAPS の横並びナビ
• タブレット (768〜1024px): 2 列に折り畳み
• モバイル (〜767px): 1 列、ナビはハンバーガー（MENU ボタン）
• フォントサイズはほぼ固定（10px / 14px / 20px / 22px の固定スケール）
• ヒーロー画像はクロップして縦長に

9. Agent Prompt Guide

Karimoku New Standard らしい UI を生成するときは以下を伝えるとよい：

- 本文 font-family: a-otf-futo-go-b101-pr6n, 游ゴシック体, YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
- 英文サブ font-family: nimbus-sans, sans-serif
- 文字色: 純黒 #000000、背景: 純白 #ffffff（二色のみ）
- font-weight: 400 のみ（太字を使わない）
- 本文 line-height: 1.8（36px / 20px）— 広め
- 見出し line-height: 1.0（タイトに）
- letter-spacing: normal（本文）/ -1.6px（和文大見出し）/ -8.05px（英文サブ見出し、極端な詰め）
- セクションタイトルは「特集 / featured」のような和欧二段組
- すべての要素 padding: 0px、border-radius: 0px、影なし
- CTA はテキストリンク + 「→」矢印（塗りボタンを使わない）
- グローバルナビは ALL CAPS の英字（PRODUCTS / ABOUT / NEWS / CONTRACT / DESIGNERS / SHOP / STORIES）
- font-feature-settings: "halt" を h3 で使い、約物を半角字幅に
- Adobe Fonts (a-otf-futo-go-b101-pr6n + nimbus-sans) の読み込みが前提
- 写真（木目・素材感）が誌面の唯一の彩り — UI は黒白で消す展示図録スタイル