Design System Preview
KUMON — 公文式オフィシャルサイト

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、教科カラーの全値を可視化。computed style 実測値に基づく。

お近くの教室を探す DESIGN.md を読む

01 / Colors

カラーパレット

Brand
KUMON Blue
#00a9e0
ブランドカラー
CTA Orange
#faaf18
CTAボタン
Secondary Blue
#7dcdf4
バッジ・ラベル
Subject Colors(教科カラー)
算数・数学
#00a9e0
Math Blue
英語
#ff5700
English Orange
国語
#69be29
Japanese Green
ズンズン
#f0ab00
Zunzun Gold
Surface Colors(面色)
Light Blue
#d0f0ff
セクションボタン
Warm Beige
#f2f1e6
コンテンツ面
Cool Blue
#e1ecf2
特長セクション
Cream Yellow
#fff0be
プロモ帯
Light Sky
#dcf4ff
フッター面
Subject Tints(教科淡色)
英語 Tint
#ffe7db
英語セクション背景
国語 Tint
#edffe0
国語セクション背景
Text & Semantic
Text Primary
#1e1e1e
本文テキスト
Background
#ffffff
ページ背景
Danger
#ff3f2f
重要なお知らせ
Badge Pink
#fa978d
キャンペーンバッジ

02 / Typography

タイポグラフィ階層

無料体験学習
44px / 700 / line-height: 1.36 / bg: #00a9e0 / shadow: 0px 6px 0pxキャンペーン
一人ひとりにあわせて KUMONの3つのサポート
40px / 700 / line-height: 1.35大見出し
お近くの教室を探す
36px / 700 / line-height: 1.7セクション見出し
世界の60を超える国と地域に学びを届けるKUMON
34px / 900 / line-height: 1.24強調見出し
算数・数学 英語 国語 ズンズン
28-32px / 900 / 教科名。各教科カラーで表示教科見出し
一人ひとりに寄り添うくもんの先生 — Card Title (h3)
20px / 700 / line-height: 1.2カード見出し
本文テキスト — KUMONは、一人ひとりの「できた!」の喜びが自信になり、意欲を高め、未来を切り拓く力を育む学習法です。50年以上の歴史の中で、世界60を超える国と地域に広がっています。ABCabc 123
16px / 400 / line-height: 1.7 / letter-spacing: normal / palt: なし本文
学習中の方
14px / 700 / bg: #7dcdf4 / radius: 3pxヘッダーバッジ

教育コンテンツのサンプル

KUMONの学習法

公文式学習法は、年齢や学年にとらわれず、一人ひとりの力に合わせた「ちょうどの学習」で、「自分でできた!」の喜びを引き出しながら、学力と自信を育てていきます。

教科の特長

KUMONでは、算数・数学、英語、国語の3教科を学ぶことができます。それぞれの教科で、基礎から高校教材レベルまで、スモールステップで着実に力をつけていきます。

教室では週2回、1教科あたり約30分の学習を行います。教室での学習に加えて、家庭でも毎日の宿題に取り組むことで、学習習慣と集中力が身につきます。


04 / Subject Cards — 教科カード

教科カラーシステム

算数・数学

考える力が身につく!計算力を高め、数学的思考力を育てます。

算数・数学を詳しく見る

英語

楽しく学べてしっかり身につく!E-Pencilでリスニング力を鍛えます。

英語を詳しく見る

国語

すべての学びの基礎になる!読解力と語彙力を育てます。

国語を詳しく見る

ズンズン

えんぴつを持てなくても大丈夫!運筆力と集中力を養います。

ズンズンを詳しく見る

ボタンバリエーション

お近くの教室を探す
Primary CTA (pill, orange)
現在地から探す
Arrow (white, pill)
算数・数学を詳しく見る
Section (light blue, pill)
詳しくはこちら
Section + Border
学習中の方
Header Badge (#7dcdf4)
教室を探す
Nav CTA (orange, small)

06 / Cards — 年齢別カード

年齢・学年カード

0〜2歳

ベビーくもん

3歳

はじめてのくもん

年少

楽しく学ぶ

年中

基礎をつくる

年長

入学準備

小学1・2年生

学習習慣

小学3・4年生

考える力

小学5・6年生

応用力

中学生・高校生

先取り学習

大学生・社会人

生涯学習


FAQ

都合で週1回しか通えないのですが、いいのでしょうか?
親が仕事をしているので子どもを通わせられるか心配です。
教室での学習時間はどれくらいですか?

08 / Forms

フォーム要素

デフォルト — radius: 3px, search btn: #faaf18
Pill — radius: 48px, font-weight: 700
フォーカス — border: #00a9e0
エラー — border: #ff3f2f

09 / Elevation

Depth & Elevation

Level 0: Flat
影なし(ほとんどの要素)
Card Shadow
rgba(0,0,0,0.1) 0px 6px 0px 0px — 底部のみのシャドウ
Nav Shadow
rgba(239,239,239,0.8) 0px 5px 10px 0px — ナビゲーション

10 / Layout

背景色パターン

White (#ffffff) ページ背景・カード面
Cool Blue (#e1ecf2) 特長セクション
Warm Beige (#f2f1e6) コンテンツセクション
Light Blue (#d0f0ff) セクションボタン・教科
Cream Yellow (#fff0be) プロモーション帯