Hacoa（ハコア） DESIGN.md

Hacoa（https://www.hacoa.com/）のデザイン仕様書。 福井・越前の木地職人集団「山口工芸」が 2001 年に立ち上げた、木製デザイン雑貨のブランド。木製キーボード・時計・iPhone ケースなど、無垢材を削り出したプロダクトを自社でデザインから製造まで一貫して手がける。 写真が主役で、UI はほぼ何もしない。全画面の木の写真にスクリムを敷き、その上に白文字と枠だけのピルを置く。彩度を持つ要素はアンバーのリンク 1 色しかない。 本文の line-height が 2.4（15px に対し 36px）。日本語サイトとしても相当に広い部類で、これが余白の多さを作っている。CSS 中の line-height 宣言でも 2（58 回）・2.4（41 回）が上位を占める。 見出しに 2 種類の書体を使い分ける。ブランドを語るヒーロー見出しだけ明朝（--tcd-font-type2）、セクション見出しと本文はゴシック（--tcd-font-type1）。同じ H2 タグで書体が変わるので、タグではなく役割で判断する。 WordPress ＋ TCD 系テーマ。フォントは --tcd-font-type1〜3 の 3 系統＋ロゴ用の 4 変数だけで管理されており、色のトークンは存在しない（すべて実装に直書き）。 実サイトの computed style 実測（2026-08-28 取得。トップ ＋ 商品開発ページ /products/）＋ 読み込まれる CSS 923KB の直接集計に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 写真に語らせ、UI は消す。ファーストビューは 100vh の木製プロダクトの俯瞰写真で、ナビゲーションは透明のまま重なる。ボタンは面を持たず、白 1px の枠だけで置かれる
• Hacoa について: 越前漆器の木地師の技術を、現代のプロダクト（キーボード、名刺入れ、時計、ノート PC スタンド）に転用したブランド。「素材＝無垢材」が最大の視覚資産なので、サイトはその写真を邪魔しない方向に全振りしている
• 密度: 低い。コンテンツ幅は 850px（1440px ビューポート）に絞られ、本文の行間は 2.4。1 画面に入る情報量は同カテゴリの EC より明確に少ない
• キーワード: 全画面写真、黒スクリム、白の枠線ピル、line-height: 2.4、明朝の見出し、アンバー 1 色
• 特徴:
  • セクションの境目が「写真の切り替わり」。区切り線ではなく、全幅の写真ブロックを縦に積んで場面転換する。写真の上には必ず rgba(0,0,0,.3) 〜 .5 のスクリムが入り、白文字のコントラストを確保している
  • CTA は 3 種類しかない。①写真の上の白枠ピル、②白地の上の黒枠ピル、③黒塗りのピル。塗りボタンは白地のセクションにしか置かない
  • letter-spacing をほとんど触らない。CSS 中の宣言は 4 個だけで、実際に効いているのはグローバルナビの .03em のみ。見出しも本文も normal
  • font-feature-settings の宣言が 1 つも無い（＝ palt を使わない）。約物のアキは詰めない前提
  • radius が統一されていない。CTA は pill（9999px / 60px / 30px）、小さな UI 部品は 3〜5px、アイコンは 50%。pill と角丸を混ぜるのがこのサイトの流儀で、統一しようとすると印象が変わる
  • ⚠️ uniqueBackgrounds の 1 位 #c49a51（61 回）はブランド色ではない。Popup Maker プラグインの閉じるボタン（0×0px で不可視） 61 個。CSS 全文を検索しても c49a51 は 0 回（インラインスタイル）で、画面上のどこにも出てこない。同じく box-shadow の上位 2 件（61 回ずつ）も同じ非表示ポップアップ由来なので、色・影を拾うときは必ず除外する

2. Color Palette & Roles

地は #ffffff。pageBackground.resolved は ua-default-canvas（html / body ともに塗り指定なし ＝ CSS 仕様上のキャンバス既定色）。 下層ページで viewportTopByArea が rgb(0,0,0) を返すが、これはページ背景ではない。/products/ の上部が全幅のヒーロー写真＋黒スクリムだからで、コンテンツ領域は白のまま。

Brand（ブランド）

