TOPPA!!!
TOPPAN

印刷テクノロジーをベースに、
社会の課題を解決し、新たな価値を創造する

TOPPAN のデザインシステムをカタログ化したプレビューです。コーポレートサイトの computed style 実測値(2026-05-25 取得)に基づき、カラー、タイポグラフィ、コンポーネント、レイアウトトークンを可視化しています。


01 / Colors

Color Palette

カラーパレット — 実測値
Brand
TOPPAN Blue
#0068b5
主要 CTA 背景・見出しアクセント・リンク色
Deeper Blue
#00469b
ホバー・アクティブ時のブルー
Dark Navy
#193264
ダークセクション背景・フッター
Light Blue Surface
#dfeaff
ハイライト・注目面
Neutral
Text Primary
#323232
本文テキスト(ダークグレー)
Text Secondary
#666666
補足テキスト
Light Gray
#f1f1f1
ボタン面・セクション背景
Near-light Gray
#f4f4f4
カード面
White
#ffffff
ページ背景・CTA テキスト
Semantic — 推奨補完値
Danger
#cc0000
エラー・削除(推奨)
Success
#008844
成功・完了(推奨)
Warning
#cc6600
警告・注意(推奨)

02 / Typography

Typography

タイポグラフィ階層 — 実測値
TOPPA!!! TOPPAN
Roboto 64px / 700 / line-height 1.0 / letter-spacing 1pxHero EN
Information & Communication
Roboto 40px / 700 / line-height 1.0 / letter-spacing 1.2pxSection EN
印刷テクノロジーをベースに、新たな価値を創造する — Page H1
凸版文久ゴシック 25px / 400 / line-height 1.86ページタイトル JP
情報コミュニケーション事業 — H3 Accent
凸版文久ゴシック DB 24px / line-height 1.4 / letter-spacing 0.02em / color #0068b5小見出しブルー
デジタルとリアルの融合 — H3
凸版文久ゴシック DB 18px / line-height 1.4 / letter-spacing 0.03em小見出し
本文テキスト — TOPPANグループは印刷テクノロジーをベースに、情報コミュニケーション、生活・産業、エレクトロニクスの3分野で事業を展開しています。1900年の創業以来培ってきた「印刷テクノロジー」をベースとして、社会的課題の解決に取り組んでいます。
凸版文久ゴシック R 14px / 400 / line-height 1.5 / letter-spacing normal本文
補足テキスト — 13px のキャプション。詳しくは各事業部のページをご覧ください。
凸版文久ゴシック R 13px / 400 / line-height 1.5 / color #666666Caption
グローバルナビ — Nav Link
13px / 400 / line-height 1.0Nav

Article

本文組版サンプル — イノベーション紹介
Innovation

印刷テクノロジーが切り拓く、
社会の未来

TOPPANグループは、1900年の創業以来、印刷テクノロジーを核として事業領域を拡大してきました。紙への印刷から始まった技術は、いまやデジタル・半導体・バイオの領域にまで広がっています。

情報コミュニケーション事業

マーケティング、コンテンツ、BPO、セキュアの4領域を展開。企業と生活者をつなぐソリューションを提供し、社会のDXを推進しています。デジタルとリアルの融合で、新しいコミュニケーション体験を創出します。

デジタルマーケティング

データ分析に基づく最適なコミュニケーション設計から、クリエイティブ制作、効果検証までをワンストップで提供しています。

凸版文久ゴシックについて:TOPPANが開発した書体「凸版文久ゴシック」は、江戸時代の木版活字の流れを汲みつつ、現代のデジタル環境に最適化されたゴシック体です。Pr6N(JIS X 0213:2004 準拠)で23,058文字をカバーしています。

※ 本プレビューは実サイトの computed style 実測値に基づいています。凸版文久ゴシックは Adobe Fonts ライセンスのため、Noto Sans JP で代替表示しています。


Business Segments

事業セグメント
Information & Communication

情報コミュニケーション

マーケティング、コンテンツ、BPO、セキュア。企業と生活者をつなぐソリューションを提供。

詳しく見る →
Living & Industry

生活・産業

パッケージ、建装材、高機能素材。暮らしと産業を支えるマテリアルソリューション。

詳しく見る →
Electronics

エレクトロニクス

半導体関連、ディスプレイ関連。ナノテクノロジーを核とした先端技術。

詳しく見る →

05 / Buttons

Buttons

ボタンバリエーション — 全 radius 0px(完全直角)
事業を知る
Primary — #0068b5 / radius 0px
IR情報
Secondary — White / radius 0px
ニュース一覧
Tertiary — #f1f1f1 / radius 0px
お問い合わせ
Ghost — border #0068b5 / radius 0px
すべて見る →
Text Link — #0068b5
ダークセクション上のボタン
詳しく見る
Primary — #0068b5 on dark
資料ダウンロード
Secondary — White on dark

Forms

フォーム要素 — 全 radius 0px
Default — border #cccccc / radius 0px
Focus — border #0068b5 / shadow 3px
Error — border #cc0000 / shadow 3px

07 / Elevation

Depth & Elevation

影の階層 — 推奨値
Level 0: Flat
影なし — 基本
Elevation 1
0 2px 8px rgba(0,0,0,0.08)
Elevation 2
0 4px 16px rgba(0,0,0,0.10)
Elevation 3
0 8px 32px rgba(0,0,0,0.15)

08 / Layout

Spacing & Radius

スペーシング & ラディウス
Spacing Scale(8px ベース)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius — 全コンポーネント 0px
Square
0px — 唯一の値

TOPPAN のデザインシステムは border-radius: 0px で統一されています。印刷版面のシャープさをデジタルに引き継ぐ設計思想であり、pill や角丸は一切使用しません。