飛騨産業 (HIDA) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

対象サイト: https://kitutuki.co.jp/ 飛騨産業（HIDA）は岐阜県高山市の木製家具メーカー。1920年創業、キツツキマークで知られる。 実測はコーポレート／オンラインストア統合トップページの computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白の余白と 1px の細罫だけで構成する、限りなく無装飾なギャラリー型。家具と森の写真が唯一の色面で、UI 側は色・影・角丸をすべて捨てている
• 密度: 低密度。ファーストビューは全画面の写真スライダーと透過ヘッダーのみで、テキストはほぼ載せない
• キーワード: 静謐 / 素木（しらき） / 端正 / 余白 / 職人的
• 形状言語: すべて直角（border-radius: 0）。角丸を使うのはスライダーのドット・SNS アイコン等の完全な円（50%）だけ。ボタンも塗らず、1px solid #dcdcdc の細い矩形で囲うだけ
• 奥行き: box-shadow がサイト全体で 1 つも存在しない。重なりは白面と細罫と余白だけで表現する完全なフラット設計
• 書体の性格: Web フォントを一切読み込まず、游ゴシック体のみで組む。その代わり letter-spacing: 0.1em を全要素にグローバル適用し、字間の広さで「木肌の間（ま）」のような静けさを作っている。これが本サイト最大の特徴
• 差し色: 面としての差し色は無い。唯一の彩度色はお知らせ日付の朱赤 #c82832 のみ

2. Color Palette & Roles

Base（下地）

