SNIDEL（スナイデル） DESIGN.md

SNIDEL（https://snidel.com/）のデザイン仕様書。 MASH Holdings が展開するウィメンズファッションブランド。"Street Formal" をコンセプトに、フェミニンなエレガンスとカジュアルなストリート感を融合させたスタイルで知られる。 実サイトの computed style 実測（2026-05-21 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純黒 #000000 × 純白 #ffffff のハイコントラスト・モノクロームを基調に、フラットな角張り CTA（radius 0px） と 極端にタイトな見出し行間（1.0） でファッション・エディトリアルの緊張感を表現
• 密度: 見出しの line-height は 1.0（ベタ組み）でコンテンツを圧縮し、モード感を演出。本文テキストは 12〜14px の小ぶりなサイズで情報密度が高い
• キーワード: モノクローム、エディトリアル、ストリートフォーマル、ジオメトリックサンセリフ、ミニマルラグジュアリー
• 特徴:
  • 欧文フォントに pragmatica（ParaType、Adobe Fonts） を採用。幾何学的なサンセリフで、欧州ラグジュアリーブランドの空気感を持つ
  • font-feature-settings: "palt" をグローバル適用。日本語の約物・かなを詰め組みにし、欧文 pragmatica のメトリクスと揃える。ファッションブランドらしい繊細な組版
  • 純黒 #000000 をテキスト主色に採用（SaaS 系で多い #333 や #1a1a1a のような柔らかい黒ではない）。白背景に対して最大コントラストを取る、モード系ブランドの定石
  • CTA は radius 0px の完全フラット矩形。丸ピルを多用する SaaS 系とは対照的で、シャープなファッション感を出す
  • タグピル（トレンドキーワード）のみ radius 20px の丸型にし、矩形 CTA との対比で柔らかさを添える
  • セール・プロモ用に #feca00（イエロー）、#f90000（レッド）、#f70080（ピンク） 等のビビッドカラーを持つが、通常 UI はモノクローム
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand / Base

