サステナビリティメルマガ申し込みお問い合わせコントラクト
天然素材のぬくもりと、匠の技の深い味わい。
カリモクのこだわり
01 / COLORS

白と、白に近いグレー

面は白(#ffffff)と #ecebea の2つだけで、その差はごくわずか。家具の写真を主役に立てるため、UI の色数を徹底して絞っている。差し色の茶と緑もテキストにしか使わない。

Text Primary
#282828
可視 108 要素で最多。本文・見出し。純黒ではない
Text Secondary
#505050
ナビ・補助リンク(可視 23 要素)
Background
#ffffff
根拠 ua-default-canvas(html/body に塗り指定なし)
Surface
#ecebea
uniqueBackgrounds 1 位(21 回)。カード・選択肢の面
Border
#c8c8c8
枠ボタン・区切り罫。影の代わりに階層をつくる
Accent / Brown
#725941
木の色。シリーズ名(可視 6 要素)
Accent / Green
#557857
こだわりの見出し(可視 2 要素)
Surface Dark
#2c2c2c
オンラインショップボタン

バッジは角丸ゼロ・padding: 0 4px

重要 お知らせ イベント情報 新商品情報 (汎用)

4色とも彩度が低く、白文字とのコントラストはぎりぎり。11px の小さい文字に使う前提の配色。丸めないこと(border-radius: 0)。

Typography行送りを 28px の絶対値で揃える

このサイトの最大の特徴は、line-height が font-size に関係なく 28px であること。実測 215 要素が 14px / 28px、さらに 16 / 18 / 20 / 24 / 30px のすべてが同じ 28px を共有する。比率ではなく絶対値で行を揃える、活版の込め物に近い設計。

本文 14px — 行送り 28px(比率 2.00)。背景の罫が 28px ごとのグリッド。

見出し 18px — 同じ 28px(比率 1.56)

見出し 24px — 同じ 28px(比率 1.17)

見出し 30px — 同じ 28px(比率 0.93)

30px / 28px は行間が font-size を下回る。実サイトでは1行で収まる見出しにのみ使われている。新規実装で2行以上になりうる見出しには line-height: 1.3 を別途当てること。

Section Title (EN)Century Gothic / 34px / 400
lh 28px / ls 0.1em
Selection
Section Lead (JA)Noto Serif JP / 30px / 400
lh 28px / ls 0.1em
家具選びを様々な情報でサポートいたします。
Card TitleNoto Serif JP / 24px / 700
lh 28px (1.17) / ls normal
ダイニングチェア部門
Choice TitleNoto Serif JP / 20px / 500
lh 28px (1.40) / ls normal
ソファの選び方
Series NameCentury Gothic / 18px / 700
lh 28px / 色 #725941
NEIVIE(ネイビ)
Nav Label (JA)游ゴシック / 18px / 400
lh 18px(font-size と同値) / ls 0.054em
WEBカタログ
Section Label (EN)Century Gothic / 16px / 400
lh 28px / ls 0.2em(最大)
Support
Body游ゴシック / 14px / 400
lh 28px (2.00) / ls normal
掛ける人数や背もたれの高さなど、用途に合わせて様々なかたちからお選びいただけます。
Nav Item游ゴシック / 14px / 400
lh 14px / ls 0.07em
会社案内
Nav Label (EN)Century Gothic / 12px / 400
lh 12px / ls 0.082em
Digital catalog
Utility Nav游ゴシック / 12px / 400
lh 12px / ls 0.06em
サステナビリティ
Micro游ゴシック / 9px / 400
lh 10.8px / ls 0.07em
コーポレートサイト

小さい文字ほど字間を開ける(9px で 0.07em、12px で 0.06〜0.08em)。游ゴシックの小級数が潰れるのを防ぐ処置。palt は実測 0 件で、詰める処理は一切入れない。

03 / PRODUCT
Technique & Quality見出しは明朝、本文はゴシック

木を、80年つかう

カリモクの家具づくりは、木を乾かすところから始まります。伐り出した材は含水率が高く、そのまま加工すれば数年で反り、割れます。だから人工乾燥機で時間をかけて水分を抜き、さらに工場で寝かせて、室内の湿度に馴染ませる。

接合部に金物を使わない

脚と幕板の接合は、ほぞ組みで押さえます。金物は経年でゆるみますが、木と木の組みは季節ごとの伸縮を受け止めながら締まっていく。修理のときにも分解できるので、張地を替え、部材を替えて使い続けられます。

NEIVIE(ネイビ)

ダイニングとリビングの境目をなくすシリーズ。座面を低く、背を高く取って、食事のあとそのまま寛げる寸法にしています。

Buttons角丸ゼロ、影なし。罫で押さえる
お近くのショールーム・ギャラリーを探す

カルーセルの操作ボタン(border-radius: 100px)が、サイト中で唯一の完全な丸。ユーティリティボタンの 3px と合わせて、角丸はこの2箇所しかない。

05 / CARDS
Cards影を1つも使わない

box-shadow の実測は 0 件。階層は罫線(1px solid #c8c8c8)と面色(#ffffff / #ecebea)の差だけで表現する。

ソファの選び方
掛ける人数や背もたれの高さなど、用途に合わせて。
ダイニングチェアの選び方
座り心地は座面高と座面の奥行きで決まります。
テレビボードの選び方
面色 #ecebea のカード。白との差はごくわずか。
FormsForms

入力欄も角丸ゼロ。フォーカスは罫を本文色まで濃くするだけで、リングも影も足さない。

全角でご入力ください
カタログの送付先になります
郵便番号は7桁でご入力ください
07 / ELEVATION
ElevationLevel 0 しか存在しない

サイト全体で box-shadow が 0 件。モーダルやドロップダウンにも影を付けない。浮かせたいときは面色を変えるか罫を引く。

Level 0 — 罫
border: 1px solid #c8c8c8 / box-shadow: none
Level 0 — 面
background: #ecebea / box-shadow: none
Layoutコンテナ 1200px、余白は 60 / 90 / 120px
Viewport 1440px — 帯はここまで広げる
Container 1200px(実測 13 要素)
Content 1040px — 本文ブロック
Column 740px — 記事カラム

padding-top の実測は 20 / 40 / 50 / 60 / 65 / 70 / 75 / 90 / 120px。最頻は 60px(10 要素)と 90px(6 要素)で、いずれも行送り 28〜30px の倍数に近い。gap プロパティの使用は実測 0 件で、レイアウトは margin / padding で組まれている。