SIWA｜紙和（しわ / Siwa） DESIGN.md

SIWA｜紙和（https://siwa.jp/）のデザイン仕様書。 山梨・大直（おおなお）の和紙メーカーと、プロダクトデザイナー 深澤直人 が協業して生まれた、破れにくい和紙素材「ナオロン」のバッグ・小物ブランド。使い込むほど風合いが増す紙製品を扱う。 最大の特徴は Noto Serif JP（明朝）＋ウェイト 300 で全編を組む設計、行間 2.3 という極端に広い余白、そして色数を 和紙そのものの色（白）と、経年の風合いを思わせる暖かなトープ #867d6b に絞った静けさ。純黒を使わず、テキストは柔らかな #404040。ロゴは字間を大きく開けた「S I W A｜紙 和」。 実サイトの computed style 実測（2026-07-22 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 紙の余白。装飾を削ぎ、明朝の細いストロークと広い行間だけで「和紙の質感」と「静けさ」を表現する。UI というより一枚の上質な紙面
• SIWA について: 深澤直人デザインの和紙プロダクト。「しわ（皺）」の風合いを愛でる思想を、Web でも余白と細字で体現する。派手さを排し、素材と製品写真に語らせる
• 密度: きわめて低密度。全幅の映像・写真を大きく置き、テキストは明朝で小さく静かに添える
• キーワード: Noto Serif JP、明朝、ウェイト300、行間2.3、トープ #867d6b、#404040、ハイライン罫、余白、深澤直人
• 特徴:
  • 書体は Noto Serif JP → 游明朝 → ヒラギノ明朝 の明朝スタック一系統。ゴシックは使わない
  • ウェイトは 300（Light）が本文・見出しとも既定。太字を使わず、サイズと余白で階層を作る
  • テキスト色は #404040（柔らかな炭色）。純黒 #000000 は避ける
  • line-height が非常に広い（本文リンク・ナビで 2.3、段落で 1.5）。明朝を静かに、ゆったり組む
  • letter-spacing: 0.28px（≒ 0.02em） をほぼ全要素に。控えめだが均等に送る
  • 有彩色は 暖かなトープ／グレージュ #867d6b をリンクに使う程度。あとは無彩色
  • 区切りは 1px のごく淡い罫線（ヘアライン）。ナビの「Products｜Shop」も細い縦罫で仕切る
  • ボタンは面をほぼ持たず、テキストリンク中心。EC 部分の最小限の UI にのみ矩形ボタンが出る

2. Color Palette & Roles

実測値。CSS Custom Properties は未定義。前面に出る有彩色は事実上「トープ #867d6b」のみで、あとは白と柔らかな炭色。uniqueBackgrounds 上位に出る rgba(43,51,63,*)／rgba(115,133,159,*) は動画プレーヤー（VideoJS）のオーバーレイ由来で、ブランド面色ではない点に注意。

Brand

