Schoo（スクー） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: ウォームホワイトを基調に、ブランドオレンジ #e29447 のピル CTA と ウォームベージュ #f5f2ee のサーフェスで学習プラットフォームの親しみやすさ・温もりを表現
• 密度: 本文の line-height は 1.6〜1.8 と広め。見出しはウェイト 900 と大きめのトラッキングで学習コンテンツのメリハリを作る
• キーワード: ウォームオレンジ、教育的・親しみやすい、コミュニティ感、温かみのある typography、成長志向
• 特徴:
  • 欧文に Avenir（Linotype ライセンスフォント） を採用。幾何学系のウォームなサンセリフで、サービスの前向きさを体現
  • 和文は OS フォールバック（游ゴシック → ヒラギノ → メイリオ）で統一
  • プロモバナーのみ Noto Sans JP（Google Fonts）を使用し、キャンペーン帯の視認性を確保
  • ブランドカラーはオレンジ系グラデーション #e29447（バッジ・CTA）/ #d8934e（大型 CTA）/ #d27a3e（テキストリンク）
  • サーフェスに ウォームベージュ #f5f2ee を使い、白地との対比で「無料授業」等の訴求エリアを自然に区切る
  • セクションヘッダーには英字 weight 900（"INFORMATION"・"COURSE" 等）を多用し、学習コンテンツの格調を演出
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Orange (#e29447): メインのブランドカラー。会員登録 CTA のバッジ、アクティブドット、NEW バッジ背景
• Brand Orange CTA (#d8934e): 大型 CTA "無料会員登録はこちら" の背景。ゴーストボタンのボーダー色
• Brand Orange Text (#d27a3e): テキストリンク・アンカーカラー

CTA / Buttons

• Primary CTA (Pill): 背景 #e29447 / 文字 #ffffff / radius 100px / padding 4px 8px / 15px / weight 700
• Large Primary CTA: 背景 #d8934e / 文字 #ffffff / radius 50px / padding 18px 50px 12px / 18px / weight 700
• Ghost CTA "ログイン": 背景 transparent / 文字 #e29447 / border 2px solid #e29447 / radius 100px / 15px
• Large Ghost "法人版資料はこちら": 背景 #ffffff / 文字 #1e1e1e / border 1px solid #1e1e1e / radius 50px / 18px bold / padding 18px 50px 12px
• Badge "NEW": 背景 #e29447 / 文字 #ffffff / radius 4px / 10px / weight 700
• Dark Balloon: 背景 #1e1e1e / 文字 #ffffff / radius 50px（pill）
• Orange Balloon: 背景 #ffffff / 文字 #d8934e / border 1px solid #d8934e / radius 50px

Neutral

Semantic（推奨値）

実サイトには明確なエラー／成功色の表面化は確認されなかった。学習 SaaS として推奨する補完値:

• Danger: #dc3545（一般的なレッド）
• Success: #28a745（一般的なグリーン）

Header / Overlay

• Header BG: rgba(255, 255, 255, 0.95)（半透明白）+ box-shadow: rgba(30,30,30,0.05) 0px 4px 8px
• Position: fixed / top: 0

3. Typography Rules

3.1 和文フォント

• ゴシック体（メイン）: 游ゴシック（YuGothic / Yu Gothic）→ ヒラギノ角ゴ（Hiragino Sans）→ メイリオ（meiryo）→ Osaka → MS Pゴシック
• ゴシック体（バナー）: Noto Sans JP（Google Fonts）— プロモバナー専用
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ（メイン）: Avenir（Linotype ライセンス）→ Helvetica Neue（ダブル指定）
• プレビュー代替: Nunito（Google Fonts）— 幾何学的な丸みがAvenir に近く、ウォームなトーンも合致
• アイコン: Material Icons Round（Google Fonts）

3.3 font-family 指定

css/* 本文・ナビ・カード等（メイン） */
font-family: Avenir, "Helvetica Neue", "Helvetica Neue", YuGothic,
  "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", メイリオ, meiryo, osaka,
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* プロモバナー専用 */
font-family: "Noto Sans JP", sans-serif;

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

• Avenir（欧文）を最優先。和文は Avenir の欧文グリフではカバーできないため、游ゴシック以下の和文フォントが担う
• Avenir は Adobe / Linotype のライセンスフォントであり、非契約環境では即座に Helvetica Neue → OS 和文フォントへフォールバック
• プロモバナーのみ Noto Sans JP を指定し、太字の視認性を高める

代替フォント注記: Avenir は Linotype のライセンスフォントのため、デザインのプレビューや社外資料での再現は難しい。代替として Nunito（weight 300 / 400 / 600 / 700 / 900）を使用すると、幾何学的な丸み・ウォームなトーンの近似が得られる（preview.html はこの代替を使用）。

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

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

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (14px): 1.6〜1.7
• 補足テキスト (12px): 1.8
• カードタイトル (12〜13px): 1.6
• セクション見出し (20px): 1.25（タイト）
• 大見出し (36〜52px): 1.3〜1.5
• 時刻・詳細 (11〜16px): 1.0〜1.3

字間 (letter-spacing) — 実測:

• 本文: 0（Avenir の自然なカーニングを活かす）
• バナー本文: 0.04em（Noto Sans JP の可読性向上）
• 見出し (H3 Section): 0.1em（英字セクションヘッダーを大きく開く）
• 見出し (H1〜H2): 0〜0.07em
• バナー大見出し: -0.02em（52px を締める）

ガイドライン:

• Avenir は欧文フォントのため、和文の line-height は 1.6 以上を確保する
• セクション英字ヘッダー（weight 900）は letter-spacing 0.1em を与えて視認性を高める
• 本文の letter-spacing は 0 のまま Avenir のメトリクスに委ねる

3.6 禁則処理・改行ルール

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

• 英字ヘッダー（"INFORMATION" 等）は white-space: nowrap で改行させない
• ピル・バッジは white-space: nowrap

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Avenir のメトリクスと letter-spacing で見た目を調整する方針
• Noto Sans JP バナーも normal

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（オレンジピル） — "会員登録(無料)"

• Background: #e29447
• Text: #ffffff
• Padding: 4px 8px
• Border Radius: 100px（完全ピル）
• Font: Avenir stack, 15px, weight 700
• Border: none

Large Primary CTA — "無料会員登録はこちら"

• Background: #d8934e
• Text: #ffffff
• Padding: 18px 50px 12px
• Border Radius: 50px
• Font: Avenir stack, 18px, weight 700

Ghost CTA（オレンジ枠） — "ログイン"

• Background: transparent
• Text: #e29447
• Border: 2px solid #e29447
• Padding: 4px 8px（ヘッダー）
• Border Radius: 100px
• Font: Avenir stack, 15px, weight 400〜700

Large Ghost CTA — "法人版資料はこちら"

• Background: #ffffff
• Text: #1e1e1e
• Border: 1px solid #1e1e1e
• Padding: 18px 50px 12px
• Border Radius: 50px
• Font: Avenir stack, 18px, weight 700

Badge "NEW"

• Background: #e29447
• Text: #ffffff
• Padding: 0 4px
• Border Radius: 4px
• Font: Avenir stack, 10px, weight 700, line-height 2.0

Dark Balloon

• Background: #1e1e1e
• Text: #ffffff
• Border Radius: 50px
• Shadow: 0 2px 8px rgba(30,30,30,0.2)

Orange Balloon

• Background: #ffffff
• Text: #d8934e
• Border: 1px solid #d8934e
• Border Radius: 50px

Inputs

Search Input

• Background: #eeeeee
• Border: none（背景色で区別）
• Border Radius: 5px
• Padding: 0 38px 0 10px（右アイコン用余白）
• Font: Avenir stack, 14px, weight 400

Textarea（コメント欄等）

• Background: rgba(0, 16, 14, 0.03)
• Border: 1px solid rgba(0, 16, 14, 0.1)（shadow で表現）
• Border Radius: 4px
• Padding: 8px 12px
• Box Shadow: rgba(0, 16, 14, 0.1) 0px 0px 0px 1px

Cards / Surfaces

Course Card

• Background: #ffffff
• Border: none（影なし）
• Border Radius: 画像は 4px〜8px
• Padding: 画像下 8〜12px
• Bookmark Button: 背景 #ffffff / border 1px solid #e1e1e1 / radius 50%（サークル）

Warm Beige Banner

• Background: #f5f2ee
• Padding: 40px 24px
• Border Radius: なし（全幅帯）

Header

• Background: rgba(255, 255, 255, 0.95)（半透明白）
• Box Shadow: rgba(30, 30, 30, 0.05) 0px 4px 8px
• Position: fixed / top: 0
• z-index: 50 程度

5. Layout Principles

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

Container

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

Border Radius Scale

Grid

• Columns: 推奨 12 カラム（実装は Flexbox / CSS Grid）
• Gutter: 16〜24px
• コースカード: 4列（desktop）→ 2列（tablet）→ 1列（mobile）

6. Depth & Elevation

• 実測ではカード本体の shadow はほぼ none
• 立体感は ウォームベージュ #f5f2ee と 半透明ヘッダー で表現
• ダークバルーン（#1e1e1e pill）は 0 2px 8px rgba(30,30,30,0.2) 程度の影で浮き感を演出

7. Do's and Don'ts

Do（推奨）

• 欧文は Avenir を最優先、プレビュー・社外環境では Nunito で代替する
• 和文は YuGothic → Hiragino Sans → meiryo のフォールバックチェーンを維持する
• プロモバナー（キャンペーン帯）のみ Noto Sans JP に切り替えて視認性を高める
• 本文の line-height は 1.6 以上を確保する（Avenir は欧文フォントのため和文が詰まりやすい）
• セクション英字ヘッダー（"INFORMATION" 等）は weight 900 + letter-spacing 0.1em で格調を出す
• 主要 CTA は #e29447 のオレンジピル（大型は #d8934e）を使い、ゴーストは #e29447 の枠線で統一する
• サーフェスは ウォームベージュ #f5f2ee を使い、冷たいグレーは避ける
• font-feature-settings は normal のまま（palt は使用しない）

Don't（禁止）

• Avenir フォールバックチェーンに 欧文専用書体だけのフォールバックを挟まない（和文が OS デフォルトに落ちる）
• プロモバナー以外の場所に Noto Sans JP を混在させない（本文は Avenir stack で統一）
• 本文に line-height: 1.4 以下を使わない（和文が詰まって可読性が著しく低下する）
• 冷たいグレー（#f3f4f6、#9ca3af）を使わない（ウォームベージュ #f5f2ee のトーンと合わない）
• CTA に 青系の色を使わない（#4f9df7 はデフォルトリンク専用。CTA はオレンジ系のみ）
• font-feature-settings: "palt" 1 を 全体適用しない（実サイト非採用。文字詰めが崩れる）
• 純黒 #000000 を本文に使わない（Text Primary は #1f1f1f / #1e1e1e）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• バナー H2 Large: 52px → 32〜36px
• H1: 36px → 24〜28px
• セクション H3: 20px → 16px（weight 900 は維持）
• 本文 14px・line-height 1.6 は維持
• コースカード: 4列 → 2列 → 1列

タッチターゲット

• 主要 CTA ピル: 高さ 36px 以上（padding 4px 8px + 15px font）
• 大型 CTA: 高さ 56px 以上（padding 18px 50px 12px + 18px font）
• ブックマークボタン（circle）: 最小 36x36px 推奨

ダークモード

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

9. Agent Prompt Guide

クイックリファレンス

Brand Orange (CTA): #e29447
Brand Orange Large CTA: #d8934e
Brand Orange Text Link: #d27a3e
Ghost Border: #e29447
Text Primary: #1f1f1f / #1e1e1e
Text Secondary: #404044
Text Muted: #aaaaaa
Link Blue (default link): #4f9df7
Warm Beige Surface: #f5f2ee
Input Background: #eeeeee
Border / Divider: #e1e1e1
Dark Near-Black: #1e1e1e
White: #ffffff
Header BG: rgba(255,255,255,0.95) + box-shadow rgba(30,30,30,0.05) 0px 4px 8px

Main Font: Avenir, "Helvetica Neue", "Helvetica Neue", YuGothic, "Yu Gothic",
  "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  メイリオ, meiryo, osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
Banner Font: "Noto Sans JP", sans-serif
Preview Fallback: "Nunito", YuGothic, "Yu Gothic", "Hiragino Sans", sans-serif

Body: 14px / line-height 1.6 / weight 400 / letter-spacing 0 / color #1f1f1f
Body Description: 12px / line-height 1.8 / weight 400 / color #1f1f1f
Section H3 (EN): 20px / weight 900 / line-height 1.25 / letter-spacing 0.1em
H1: 36px / weight 700 / line-height 1.44 / color #1e1e1e
H2: 24px / weight 700 / line-height 1.5 / letter-spacing 0.07em
Banner H2: 52px / Noto Sans JP / weight 700 / line-height 1.3 / letter-spacing -0.02em

CTA Pill Radius: 100px / Large CTA Radius: 50px / Badge Radius: 4px
Shadow (Header): rgba(30,30,30,0.05) 0px 4px 8px
font-feature-settings: normal（palt 非使用）

プロンプト例

Schoo のデザインシステムに従って、オンライン学習プラットフォームのコース一覧セクションを作成してください。
- フォント: Avenir, "Helvetica Neue", YuGothic, "Yu Gothic", "Hiragino Sans", メイリオ, sans-serif
- セクション英字ヘッダー: 20px / weight 900 / letter-spacing 0.1em / color #1e1e1e
- コースカードタイトル: 12〜13px / weight 700 / line-height 1.6 / color #1f1f1f
- 本文: 14px / weight 400 / line-height 1.6 / letter-spacing 0 / color #1f1f1f
- 補足テキスト（日付等）: 11px / weight 700 / line-height 1.0 / color #aaaaaa
- 主要 CTA: 背景 #e29447（オレンジ）/ 白文字 / border-radius 100px / padding 4px 8px / 15px / weight 700
- ゴースト CTA "ログイン": transparent / 文字・枠 #e29447 / border-radius 100px / 2px border
- NEW バッジ: 背景 #e29447 / 白文字 / radius 4px / 10px / weight 700
- カード背景: #ffffff（白）、プロモ帯は #f5f2ee（ウォームベージュ）
- 区切り線・ブックマーク枠: #e1e1e1
- ブックマークボタン: 白背景 / border 1px solid #e1e1e1 / radius 50%（サークル）
- box-shadow は基本 none（ヘッダーのみ rgba(30,30,30,0.05) 0px 4px 8px）
- font-feature-settings は normal（palt 非使用）
- 青（#4f9df7）は CTA に使わず、テキストリンクのみに使用する
- 冷たいグレー（#f3f4f6、#9ca3af）は使わない