01 / Colors
color palette

抹茶色と墨色だけ

ブランド色は 抹茶色 #667938 ひとつ。下位見出しの面にだけ明るい #7e9d47 を使う。本文は 純黒ではなく #333333、面は #ededed。CSS Custom Properties による自社トークンは 0 個で、検出された 49 個はすべて WordPress / Gutenberg の既定値だった。

抹茶色(ブランド)
#667938
★面 12 / 文字 8 要素(トップ)。文字 19 / 面 5(会社案内)
抹茶色(淡)
#7e9d47
会社案内の部署見出しの面 3 要素
Text Primary
#333333
★本文。可視 269 要素。純黒 #000000 は使わない
Muted
#7a7a7a
書影キャプション・コピーライト(5 要素)
Muted Light
#909090
社是の添え文(1 要素)
Surface
#ededed
ナビ子メニューの面(11 / 10 要素)
Background
#ffffff
pageBackground.resolved / viewportTopBySample (3/3)

会社案内の下層ページはヒーロー帯(.l-sub-img)が #667938 で塗られているが、コンテンツの地色は白。viewportTopByArea の先頭に出る緑を地色と取り違えないこと。

typography

明朝一本、ウェイト一段

書体は Noto Serif JP ただ 1 本(実測 302 / 321 要素)。そして サイト全体が font-weight: 400 だけでできている — トップ 321/321 要素、会社案内 159/159 要素がすべて 400 で、700 は 1 要素も無い。@font-face には 700 の宣言があるが document.fonts 上では全サブセットが unloaded で、当てても合成太字になる。

101213 141516 182426 303240
Section Heading32px / 400
lh 1.50 / ls .2em
新刊案内
Category Heading30px / 400
lh 1.50 / ls .2em
茶道具・和装
Sub Heading24px / 400
lh 1.50 / ls .2em
君子之交淡若水
Book Title ★18px / 400
lh 1.80 / ls .06em(継承)
茶の湯の名物裂総覧
Body16px / 400
lh 1.50 / ls .06em(継承)
淡交社は茶道を中心とした出版業を主軸としながら、茶道具の販売やカルチャー教室の運営まで手がけています。
Long Body16px / 400
lh 2.00
茶道月刊誌『淡交』『なごみ』『淡交テキスト』といった定期刊行物のほか、茶道愛好家の様々なニーズに応える書籍を刊行しています。
Lead ★16px / 400
lh 2.75(最も広い)
茶道は、長い年月をかけて受け継がれてきた日本を代表する文化です。淡交社は、裏千家茶道の機関誌である『淡交』の発行から歩みを始めました。
Caption14px / 400
lh 1.80 / #7a7a7a
鈴木一洋/著 発売日:2025年11月4日
English Label13px / 400
lh 1.30 / ls .2em
books & magazines

字間は 2 段しかない

body に letter-spacing: .06em を 1 回だけ書いて継承させ、見出しと英字ラベルにだけ .2em を個別に当てる。中間の値は存在しない。

.06em(継承)
茶道を中心とした日本文化
.2em(見出し)
茶道を中心とした日本文化
.25em(タグライン)
茶道美術図書出版
.84em(ロゴ英字)
TANKOSHA

0.96px と書かず、0.06em と書くこと。SP(375px)で body が 14px に落ちるため、px 固定にすると字間だけ取り残される。実測では 1440px で 0.96px、375px で 0.84px と、比率 0.06 が保たれていた。

font-feature-settings: "palt" は 1 要素も使っていない(CSS 全文でも 0 回)。フォントスタックに YakuHanMP の類も入っていないので、約物は詰まらないまま出るのが正しい状態。

03 / Vertical Writing
writing-mode

縦組みは CSS で実装されている

実測 4 要素。画像に焼き込んだ文字ではない。複数行の見出しは vertical-rl、1 列のラベルは vertical-lr と使い分けている。縦組みにも横組みと同じ .2em の字間を当てる。

茶道を中心とした、
日本文化を伝える。
読む
使う
体験する

見出しは 32px / line-height 2.18(69.76px) / letter-spacing .2em、1 列ラベルは 40px / line-height 1 / letter-spacing .2em。写真の上の白文字にも text-shadow を付けていない — 写真側を暗く選ぶことで可読性を取っている。

components

枠線のボタン、角丸はゼロ

既定の CTA は 面を持たず、1px solid #333333 の枠だけ。padding: 19px 20px 18px と上下が非対称なのは、明朝のベースラインに合わせた調整。border-radius はサイト全体で 0px で、例外はカルーセルのドット(50%)14 要素だけ。

淡交社について 編集の現場から一覧 新着情報 出版事業局
carousel dots — 唯一の border-radius

新刊カード

茶の湯の名物裂総覧
茶の湯の名物裂総覧
鈴木一洋/著
発売日:2025年11月4日
京の花街宮川町
京の花街宮川町 芸舞妓の美
小見直人/写真
発売日:2025年10月28日
茶席の菓子
茶席の菓子 十二か月
淡交社編集局/編
発売日:2025年10月14日
やきものの見方
やきものの見方 入門
前田正明/著
発売日:2025年9月30日

入力欄

既定の状態
フォーカス(outline に抹茶色)
市外局番から入力してください

実サイトの <input> は UA 既定の Arial が当たっている(可視 19 要素)。意図した指定ではないので、新規実装では入力欄にも明朝を明示すること。

05 / Layout & Elevation
layout

1120px のコンテナ、影ゼロ

Full bleed — ヒーローカルーセル(1280px / 1920px)
Container 1120px ★トップ 8 / 会社案内 10 要素で最多
Column 968px — 本文カラム
0px ★全体
50% ドットのみ

Depth & Elevation

Level 0(唯一)
box-shadow: none
階層は罫線で
1px solid #333333
階層は面で
#ededed

影を一切使わないサイト。CSS 全文には box-shadow が 8 回、text-shadow が 2 回宣言されているが、実測した 2 ページの可視要素では 1 つも使われていない。filter: drop-shadow() は CSS 全文で 0 回。