Sousou

SOU・SOU（https://www.sousou.co.jp/）公式オンラインショップのデザイン仕様書。

Back to all styles

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens
22type steps
6radius steps
8pxspacing base

Sousou, in one page

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 の例外を除く）

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

This prompt ships with the source DESIGN.md.

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)

The specification

Colour paletteRead the full spec

実サイトの 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）
Type scaleRead the full spec

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 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 禁則処理・改行ルール

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

3.7 OpenType 機能

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

3.8 縦書き

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

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"
Responsive behaviourRead the full spec

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 で十分なヒット領域

ダークモード

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-sousou {--page-bg: #f5f5f5;
  --page-bg-gradient: none;
  --text-color: #222222;
  --heading-color: #222222;
  --link-color: #786427;
  --link-hover-color: #52441a;
  --border-color: #cfcfcf;
  --card-bg: #f5f5f5;
  --card-shadow: 0 1px 2px rgba(34,34,34,0.06);
  --card-hover-shadow: 0 6px 18px rgba(34,34,34,0.12);
  --header-bg: #222222;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #f5f5f5;
  --footer-text-color: #6c6c6c;
  --button-bg: #c1a443;
  --button-text-color: #000000;
  --button-hover-bg: #9d8534;
  --button-border: none;
  --button-border-radius: 19px;
  --button-secondary-bg: #e8e8e8;
  --button-secondary-text-color: #222222;
  --button-secondary-hover-bg: #dcdcdc;
  --button-secondary-border: 1px solid #cfcfcf;
  --prompt-bg: #eaeaea;
  --prompt-text-color: #222222;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-serif);
  --card-border-radius: 19px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

Where this came from

Source document
jp/design-md/sousou/DESIGN.md · 14.2 KB
Repository
kzhrknt/awesome-design-md-jp
Licence
MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.