• Black (#000000): ブランドの主色。テキスト、CTA 背景、ロゴに使用。SNIDEL のモノクロームを支える軸
• White (#ffffff): ページ背景、CTA テキスト。黒との 21:1 の最大コントラスト

CTA / Buttons

• Primary CTA: 背景 #000000 / 文字 #ffffff / radius 0px（フラット矩形）— "絞り込む" 等
• Secondary CTA: 背景 #ffffff / 文字 #000000 / radius 0px（フラット矩形）— "リセット" 等
• Tag Pill: 背景 #dbdbdb / 文字 #000000 / radius 20px / padding 4px 10px — トレンドキーワード

Neutral

Promo / Seasonal

セール・キャンペーン時に使用するビビッドカラー。通常 UI には現れない。

Semantic（推奨値）

実サイトにはエラー／成功の明示的な色が表面化していない。EC 向けに推奨する補完値:

• Danger: #f90000（プロモレッドを兼用可）
• Success: #00942b（プロモグリーンを兼用可）
• Warning: #feca00（セールイエローを兼用可）

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体（YuGothic / Yu Gothic） を主軸に使用
• フォールバック: 游ゴシック体 → YuGothic → "游ゴシック Medium" → "Yu Gothic" → メイリオ → sans-serif
• ヒラギノ系: 一部要素で "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN" が指定されている
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: pragmatica（ParaType、Adobe Fonts）。幾何学的サンセリフで、Futura や DIN に近い端正なプロポーション。ファッションブランドで好まれる書体
• font-family 先頭に置かれ、欧文部分は pragmatica が優先される（和文は游ゴシック等にフォールバック）
• 等幅: 指定なし

3.3 font-family 指定

css/* 本文・見出し・ボタン（メインスタック） */
font-family: pragmatica, 游ゴシック体, YuGothic, "游ゴシック Medium",
  "Yu Gothic", メイリオ, sans-serif;

/* 一部要素（ヒラギノ系バリエーション） */
font-family: pragmatica, "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN", メイリオ, sans-serif;

/* カテゴリナビ（pragmatica なし） */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium",
  "Yu Gothic", メイリオ, sans-serif;

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

• pragmatica を先頭に置き、欧文部分をブランド書体で統一する
• 和文は游ゴシック体（macOS / Windows 両対応）にフォールバック。ヒラギノ角ゴの指定もあるが、メインスタックでは游ゴシックを優先
• カテゴリナビのみ pragmatica を外し、游ゴシック体単独で表示（ナビの和文テキストを游ゴシックのメトリクスに統一する意図）
• 最終フォールバックは sans-serif

代替フォント注記: pragmatica は Adobe Fonts のドメインライセンスのため、プレビューや社外資料で再現できない場合がある。代替として DM Sans（Google Fonts）を使用すると、幾何学的プロポーションと x-height の近さで印象が近い。Inter も候補だが、DM Sans の方が pragmatica のジオメトリック感に寄る。

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

実測値（トップページ、2026-05-21 取得）

注意: base font-size が 10px と極端に小さいのはモバイルファーストの設計で、実際の可読テキストは 12〜18px で表示される。10px は rem 計算のベースとして機能している可能性が高い。

3.5 行間・字間

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

• 見出し (26〜38px): 1.0（ベタ組み）-- ファッション・エディトリアルの特徴。行間ゼロの緊張感
• カテゴリナビ (18px): 1.0（ベタ組み）
• お知らせバー (14px): 3.57（50px / 14px）-- テキストではなくバー高さの確保が目的
• トレンドラベル (12px): 1.75（21px / 12px）-- 小テキストは読みやすさを確保

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

• お知らせバー: 0.16em（2.24px / 14px）-- 極めて広い。お知らせ文の一字一字を離してブランド感を演出
• ナビリンク: 0.08em（0.96px / 12px）-- ナビ用のやや広めのトラッキング
• カテゴリナビ: 0.05em（0.9px / 18px）-- 微かに広げて視認性を確保
• 見出し: normal（0）-- 大きなサイズの見出しは詰めない

ガイドライン:

• SNIDEL のタイポグラフィは 見出しの行間 1.0 が核心。行間を広げるとファッション感が失われる
• 字間はサイズが小さいほど広く取る傾向（12px → 0.08em、14px → 0.16em）。大見出しは 0
• palt がグローバル適用されているため、和文の約物・かなは自動で詰め組みになる

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• お知らせバーは white-space: nowrap でスクロール表示
• 商品名・ブランド名は折り返さない

3.7 OpenType 機能

css/* グローバル適用（body レベル） */
font-feature-settings: "palt" 1;

• palt がサイト全体に適用されている。これは SNIDEL の最も特徴的なタイポグラフィ設定
• 日本語の括弧・句読点・かなが詰め組みになり、欧文 pragmatica と並べたときのリズムが揃う
• 多くのサイトが見出しのみに palt を適用する中、SNIDEL はグローバル適用（本文を含む）
• kern は明示的な指定なし（pragmatica のデフォルトカーニングに依存）

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（黒フラット矩形） -- "絞り込む"

• Background: #000000
• Text: #ffffff
• Padding: 12px 24px（推奨）
• Border Radius: 0px（完全フラット -- ファッションブランドのシャープさ）
• Font: pragmatica, 游ゴシック体, 12〜14px, weight 400〜500
• Border: none
• font-feature-settings: "palt" 1

Secondary CTA（白フラット矩形） -- "リセット"

• Background: #ffffff
• Text: #000000
• Border: 1px solid #000000
• Padding: 12px 24px（推奨）
• Border Radius: 0px（完全フラット）
• Font: pragmatica, 游ゴシック体, 12〜14px, weight 400〜500

Tag Pill（トレンドキーワード） -- "#ニットセットアップ" 等

• Background: #dbdbdb
• Text: #000000
• Padding: 4px 10px
• Border Radius: 20px（丸ピル -- 矩形 CTA との対比）
• Font: pragmatica, 12px, weight 400

Pagination Dot

• Background (inactive): #a6a6a6
• Background (active): #ffffff + border
• Width / Height: 14px
• Border Radius: 7px（正円）

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #dbdbdb
• Border (focus): 1px solid #000000
• Border Radius: 0px（CTA と統一、フラット矩形）
• Padding: 12px 16px
• Font: pragmatica, 游ゴシック体, 14px, weight 400
• Height: 44px

Cards / Product Tiles

• Background: #ffffff
• Border: なし（画像とテキストの構成で区切る）
• Border Radius: 0px（フラット）
• Shadow: なし
• 商品画像はアスペクト比固定で object-fit: cover
• 商品名は 12〜14px / weight 400、価格は 12px / weight 400

Header

• Background: #ffffff（ソリッド白）
• Border Bottom: なし、または 1px solid #f1f1f1
• Position: fixed or sticky
• ロゴは中央配置、左右にナビアイコン

Footer

• Background: #ffffff または #f1f1f1
• Text: #000000
• Font: 12px, weight 400

Announcement Bar（お知らせバー）

• Background: #ffffff または #000000（キャンペーンにより変動）
• Text: 14px, weight 400, letter-spacing 0.16em
• Height: 50px（line-height で確保）
• white-space: nowrap でスクロール表示

5. Layout Principles

Spacing Scale（推奨 4px グリッド）

Container

• Max Width: 1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 24〜40px

Grid

• 商品一覧: 2カラム（mobile）/ 3〜4カラム（desktop）
• Gutter: 8〜16px（タイトなグリッド -- ファッション EC の定石）

Border Radius Scale

注意: SNIDEL の UI は原則 radius 0px。丸みを持つのはタグピルとページネーションドットのみ。

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は 色のコントラスト（黒 vs 白）と 面の切り替え（#ffffff vs #f1f1f1）で表現
• 影を使う場合も 控えめな黒（rgba(0, 0, 0, 0.06〜0.12)）に留める
• ファッション EC は「フラットで写真を主役にする」のが基本。影で装飾しない

7. Do's and Don'ts

Do（推奨）

• 欧文は pragmatica を先頭、和文は 游ゴシック体 → YuGothic → メイリオ のフォールバックチェーンを守る
• font-feature-settings: "palt" 1 をグローバルに適用する（SNIDEL の核心的な組版設定）
• テキストの主色は 純黒 #000000 を使う（柔らかい黒 #333 や #1a1a1a は使わない）
• CTA は radius 0px のフラット矩形にする。Primary は黒背景＋白文字、Secondary は白背景＋黒文字＋黒ボーダー
• 見出しの line-height は 1.0（ベタ組み）にする。これがエディトリアルの緊張感を生む
• タグピルのみ radius 20px にして、矩形 CTA との対比をつける
• 小テキスト（12px 以下）ほど letter-spacing を 広めに取る（0.05em〜0.16em）
• カテゴリナビは pragmatica を外し、游ゴシック体単独で指定する
• 商品画像を主役にし、UI 要素は白黒のミニマルに徹する

Don't（禁止）

• CTA に 丸みを付けない（radius 8px、9999px は SNIDEL の世界観を壊す）。radius 0px のみ
• 本文テキストに 柔らかい黒を使わない（#333333、#555555、#1a1a1a）。SNIDEL は #000000 一択
• 見出しの line-height を 1.0 以上にしない。1.2 や 1.4 にするとファッション感が失われる
• グレーの中間色（#666、#999 等）を本文テキストに使わない。SNIDEL のテキストは黒か白
• セマンティックカラー（青リンク、緑成功、赤エラー）を通常 UI に持ち込まない。モノクロームが基本
• 欧文に Noto Sans、Helvetica Neue、Arial を指定しない（pragmatica のジオメトリック感が失われる）
• palt を見出しだけに限定しない。SNIDEL はグローバル適用（本文含む）
• カード・商品タイルに 影をつけない。box-shadow: none がデフォルト
• プロモカラー（#feca00、#f90000 等）を 通常 UI の要素に使わない。セール・キャンペーン時限定

8. Responsive Behavior

Breakpoints（推奨）

モバイル時の調整

• H2 セクション見出し: 38px → 24〜28px
• H3: 26px → 18〜20px
• カテゴリナビ: 18px → 14〜16px
• 商品グリッド: 2カラム、gutter 8px
• ナビはハンバーガー化、ドロワーで展開
• お知らせバーは横スクロール or 改行対応
• base font-size 10px はモバイルファースト設計のため、そのまま維持

タッチターゲット

• CTA ボタン: 高さ 44px 以上
• タグピル: 高さ 29px（padding 4px + 21px line-height）-- タップ可能
• ページネーションドット: 14px（小さめ -- スワイプが主操作）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Black (テキスト / Primary CTA): #000000
White (背景 / Secondary CTA): #ffffff
Tag Gray (ピル背景): #dbdbdb
Light Surface: #f1f1f1
Mid Gray (ページネーション): #a6a6a6
Sale Yellow (プロモ): #feca00
Promo Red (プロモ): #f90000
Promo Pink (プロモ): #f70080

Font (メイン): pragmatica, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic", メイリオ, sans-serif
Font (ヒラギノ系): pragmatica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, sans-serif
Font (カテゴリナビ): 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic", メイリオ, sans-serif
（pragmatica 不在時の代替提案: DM Sans）

OpenType: font-feature-settings: "palt" 1（グローバル適用）

H2 Section: 38px / weight 600 / line-height 1.0 / letter-spacing normal
H3: 26px / weight 600 / line-height 1.0 / letter-spacing normal
Category Nav: 18px / weight 400 / line-height 1.0 / letter-spacing 0.05em
Announcement: 14px / weight 400 / line-height 50px / letter-spacing 0.16em
Nav Link: 12px / weight 500 / letter-spacing 0.08em
Trending: 12px / weight 400 / line-height 1.75

Border Radius: 0px（CTA・カード）/ 20px（タグピル）/ 7px（ページネーション）
Shadow: 基本 none。フラットなモノクロームで写真を主役にする

プロンプト例

SNIDEL のデザインに従って、ウィメンズファッション EC の商品一覧ページを作成してください。
- フォント: pragmatica, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic", メイリオ, sans-serif
- font-feature-settings: "palt" 1 をグローバルに適用
- セクション見出し: 38px / weight 600 / line-height 1.0 / color #000000
- カテゴリナビ: 游ゴシック体, YuGothic のみ（pragmatica なし）/ 18px / weight 400 / letter-spacing 0.05em
- ナビリンク: 12px / weight 500 / letter-spacing 0.08em
- 商品名: 12〜14px / weight 400 / color #000000
- Primary CTA "絞り込む": 背景 #000000 / 白文字 / border-radius 0px（フラット矩形）
- Secondary CTA "リセット": 背景 #ffffff / 黒文字 / border 1px solid #000 / radius 0px
- タグピル: 背景 #dbdbdb / 黒文字 / radius 20px / padding 4px 10px
- カード: border-radius 0px / box-shadow なし / 写真主体
- 背景: #ffffff、サーフェス面は #f1f1f1
- テキスト色は #000000 のみ（グレーの中間色は使わない）
- CTA に丸みを付けない（radius 0px が鉄則）
- 影は使わない。立体感は白 / #f1f1f1 の面切り替えで表現
- セール時のみ #feca00（イエロー）や #f90000（レッド）のアクセント色を使用