SUQQU (スック) DESIGN.md

Japan

SUQQU（https://www.suqqu.com/ja/）のデザイン仕様書。花王グループ（旧カネボウ化粧品）のラグジュアリーコスメティクスブランド。「洗練」と「凛」を掲げ、日本の美意識を現代に昇華した商品で知られる。ブランド哲学: 「顔立ちからつくる」。骨格に沿ったメイクアップ理論で日本人女性の美を引き出す。実サイトの computed style 実測（2026-06-04 取得）に基づく。

Raw DESIGN.md

At a glance

Group: Japan
Main color: #ec7205Orange design systems
Fonts: FOT-ロダン Pro MIwaNMNewsPro-ThFOT-ロダン Pro BNoto Sans JP

Colors in this file

#ffffff
: ラグジュアリーミニマル。
#000000
の広い余白に、
#696969
Text Muted
#19212b
Text Primary
#ec7205
Orange Accent
#333333
Text Heading
#cccccc
Border Default

SUQQU（https://www.suqqu.com/ja/）のデザイン仕様書。花王グループ（旧カネボウ化粧品）のラグジュアリーコスメティクスブランド。「洗練」と「凛」を掲げ、日本の美意識を現代に昇華した商品で知られる。ブランド哲学: 「顔立ちからつくる」。骨格に沿ったメイクアップ理論で日本人女性の美を引き出す。実サイトの computed style 実測（2026-06-04 取得）に基づく。

1. Visual Theme & Atmosphere

デザイン方針: ラグジュアリーミニマル。白 #ffffff の広い余白に、黒 #000000 のヘッダーと CTAボタンが鋭いコントラストを生む。装飾を極限まで排し、黒と白だけで高級感を表現する
密度: ゆったり。大きなビジュアルと控えめなテキストサイズで余白を活かす構成
キーワード: ラグジュアリー、凛、シャープ、モノクローム、日本の美意識
特徴:
- 3書体構成 — 他のブランドにはない非常に特徴的なタイポグラフィシステム:
  1. IwaNMNewsPro-Th（岩田ニュース明朝 Thin）: セクション見出しのディスプレイ書体。細い明朝体が洗練を表現
  2. FOT-ロダン Pro B / M（Fontworks Rodin）: ナビゲーション、商品名、本文のゴシック体。幾何学的な字形が現代性を表現
  3. Noto Sans JP: ベースフォント、UIラベル、クッキー同意等のフォールバック
- CTA ボタンは 完全に角張った矩形（radius 0px）。ラグジュアリーブランドに特徴的なシャープな選択
- アクセントカラーに オレンジ #ec7205 を使用（検索アイコン、ハンバーガーメニュー）。モノクロームの中にわずかに暖色を差す
- テキスト色は #19212b（極濃紺黒）。純黒 #000 とわずかに異なるダークトーン
- letter-spacing は実測値で全要素 normal。字間調整をしない

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand — Monochrome Palette