• Hacoa Amber (#dd9933, rgb 221,153,51): 唯一の彩度を持つ色。ニュース一覧のリンク（実測 30 個）、Instagram セクションの H3 見出し。CSS 全文には 0 回しか現れず、テーマカスタマイザーからインライン注入されている ＝ 変数を探しても見つからないので computed style を採用すること
• Bark Brown (#352f26, rgb 53,47,38): ヘッダー右端の外部リンクボタン（オンラインストア／直営店／リクルート）の面。CSS 出現 13 回。木の樹皮に寄せた暗褐色
• Warm Gray (#a39b8d, rgb 163,155,141): フッターのナビゲーションボタン（企業情報／SDGs／Hacoa の歩み）の面。CSS 出現 10 回。無垢材の白木に寄せた温かみのあるグレー

Neutral / Surface

Text

Scrim（写真の上に敷く暗幕）

css/* 標準のスクリム */
background: rgba(0, 0, 0, 0.3);

/* 濃いスクリム（ヘッダー直下・見出しが重なる領域） */
background: rgba(0, 0, 0, 0.5);

/* 上から下へわずかに濃くする */
background: linear-gradient(rgba(12, 12, 12, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);

rgba(0,0,0,.7) は CSS 出現 15 回でモーダル背景に使う。

⚠️ ブランド色として拾ってはいけない色

3. Typography Rules

3.1 和文フォント

Web フォントは読み込まず、OS のフォントに任せる。

• ゴシック体（既定）: ヒラギノ角ゴシック（Hiragino Sans） → 游ゴシック Medium → メイリオ
• 明朝体（ヒーロー見出し専用）: 游明朝 → ヒラギノ明朝 Pro
• 教科書体（--tcd-font-type3。トップでは未使用）: 游教科書体 → UD デジタル 教科書体 N
• ロゴ用: Noto Sans JP（--tcd-font-type-logo。ロゴ画像のフォールバックのみ）

3.2 欧文フォント

• サンセリフ: Arial（スタックの先頭）
• セリフ: Times New Roman → Times（明朝スタックの先頭）
• 等幅: 指定なし

3.3 font-family 指定

欧文優先のスタック。和文フォント内の欧文グリフより Arial / Times を先に当てる方針。

css/* --tcd-font-type1 : 本文・セクション見出し・ナビ（サイトの既定） */
font-family: Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;

/* --tcd-font-type2 : ヒーロー見出し（ブランドを語る大見出し） */
font-family: "Times New Roman", Times, "Yu Mincho", "游明朝", "游明朝体",
             "Hiragino Mincho Pro", serif;

/* --tcd-font-type3 : 教科書体（引用・詩的なコピー用に用意されている） */
font-family: Palatino, "Yu Kyokasho", "游教科書体", "UD デジタル 教科書体 N",
             "游明朝", "游明朝体", "Hiragino Mincho Pro", "Meiryo", serif;

/* --tcd-font-type-logo */
font-family: "Noto Sans JP", sans-serif;

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

• 欧文を先頭に置くので、Hacoa Haco - air などのブランド名は Arial の字形で出る
• 和文は ヒラギノ → 游ゴシック Medium → メイリオ の順。Windows で游ゴシックの Regular が細く出る問題は Medium を明示して回避している
• 明朝スタックには ProN が入っていない（Hiragino Mincho Pro）。約物の字形が ProN と異なる点に注意

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

font-weight: 450 に注意。フッター見出しだけが 450 で、Semibold（600）より軽く Regular（400）より重い。可変フォントではなく 游ゴシック / ヒラギノの合成太字が当たるので、環境によって見え方が変わりうる。

3.5 行間・字間

行間（CSS 宣言の実出現）

• 日本語本文は 2.0〜2.4 を使う。1.8 以下に詰めると Hacoa の余白感が失われる
• 見出しは 1.4〜1.5。大きい文字ほど比率を下げる

字間

• 原則 normal。CSS 中の letter-spacing 宣言は 4 個だけ
• 効いているのは グローバルナビの 0.03em（14px → 0.42px）のみ
• 見出しにトラッキングを入れない。明朝の大見出しも normal

3.6 禁則処理・改行ルール

• リード文は 1 行ずつ手で改行している。ヒーローの 6 行、セクション説明の 2 行は <br> で区切られており、ブラウザの自動折り返しに任せていない
• 意味のまとまりで折る（例:「木はさまざまな要素を含んだ完成した素材で」／「それぞれの香りや温かい感触があります」）
• コンテンツ幅 850px に対して本文 15px なので 1 行あたり約 56 字。折り返しを許す場合もこの長さを超えさせない
• word-break / overflow-wrap の指定は無く、ブラウザ既定の日本語禁則に任せる

3.7 OpenType 機能

css/* 指定なし。CSS 全文に font-feature-settings の宣言が 0 個 */

• palt を使わない。「」（）、。 のアキは詰めない
• 数字も プロポーショナル指定なし（tnum / pnum いずれも未使用）。日付「2026/08/24」は Arial の既定字形で出る

3.8 縦書き

• 使用しない。writing-mode の指定なし

4. Component Stylings

Buttons

① ゴーストピル（写真の上・最頻出）

cssbackground: transparent;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 60px;
font-size: 16px;
font-weight: 600;
padding: 0 20px;   /* 高さは line-height で作る */

写真セクションの「Hacoa の歩み」「商品開発」など、サイトで最も多く出る CTA。面を持たないので写真が透ける。

② アウトラインピル（白地の上）

cssbackground: transparent;
color: #000000;
border: 2px solid #000000;      /* 枠が 2px になる点に注意 */
border-radius: 9999px;          /* 30px の実装も混在 */
font-size: 16px;
font-weight: 700;
padding: 10.672px 21.28px;

#2d2d2d を枠と文字に使うバリエーションもある。

③ ソリッドピル（黒）

cssbackground: #000000;
color: #ffffff;
border: none;
border-radius: 9999px;          /* 30px の実装も混在 */
font-size: 16px;
font-weight: 700;
padding: 12.672px 23.328px;     /* ②より上下 2px 大きい＝枠の分を埋めている */

④ 反転ピル（白面・黒枠）

cssbackground: #ffffff;
color: #000000;
border: 2px solid #000000;
border-radius: 30px;
font-size: 16px;
font-weight: 700;
padding: 10.672px 21.28px;

⑤ フラットな矩形ボタン（一覧の「さらに読み込む」）

cssbackground: #333333;
color: #ffffff;
border-radius: 4px;
font-size: 13px;
font-weight: 400;
padding: 7px 14px;

⑥ フッターのナビゲーションボタン

cssbackground: #a39b8d;
color: #ffffff;
border-radius: 0;               /* 角丸なし */
font-size: 14px;
font-weight: 400;
padding: 14px 20px 12px;        /* 下だけ 2px 小さい */

⑦ ヘッダーの外部リンクボタン

cssbackground: #352f26;
color: #ffffff;
border-radius: 0;
font-size: 15px;
font-weight: 700;

Inputs

フォームは意図的に素の状態に近い。

css/* テキストエリア（問い合わせ） */
background: #ffffff;
color: #000000;
border: 1px solid #c1c1c1;
border-radius: 0;
font-size: 15px;

• input[type=text] は UA 既定のまま（2px inset）。検索欄などはブラウザの見た目を上書きしていない
• フォーカスリングの独自指定は無い。ブラウザ既定のフォーカス表示に任せている
• 実装時は最低限 border: 1px solid #c1c1c1 / border-radius: 0 に揃えると、他の入力欄と印象が一致する

Cards

cssbackground: #fafafa;    /* または #ffffff */
border-radius: 0;       /* 画像カードは角丸なし */
box-shadow: none;       /* 影を持たない */

• 商品・記事カードは全幅の写真そのもの。枠も影も角丸も付けず、写真の矩形をそのまま見せる
• タイトルは写真の上に白文字で乗せる（34px / 400 / #fff）

Badges / Tags

• 面色を持つバッジは存在しない。ニュース一覧はカテゴリバッジではなく 日付（#000 / 15px）とタイトルの 2 カラムで構成される

5. Layout Principles

Container

• 「850px の本文」と「全幅の写真」を交互に積むのが基本構造
• 写真セクションは 2 分割（720px + 720px）にすることが多い

Header

cssheight: 70px;           /* 固定 */
background: transparent;  /* ファーストビューでは透明、スクロールで塗る */

グローバルナビは 14px / line-height: 70px で、行高そのものがヘッダーの高さになっている。

Radius Scale

pill（9999px / 60px / 40px / 30px）と小角丸（3〜5px）を役割で使い分ける。CTA は pill、UI 部品は小角丸。

6. Depth & Elevation

影はほとんど使わない。 立体感は「写真 ＋ スクリム」で作る。

• カードにもボタンにも既定では影を付けない
• rgba(2, 2, 2, ...) という純黒より 2 だけ明るい黒を使う（テーマ由来）
• ⚠️ ランタイムで最多の影 rgba(2,2,2,.5) 0 10px 25px 4px（61 回）は非表示ポップアップのもの。実装の参考にしない

7. Do's and Don'ts

Do（推奨）

• 本文の line-height は 2.0〜2.4 を使う。Hacoa の余白感はこの行間で作られている
• ブランドを語る大見出しは明朝（--tcd-font-type2）、セクション見出しと本文はゴシック（--tcd-font-type1）に分ける
• 写真の上に文字を置くときは必ずスクリムを敷く（rgba(0,0,0,.3)〜.5）。木の写真は明度がまだらなので、スクリムなしでは白文字が読めなくなる
• CTA は pill にする。写真の上なら白 1px の枠、白地なら黒 2px の枠か黒塗り
• リード文は意味のまとまりで手動改行する（<br>）
• リンクとアクセントは #dd9933 だけを使う。彩度を持つ色を増やさない
• セクション見出しに letter-spacing を入れない（normal のまま）
• 和文フォントは ヒラギノ → 游ゴシック Medium → メイリオ。Windows 向けに Medium を明示する

Don't（禁止）

• #c49a51 をブランド色として使わない。抽出データで最多（61 回）だが、正体は 0×0px の不可視ポップアップの閉じるボタンで、画面上には存在しない
• #408bd1 を使わない。Instagram 埋め込みウィジェットの色であって Hacoa の色ではない
• 本文の行間を 1.8 以下にしない。密度が上がった瞬間にブランドの印象が変わる
• palt / font-feature-settings を足さない。このサイトは約物のアキを詰めない設計
• 見出しにトラッキングを入れない。効かせているのはグローバルナビの 0.03em だけ
• カードに影と角丸を足さない。写真の矩形をそのまま見せる
• 明朝スタックに Hiragino Mincho ProN を混ぜない（実装は Pro）。約物の字形が変わる
• --tcd-font-type1 の先頭 Arial を外さない。欧文が和文フォントの欧文グリフに落ちるとブランド名の字形が変わる
• radius を 1 種類に統一しない。pill と小角丸の併存がこのサイトの流儀

8. Responsive Behavior

Breakpoints

タッチターゲット

• ピル CTA は padding: 10.672px 21.28px ＋ 16px の文字で高さ約 44px。モバイルでもそのまま 44px を確保できる
• フッターナビ（12px / line-height: 60px）は行高で 60px の当たり判定を作っている

フォントサイズの調整

• 本文 15px はモバイルでも下げない。行間 2.4 を維持する
• ヒーロー見出しは 36px → 24〜28px、セクション見出しは 40px / 34px → 24px 程度に落とす
• ドロワー内のリンクは 14px / line-height: 1.6 のまま

9. Agent Prompt Guide

クイックリファレンス

ページ背景: #ffffff
本文:      15px / 400 / line-height 2.4 / #000000
           Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif
ヒーロー見出し: 36px / 600 / line-height 1.4 / #ffffff / 明朝
           "Times New Roman", Times, "Yu Mincho", "游明朝", "Hiragino Mincho Pro", serif
セクション見出し: 40px（白地・#000）/ 34px（写真上・#fff）/ 400 / line-height 1.4〜1.5
アクセント:  #dd9933（リンク・強調。サイト唯一の彩度）
面色:       #352f26（ヘッダー外部リンク）/ #a39b8d（フッターナビ）/ #333333（汎用ボタン）
CTA:       ゴーストピル transparent / #fff 文字 / 1px solid #fff / radius 60px / 16px 600
           ソリッドピル #000 / #fff 文字 / radius 9999px / 16px 700 / padding 12.672px 23.328px
コンテンツ幅: 850px（写真セクションのみ全幅）
ヘッダー:   70px 固定・初期は透明
字間:       normal（グローバルナビのみ 0.03em）
palt:      使わない
影:        原則なし（必要なら 0 0 10px 0 rgba(0,0,0,.15)）

プロンプト例

Hacoa（https://www.hacoa.com/）のデザインで、木製プロダクトのブランド紹介ページを作ってください。

- ページ背景は #ffffff
- 本文は Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif の 15px / 400、
  line-height は 2.4（36px）
- ブランドを語るヒーローの大見出しだけ明朝
  （"Times New Roman", Times, "Yu Mincho", "游明朝", "Hiragino Mincho Pro", serif）の
  36px / 600 / line-height 1.4、白文字
- セクション見出しはゴシックの 40px / 400（白地）または 34px / 400（写真の上・白文字）
- 全幅の写真セクションと 850px のテキストセクションを交互に積む
- 写真の上には必ず rgba(0,0,0,.3) のスクリムを敷き、白文字を乗せる
- CTA は写真の上なら「transparent / 白文字 / 1px solid #fff / border-radius 60px /
  16px 700 / padding 0 20px」のゴーストピル、白地なら「#000 / 白文字 / border-radius 9999px /
  16px 700 / padding 12.672px 23.328px」のソリッドピル
- リンクとアクセントは #dd9933 のみ。ほかに彩度を持つ色は使わない
- letter-spacing は normal、font-feature-settings（palt）は指定しない
- カードに影・角丸を付けず、写真の矩形をそのまま見せる
- リード文は意味のまとまりで <br> を入れて手動改行する