• Background (#ffffff): ページ全体の下地。純白。ヘッダー展開メニュー・カード面も同じ純白
• Surface (#f5f5f5): フッター全域の面色。白からごくわずかに沈めるだけのライトグレー
• Surface Dark (#282828): 検索モーダルのボタン面・SP メニューの帯など、反転させたい局所にだけ使う墨色
• Overlay (rgba(0,0,0,0.6)): モーダル背後の暗幕

Text（文字色）

• Text Primary (#282828): 見出し・本文・ナビ・ボタン文字。純黒ではなく墨色。サイト内の文字色の圧倒的多数（実測 676 要素）
• Text on Image (#ffffff): 写真・墨色面の上に載る文字（ヒーロー上のロゴ、展開メニュー内リンク）
• Text Muted (#a0a0a0): 非選択の言語切替（EN）など、明確に沈める補助テキスト
• Text Subtle (#f0f0f0): 写真上に重なる非選択リンク（白背景の反対側の沈め方）
• Text UA Black (#000000): ヘッダー検索まわりの一部（ブラウザ既定色が残っている箇所）。新規実装では使わず #282828 に寄せる

Accent（差し色）

• News Red (#c82832): お知らせ一覧の日付テキストのみに使う朱赤。面には絶対に使わない、文字色専用のアクセント

Line（罫）

• Border (#dcdcdc): 区切り線・ボタンの枠・カードの枠。サイト内で唯一の罫色（実測 14 箇所）。1px solid で統一

色に関する設計思想

• 塗り面は「白・#f5f5f5・#282828」の3枚だけ。中間のグレー面を作らない
• 枠線は 1 色（#dcdcdc）・1 太さ（1px）に統一する。太くしたり濃くしたりして階層を作らない
• 彩度のある色は日付の朱赤 1 点のみ。ボタンやバッジに色を足すとサイトの静けさが崩れる
• 色ではなく「白い余白の量」で階層を作るのがこのサイトの流儀

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体（Yu Gothic）単独。Web フォントは一切読み込んでいない（実測: 全 889 要素が同一の游ゴシックチェーン）
• 明朝体: 使用しない
• 注意: 游ゴシックは macOS / Windows のシステムフォント。Windows では標準ウェイトが細すぎるため、チェーン内で 游ゴシック Medium / Yu Gothic Medium を明示的に拾う指定になっている（後述 3.3）

3.2 欧文フォント

• サンセリフ: 専用指定なし。欧文（HIDA / JP / EN / 日付）も游ゴシック体の Latin グリフで組む。最終フォールバックのみ sans-serif
• ロゴ: ヘッダーの「HIDA」はフォントではなく画像／SVG。極端に字間を開いた細身のジオメトリック大文字で、本文書体とは別系統
• セリフ / 等幅: 使用しない

代替フォントの注記: 游ゴシックは macOS / Windows には標準搭載だが、Linux や一部環境では存在しない。 preview.html では実チェーンをそのまま指定したうえで、末尾に Google Fonts の Zen Kaku Gothic New（游ゴシックに近い小さめの字面・低コントラストの人文的ゴシック）を フォールバックとして追加している。Noto Sans JP は字面が大きく骨格が硬いため、 本サイトの繊細な印象からは離れる。

3.3 font-family 指定

css/* 本文・見出し・ナビ・ボタン すべて共通（サイト全体でこの1本のみ） */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
  游ゴシック, "Yu Gothic", sans-serif;

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

• 先頭は macOS の PostScript 名（游ゴシック体 / YuGothic）
• 続いて Windows 向けに Medium を先に拾う（游ゴシック Medium / Yu Gothic Medium）。Windows の游ゴシック Regular は線が細く潰れるため、Medium を優先するのが定石
• 最後に Regular（游ゴシック / Yu Gothic）→ sans-serif
• 和文単独チェーン。欧文専用フォントを先頭に置かない＝和欧すべて游ゴシックで組む

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

ウェイトは 400 / 600 / 700 の 3 段のみ。300 や 500 は使わない。

3.5 行間・字間

• 本文の行間 (line-height): 1.75（16px 本文に対し 28px）。見出しも同じ 1.75（24px に対し 42px）で、本文と見出しの行間比率を揃えるのがこのサイトの特徴
• 見出しの行間: 1.75（本文と同値）。ナビだけ 1.0 で 1 行に固定
• 本文の字間 (letter-spacing): 0.1em（16px に対し 1.6px）をグローバル適用。実測 806 要素が 1.6px
• 見出しの字間: 見出しも同じ 1.6px 実値。ただし font-size が違うため em 換算では見出し 24px = 0.067em、ナビ 12px = 0.133em と小さい文字ほど相対的に広がる
• ボタンの字間: 0.75px（15px に対し 0.05em）とやや詰める

ガイドライン:

• letter-spacing は px の固定値（1.6px）で全体に効かせるのが実装の実態。em で書き直すと小サイズの字間が詰まり、サイトの印象が変わる点に注意
• 日本語で 0.1em は相当広い部類。本サイトの静けさはここに依存しているので詰めない
• 行間 1.75 を下回らせない

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
word-break: normal;      /* 日本語の自然な折り返しに任せる */
line-break: strict;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《
• 見出しは短い語（「ピックアップ」「お知らせ」「木工の聖地　飛騨高山」）で構成し、そもそも折り返さない設計にする

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使用しない */

• palt は全要素で OFF（実測: font-feature-settings が normal 以外の要素は 0 件）
• 理由は明快で、letter-spacing: 0.1em でベタ組みを意図的に開いているため、palt で詰めると設計が相殺される
• このサイトを再現する際は palt を有効にしない

3.8 縦書き

該当なし。全面横組み。

4. Component Stylings

Buttons

このサイトには塗りボタンが存在しない。すべてアウトライン（枠線）ボタン。

Primary（アウトライン・矩形） — .btn_link

• Background: transparent
• Text: #282828
• Border: 1px solid #dcdcdc
• Border Radius: 0px
• Width: 400px（PC。中央寄せ）
• Font Size: 16px / Weight 400 / Line Height 1.75
• Letter Spacing: 0.1em
• 右端に > の細線シェブロン（SVG, stroke #282828）を配置

Secondary（アウトライン・左寄せ） — .c-sib2-btn

• Background: transparent
• Text: #282828
• Border: 1px solid #dcdcdc
• Border Radius: 0px
• Padding: 15px
• Text Align: left
• Font Size: 15px / Line Height 1.62 / Letter Spacing 0.05em

Menu Button — .c-headerMenuBtn

• Background: #ffffff
• Text: #000000
• Border: なし
• Font Size: 15px / Line Height 50px（行高で高さを作る）/ Letter Spacing 0.107em

ホバー: 塗りを足さず、枠線または文字色をわずかに濃くする程度に留める。色を反転させない。

Inputs

• Background: #ffffff
• Border: 1px solid #dcdcdc
• Border (focus): 1px solid #282828（枠線色を墨色に置き換える。リング／シャドウは使わない）
• Border Radius: 0px
• Padding: 12px 15px
• Font Size: 16px（iOS のズーム防止のため 16px 未満にしない）
• Height: 48px 前後

エラー: 枠線を #c82832 に、エラーメッセージ文字も #c82832。背景は塗らない。

Cards

• Background: #ffffff
• Border: なし（写真そのものがカードの輪郭）
• Border Radius: 0px
• Padding: 0（画像は天地左右いっぱい、テキストのみ画像下に 16px 程度の余白で配置）
• Shadow: なし（Depth & Elevation 参照）
• キャプションは中央寄せ・16px / 400 / 0.1em

Divider

• 1px solid #dcdcdc。フッターのセクション区切り・ボタン下線に使う唯一の罫

5. Layout Principles

Spacing Scale

実測から逆算した 4 の倍数ベースのスケール。

Container

• Max Width: 1280px（.l-container）
• Padding (horizontal): 50px → コンテンツ幅 1180px
• ピックアップ等の一部ブロックのみ 1200px / padding 10px
• ヒーロースライダーは全幅（100vw、コンテナ外）

Grid

• Columns: 4（フッターナビ・カテゴリカード）、2（大判の商品カード）
• Gutter: 20px〜30px
• カードは正方形〜横長（およそ 3:2）の写真＋下部中央キャプション

Header

• position: fixed、高さ 80px 前後
• ヒーロー上では背景透過（s-topContents）、スクロール後に白背景へ切り替わる
• 構成: 左＝ロゴ、中央＝グローバルナビ（12px/600）、右＝検索・アカウント・カート・言語切替・ハンバーガー

6. Depth & Elevation

• 実測で box-shadow を持つ要素はサイト全体で 0 件
• 奥行きは (1) 白と #f5f5f5 の面の切り替え、(2) 1px solid #dcdcdc の罫、(3) 余白の量 の 3 手段だけで表現する
• モーダルのみ背後に rgba(0,0,0,0.6) の暗幕を敷くが、モーダル自体に影は付けない
• このデザインシステムで影を足すと即座に別物になる。カードにもドロップダウンにも影を付けない

7. Do's and Don'ts

Do（推奨）

• letter-spacing: 1.6px（16px 本文で 0.1em）をグローバルに効かせる。字間の広さがこのブランドの声
• 行間は本文・見出しともに 1.75 で揃える
• ボタンは 1px solid #dcdcdc のアウトライン矩形。右端に細線シェブロン > を添える
• 罫線は #dcdcdc 1色・1px のみに統一する
• 文字色は #282828。写真の上に載せるときだけ #ffffff
• 写真を主役にし、UI は白と細罫に徹する
• font-family チェーンに Windows 向けの Yu Gothic Medium を必ず含める

Don't（禁止）

• border-radius を付けない（円形アイコン以外はすべて直角）
• box-shadow を使わない（サイト内に実例が 1 つも無い）
• 塗りボタンを作らない。ブランド色でボタンを塗る CTA はこのサイトに存在しない
• palt を有効にしない（letter-spacing 0.1em と喧嘩する）
• 文字色に純黒 #000000 を新規で使わない（既存の #000000 はブラウザ既定の残り。#282828 に寄せる）
• 朱赤 #c82832 を背景色・ボタン色として使わない（日付の文字色専用）
• 日本語本文で line-height を 1.75 未満にしない
• 中間グレーの面色を増やさない（面は白 / #f5f5f5 / #282828 の 3 枚のみ）

8. Responsive Behavior

Breakpoints

実測の media query から主要なもの。

補助的に 640px / 930px / 1250px / 1360px のクエリも存在する。

タッチターゲット

• 最小サイズ: 44px × 44px
• ヘッダーのアイコンボタンは 48px 角相当（line-height: 48px で確保）
• SP のメニュー項目は line-height: 50px で高さを取る

フォントサイズの調整

• 本文 16px は SP でも据え置き（入力欄も 16px 未満にしない）
• セクション見出し h2 は 24px → 20px 程度に縮小
• ボタン幅 400px は SP では 100%（左右 20px の余白付き）
• 字間 0.1em は SP でも維持する（縮めない）

9. Agent Prompt Guide

クイックリファレンス

Primary Color:  なし（塗りボタン非使用）
Text Color:     #282828
Background:     #ffffff
Surface:        #f5f5f5
Border:         #dcdcdc （1px solid, 唯一の罫色）
Accent (text):  #c82832 （日付のみ）
Font:           游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif
Body Size:      16px
Line Height:    1.75
Letter Spacing: 1.6px (= 0.1em)
Border Radius:  0
Box Shadow:     none
palt:           off

プロンプト例

飛騨産業（HIDA）のデザインシステムに従って、木製家具の商品一覧ページを作成してください。

- 背景は #ffffff、文字色は #282828、フッターのみ #f5f5f5
- font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif
- letter-spacing: 1.6px を body にグローバル適用（palt は使わない）
- line-height は本文・見出しともに 1.75
- border-radius はすべて 0、box-shadow は一切使わない
- 罫線は 1px solid #dcdcdc のみ
- ボタンは塗らず、transparent 背景 + 1px solid #dcdcdc の矩形。右端に細線の > を置く
- カードは商品写真＋下部中央にキャプション（16px / 400）。枠線も影も付けない
- コンテナは max-width 1280px、左右 padding 50px