• Washi Taupe (#867d6b): 実質唯一のブランドアクセント。和紙・麻布を思わせる暖かなグレージュ／トープ。テキストリンク、強調の小見出しに使う。彩度が低く、紙の色に溶け込む
• Slate Ink (#2b333f): 濃紺寄りのダークスレート。フッターやオーバーレイ、動画 UI の暗色として限定的に使う。黒の代わりの「締め色」

Neutral（背景・面）

• White (#ffffff): 基本のページ背景（.bg-window）。紙そのものの白
• Text Charcoal (#404040): 本文・見出しの標準テキスト色（純黒は使わない）
• Text Ink (#3d3737): 一部リンク・強調テキストのやや濃い炭色
• Panel Grey (#efefef): 淡いグレーの面（区切り帯・サムネイル地）
• Line Grey (#e0e0e0 目安): ヘアライン罫（ナビの仕切り・セクション境界）

Semantic

• 独立したエラー／警告色は前面に存在しない（フォームは最小限）
• 実装が必要なら無彩色基調を保ちつつ、エラーは沈んだ赤 #9c4a3c 程度に留め、成功・強調は #867d6b を流用する

3. Typography Rules

明朝スタック一系統・全編ウェイト 300・行間 2.3（段落は 1.5）・letter-spacing 0.02em。SIWA の静けさはこの「細字＋広い行間」で作られている。

3.1 和文フォント

• 明朝体（主役）: Noto Serif JP → 游明朝 → YuMincho → ヒラギノ明朝 → serif
• ゴシック体は本文では使わない（Products/Shop の一部システム UI で Arial に落ちる程度）

3.2 欧文フォント

• セリフ: Noto Serif JP 内蔵の欧文、および serif フォールバック
• サンセリフ: Arial / Helvetica（フォームの一部・動画 UI のみ）
• 欧文専用 Web フォントは主要導線では使わない

3.3 font-family 指定

css/* 本文・見出し共通（明朝の単一スタック） */
font-family: "Noto Serif JP", 游明朝, YuMincho, "Hiragino Mincho ProN",
             "ヒラギノ明朝 ProN", serif;
font-weight: 300;

/* 個別の見出し等では簡略化された宣言も併存 */
font-family: "Noto Serif JP", serif;

フォールバックの考え方:

• Noto Serif JP を先頭に置き、無い環境では游明朝 → ヒラギノ明朝 → serif に落とす
• Windows で MS 明朝に落ちても破綻しないよう末尾は必ず serif
• 明朝が本文でゴシックにならないことを最優先する

3.4 文字サイズ・ウェイト階層

• すべて weight 300。見出しでも太らせず、サイズと余白だけで階層を作るのが SIWA の流儀

3.5 行間・字間

• 標準テキスト・ナビの行間: 2.3（14px→32.2px、18.2px→41.86px）。極端に広い明朝の余白
• 段落本文の行間: 1.5（16.8px→25.2px）。読み物として詰めるところは詰める
• 見出しの行間: 1.4〜1.6（25.2px→35.28px、19.6px→31.36px）
• 字間 (letter-spacing): 0.28px 固定（14px 基準で 0.02em）。控えめな均等送り

ガイドライン:

• ナビ・単発テキストは line-height 2.0 以上、長い段落は 1.5〜1.8 に、と用途で切り替える
• letter-spacing は 0.02em 程度に抑える（広げすぎると紙面の締まりが失われる）
• 太字を使わず、weight 300 のまま組む

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt は明示適用していない */

• 実測は normal。明朝のベタ組みを letter-spacing の均等送りで整える。見出しで詰めたい場合のみ "palt" 1 を局所適用

3.8 縦書き

• 主要導線は横組み。ロゴ「S I W A｜紙 和」は字間を大きく開けた横組み
• 縦組みを用いる場合は明朝スタックのまま writing-mode: vertical-rl; text-orientation: mixed;

4. Component Stylings

Buttons

SIWA は面色ボタンをほとんど使わず、テキストリンク（トープの下線・色替え） が主役。EC（Shop）の最小 UI にのみ矩形ボタンが出る。

Primary（テキストリンク）

• Background: transparent
• Text: #867d6b（トープ）／ ホバーで #404040
• Text Decoration: 下線、または前後に細い罫
• Font: Noto Serif JP, 18px 前後, weight 300

Secondary（EC の矩形ボタン）

• Background: #ffffff（または淡い面）
• Text: #2b333f
• Border: 1px solid #e0e0e0
• Border Radius: 2px（ごく僅かに丸める程度）
• Padding: 6px 14px
• Font: 12〜14px

Inputs

• Background: #ffffff
• Border: 1px solid #e0e0e0（下線のみのミニマル実装でも可）
• Border (focus): 1px solid #867d6b
• Border Radius: 2px
• Padding: 8px 12px
• Font: Noto Serif JP, 14px, weight 300
• Text Color: #404040

Cards

• Background: #ffffff（または製品写真そのもの）
• Border: なし／必要時 1px solid #efefef
• Border Radius: 0
• Padding: 24px
• Shadow: なし（フラット）
• 製品写真を大きく置き、下に明朝で品名・素材を小さく添える。ヘアライン罫で仕切る

5. Layout Principles

Spacing Scale

余白を広く取り、セクション間は XL〜XXL で「紙の間」を作る。

Container

• Max Width: 1200px 目安（映像・写真は全幅ブリードを多用）
• Padding (horizontal): 24〜40px

Grid

• Columns: 12（実運用は 1〜3 カラムの素朴な構成）
• Gutter: 24〜40px
• 製品一覧は写真中心のシンプルなグリッド。装飾を足さず罫線で区切る

6. Depth & Elevation

• 基本は 影を使わない。奥行きは余白と写真、ヘアライン罫で表現する

7. Do's and Don'ts

Do（推奨）

• 明朝スタックの末尾を必ず serif にする
• 本文・見出しとも weight 300 で組み、サイズと余白で階層を作る
• テキスト色は #404040。純黒を避ける
• アクセントはトープ #867d6b に絞り、リンクや小見出しに静かに使う
• ナビ・単発テキストは line-height 2.0 以上、段落は 1.5 前後に切り替える
• 区切りは 1px のヘアライン罫で軽く

Don't（禁止）

• 明朝の代わりにゴシックを本文に使わない
• 太字（weight 700）で強調しない
• トープ以外の鮮やかな彩色をアクセントに足さない
• 角丸や影を強くしてボタンを目立たせない（テキストリンク中心）
• line-height を 1.4 以下に詰めない（静けさが失われる）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px。テキストリンクは行間の広さでタップ領域を確保

フォントサイズの調整

• モバイルでも本文 14〜16px を維持（明朝は細いため下げすぎない）
• 見出し 25px → 20px 程度に縮小。行間は据え置きで余白を保つ

9. Agent Prompt Guide

クイックリファレンス

Primary/Accent: #867d6b   （トープ / リンク・小見出し）
Text Color:     #404040   （純黒は使わない）
Ink (締め色):   #2b333f
Background:     #ffffff
Font:           "Noto Serif JP", 游明朝, YuMincho, "Hiragino Mincho ProN", serif
Body Weight:    300（見出しも300）
Body Size:      14〜16.8px
Line Height:    2.3（ナビ・単発）／ 1.5（段落）
Letter Spacing: 0.02em
Button:         テキストリンク中心。面色ボタンは最小限（radius 2px）

プロンプト例

SIWA｜紙和のデザインシステムに従って、製品紹介ページを作成してください。
- フォント: "Noto Serif JP", 游明朝, YuMincho, "Hiragino Mincho ProN", serif（見出しも本文も weight 300）
- テキスト色 #404040（純黒禁止）、letter-spacing 0.02em
- 行間はナビ・単発テキストで 2.3、段落本文で 1.5 に切り替える
- 背景は白。製品写真を全幅で大きく置き、余白を広く取る
- アクセントはトープ #867d6b のみ。リンクと小見出しに静かに使う
- ボタンはテキストリンク中心。区切りは 1px のヘアライン罫
- 影・角丸・太字は使わず、サイズと余白と細い罫線だけで構成する