Design System Preview
飛騨産業 HIDA

DESIGN.md から抽出したデザイントークンのカタログ。角丸ゼロ・影ゼロ・letter-spacing 0.1em という、白と細罫だけで構成された設計を可視化する。すべて computed style の実測値に基づく。

カラーパレットを見る タイポグラフィ階層を見る

01 / Colors

カラーパレット

Base — 面色は3枚だけ
Background
#ffffff
ページ全体の下地
Surface
#f5f5f5
フッター全域の面
Surface Dark
#282828
反転させる局所面
Overlay
rgba(0,0,0,0.6)
モーダル暗幕
Text
Text Primary
#282828
見出し・本文・ナビ(墨色)
Text on Image
#ffffff
写真・墨色面の上の文字
Text Muted
#a0a0a0
非選択の言語切替など
Text Subtle
#f0f0f0
写真上の非選択リンク
UA Black
#000000
既定色の残り/新規は不可
Accent & Line — 唯一の彩度色と唯一の罫色
News Red
#c82832
お知らせ日付の文字色のみ
Border
#dcdcdc
1px solid。罫はこの1色のみ

02 / Typography — 実測値

タイポグラフィ階層

HIDA
32px / 400 / letter-spacing: 0.28emロゴ(実体は画像/SVG)
木工の聖地 飛騨高山 — Section Heading (h2)
24px / 700 / line-height: 1.75 / letter-spacing: 1.6px (0.067em) / palt: なし.c_title
商品情報/オンラインストア — Footer Heading (h5)
13px / 600 / line-height: 1.75 / letter-spacing: 1.6px (0.123em)フッター見出し
納入事例 お知らせ 会社情報 — Global Nav
12px / 600 / line-height: 1.0 / letter-spacing: 1.6px (0.133em)グローバルナビ
飛騨の匠の技を受け継ぎ、国産の広葉樹を家具に変えてきました。本文 — Body 16px
16px / 400 / line-height: 1.75 / letter-spacing: 1.6px (0.1em)本文(実測 579 要素)
飛騨産業の強みと納入事例について — Button 15px
15px / 400 / line-height: 1.62 / letter-spacing: 0.75px (0.05em).c-sib2-btn
2026/07/03 — Caption 12.8px
12.8px / 400 / line-height: 1.75 / letter-spacing: 1.6px (0.125em)日付・注記
© Hida Sangyo Co., Ltd. — Small 12px
12px / 400 / line-height: 1.75 / letter-spacing: 1.6px (0.133em)コピーライト
letter-spacing: 0 — 字間を詰めると、このサイトの静けさは失われる
比較用(非推奨)。実サイトは全 806 要素が letter-spacing: 1.6pxDon't

商品ページの組版サンプル

2026/07/03 新商品

デザイナー 熊野 亘 氏とのコラボレーションモデル「kei」

節や色の違いを含んだ国産広葉樹を、そのまま素材として受け入れる。飛騨の職人が長年培ってきた曲木と圧縮の技術で、木の個体差を活かした一脚に仕上げました。

kei アームチェア/ホワイトオーク・オイル仕上げ 撮影協力:鈴木大拙館

木を使い切るという考え方

創業から一世紀、飛騨産業は「木を活かす」ことを軸に家具をつくってきました。曲木の技法は、直線の板からは生まれない柔らかな輪郭を可能にします。杉の圧縮技術は、これまで家具に向かないとされてきた針葉樹を、堅く美しい素材へと変えました。

本文の行間は 1.75、字間は 0.1em。日本語としてはかなり広い設定ですが、白い余白とあいまって、読み手の呼吸を整えるようなリズムを作ります。見出しも本文と同じ行間 1.75 を共有するのが、このサイトの組版の特徴です。

※ 天然木を使用しているため、色味・木目には個体差があります。

オンラインストアトップ

04 / Buttons — 塗りボタンは存在しない

ボタンバリエーション

オンラインストアトップ
Primary(.btn_link)— transparent / 1px solid #dcdcdc / radius 0 / width 400px / 16px
飛騨産業の強みと納入事例について
Secondary(.c-sib2-btn)— padding 15px / 15px / letter-spacing 0.05em / 左寄せ
WEBカタログ
Menu(.c-headerMenuBtn)— background #ffffff / line-height 50px で高さを作る
検索する
Inverse — background #282828 / text #ffffff。検索モーダル等の局所反転のみ

05 / Cards — 枠線も影も付けない

カードコンポーネント

WEBカタログ
サポート
店舗情報
会社情報
▸ カテゴリーから探す
▸ シリーズから探す
カードは写真そのものが輪郭。border-radius 0 / box-shadow none / 枠線なし。キャプションは中央寄せ 16px。下線は 1px solid #dcdcdc

06 / Forms

フォーム要素

デフォルト — border: 1px solid #dcdcdc / radius: 0 / height: 48px
フォーカス — border-color を #282828 に置換。リング・シャドウは使わない
メールアドレスの形式が正しくありません
エラー — border-color: #c82832。背景は塗らない

07 / Elevation — box-shadow はサイト内に0件

Depth & Elevation

Level 0 — 罫
1px solid #dcdcdc。奥行きはこれで作る
Level 0 — 面
#f5f5f5。白との差だけで層を分ける
Level 0 — 反転
#282828。最前面の局所にのみ使う
実測で box-shadow を持つ要素は 0 件。カードにもドロップダウンにもモーダルにも影を付けない。モーダルは背後に rgba(0,0,0,0.6) の暗幕を敷くだけ

08 / Layout — 実測値

コンテンツ幅とスペーシング

Container (.l-container) 1280px
Content (padding 50px 差引後) 1180px
Pickup Block 1200px
Button Width 400px
Spacing Scale
XS
8px — アイコンとラベルの間
S
16px — カード内テキスト間
M
24px — 見出しの上下 padding
L
50px — コンテナ左右 padding
XL
60px — セクション下 padding
XXL
120px — セクション間の抜き
Breakpoints
Mobile ≤ 767px / Tablet 768–1023px / Desktop ≥ 1024px / Wide ≥ 1280px