schoo
ログイン 会員登録(無料)

Design System Preview
Schoo — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値（2026-06-22）に基づく。

無料会員登録はこちら 法人版資料はこちら
01 / Colors

COLOR PALETTE

Brand Orange
Brand Orange
#e29447
CTA・バッジ・アクティブ
Brand Orange CTA
#d8934e
大型CTA背景
Brand Orange Text
#d27a3e
テキストリンク
Text
Text Primary
#1f1f1f
本文・見出し
Text Dark
#1e1e1e
ヘッダー・ナビ
Text Secondary
#404044
補足テキスト
Text Muted
#aaaaaa
日付・時刻・補助
Link Blue
#4f9df7
デフォルトリンク
Surface & Background
White
#ffffff
ページ背景・カード
Warm Beige Surface
#f5f2ee
プロモサーフェス
Input Background
#eeeeee
検索入力欄
Border / Divider
#e1e1e1
区切り線・枠線
Semantic（推奨補完値）
Danger
#dc3545
エラー
Success
#28a745
成功・完了
02 / Typography — 実測値

TYPOGRAPHY

バナー大見出し — Banner H2
Noto Sans JP / 52px / 700 / line-height: 1.3 / letter-spacing: -0.02emプロモバナー
ヒーロー見出し — Hero H1
Nunito / 36px / 700 / line-height: 1.44 / letter-spacing: 0.07emヒーローエリア
セクション見出し — Section H2
Nunito / 24px / 700 / line-height: 1.5 / letter-spacing: 0.07emセクションヘッダー
INFORMATION
Nunito / 20px / 900 / line-height: 1.25 / letter-spacing: 0.1em — 英字セクション見出しトップページ
コースカードタイトル — Pythonで始めるデータ分析入門
Nunito / 13px / 700 / line-height: 1.6 / letter-spacing: 0コースカード
本文テキスト — オンライン学習は、いつでも・どこでも・何度でも受講できます。社会人に必要なスキルを、第一線で活躍するプロの授業で学びましょう。ABCabc 123
Nunito / 14px / 400 / line-height: 1.6 / letter-spacing: 0本文
補足テキスト — 授業の特徴や学習内容の説明に使います。14pxより一段小さく、補足的な情報を示すためのスタイルです。
Nunito / 12px / 400 / line-height: 1.8 / letter-spacing: 0Body Description
19:00 〜 20:00
Nunito / 16px / 900 / line-height: 1.3 / color: #aaaaaa放送時刻
2026.06.22
Nunito / 11px / 700 / line-height: 1.0 / color: #aaaaaa日付・詳細情報
03 / Article — オンライン学習 組版

COURSE CONTENT

NEW 2026.06.22 19:00 〜
データサイエンスの基礎から実践まで — Python で学ぶ機械学習入門

本授業では、機械学習の基本的な概念から実際のコード実装まで、ステップバイステップで解説します。プログラミング経験が浅い方でも、実務で使えるスキルを習得できるよう設計されています。

授業の特徴

Schoo の授業は、企業の第一線で活躍するプロフェッショナルが講師を担当します。リアルタイムの生放送ではチャットで質問でき、録画授業はいつでも何度でも視聴可能です。

受講者数 12,450 名 ／ 満足度 4.8 ／ 全 12 回 ／ 各回 60 分

無料で受講する シラバスを見る
04 / Buttons

BUTTONS

会員登録(無料)
Primary CTA Pill
#e29447 / 100px / 15px / 700
ログイン
Ghost CTA
2px solid #e29447 / 100px
無料会員登録はこちら
Large Primary CTA
#d8934e / 50px / 18px / 700
法人版資料はこちら
Large Ghost CTA
white / #1e1e1e border / 50px
NEW
Badge NEW
#e29447 / 4px / 10px / 700
生放送中
Dark Balloon
#1e1e1e / 50px / shadow
授業一覧
Orange Balloon
white / #d8934e border / 50px
05 / Cards

COURSE CARDS

📊
☆
NEW
Python で学ぶデータ分析入門 — pandas と matplotlib の基礎
田中 翔一 先生
2026.06.22 ／ 19:00 〜
🎨
☆
UX デザインの原則 — ユーザー体験を最大化するプロセス設計
山本 美咲 先生
2026.06.23 ／ 20:00 〜
💼
★
ビジネス英語フレーズ100 — 会議・メールで使える即戦力表現
James Wilson 先生
録画授業 ／ 全12回
🤖
☆
NEW
生成 AI 実践活用講座 — ChatGPT・Claude を業務に活かす方法
鈴木 健太 先生
2026.06.25 ／ 19:30 〜

7,000 本以上の録画授業と毎月の生放送授業が、無料会員登録だけで受講できます。

無料会員登録はこちら 法人版資料はこちら
06 / Forms

FORMS

🔍
デフォルト — background: #eeeeee / border: none / radius: 5px
フォーカス — box-shadow: 0 0 0 3px rgba(226,148,71,0.35)
8文字以上で入力してください
エラー — box-shadow: 0 0 0 2px #dc3545
Textarea — background: rgba(0,16,14,0.03) / box-shadow: rgba(0,16,14,0.1) / radius: 4px
07 / Elevation

DEPTH & ELEVATION

Level 0 — Flat
影なし。カード・ボタンの基本フラット。
Level 1 — Header
rgba(30,30,30,0.05) 0px 4px 8px
ヘッダー実測値
Level 2 — Dropdown
rgba(30,30,30,0.1) 0px 8px 20px
ドロップダウン・ポップオーバー
Level 3 — Modal
rgba(30,30,30,0.15) 0px 16px 40px
モーダル
Balloon
0 2px 8px rgba(30,30,30,0.2)
ダークバルーン pill
Header BG
rgba(255,255,255,0.95)
半透明白 + Level 1 shadow
08 / Layout

SPACING & LAYOUT

Spacing Scale (8px グリッド)
XS
4px
S
8px
M
16px
L
24px
XL
40〜48px
XXL
80px
Border Radius Scale
XS
4px — バッジ
Small
5px — 入力欄
Pill Large
50px — 大型CTA
Pill
100px — 小型CTA
Circle
50% — ブックマーク
Container Widths
Max Container 1200px
推奨最大コンテナ幅
Desktop Padding 24〜32px
水平パディング（デスクトップ）
Mobile Padding 16px
水平パディング（モバイル）