Design System Preview
Fujitsu (fujitsu.com) — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。Fujitsu Red を基調とするシャープなコーポレートデザインシステム。グラデーションと直線的なコンポーネントが特徴。

ソリューション一覧 事例を見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Fujitsu Red
#ea0000
プライマリブランド
Deep Blue
#2400b0
セカンダリ CTA
Vivid Blue
#0048ff
リンク・フォーカス
Green
#008224
サステナビリティ
Text
Text Primary
#000000
見出し・本文
Text Gray 1
#333333
本文テキスト
Text Gray 6
#5f5f5f
補足テキスト
Surface & Border
Background Primary
#ffffff
ページ背景
Background Alt
#f3f3f3
交互セクション背景
Gray 3
#efefef
カード背景
Gray 2
#e8e8e8
ボーダー
Gray 7
#dcdcdc
ボーダー
Dark Surface
Footer Dark
#27455c
フッター背景
Surface Dark
#3c3c3c
ダークセクション
Surface Mid
#6d6e70
中間グレー面
Semantic
Error BG
#fde5e5
エラー入力背景
Gradients
Red → Pink
#ea0000 → #d80084
Red → Orange
#ea0000 → #ff8000
Blue Gradient
#2400b0 → #0c7fd5
Green Gradient
#008224 → #00a470

タイポグラフィ階層

テクノロジーの力で
Display: 60px / 700 / line-height: 1.7 / letter-spacing: normalヒーロー
サステナブルな世界を実現する
H1: 40px / 700 / line-height: 1.25ページタイトル
イノベーションが未来を変える
H2: 26px / 700 / line-height: 1.5セクション見出し
デジタルトランスフォーメーション
H2 Alt: 24px / 700 / line-height: 1.7カード見出し
コンピューティングの最前線
H3: 16px / 700 / line-height: 1.3小見出し
富士通は、お客様のデジタルトランスフォーメーション(DX)の実現に向けて、社会課題の解決に取り組んでいます。最先端のテクノロジーとサービスを組み合わせ、人々の暮らしやビジネスに新たな価値を提供します。
Body: 15px / 400 / line-height: 1.7 / color: #333333本文
ソリューション  サービス  テクノロジー  サステナビリティ
Nav: 14px / 700 / line-height: 1.5ナビゲーション

03 / Article

テクノロジー記事サンプル

量子コンピューティングが拓く次世代の計算基盤

量子コンピューティングは、古典コンピュータでは解くことが困難な複雑な問題を、飛躍的に高速に処理できる可能性を持つ次世代の計算技術です。富士通は、超伝導量子ビットとイオントラップの両方のアプローチで研究開発を推進しています。

社会実装に向けた取り組み

実用的な量子コンピュータの実現には、エラー訂正技術の確立、量子ビット数のスケーリング、そしてソフトウェアエコシステムの構築が不可欠です。富士通は、理化学研究所やパートナー企業との連携のもと、2030年までの社会実装を目指しています。

期待される応用分野

創薬シミュレーション、金融リスク分析、サプライチェーン最適化、材料設計など、組合せ最適化問題が本質的に関わる領域で大きなインパクトが期待されています。ABCabc 123 のように欧文・数字が自然に混在する日本語組版にも対応。


ボタンバリエーション

Standard
お問い合わせ
Primary (Red)
事例を見る
Secondary (Blue)
Gradient
Fujitsu Uvance
Red → Pink
イノベーション
Red → Orange
テクノロジー
Blue Gradient
On Dark Background
ダウンロード
Ghost (pill)
詳しく見る
Primary on Dark

05 / Cards

カードコンポーネント

Fujitsu Uvance

社会課題を解決するためのクロスインダストリービジネス。テクノロジーとサービスの融合で、持続可能な未来を創造します。

詳しく見る

コンピューティング

量子コンピューティングからHPCまで。世界最高クラスの計算基盤で、お客様のイノベーションを加速します。

詳しく見る

サステナビリティ

2040年までにバリューチェーン全体でのネットゼロを目指し、GreenByDigitalの取り組みを推進しています。

詳しく見る
Gray Background Card

ニュースリリース

富士通の最新ニュース、プレスリリース、IR情報をお届けします。

一覧を見る

導入事例

製造、金融、公共、ヘルスケアなど、多様な業種のお客様の成功事例をご紹介します。

一覧を見る

フォーム要素

デフォルト — border: #dcdcdc, radius: 0
フォーカス — border: #0048ff (Vivid Blue)
正しい電話番号を入力してください。
エラー — border: #ea0000, bg: #fde5e5

07 / Elevation

Depth & Elevation

Level 0: Flat
ボーダーのみ。富士通のコーポレートデザインはフラットが基本。
Subtle Shadow
0 1px 3px rgba(0,0,0,0.08) — カードホバー時
Focus Ring
#0048ff (Vivid Blue) — フォーカスリング
Error Border
#ea0000 (Fujitsu Red) — エラー状態

レイアウト構成

Max Content Width 1200px
Article Content 960px
Narrow Content 680px
Section Pattern
White Section (#ffffff)
Alt Section (#f3f3f3)
White Section (#ffffff)
Alt Section (#f3f3f3)
Dark Section (#3c3c3c)
Footer (#27455c)
Design Characteristics
  • ■ border-radius: 0 — すべてのコンポーネントがシャープエッジ(例外: Ghost ボタンのみ pill 30px)
  • ■ Elevation: ほぼフラット。ホバー時のみ微細なシャドウ
  • ■ セクション背景は white / #f3f3f3 の交互パターン
  • ■ グラデーションはブランドカテゴリごとに使い分け