SOU・SOU(そうそう) DESIGN.md

Japan

SOU・SOU(https://www.sousou.co.jp/)公式オンラインショップのデザイン仕様書。 「日本の伝統と現代の融合」をコンセプトに、地下足袋・テキスタイル・和装を現代的なグラフィックで再解釈する京都発のテキスタイルブランド。 実サイトの computed style 実測(2026-05-07 取得)に基づく。

Raw DESIGN.md

At a glance

Group
Japan
Main color
#c1a443Yellow design systems
Fonts
Noto Serif JPNoto Sans JP も定義されているがNoto Sans JP

Colors in this file

  • #ffffff

    Surface White

  • #222222

    Heading Color

  • #c1a443

    という非常に珍しい選択。アクセントの

  • #f5f5f5

    : 和紙のような

  • #dedede

    Border Default

  • #a91717

    Campaign Red

  • #de2a2a

    Error / Danger

  • #888888

    Text Muted

  • #2e9e7b

    Success / In Stock

  • #4181f2

    Link / Reviews

SOU・SOU(https://www.sousou.co.jp/)公式オンラインショップのデザイン仕様書。 「日本の伝統と現代の融合」をコンセプトに、地下足袋・テキスタイル・和装を現代的なグラフィックで再解釈する京都発のテキスタイルブランド。 実サイトの computed style 実測(2026-05-07 取得)に基づく。

1. Visual Theme & Atmosphere

  • デザイン方針: 和紙のような オフホワイト #f5f5f5 をキャンバスに、Noto Serif JP(明朝体)で本文も見出しもすべて組む という非常に珍しい選択。アクセントの マスタード #c1a443(金茶色) が伝統的な染め色や茶室を想起させる、現代的に再構築された和の編集デザイン
  • 密度: 商品カードと本文がゆったり配置され、letter-spacing を 0.08em(本文)〜 0.2em(h2) と極端に開いて組む。呼吸の長い、ゆったりとした和的編集組
  • キーワード: Noto Serif JP、明朝体ボディ、letter-spacing 大、マスタード金茶 #c1a443、オフホワイト #f5f5f5、ピル CTA、和の現代化
  • 特徴:
    • 本文も見出しも --heading-font-family / --text-font-family の両方が "Noto Serif JP" 単一指定 — Web フォントを明朝で組む決断
    • 補助フォントとして --font-gothic: "Noto Sans JP" も定義されているが、UI は基本的に明朝が主役
    • CSS Custom Properties が 311 個定義されており、Shopify Plus + theme system の典型的な完成度
    • letter-spacing が極端に広い — h2 は 5.6px (0.2em) / h2 36px は 7.2px (0.2em) / h1 22px は 1.76px (0.08em) / 本文 14-16px は 1.12-1.28px (0.08em)
    • CTA は 3 系統の角丸を使い分け:黒塗りボタン(5px)、ピル形ナビ(40.81px ≈ full pill)、丸角アウトライン(19px / 25px)
    • ブランド色 #c1a443(マスタード/金茶) は CSS Custom Property --color-accent として定義 — 染め物・茶室・畳の和的な warm tone
    • エラー色 #de2a2a、成功色 #2e9e7b、リンク色 #4181f2(青)等のセマンティック色も完備
    • キャンペーン強調色 #a91717(朱赤、深紅)— 伝統的な日本の禁色を意識
    • ダークモード非対応

2. Color Palette & Roles

実サイトの computed style 実測値および CSS Custom Properties(--color-*)。すべて hex 表記。

Brand

  • Accent (Mustard Gold) (#c1a443): メインアクセント色(--color-accent)。47 回出現、ブランド識別の最重要色。和の染め色「黄丹(おうたん)」を想起
  • Campaign Red (#a91717): キャンペーンラベル「送料無料キャンペーン中」等の強調赤(深紅・朱に近い)

Surface

  • Page Background (#f5f5f5): ページ全体のオフホワイト(67 回出現、最頻)。和紙・生成りの色味
  • Section Alt (#e8e8e8): 補助セクション背景
  • Surface White (#ffffff): カード・モーダル等の純白面(--bg-color-common)
  • Footer Dark (#4b4b4b): フッター・ダーク背景
  • CTA Black (#000000): 「今日のブログを読む」黒塗りボタン(強い CTA)
  • Sub Header Dark (#222426): ストックエリアのサブヘッダー(--bg-color-stock-area-sub-header、α 0.79)

Text

  • Heading Color (#222222): 見出し(--heading-color: 34, 34, 34)
  • Text Primary (#222222): 本文(--text-color: 34, 34, 34)
  • Text Muted (#888888): 補足・キャプション(--color-subbed)
  • Text on Search (#5c5c5c): 検索欄テキスト(--color-search)
  • Search Placeholder (#929292): 検索プレースホルダー(--color-search-holder)
  • Light Outline (#555555): 「もっと見る」アウトラインボタンのテキスト

Border

  • Border Default (#dedede): 標準ボーダー(--border-color: 222, 222, 222)
  • Border Stronger (#a7a7a7): 強めの境界(--border-color-darker)
  • Border Main (#dcdcdc): メイン境界(--color-main-border)

Semantic

  • Error / Danger (#de2a2a): エラーテキスト・低在庫警告(--error-color)
  • Delete Border (#c72d3f): 削除ボタンの境界線(--delete-border-color)
  • Delete Text (#e5354a): 削除アクションのテキスト(--delete-text-color)
  • Success / In Stock (#2e9e7b): 在庫あり・成功(--success-color / --product-in-stock-text-color)
  • Link / Reviews (#4181f2): U-KOMI 等の外部リンク色

Light BG / Pale

  • Pale Blue (#e1eaf2): 補助 BG(--color-bg-light)
  • Payment (#d9d9d9): 決済関連背景(--color-payment)

3. Typography Rules

3.1 和文フォント

SOU・SOU は 本文・見出しすべてを明朝体(Noto Serif JP)で統一するという非常に珍しい選択をしている。

  • メイン(明朝): Noto Serif JP(Google Fonts / 砧書体制作所) — Web 配信される明朝体の代表格。SOU・SOU は本文・見出しの両方をこれで組む
  • 補助(ゴシック): Noto Sans JP(--font-gothic として定義、UI フォーム等で限定使用)
  • フォールバック: serif(システム明朝)

3.2 欧文フォント

  • 専用欧文書体の指定なし。Noto Serif JP の欧文グリフを使用

3.3 font-family 指定

実サイトの実測値(body / 全見出し / a / p すべて同一):

css/* CSS Custom Properties */
--heading-font-family: "Noto Serif JP", "Noto Serif Japanese", serif;
--text-font-family: "Noto Serif JP", "Noto Serif Japanese", serif;
--font-gothic: "Noto Sans JP", sans-serif;

/* 実適用 */
font-family: "Noto Serif JP", "Noto Serif Japanese", serif;

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

  • 明朝統一が SOU・SOU の核。Sans でフォールバックさせない(serif 終端で必ず明朝系)
  • ゴシックを使うのはフォーム・小さな UI ラベルだけに限定
  • AI で再現する場合は Google Fonts の "Noto Serif JP" を読み込み、フォールバックを serif で締める

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

実測値(トップページ、2026-05-07 取得)

RoleSizeWeightLine HeightLetter SpacingColor備考
Hero h2 (Display)36px40054px (×1.5)7.2px (+0.2em)#222222"SOU・SOU\nについて"
Section h228px40042px (×1.5)5.6px (+0.2em)#222222"お知らせ"
Banner h2 (on dark)26.6px40037.24px (×1.4)2.128px (+0.08em)#ffffff"夏の新作和装"
Lead p24px40031.2px (×1.3)1.92px (+0.08em)#000000"5.15(金)まで"
Section h322px40039.6px (×1.8)1.76px (+0.08em)#222222"衣類"
Banner h3 (on dark)22px40038.13px (×1.73)normal#ffffff"送料/関税 無料キャンペーン"
Page h122px40017px (×0.77)1.76px (+0.08em)#222222"SOU・SOUのブログ"(極端なタイト lh)
Banner Logo a32px70055.47px (×1.73)normal#ffffff"SOU・SOU netshop" ヒーローロゴ
Body16px40027.73px (×1.733)normal#222222本文段落(Noto Serif JP)
Banner Body p15px40027px (×1.8)1.2px (+0.08em)#ffffff"日本の気候に寄り添った素材..."
Sub h315px40022.5px (×1.5)1.2px (+0.08em)#222222"【お詫び】..."
Article p14px40025.2px (×1.8)1.12px (+0.08em)#222222記事本文
Campaign Bold17px50017px (×1.0)1.7px (+0.1em)#a91717 (赤)"送料無料キャンペーン中"
Campaign Date17px50017px (×1.0)1.7px (+0.1em)#222222"5.15 (金)まで"
Campaign Caption14px40014px (×1.0)1.7px (+0.12em)#888888"¥5,000以上(海外は¥10,000以上)..."
Nav Pill Link16px40016px (×1.0)1.28px (+0.08em)#222222"トップページ" / "新商品"

3.5 行間・字間

  • 本文の行間: 1.733(≈ 1.7)(27.73 / 16)— Noto Serif JP の可読性を保つ広めの行間
  • 記事本文の行間: 1.8(25.2 / 14)— さらに広い
  • 見出しの行間: 1.5(42 / 28, 54 / 36)
  • letter-spacing は SOU・SOU の最大の特徴 — 全要素で広く取る:
    • 大型見出し(h2 28〜36px): +0.2em(5.6〜7.2px) — 極端に広い
    • 中型見出し(h1 22px / h3 22px): +0.08em(1.76px)
    • 本文(14〜16px): +0.08em(1.12〜1.28px) または normal(場所により)
    • キャンペーン強調(17px 太字): +0.1em(1.7px)

ガイドライン:

  • letter-spacing を必ず開く(特に見出しは 0.08em 以上、大型見出しは 0.2em)— SOU・SOU の和的・編集的な「呼吸」の源
  • 本文も基本的に 0.08em 開く(normal も場面により可)
  • 行間は欧文寄りに少し緩めの 1.7〜1.8(明朝体の可読性確保)
  • 大型見出しでは行間を 1.5、極端なタイトを使う場合は h1 のように 0.77 まで詰める例外もあり

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;
  • 商品名・カテゴリ名は短く、<br> を手動配置する例が多い("SOU・SOU\nについて")
  • 中黒「・」(U+30FB)の前後で letter-spacing が見栄えよくスペースを作る

3.7 OpenType 機能

cssfont-feature-settings: normal;
  • palt は使用していない — 明朝体の固定幅字形を活かしたいため、palt で詰めない
  • letter-spacing で組み広げているため、palt と組み合わせると意図が崩れる
  • AI 再現時も palt は使わない(letter-spacing のみで字間を制御)

3.8 縦書き

  • 該当なし(横書きのみ)。ただし伝統的な和的トーンに合わせて、装飾としての縦書きラベルを部分的に使う余地あり

4. Component Stylings

Buttons

SOU・SOU は 3 系統の角丸を使い分けて意味を伝える。

Primary CTA("今日のブログを読む")— 黒塗りボタン

  • Background: #000000
  • Text: #ffffff
  • Padding: 10px 30px
  • Border Radius: 5px(軽い丸み)
  • Font: 16px / weight 400 / "Noto Serif JP" / letter-spacing normal
  • 強い CTA に使用

Pill Nav("トップページ" / "新商品")— ピル形ナビゲーション

  • Background: transparent
  • Text: #222222
  • Border: 1px solid #dedede(推奨)
  • Padding: 15px 20px
  • Border Radius: 40.81px(full pill)
  • Font: 16px / weight 400 / line-height 1.0 / letter-spacing 1.28px (+0.08em)
  • カテゴリ・ナビ用

Rounded Outline("全て見る")— 大きめの丸角アウトライン

  • Background: transparent
  • Text: #222222
  • Border: 1px solid #dcdcdc(推奨)
  • Padding: 19px 20px
  • Border Radius: 25px
  • Font: 16px / weight 400 / letter-spacing normal

Rounded Secondary("もっと見る")— 小さめの丸角アウトライン

  • Background: #ffffff
  • Text: #555555
  • Border: 1px solid #dedede
  • Padding: 10px 20px
  • Border Radius: 19px
  • Font: 14px / weight 400

External Link CTA("U-KOMIの詳細はこちら")— 青塗り

  • Background: #4181f2
  • Text: #ffffff
  • Padding: 15px 35–40px
  • Border Radius: 5px
  • Font: 16px / weight 400

Form Submit("登録")— グレー塗り

  • Background: #888888
  • Text: #ffffff
  • Padding: 0 5px(高さは入力欄に追従)
  • Border Radius: 3px
  • Font: 16px / weight 400

Inputs

  • Background: #ffffff
  • Border: 1px solid #dedede(--border-color)
  • Border (focus): 1px solid #c1a443(accent / 推奨)
  • Border (error): 1px solid #de2a2a
  • Border Radius: 3〜5px
  • Padding: 8〜12px
  • Font: 13〜16px / weight 400 / "Noto Serif JP"(または UI 限定で Noto Sans JP)
  • Color: #000000 / placeholder #929292

Search Input

  • Background: #ffffff
  • Color: #5c5c5c(--color-search)
  • Placeholder: #929292
  • Font: 14px / weight 400

Cards / Product Tiles

  • Background: #ffffff
  • Border: なし or 1px solid #dedede
  • Border Radius: 0px(写真の四角を尊重)
  • Padding: 写真直下にメタ領域 12〜16px
  • Shadow: なし(フラット)
  • 構造: 商品写真 → 商品名(22px / "Noto Serif JP")→ 価格(14px)
  • ホバー: 写真 opacity 0.85 等

Banner Section("夏の新作和装")

  • Background: 写真または #222426(暗色)
  • Heading 26.6〜36px / weight 400 / #ffffff
  • Body 15px / weight 400 / line-height 1.8 / letter-spacing 1.2px
  • 「全て見る」CTA は丸角 25px のアウトライン

Header / Nav

  • Background: #ffffff
  • Color: #222222
  • Padding: 16px 24px
  • Logo "SOU・SOU netshop" 中央、検索・カート右
  • グローバルナビは下段にピル形(radius 40.81px)で配置

Footer

  • Background: #4b4b4b または #f5f5f5
  • Color: #ffffff または #222222
  • Padding: 48px 24px 24px
  • フッターリンク: 14〜16px / weight 400 / "Noto Serif JP"

5. Layout Principles

Spacing Scale(推奨 8px グリッド)

TokenValue用途
XS4pxバッジ内余白
S8pxリスト項目間
M16pxカード内段落間
L24pxカード間
XL48pxセクション内余白
XXL80pxセクション間

Container

  • Max Width: 1280px(推奨)
  • Padding (horizontal): mobile 16px / desktop 24〜32px

Grid

  • 商品グリッド: 2 カラム(mobile)→ 3 カラム(tablet)→ 4 カラム(desktop)
  • Gutter: 16〜24px

Border Radius Scale

SOU・SOU は 複数の角丸を意図的に使い分ける:

TokenValue用途
Sharp0pxカード・写真・コンテンツ領域
Soft3pxフォーム送信ボタン
Subtle5px黒塗り CTA・青塗り CTA
Rounded19px小さめのアウトラインボタン
Pill Soft25px「全て見る」等の中サイズアウトライン
Pill Full40.81pxカテゴリナビ(full pill)
Circle100%カラースウォッチ・アイコン

6. Depth & Elevation

LevelShadow用途
0noneカード・写真・パネル(基本フラット)
10 2px 8px rgba(34, 34, 34, 0.06)薄いカード・ホバー(推奨)
20 4px 16px rgba(34, 34, 34, 0.1)モーダル・ドロップダウン(推奨)
  • SOU・SOU は影をほぼ使わない和的フラット表現。明朝体のクリアさを邪魔しない
  • カードは基本フラット、ホバー時のみ薄い影を出す

7. Do's and Don'ts

Do(推奨)

  • 本文・見出しすべてを "Noto Serif JP" で組む — SOU・SOU の最大の identity
  • letter-spacing を必ず開く:
    • 大型見出し(28〜36px): 0.2em(5.6〜7.2px)
    • 中型見出し(22px): 0.08em(1.76px)
    • 本文(14〜16px): 0.08em(1.12〜1.28px) または normal
  • アクセント色は #c1a443(マスタード/金茶) を --color-accent として使用
  • ページ背景は #f5f5f5(純白でなく和紙風オフホワイト)
  • 3 種類の角丸を使い分ける: 0px(コンテンツ)/ 5px(黒塗り CTA)/ 25–40px(ピル)/ 19px(サブ)
  • 本文 line-height は 1.7〜1.8 — 明朝の可読性を確保
  • キャンペーン強調は #a91717(深紅) で和の伝統色を意識
  • 影は最小限、フラット原則
  • ピル形ナビ(radius 40.81px)でカテゴリを表現

Don't(禁止)

  • 見出し・本文を sans-serif(Noto Sans JP 等)で組まない(明朝統一が崩れる)
  • letter-spacing を normal だけで組まない(特に大型見出し)
  • 純白 #ffffff をページ背景に使わない(オフホワイト #f5f5f5 を厳守)
  • 角丸を 1 種類だけに統一しない(意味によって使い分ける)
  • palt を使わない(letter-spacing で字間を制御するため、組み合わせると崩れる)
  • 強いシャドウやグラデーションを使わない
  • カラフルなアクセントを多用しない(マスタード金茶 + 深紅 + ニュートラル基調を保つ)
  • 行間を 1.5 未満にしない(明朝の可読性が落ちる、h1 の例外を除く)

8. Responsive Behavior

Breakpoints

NameWidth説明
Mobile≤ 768pxスマホ
Tablet769–1024pxタブレット
Desktop> 1024pxデスクトップ

モバイル時の調整

  • Hero h2: 36px → 24〜28px(letter-spacing 0.2em は維持)
  • Section h2: 28px → 22〜24px
  • Body: 16px 維持(縮小しない)
  • ナビは drawer ハンバーガーへ切り替え
  • 商品グリッド 4 → 2 → 1 カラム
  • ピル CTA は左右パディングを 15px 20px から 12px 16px へ縮小

タッチターゲット

  • 最小 44×44px。ピルボタン(radius 40.81px)は padding 15px 20px で十分なヒット領域

ダークモード

  • 該当なし。常時ライトモード

9. Agent Prompt Guide

クイックリファレンス

Background: #f5f5f5(オフホワイト、和紙色)
Surface: #ffffff
Heading / Text: #222222
Text Muted: #888888
Search Text: #5c5c5c
Border: #dedede
Accent: #c1a443(マスタード/金茶、--color-accent)
Campaign Red: #a91717(深紅)
Error: #de2a2a / Success: #2e9e7b / Link: #4181f2

Font (本文・見出し共通): "Noto Serif JP", "Noto Serif Japanese", serif
Web Loader: <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap" rel="stylesheet">
Gothic Alt (UI 限定): "Noto Sans JP", sans-serif

Hero h2 (Display): 36px / weight 400 / line-height 1.5 / letter-spacing 7.2px (+0.2em)
Section h2: 28px / weight 400 / line-height 1.5 / letter-spacing 5.6px (+0.2em)
Section h3: 22px / weight 400 / line-height 1.8 / letter-spacing 1.76px (+0.08em)
Lead: 24px / weight 400 / line-height 1.3 / letter-spacing 1.92px
Body: 16px / weight 400 / line-height 1.733 / letter-spacing normal or +0.08em
Article p: 14px / weight 400 / line-height 1.8 / letter-spacing 1.12px (+0.08em)
Campaign Bold: 17px / weight 500 / letter-spacing 1.7px / color #a91717

Border Radius: 0px (cards) / 5px (black CTA) / 19-25px (rounded outline) / 40.81px (pill nav)
Shadow: none(基本フラット、ホバー時のみ薄い影)
font-feature-settings: normal(palt 適用なし)
letter-spacing: 0.08em〜0.2em(必ず開く)

プロンプト例

SOU・SOU のデザインに従って、商品一覧ページを作成してください。
- 背景: #f5f5f5(純白でなく和紙風オフホワイト)
- フォント: "Noto Serif JP", "Noto Serif Japanese", serif(本文・見出し共通の明朝統一)
  Google Fonts: Noto Serif JP weight 400 / 500 / 700 をロード
- letter-spacing を必ず開く:
  - h2 (28px): letter-spacing 5.6px(+0.2em)/ line-height 1.5
  - h2 (36px): letter-spacing 7.2px(+0.2em)/ line-height 1.5
  - h3 (22px): letter-spacing 1.76px(+0.08em)/ line-height 1.8
  - 本文 (16px): line-height 1.733 / letter-spacing normal or 1.28px (+0.08em)
  - 記事本文 (14px): line-height 1.8 / letter-spacing 1.12px
- カラーパレット:
  - 見出し・本文: #222222
  - 補足: #888888
  - アクセント: #c1a443(マスタード金茶)
  - キャンペーン強調: #a91717(深紅)
  - エラー: #de2a2a / 成功: #2e9e7b
  - 純白サーフェス: #ffffff
- 商品カード: 写真直置き、border-radius 0、影なし、商品名 22px / line-height 1.8 / letter-spacing 1.76px
- カテゴリナビ: ピル形(border-radius 40.81px)/ 透明背景 / #222 文字 / padding 15px 20px / letter-spacing 1.28px
- 強い CTA「カートに追加」: 黒塗り #000 / 白文字 / border-radius 5px / padding 10px 30px
- 「もっと見る」: 白塗り / #555 文字 / border 1px solid #dedede / border-radius 19px / padding 10px 20px
- 「全て見る」: 透明 / #222 文字 / border 1px solid #dcdcdc / border-radius 25px / padding 19px 20px
- 入力欄: border 1px solid #dedede / border-radius 3-5px / focus border #c1a443
- font-feature-settings: normal を維持(palt は使わない)
- 影は使わず、ホバー時のみ薄影 0 2px 8px rgba(34, 34, 34, 0.06)

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/sousou.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "sousou" })

Digital Agency Japan (digital.go.jp / DADS)

Japan · Noto Sans JP

Digital Agency Japan (digital.go.jp / DADS)のデザイン仕様書。

角川武蔵野ミュージアム(Kadokawa Culture Museum)

Japan · Noto Sans JP

角川武蔵野ミュージアム(https://kadcul.com/)のデザイン仕様書。 2020 年開館。隈研吾設計の巨大な花崗岩の塊の中に、図書館・美術館・博物館が同居する複合文化施設。 最大の特徴は セクション見出しを writing-mode: vertical-rl の縦組みで組むこと。「企画展/イベント/ライブラリー」「ニュース」「本棚劇場」が縦に立ち、letter-spacing: 0.2em で開く。日本語サイトで縦組み見出…

食べチョク(Tabechoku)

Japan · Noto Serif JP

食べチョク(https://www.tabechoku.com/)のデザイン仕様書。 農家・漁師から直接買える産直通販マーケットプレイス。商品 42,363 点/生産者 11,896 軒が並ぶ。 ブランド色は「金茶」1 系統。--Color-Primary-Gold-70: #cab270(CSS 出現 154 回)と Gold-60: #9f8745(138 回)の 2 段で、面と文字を使い分ける。日本の EC で「金」を主色に据え…

白鶴酒造(HAKUTSURU)

Japan · MyYuGothicM

白鶴酒造(HAKUTSURU)のデザイン仕様書。

カミナシ(KAMINASHI)

Japan · Noto Sans JP

カミナシ(KAMINASHI)のデザイン仕様書。

MIKIMOTO(ミキモト)

Japan · Noto Sans Japanese

MIKIMOTO(https://mikimoto.com/jp-ja)のデザイン仕様書。 1893年創業、養殖真珠の発明者・御木本幸吉が興した日本発のラグジュアリージュエリーブランド。 実サイトの computed style 実測(2026-05-09 取得)に基づく。