Design System Preview
CASIO

驚きを身近にする力で、ひとりひとりに今日を超える歓びを。

casio.co.jp のデザイントークンをカタログ化。DIN 2014 の幾何学的精密さ、シャープな角、CASIO Blue の深い紺。computed style 実測値に基づく。

DESIGN.md を読む コーポレートサイトを見る
01 / Colors

カラーパレット

Brand
CASIO Blue
#0a3282
ブランド紺。ロゴ・パーパス・CI
CASIO Red
#bb3c39
製品カテゴリ・プロダクトアクセント
Category
Corporate Purple
#494c8c
「企業」カテゴリラベル
Investor Green
#2e7c65
「投資家」カテゴリラベル
Neutral
Background
#f4f5f8
ページ背景（ブルーグレー）
Surface
#ffffff
カード・モーダル・入力欄の面
Text Primary
#000000
本文・見出し（純黒）
Border
#bebebe
仕切り線・ボタン枠
Footer
#030303
フッター背景（ほぼ純黒）
Semantic
Alert / Danger
#e54747
エラーテキスト・警告
Warning
未定義
実測値なし
Success
未定義
実測値なし
02 / Typography

タイポグラフィ階層

TOPICS — 技術で驚きを
30px / 700 / line-height: 1.6 (48/30) / DIN 2014 + Noto Sans JPh2 TOPICS
カシオの挑戦 — Heading 1
30px / 700 / line-height: 1.4h1
サブセクション見出し — Heading 2
20px / 700 / line-height: 1.4h2 sub
本文テキスト — Body。CASIOのサイトは本文 15px / line-height 1.5 で構成されています。DIN 2014 の幾何学的な欧文と Noto Sans JP の和文を組み合わせた精密な組版です。letter-spacing は normal、palt も使用しません。
15px / 400 / line-height: 1.5 (22.5/15) / letter-spacing: normal / palt: なしbody / p
記事本文 — Article Body。記事や長文コンテンツでは line-height 2.0 を使用。14px とやや小さくなるが、行間を十分に取ることで可読性を確保しています。コーポレートサイトの情報密度と読みやすさのバランスを両立。
14px / 400 / line-height: 2.0 (28/14)article body
ナビゲーション主要項目 — 会長メッセージ
14px / 700nav primary
サブナビゲーション — Purpose / IR情報
13px / 400nav sub
企業TOP — ヘッダーユーティリティ
12px / 400 / line-height: 1.5 (18/12)nav utility
キャプション — Caption / Alert（weight 200 の極細）
12px / 200 / 極細ウェイト。ユーティリティテキストに多用caption / alert
ヘッダーユーティリティ — 最小テキスト
11px / 200–400 / ヘッダー上部のユーティリティheader utility

Web フォント方針: DIN 2014（Adobe Fonts / ライセンス制限あり）は preview では Inter（Google Fonts）で代替。Noto Sans JP（Google Fonts）を和文に使用。
実装時は Adobe Fonts プロジェクトキットで din-2014 を読み込むこと。

03 / Article & Product

記事と製品の組版サンプル

Topics
TECHNOLOGY STORY

精密から生まれる驚き。

2026.05.09 ／ Corporate Editorial ／ Reading time: 5 min

1957年、世界初の小型純電気式計算機「14-A」を開発したカシオ計算機。以来、時計、電子辞書、電子楽器、関数電卓—— あらゆる製品に共通するのは、精密な技術で「驚き」を身近にするという哲学です。

G-SHOCK が証明した耐久性の哲学

「落としても壊れない時計をつくりたい」。1981年に始まったプロジェクトチーム「タフ」は、200を超える試作品を経て1983年に初代 G-SHOCK DW-5000C を完成させました。耐衝撃構造は、中空構造で IC モジュールを浮かせるという逆転の発想から生まれています。

カシオの計算力

関数電卓は世界中の教育現場で使われています。直感的なキー配列と高速演算処理は、数十年にわたるユーザーリサーチの蓄積です。デジタル時代にあっても、手のひらの計算機が果たす役割は変わりません。

WATCH
G-SHOCK
DW-5000U-1JF
スクエアフェイス 復刻モデル
¥16,500 （税込）
CALCULATOR
CALCULATOR
fx-JP900CW
関数電卓 ClassWiz
¥5,280 （税込）
KEYBOARD
CASIOTONE
CT-S1
カシオトーン
¥38,500 （税込）
製品一覧を見る
04 / Buttons

ボタンバリエーション

CASIOのボタンは border-radius: 0px を徹底。黒塗りの Primary と白地の Secondary のコントラストで階層を表現。ウェイト 200 の極細ボタンラベルも特徴的。

ログイン
Primary（黒塗り）
14px / 400
もっと見る
Secondary（白地・グレー枠）
14px / 400
パーパス
Brand（CASIO Blue）
14px / 700
マイページ
Utility（極細）
12px / 200
削除する
Danger（参考実装）
14px / 700
Category Labels
製品 企業 企業（紫） 投資家
カテゴリラベル — 各色 / 11px / 700 / radius: 0px
05 / Cards

カードコンポーネント

製品

G-SHOCK 40周年記念モデル

1983年の誕生から40年。初代 DW-5000C のスクエアデザインを継承しながら、最新のタフソーラーとマルチバンド6を搭載した記念モデルです。

詳しく見る
企業

カシオのパーパス経営

「驚きを身近にする力で、ひとりひとりに今日を超える歓びを。」このパーパスのもと、教育・音楽・時計の3領域で社会課題の解決に取り組んでいます。

詳しく見る
投資家

IR情報・決算資料

決算短信、有価証券報告書、株主通信など、投資家の皆さまに向けた情報を掲載しています。ESG・サステナビリティレポートもこちらからご覧いただけます。

詳しく見る
06 / Forms

フォーム要素（3 状態）

入力欄も角丸を使わず、44px のタッチターゲット高さを基準に。フォーカス時は border を #0a3282（CASIO Blue）に切り替え、エラーは Alert Red #e54747 を使用。

デフォルト — border: 1px solid #bebebe / radius: 0px / height: 44px
フォーカス — border: 2px solid #0a3282（CASIO Blue）
エラー — border: 2px solid #e54747（Alert Red）
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1（推奨）
0 1px 3px rgba(0,0,0,0.08)
Level 2（推奨）
0 4px 12px rgba(0,0,0,0.10)
Level 3（推奨）
0 8px 24px rgba(0,0,0,0.12)

実測値はすべて box-shadow: none。CASIOはフラットデザインを徹底しており、ボーダーと背景色の差分で階層を表現します。Level 1〜3 は「どうしても必要な場合の推奨値」です。

08 / Layout

スペーシングとコンテナ幅

Spacing Scale（8px ベース）
XS
8px
S
16px
M
24px
L
40px
XL
64px
XXL
80px
Container & Content Widths
Container Max 1200px
Main Content 940px
Article（読み物） 680px
Breakpoints

Mobile: ≤ 767px ／ Tablet: 768 – 1024px ／ Desktop: > 1024px
タッチターゲットは 44px × 44px 以上（WCAG 基準）。