Black (#000000): ヘッダー背景、CTA ボタン背景。ブランドの中核色
Orange Accent (#ec7205): 検索アイコン、ハンバーガーメニューバー。モノクロームの中の唯一の差し色

Text

Token	hex	RGB	役割
Text Primary	`#19212b`	(25, 33, 43)	本文テキスト。極濃紺黒
Text Heading	`#333333`	(51, 51, 51)	白背景上のセクション見出し
Text on Black	`#ffffff`	(255, 255, 255)	ヘッダーナビ、CTA ボタン上
Text Muted	`#696969`	(105, 105, 105)	クッキー同意テキスト、補足

Surface

Token	hex	役割
Background	`#ffffff`	ページ背景
Header / CTA	`#000000`	ヘッダーバー、CTA ボタン
Card	`#ffffff`	商品カード面
Cookie Consent	`#696969`	クッキー同意バー

Border

Border Default (#cccccc): 汎用ボーダー（推定）
Border Button (#696969): セカンダリボタン枠線（クッキー設定ボタン）

3. Typography Rules

3.1 和文フォント

IwaNMNewsPro-Th: 岩田ニュース明朝 Thin。Adobe Fonts。セクション見出し（TOPICS、STAFF REVIEW 等）のディスプレイ書体として使用。Thin ウェイトの繊細な明朝体が SUQQU のブランドトーンを定義する
FOT-ロダン Pro B / M: Fontworks Rodin。Adobe Fonts。ナビゲーション、商品名、本文、CTA ボタンのゴシック体。B（Bold）と M（Medium）の2ウェイトを使い分ける
Noto Sans JP: Google Fonts。ベースフォント、カルーセル、クッキー同意等の UI 要素に使用

3.2 欧文フォント

IwaNMNewsPro-Th および FOT-ロダン Pro の内蔵欧文グリフに依存
Noto Sans JP の内蔵欧文グリフに依存
独立した欧文フォントスタックは未使用

3.3 font-family 指定

css/* ディスプレイ見出し（明朝体）*/
font-family: "IwaNMNewsPro-Th", "Shippori Mincho", "Hiragino Mincho ProN", serif;

/* ナビゲーション・商品名・本文（ゴシック体 Bold）*/
font-family: "FOT-ロダン Pro B", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

/* 本文・キャプション（ゴシック体 Medium）*/
font-family: "FOT-ロダン Pro M", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

/* UI ベース（フォールバック）*/
font-family: "Noto Sans JP", sans-serif;

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

ディスプレイ見出しは明朝体（IwaNMNewsPro-Th）。Adobe Fonts が使えない環境では Shippori Mincho → ヒラギノ明朝
ナビ・本文はゴシック体（FOT-ロダン Pro）。フォールバックは Zen Kaku Gothic New → Noto Sans JP
ウェイトの切り替えはフォントファミリー名（B / M）で行う

preview.html での代替: IwaNMNewsPro-Th と FOT-ロダン Pro はドメインライセンスの Adobe Fonts のため、プレビューでは以下の Google Fonts で代替:

IwaNMNewsPro-Th → Shippori Mincho（日本語明朝体で最も近い印象）

FOT-ロダン Pro B / M → Zen Kaku Gothic New（Fontworks 系の幾何学的ゴシック。Noto Sans JP より字形が近い）

Noto Sans JP → そのまま使用

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

Role	Font	Size	Weight	Line Height	Letter Spacing	備考
Section Display	IwaNMNewsPro-Th	34px	400	1.4	normal	"TOPICS" 等の大見出し
Section Sub	IwaNMNewsPro-Th	18px	400	1.0	normal	"STAFF REVIEW" 等
Sub Heading	Noto Sans JP	18px	400	1.4	normal	"人気ランキング" 等
Product Title	FOT-ロダン Pro B	13–14px	400	1.7	normal	商品名
Body	FOT-ロダン Pro M	12–14px	400	1.7–1.8	normal	本文テキスト
Base	Noto Sans JP	16px	400	1.5	normal	ベーステキスト
Nav	FOT-ロダン Pro B	13px	400	1.7	normal	ヘッダーナビゲーション
CTA	FOT-ロダン Pro M	16px	400	1.5	normal	ボタンテキスト

3.5 行間・字間

行間 (line-height) — 実測値:

ディスプレイ見出し: 1.4（34px → 47.6px）
サブ見出し: 1.0（18px → 18px）— 非常にタイトな行間
本文: 1.7–1.8（12–14px → 21.6–23.8px）
ベーステキスト: 1.5（16px → 24px）
CTA ボタン: 1.5

字間 (letter-spacing) — 実測値:

全要素が normal。SUQQU は字間調整をまったく行わない
書体自体のメトリクスに完全に依存する設計

3.6 禁則処理・改行ルール

ブラウザデフォルトの禁則処理に依存
特殊な word-break / line-break 設定は未確認

3.7 OpenType 機能

palt: 不使用。字間をプロポーショナルにしない
kern: ブラウザデフォルトに依存
特別な font-feature-settings の明示的指定は未確認

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（"詳細はこちら"、"新規会員登録はこちら"、"店舗一覧"）

Background: #000000
Text: #ffffff
Border Radius: 0px（完全な矩形） — SUQQU の最も特徴的なコンポーネントスタイル
Padding: 8px / 15px 0
Font Family: FOT-ロダン Pro M
Font Size: 16px
Font Weight: 400

Cookie OK Button

Background: #696969
Text: #ffffff
Border: 1px solid #696969
Border Radius: 2px
Font Size: 14px

Cookie Settings Button（Secondary）

Background: #ffffff
Text: #696969
Border: 1px solid #696969
Border Radius: 2px
Font Size: 14px

Carousel Dot (Active)

Background: #000000
Border: 1px solid #000000
Border Radius: 50%

Carousel Dot (Inactive)

Background: transparent
Border: 1px solid #000000
Border Radius: 50%

Inputs

Background: #ffffff
Border: 1px solid #cccccc（推定）
Border (focus): 1px solid #000000（推定）
Border Radius: 0px（ブランドトーンに準拠）
Padding: 8px 12px
Font Size: 14px

Cards

Background: #ffffff
Border: なし（影なし、ボーダーなし）
Border Radius: 0px
Padding: 10px 0 16px
Shadow: なし（フラット）

5. Layout Principles

Spacing Scale

Token	Value
XS	4px
S	8px
M	16px
L	24px
XL	40px
XXL	80px

Container

Max Width: 1200px（推定）
Padding (horizontal): 16px–32px

Grid

商品カルーセル: 横スクロール
サービスリンク: 4–5 カラム
コンテンツ: 1 カラム中央寄せ

6. Depth & Elevation

Level	Shadow	用途
0	none	ほぼすべての要素（フラットが基本）
1	`0 1px 3px rgba(0,0,0,0.08)`	ドロップダウン・ポップオーバー
2	`0 4px 12px rgba(0,0,0,0.12)`	モーダル

基本方針は完全フラット。SUQQU は影をほぼ使わない
黒と白のコントラストだけで階層を表現する
ホバーエフェクトも控えめ

7. Do's and Don'ts

Do（推奨）

CTA ボタンは border-radius: 0px の完全な矩形にする
テキスト色は #19212b（極濃紺黒）を使う
ヘッダーと CTA の背景色は #000000 を使う
ディスプレイ見出しには明朝体（IwaNMNewsPro-Th）を使う
ナビゲーション・本文にはゴシック体（FOT-ロダン Pro）を使う
3書体（明朝 + ゴシック + サンセリフ）の使い分けを厳守する
余白を大きく取り、装飾を排除する
letter-spacing は全要素 normal のまま
ページ背景は #ffffff の純白を使う

Don't（禁止）

ピル型ボタン（border-radius: 9999px）を使わない。SUQQU は 0px radius が鉄則
角丸ボタン（border-radius: 4px 以上）も使わない
テキストに #000000 を使わない。本文は #19212b を使う（ヘッダー/CTA背景の黒とは別）
ディスプレイ見出しにゴシック体を使わない。明朝体専用
影やグラデーションで装飾しない。SUQQU はフラットデザイン
letter-spacing を追加しない
palt を使わない
アクセントカラー #ec7205 を CTA に使わない。オレンジはアイコン等のサブ要素専用

8. Responsive Behavior

Breakpoints

Name	Width	説明
Mobile	≤ 480px	モバイルレイアウト
Tablet	≤ 768px	タブレットレイアウト
Desktop	> 768px	デスクトップレイアウト

タッチターゲット

最小サイズ: 44px x 44px（WCAG 基準）
CTA ボタンは padding 8px だが、タッチ領域は 44px を確保

フォントサイズの調整

モバイルではディスプレイ見出しを 24–28px 程度に縮小
本文 12–14px はモバイルでも維持
ナビゲーションはハンバーガーメニューに切り替え

9. Agent Prompt Guide

クイックリファレンス

Brand Black: #000000
Text Primary: #19212b
Text Heading: #333333
Text on Black: #ffffff
Text Muted: #696969
Background: #ffffff
Orange Accent: #ec7205

Display Font: "IwaNMNewsPro-Th", serif     → 代替: "Shippori Mincho"
Body Font: "FOT-ロダン Pro M", sans-serif  → 代替: "Zen Kaku Gothic New"
Nav Font: "FOT-ロダン Pro B", sans-serif   → 代替: "Zen Kaku Gothic New" weight 700
Base Font: "Noto Sans JP", sans-serif

Display Size: 34px / weight 400 / line-height 1.4
Body Size: 12–14px / weight 400 / line-height 1.7
Base Size: 16px / weight 400 / line-height 1.5
CTA Size: 16px / weight 400

Button Radius: 0px（完全矩形）
Letter Spacing: normal（全要素）

プロンプト例

SUQQU のデザインシステムに従って、商品一覧ページを作成してください。
- ヘッダー: bg #000000、テキスト #ffffff
- セクション見出し: 明朝体（Shippori Mincho）34px / weight 400
- 商品名: ゴシック体（Zen Kaku Gothic New）13px
- 本文: ゴシック体（Zen Kaku Gothic New）14px / line-height 1.7
- CTA ボタン: bg #000000、text #ffffff、radius 0px（完全矩形）
- カード: 背景 #ffffff、ボーダーなし、影なし
- ページ背景: #ffffff
- letter-spacing: normal（全要素）
- palt: 不使用

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/suqqu.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

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

Schoo（スクー）

Japan · Avenir

Schoo（https://schoo.jp/）のデザイン仕様書。社会人向けオンライン学習プラットフォーム。生放送コミュニティ学習と録画授業を提供。実サイトの computed style 実測（2026-06-22 取得）に基づく。

ＪＲ東海（Central Japan Railway Company）

Japan · Noto Sans JP

ＪＲ東海（Central Japan Railway Company）のデザイン仕様書。

根津美術館（Nezu Museum）

Japan · Noto Serif JP

根津美術館（https://www.nezu-muse.or.jp/）のデザイン仕様書。 1941 年開館、東京・南青山。東武鉄道の社長を務めた実業家・初代根津嘉一郎の日本・東洋古美術コレクションを基礎とする私立美術館。国宝『燕子花図屏風』（尾形光琳）を所蔵する。2009 年に隈研吾設計の本館が竣工し、竹垣に沿う長いアプローチが館の顔になった。最大の特徴は、サイト全体が明朝体で組まれていること。body { font-family:…

吉田カバン / YOSHIDA & Co. (PORTER)

Japan · Noto Sans JP

吉田カバン（YOSHIDA & Co.）公式サイト（https://www.yoshidakaban.com/）のデザイン仕様書。 PORTER / LUGGAGE LABEL / B印 YOSHIDA 等、同社の主力ブランドを統括する公式コーポレートサイト。実サイトの computed style に基づいて記述。

Hoshino Resorts (hoshinoresorts.com)

Japan · Noto Sans JP

Hoshino Resorts (hoshinoresorts.com)のデザイン仕様書。

UPSIDER

Japan · Noto Sans JP

UPSIDER（https://up-sider.com/lp/）のデザイン仕様書。「上場のための法人カード」を掲げる法人カード／支出管理の B2B SaaS。10 万社超が導入。主 CTA はオレンジのグラデーションピル（linear-gradient(90deg, #f5833e 0%, #fead48 100%)）。サイト内で有彩色が出るのは、ほぼこの CTA だけ面色が background-color ではなく bac…

All Design.md files Browse by font

SUQQU (スック) DESIGN.md

At a glance

Colors in this file

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Brand — Monochrome Palette

Text

Surface

Border

3. Typography Rules

3.1 和文フォント

3.2 欧文フォント

3.3 font-family 指定

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

3.5 行間・字間

3.6 禁則処理・改行ルール

3.7 OpenType 機能

3.8 縦書き

4. Component Stylings

Buttons

Inputs

Cards

5. Layout Principles

Spacing Scale

Container

Grid

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

Don't（禁止）

8. Responsive Behavior

Breakpoints

タッチターゲット

フォントサイズの調整

9. Agent Prompt Guide

クイックリファレンス

プロンプト例

Use it with your agent

Related Design.md files

Schoo（スクー）

ＪＲ東海（Central Japan Railway Company）

根津美術館（Nezu Museum）

吉田カバン / YOSHIDA & Co. (PORTER)

Hoshino Resorts (hoshinoresorts.com)

UPSIDER