Sanrio DESIGN.md

サンリオ（https://www.sanrio.co.jp/）公式サイトのデザイン仕様書。 実サイトの computed style と CSS Custom Properties に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 「みんな仲良く（Small Gift, Big Smile）」を体現する、やわらかく可愛らしいユニバーサルデザイン。子どもから大人まで親しみやすいパステル基調
• 密度: 比較的余白を多くとり、丸みのあるピル CTA・サムネを大きく見せる構成。情報量は多いがカテゴリごとに色分けされて整理されている
• キーワード: パステル、ポップ、ピル、丸み、キャラクター主導、明るい
• 特徴: ピル CTA（border-radius 80–145px） が UI の核。カテゴリごとに異なるテーマカラー（シアン / ピンク / 紫 / 黄 / 緑 / コーラル）でセクションを彩り、キャラクター IP の世界観をまとめる

2. Color Palette & Roles

Primary（ブランドカラー — CSS Custom Properties 実測値）

• Sanrio Cyan / --c-primary (#8bd0dd): メインのブランドカラー。CTA・「キャラクター TOP」「Sanrio＋ TOP」等
• Cyan Mid / --c-dial-primary (#71c6d6): プライマリの 1 段濃いめ。ボタン上のテキスト等にも使用
• Sanrio Pink / --c-pagetheme-sub (#e383a8): セカンダリブランド。「グッズ TOP」「会員登録」「検索」CTA
• Sanrio+ Pink (#e83767): Sanrio+ サービス専用の濃いピンク
• Sanrio+ Pink-A (#ec7996): Sanrio+ ロゴ周辺の補助ピンク

Category Theme Colors（カテゴリテーマ色）

各カテゴリの「TOP」CTA とセクションヘッダーで使用される 6 色：

• Character (#8bd0dd): シアン（キャラクター）
• Goods (#e383a8): ピンク（グッズ）
• Movie (#cda1dc): 紫（ムービー）
• Digital (#f2d36b): 黄（デジタル / LINE スタンプ）
• Spot (#91dea9): 緑（スポット / イベント）
• News (#f08080): コーラル（ニュース）

Promo / Channel

• YouTube Channel (#e67272): 「チャンネル登録」CTA（YouTube 系）

Surface（面色）

• Background (#ffffff): ページ背景
• Surface Pink Light (#fdf5fa): 重要なお知らせ等の薄ピンク背景
• Surface Cyan Lightest / --c-primary-c (#f0f9fa): プライマリの最薄面
• Surface Cyan Light / --c-primary-b (#e2f2f7): プライマリの薄面（フォーム背景等）
• Surface Cyan Pale / --c-primary-a (#b5e5ef): プライマリの中間面
• Surface Gray Light (#f7f7f7): ランキング・お知らせ等のセクション背景
• Surface Gray (#dddddd): 区切り・無効状態
• Surface Character Cyan (#e2f2f7): ハローキティ等キャラクターカード背景

Text

• Text Primary / --c-text-main (alternate) (#777777): 本文・見出しすべての基本色（純黒は使わない）
• Text Cyan Mid (#71c6d6): 「もっと見る」等のリンクラベル
• Text Pink (#e383a8): ピンクテーマのリンクラベル

Note: サンリオは UI のテキスト色に純黒（#000）も濃グレー（#333）も使わず、#777777（中グレー） を統一して使用している。これによりパステル基調の中で文字も柔らかい印象に保たれる。

3. Typography Rules

3.1 和文フォント

ゴシック体（唯一）:

• Noto Sans JP（Google Fonts、Web フォント）

フォールバック: sans-serif のみ（他の和文フォントは指定しない）

3.2 欧文フォント

• サンセリフ: Noto Sans JP の欧文グリフをそのまま使用（独立した欧文書体は指定なし）

3.3 font-family 指定

css/* 全要素共通 */
font-family: "Noto Sans JP", sans-serif;

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

• Web フォント Noto Sans JP のみを指定し、和欧混植を 1 書体で統一
• フォールバックは generic sans-serif のみ（環境差を最小化）

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

3.5 行間・字間

• 本文（body / p）の行間: 1.8。サンリオは欧文サイトより明らかに広い line-height を本文に取る（読みやすさを最優先）
• 見出しの行間: 1.2 でタイト
• 本文の字間: letter-spacing: 1.875px（≈ 0.125em）。全角の本文に約 0.12em の字間を入れて空気感を作る
• 見出しの字間: 1.875–2.4px（≈ 0.083〜0.12em）。タイトな見出しでも字間は確保

ガイドライン:

• 本文は line-height 1.8 / letter-spacing 0.12em を厳守すると「サンリオらしさ」が出る
• 見出しは行間こそ詰めるが、字間は緩めて柔らかさを保つ
• カード内の小さなキャプション（11–12px）は字間を normal に戻して読みやすさを優先

3.6 禁則処理・改行ルール

css/* サンリオの基本 */
overflow-wrap: break-word;
word-break: normal;

• カテゴリラベル「キャラクター」「グッズ」等の短い名詞は禁則対象なし
• 商品名・キャラクター名（カタカナ + 英字）は overflow-wrap で折り返す

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt は使わない。letter-spacing の数値指定で字詰めを制御している
• カーニング kern も明示指定なし

3.8 縦書き

• 該当なし

4. Component Stylings

Buttons

Primary CTA Pill（カテゴリ TOP / 主要アクション）

• Background: カテゴリ別テーマ色（#8bd0dd / #e383a8 / #cda1dc / #f2d36b / #91dea9 / #f08080）
• Text: #ffffff
• Padding: 縦横とも内部に余白多め（実装依存）
• Border Radius: 80px（完全な pill）
• Font Size: 13–16px / Weight 700

Mega Pill CTA（会員登録）

• Background: #e383a8
• Text: #ffffff
• Border Radius: 145px（極端に大きい pill）
• Font Size: 16px / Weight 700

Outline Pill（もっと見る等）

• Background: #ffffff
• Text: #71c6d6（主シアン）/ #e383a8（ピンク）
• Border: 1px solid テーマ色 / 影による浮き上がり
• Border Radius: 55px
• Font Size: 11px / Weight 700

Tab / Filter Pill

• Background: transparent
• Text: #71c6d6（cyan）/ #777777
• Border Radius: 6px（タブ）または 100px（カテゴリ）
• Padding: 9px / 6px 0
• Font Size: 13–14px / Weight 500–700

Page Top Button

• Background: #8bd0dd
• Text: #777777
• Border Radius: 300px（円形）
• Position: fixed bottom-right

YouTube CTA

• Background: #e67272
• Text: #ffffff
• Border Radius: 28px
• Font Size: 14px / Weight 700

Search Bar

• Background: #fdf5fa / #f0f9fa（テーマに応じてピンク / シアンの薄面）
• Search Type Tab: text #71c6d6、active で背景色追加
• 検索ボタン: 円形、bg #e383a8、80px radius

Inputs

• Background: #ffffff
• Border: 1px solid #dddddd
• Border Radius: 8–12px
• Padding: 8px 12px
• Font Size: 14px

Cards

• Background: #ffffff または #e2f2f7（キャラクターカード）
• Border: なし or 1px solid #dddddd
• Border Radius: 20–24px（柔らかい角丸）
• Padding: 16–24px
• Shadow: ごく薄い（後述）

5. Layout Principles

Spacing Scale

Container

• Max Width: 約 1200px
• Padding (horizontal): 16〜24px
• ヘッダー / フッターは 100vw

Grid

• キャラクターサムネ: 4〜8 カラム（横スクロールも併用）
• ニュース: 3〜4 カラム
• ランキング: 1 カラム（縦並び）

6. Depth & Elevation

サンリオの陰影は全体的に淡く柔らかい。強い影を落とさず、色面と丸みで階層を作る。

7. Do's and Don'ts

Do（推奨）

• フォントは "Noto Sans JP", sans-serif の 1 行で十分（環境差を最小化）
• テキスト色は #777777 を統一して使用し、純黒を避ける
• CTA はすべて pill（border-radius: 80px 以上）にして角を完全に取り除く
• カテゴリごとにテーマ色を切り替える（キャラクター=シアン、グッズ=ピンク、ムービー=紫、デジタル=黄、スポット=緑、ニュース=コーラル）
• 本文には line-height: 1.8 / letter-spacing: 0.12em を入れて柔らかい空気感を作る
• 見出しの字間は 0.08〜0.12em 程度を維持

Don't（禁止）

• 純黒（#000000）や濃グレー（#333333）をテキスト色に使わない（サンリオの世界観が硬くなる）
• CTA を角張った（radius < 12px）形にしない。pill が原則
• 強いドロップシャドウを使わない（柔らかさが消える）
• カテゴリ間でテーマ色を混ぜない（ユーザーが色でカテゴリを識別している）
• 本文の line-height を 1.5 未満にしない（読みづらく、サンリオの空気感が失われる）
• font-feature-settings: "palt" は適用しない（letter-spacing を直接指定する方針）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px
• pill CTA はモバイルで横幅 100% に伸びる傾向

フォントサイズの調整

• モバイルでは見出しを 1〜2px 縮小、本文は 14–15px を維持
• pill の radius は維持（pill 形状はモバイルでも残す）

9. Agent Prompt Guide

クイックリファレンス

Primary Cyan: #8bd0dd  (--c-primary)
Primary Cyan Mid: #71c6d6 (--c-dial-primary)
Sanrio Pink: #e383a8 (--c-pagetheme-sub)
Sanrio+ Pink: #e83767
Category Colors: Cyan #8bd0dd / Pink #e383a8 / Purple #cda1dc / Yellow #f2d36b / Green #91dea9 / Coral #f08080
Text: #777777 (純黒は使わない)
Background: #ffffff
Surface (cyan light): #f0f9fa
Surface (pink light): #fdf5fa
Font: "Noto Sans JP", sans-serif
Body Size: 15px / Weight 400 / line-height 1.8 / letter-spacing 0.125em
Heading: 17–22px / Weight 700 / line-height 1.2 / letter-spacing 0.08–0.12em
Border Radius (CTA): 80–145px (pill)
Border Radius (Card): 20–24px

プロンプト例

サンリオのデザインシステムに従って、キャラクター一覧ページを作成してください。
- 背景: #ffffff
- テキスト: #777777（純黒・濃グレーは使わない）
- フォント: "Noto Sans JP", sans-serif（1 行のみ）
- 本文 line-height: 1.8、letter-spacing: 0.125em で柔らかい空気感
- セクション見出しは 22.5px Bold、line-height 1.2、letter-spacing 0.08em
- カテゴリ別 CTA はテーマ色の pill（border-radius: 80px）
  - キャラクター=#8bd0dd、グッズ=#e383a8、ムービー=#cda1dc、デジタル=#f2d36b、スポット=#91dea9、ニュース=#f08080
- 「もっと見る」は白背景 outline pill（radius: 55px）、テキストはテーマ色
- カードは border-radius: 20px、シャドウは ごく薄く `0 2px 6px rgba(0,0,0,0.06)`
- 見出し下のサブテキストは小さく（11–12px Bold）、英字キャラクター名を併記