【重要】HITOYOSHI オーダーシャツ　受付再開について
SEARCH|MAIL MAGAZINE

ほんものづくり

日本の職人と技術がうんだ、ほんものの服。

MORE

01 — COLORS

白地に #222222 の 1 色。装飾色を持たない

Neutral（UI の基幹）

Text / Fill
#222222
文字色とプライマリの面色を兼ねる。純黒は使わない
Nav
#333333
グローバルナビ・スライダー現在地
Weak
#444444
非選択のトグル
Border
#c9c9c9
カテゴリチップの枠
Border Pale
#cccccc
スライダードット・罫線
Divider
#d2d3d5
セクション見出しの下線
Surface
#ebecee
唯一のセクション面色（最頻出）
Surface Alt
#e8eaed
お知らせ帯
Dark
#394045
言語切替バー
Dark Strong
#212729
言語切替の選択中

Gender（性別カテゴリ — 低彩度）

MEN
#b9c9cb
青灰。ステレオタイプな彩度を使わない
WOMEN
#bdbcc7
藤。MEN と明度を揃える

Ranking（順位リボン — くすませた金銀銅）

1 位
#dfd260
くすんだ黄。純金色にしない
2 位
#c0c0c0
銀
3 位
#ba9585
赤みを抑えたテラコッタ
4–5 位
#999999
灰

Accent（局所的な差し色）

Teal
#4fc3c6
特集バナー等の局所
Terracotta
#c48865
同上

02 — TYPOGRAPHY

Avenir が和文チェーンの先頭。字間は 0.24px の固定 px

メンズ トップス一覧
Page Title / "Hiragino Kaku Gothic ProN" 32px w700 / ls normal
※ 実サイトはフォールバックなしの単独指定で環境依存。新規実装ではチェーンを書く
工場から、直接。
Heading / Avenir + 和文 18px w700 / ls 0.24px (0.013em)
MEN / WOMEN / BABY
Nav（大）/ 16px w500 / ls 0.24px — ドロワーナビ
MEN
Toggle / 16px w400 / ls 1.6px（0.1em） — 例外的に字間を開く 2 箇所のうち 1 つ
なめらかコットン 100%
Body（強）/ 14px w700 / lh 1.8 (25.2px) / ls 0.24px
熊本の工場で、縫製から仕上げまで一貫して手がけています。糸の番手と編み地の密度を調整し、洗濯を繰り返しても型崩れしにくい生地に仕上げました。着るほどに body になじみます。
Body / 14px w400 / lh 1.8 (25.2px) / ls 0.24px (0.017em) — 本文はここ
SEARCH　MAIL MAGAZINE
Nav / 14px w500 / lh 1.0 / ls 0.24px
Tシャツ・カットソー
Chip / 14.4px w400 / ls 0.24px
MORE — ほんものづくり
明朝 / "Noto Serif JP", 游明朝, YuMincho, "ヒラギノ明朝 ProN" 14.4px w400 — 惹句ボタン専用
※ 表示価格はすべて税込です
Base / Caption / 12px w400 / ls 0.24px (0.02em) — body の既定値
MEN WOMEN
Gender Badge / 11.52px w700 / ls 1.3824px（0.12em） / radius 0
letter-spacing は 0.24px の固定 px。 em ではないので、12px では 0.02em、18px では 0.013em と実効値が変わる。大きい文字ほど相対的に字間が詰まるのが設計意図。em に置き換えない。
例外的に開くのは トグル（0.1em）と性別バッジ（0.12em）の 2 箇所だけ。

03 — BUTTONS

角丸を用途で 4 段に割る

Primary（選択中）
#222222 / radius 0 / ls 1.6px
Toggle（非選択）
白地 / 1px #444444 / radius 0
来店予約
浮かせる pill
radius 16px / shadow 0 1px 4px
Tシャツ・カットソー
Chip
radius 900px / 1px #c9c9c9
MORE
惹句（明朝）
透明 / 1px #000 / radius 0

Border Radius Scale

0px
ボタン
2px
ドット
16px
浮かせる pill
900px
チップ
50%
矢印

Ranking Ribbon

1
#dfd260
2
#c0c0c0
3
#ba9585
4
#999999

Slider

矢印
radius 50% / 影 2 段重ね
ドット
radius 2px（丸ではなく短い棒）

Language Bar

🌐　日本語
WOVN の翻訳ウィジェット由来。フォントも -apple-system, "system-ui", … と別系統。ブランドの設計として扱わない
ランキングリボンは background-color が透明のまま。 background-image: linear-gradient(135deg, #dfd260 50%, transparent 0) で左上に三角を作る。background-color だけを見ると金・銀・銅の 4 色が全部取れない。三角形は border トリックではなくグラデーションで作る。

04 — PRODUCT

商品グリッド（gap: 36px 2%）

product image1
MEN
なめらかコットン クルーネックT
熊本 / HITOYOSHI
￥8,800
product image2
WOMEN
シルクコットン ボートネックブラウス
山形 / 佐藤繊維
￥16,500
product image3
MEN
セルヴィッチデニム ストレート
岡山 / 児島
￥19,800
product image4
WOMEN
ウォッシャブルウール ニット
新潟 / 五泉
￥14,300
もっと見る

05 — FORMS

フォーム要素（3 状態）

メールマガジンの配信に使用します
枠線を #222222 に締める
メールアドレスの形式が正しくありません

06 — ELEVATION

影は「押せる」ことを示すためだけに使う

Level 0 — 既定
box-shadow: none;
カード・バッジ・チップ・ボタン
Level 1 — 浮かせる pill
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
来店予約・アクセス
Level 2 — スライダー矢印
0 1px 4px rgb(144,144,144), 0 2px 4px rgba(0,0,0,0.3)
2 段重ね

Surfaces

#ffffff — 地
#ebecee — セクション
#e8eaed — お知らせ帯
#394045 — 言語バー

07 — LAYOUT

コンテナ 1200px / ガターは %

項目値備考
Root font-size16px375px〜1920px で固定
Body font-size12px本文は 14px。12px はキャプション用
Container1200pxワイドは 1090px、記事幅は 690px
Grid gap36px 2%横ガターは px ではなく %
Breakpoints480 / 600 / 767 / 992 / 1200 / 1400px1200px がコンテナ幅と一致
Border radius0 / 2px / 16px / 900px / 50%用途で使い分ける
Letter spacing0.24px固定 px を全体に一律
font-feature-settingsnormalpalt を使わない
Avenir は macOS / iOS 限定。 Web フォントとして読み込んでいないため、Windows / Android では 2 番目の游ゴシックが欧文も描く。この差は仕様として受け入れられている。再現時は幾何学サンセリフ（Nunito Sans / Montserrat 等）を代替に当てる。
このプレビューでは Avenir の代替に Nunito Sans を使用している。
タッチターゲット: チップの padding: 11.52px 31.68px は高さ約 40px で WCAG 基準（44px）をわずかに下回る。新規実装では縦 padding を 14px 前後に上げる。