オンラインストア 直営店

2001年「Hacoa」は誕生しました

木はさまざまな要素を含んだ完成した素材で
それぞれの香りや温かい感触があります
デザインから製作まで一貫して行っているブランドです

彩度を持つのはアンバー 1 色だけ

Hacoa Amber
#dd9933
リンク(実測 30 個)・H3。CSS には 0 回でインライン注入
Bark Brown
#352f26
ヘッダー右の外部リンクボタン。CSS 13 回
Warm Gray
#a39b8d
フッターのナビゲーションボタン。CSS 10 回
Dark
#333333
「さらに読み込む」・フッター見出しの帯。CSS 24 回
Ink
#000000
本文。グレーに逃がさず真っ黒を使う
Ink 2
#2d2d2d
h4 / h5。CSS 7 回
Surface
#fafafa
カードの地。CSS 20 回
Line
#dddddd
一覧の区切り線。CSS 181 回
Scrim
rgba(0,0,0,.3) / .5
写真の上に必ず敷く暗幕
⚠️ 抽出データで最多の #c49a51(61 回)はブランド色ではない。
正体は Popup Maker プラグインの閉じるボタンで、実寸 0×0px の不可視要素。CSS 全文を検索しても c49a51 は 0 回。 同じく box-shadow の上位 2 件(61 回ずつ)と、#408bd1(Instagram 埋め込みの「フォロー」)も除外すること。
02 / Typography — 実測値

見出しは明朝とゴシックの 2 本立て。本文は line-height 2.4

Hero H2 / 明朝
36px / 600 / lh 1.4
--tcd-font-type2
木の温もりを、暮らしの道具に
Section H1
40px / 400 / lh 1.4
たくさんの「あなた」と
Section H2
34px / 400 / lh 1.5
Hacoa の歩み
Sub H2
22px / 600 / lh 1.5 / #333
越前の木地師がつくる
Footer H2
18px / 450 / lh 1.0
Hacoa 関連サイト
H3(アクセント)
16px / 600 / lh 1.3 / #dd9933
hacoa.japan
H4 / H5
16px / 700 / #2d2d2d
お取り扱いについて
Body
15px / 400 / lh 2.4
1枚の四角い板もさまざまな曲線で構成されていて、それ以上のボリュームを感じさせるような生き生きとした構造を持っています。そんな領域にとらわれない、空間全体へのアプローチを視野に入れたものづくりを行っています。
Global Nav
14px / 400 / ls 0.03em
Product Episode
Caption
13px / 400 / lh 1.5
※ 天然木のため木目・色味に個体差があります
Copyright
10px / 400 / lh 1.6
© Yamaguchi Kogei Co., Ltd. All Rights Reserved.

letter-spacing の宣言は CSS 全文で 4 個だけ。効いているのはグローバルナビの 0.03em のみで、見出しも本文も normal。 font-feature-settings の宣言は 0 個(= palt を使わない)。 行間は 2(58 回)・1.5(53 回)・2.4(41 回)・1.4(38 回)の順に多い。

News:日付とタイトルの 2 カラム

2026/08/24
【新商品】木の温もりを持ち歩く。折り畳み式木製ノートパソコンスタンド「LAPTOP STAND SLIM」の販売を開始致しました
2026/06/22
【新商品】木の温もりと、アルミの機能美。視線と空間を整える木製モニタースタンド「Monitor Stand」の販売を開始致しました
2026/05/29
【新商品】ついばむように、すっと開ける。小鳥モチーフの木製段ボールカッター「Box Opener」の販売を開始致しました

無垢材を削り出すということ

Hacoa の製品は、福井県鯖江市の工房で一つずつ削り出されます。突板や集成材ではなく無垢材を使うため、同じ型でも木目と色味は一枚ごとに違います。塗装は木の呼吸を止めない範囲にとどめ、使い込むほど手の脂で艶が出るように設計しています。

木は完成した素材です。人がつくるのは形だけで、質感も香りも、素材の側にもとから備わっている。だから設計は「足す」より「削る」方向に向かいます。

商品開発

木地職人の伝統の技を継承しつつ、現代の価値観に合わせたものづくりを

商品開発について
Haco - air
直営店
04 / Buttons

CTA は pill、UI 部品は小角丸

① ゴーストピル(写真の上・最頻出): transparent / #fff / 1px solid #fff / radius 60px / 16px 600 / padding 0 20px

もっと見る オンラインストアへ 直営店を探す

② アウトラインピル 2px solid #000 / radius 9999px / 16px 700 ③ ソリッドピル #000 / radius 9999px / padding 12.672px 23.328px ④ 反転ピル #fff 面 + 2px solid #000 / radius 30px

さらに読み込む 企業情報 リクルート

⑤ フラット矩形 #333 / radius 4px / 13px 400 ⑥ フッターナビ #a39b8d / radius 0 / padding 14px 20px 12px ⑦ ヘッダー外部リンク #352f26 / radius 0 / 15px 700

枠も影も角丸も付けない。写真の矩形をそのまま見せる

Wooden Keyboard
キーひとつずつを無垢材から削り出したフルサイズキーボード。
Card Case
紙の名刺の厚みに合わせて、内側を 0.1mm 単位で調整しています。
Wall Clock
木口を見せる仕立て。年輪がそのまま文字盤の表情になります。

カードは border-radius: 0 / box-shadow: none / 枠なし。カード同士は余白だけで分ける。面色を持つバッジは存在しない。

06 / Forms

Default / Focus / Error

Default: 1px solid #c1c1c1 / radius 0
Focus: 独自のフォーカスリングは無い。ここでは outline: 2px solid #dd9933 で代替
電話番号を正しく入力してください

実サイトの input[type=text] は UA 既定のまま(2px inset)で、上書きされているのは textarea の 1px solid #c1c1c1 のみ。実装時は全入力欄をこの見た目に揃える。

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

none(既定)カード・ボタンは影なし
汎用の浮き0 0 10px 0 rgba(0,0,0,.15)
ヘッダーの下辺0 6px 6px -6px #cccccc
カードの浮き1px 1px 3px 0 rgba(2,2,2,.23)

純黒より 2 だけ明るい rgba(2, 2, 2, …) を使うのがテーマの流儀。ランタイムで最多の影(61 回)は非表示ポップアップのものなので参考にしない。

08 / Layout

850px の本文と、全幅の写真を交互に積む

コンテンツ幅 850px(1440px ビューポートで実測 21 要素)
720px(50%)
720px(50%)
用途値備考
コンテンツ幅850px本文・ニュース一覧
2 カラム分割720pxビューポートの 50%。写真セクション
写真セクション100%全幅ブリード
モーダル460px—
ヘッダー高さ70pxナビは line-height: 70px

Radius Scale

値CSS 出現用途
4px32 回小さな矩形ボタン・入力欄
5px / 3px22 / 22 回カード内の小要素・タグ
40px20 回中サイズのピル
100% / 50%12 / 10 回アイコン・アバター
9999px / 30px5 / 4 回CTA ピル

pill(9999px / 60px / 40px / 30px)と小角丸(3〜5px)を役割で使い分ける。統一しようとすると印象が変わる。