News:日付とタイトルの 2 カラム
無垢材を削り出すということ
Hacoa の製品は、福井県鯖江市の工房で一つずつ削り出されます。突板や集成材ではなく無垢材を使うため、同じ型でも木目と色味は一枚ごとに違います。塗装は木の呼吸を止めない範囲にとどめ、使い込むほど手の脂で艶が出るように設計しています。
木は完成した素材です。人がつくるのは形だけで、質感も香りも、素材の側にもとから備わっている。だから設計は「足す」より「削る」方向に向かいます。
木はさまざまな要素を含んだ完成した素材で
それぞれの香りや温かい感触があります
デザインから製作まで一貫して行っているブランドです
#c49a51(61 回)はブランド色ではない。c49a51 は 0 回。
同じく box-shadow の上位 2 件(61 回ずつ)と、#408bd1(Instagram 埋め込みの「フォロー」)も除外すること。
letter-spacing の宣言は CSS 全文で 4 個だけ。効いているのはグローバルナビの 0.03em のみで、見出しも本文も normal。
font-feature-settings の宣言は 0 個(= palt を使わない)。
行間は 2(58 回)・1.5(53 回)・2.4(41 回)・1.4(38 回)の順に多い。
Hacoa の製品は、福井県鯖江市の工房で一つずつ削り出されます。突板や集成材ではなく無垢材を使うため、同じ型でも木目と色味は一枚ごとに違います。塗装は木の呼吸を止めない範囲にとどめ、使い込むほど手の脂で艶が出るように設計しています。
木は完成した素材です。人がつくるのは形だけで、質感も香りも、素材の側にもとから備わっている。だから設計は「足す」より「削る」方向に向かいます。
① ゴーストピル(写真の上・最頻出): 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
カードは border-radius: 0 / box-shadow: none / 枠なし。カード同士は余白だけで分ける。面色を持つバッジは存在しない。
1px solid #c1c1c1 / radius 0outline: 2px solid #dd9933 で代替実サイトの input[type=text] は UA 既定のまま(2px inset)で、上書きされているのは textarea の 1px solid #c1c1c1 のみ。実装時は全入力欄をこの見た目に揃える。
カード・ボタンは影なし0 0 10px 0 rgba(0,0,0,.15)0 6px 6px -6px #cccccc1px 1px 3px 0 rgba(2,2,2,.23)純黒より 2 だけ明るい rgba(2, 2, 2, …) を使うのがテーマの流儀。ランタイムで最多の影(61 回)は非表示ポップアップのものなので参考にしない。
| 用途 | 値 | 備考 |
|---|---|---|
| コンテンツ幅 | 850px | 本文・ニュース一覧 |
| 2 カラム分割 | 720px | ビューポートの 50%。写真セクション |
| 写真セクション | 100% | 全幅ブリード |
| モーダル | 460px | — |
| ヘッダー高さ | 70px | ナビは line-height: 70px |
| 値 | CSS 出現 | 用途 |
|---|---|---|
| 4px | 32 回 | 小さな矩形ボタン・入力欄 |
| 5px / 3px | 22 / 22 回 | カード内の小要素・タグ |
| 40px | 20 回 | 中サイズのピル |
| 100% / 50% | 12 / 10 回 | アイコン・アバター |
| 9999px / 30px | 5 / 4 回 | CTA ピル |
pill(9999px / 60px / 40px / 30px)と小角丸(3〜5px)を役割で使い分ける。統一しようとすると印象が変わる。