Design System Preview
FUJIFILM — 日本語版

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

製品情報を見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand & Attention
FUJIFILM Red
#fb0020
リンク・注目色(控えめに使用)
Green
#018463
環境・CSR関連テキスト
Blue
#124F72
セクション見出し・アクセント
Text
Text Primary
#000000
本文テキスト
Text Secondary
#515151
補足テキスト・フッター
Text Red
#990000
エラー・警告テキスト
Text White
#ffffff
暗色背景上のテキスト
Surface & Border
Background
#ffffff
ページ背景
Background Secondary
#F6F7F6
セクション背景
Footer BG
#f1f2f1
フッター背景
Button BG
#E0E0E0
プライマリボタン面
Border
#ADADAD
標準ボーダー

02 / Typography

タイポグラフィ階層

Font Substitution: Clarimo UD PE + UD Shin Go (commercial UD fonts) → Noto Sans JP (Google Fonts substitute)
Global: font-feature-settings: "palt" / letter-spacing: 0.06em
見出し1 — H1 Title (36px / 700)
36px / 700 / line-height: 1.5 (54px) / letter-spacing: 0.06em / palt: onページタイトル
ヒーロー見出し — H2 Hero
45px / 400 / line-height: normal / letter-spacing: 0.03em / palt: onヒーローセクション
セクション見出し — H2 Section (32px)
32px / 400 / line-height: 1.5 (48px) / letter-spacing: 0.03em / palt: onセクション見出し
中見出し — H3 (28px / 400)
28px / 400 / line-height: 1.5 (42px) / letter-spacing: 0.06em / palt: on
小見出し — H3 variant (18px / 500)
18px / 500 / line-height: 1.5 (27px) / letter-spacing: 0.06em / palt: on
H4 見出し (18px / 700)
18px / 700 / line-height: 1.5 (27px) / letter-spacing: 0.06em / palt: on
本文テキスト — UD(ユニバーサルデザイン)フォントを採用した読みやすい組版。line-height: 2.0 の広い行間と letter-spacing: 0.06em、そして palt のプロポーショナル詰めがグローバルに適用されています。
16px / 400 / line-height: 2.0 (32px) / letter-spacing: 0.06em / palt: on本文
ナビゲーション — Nav (14px / 500)
14px / 500 / line-height: 1.5ナビゲーション
キャプション — Caption (12px / 400-500)
12px / 400-500 / line-height: 2.0 (24px) / color: #515151キャプション

記事・製品ページの組版サンプル

イメージング技術が拓く未来

富士フイルムは写真フィルムで培った技術を基盤に、ヘルスケア、マテリアルズ、イメージングの3つの領域で革新を続けています。光の波長をコントロールする技術、ナノ分散技術、精密塗布技術が、新たな価値を創造します。

色再現の科学

80年以上にわたる色彩研究の蓄積から生まれたフィルムシミュレーション。PROVIA、Velvia、ASTIAなど、フィルム時代から受け継がれた色再現は、デジタルカメラでも写真家に選ばれ続けています。

フィルムシミュレーションとデジタル処理

X-Trans CMOSセンサーとX-Processorの組み合わせにより、撮影時点で最終的な色表現を決定できるワークフローを実現。RAW現像に頼らず、撮って出しで完成度の高い画像を得られます。

*FUJIFILM X Series は、プロフェッショナルからアマチュアまで幅広いユーザーに対応するミラーレスカメラシステムです。

X-T5

FUJIFILM X-T5

約4020万画素 X-Trans CMOS 5 HR センサー搭載。コンパクトボディに高画質と高速AFを凝縮した、スチル特化のミラーレスカメラ。

製品詳細 →
GFX100II

FUJIFILM GFX100 II

1億200万画素ラージフォーマットセンサー。被写界深度制御と圧倒的な解像力で、プロフェッショナルの創造性を解放する。

製品詳細 →

04 / Buttons

ボタンバリエーション

製品情報
Primary CTA
bg:#E0E0E0 / radius:2px
padding: 16px 32px
詳しく見る
Secondary
bg:rgba(255,255,255,0.3)
border: 1px solid #ADADAD
padding: 14px 28px
お知らせ一覧 →
Link
color: #fb0020
お問い合わせ
Dark variant
bg:#000000 / color:#fff
カタログ請求
Outline Dark
border:#000000

05 / Cards

カードコンポーネント

Healthcare

AI技術を活用した医療画像診断

医療画像処理で培ったAI技術により、医師の診断を支援。高精度な画像解析で、早期発見・早期治療に貢献します。

詳しく見る →
Imaging

フィルムシミュレーションの世界

80年以上の色彩研究から生まれた19種のフィルムシミュレーション。デジタルでフィルムの質感と色再現を追求します。

詳しく見る →
Materials

高機能材料ソリューション

ナノテクノロジーを活かした先端材料開発。ディスプレイ材料、半導体プロセス材料など、社会インフラを支えます。

詳しく見る →

06 / Forms

フォーム要素

デフォルト — border: #ADADAD, radius: 2px
フォーカス — border: #000000, box-shadow: 0 0 0 1px #000
正しい電話番号を入力してください。
エラー — border: #990000

07 / Elevation

Depth & Elevation

FUJIFILM のデザインはフラットが基本。影の使用は最小限に抑え、ボーダーと背景色の差で階層を表現する。

Level 0: Flat
影なし、ボーダーのみ(基本)
--elevation-1
ホバー時カード
--elevation-2
ドロップダウン
--elevation-3
モーダル
Focus Ring
border: 2px solid #000

08 / Layout

レイアウト & スペーシング

Container Standard 1160px
Container Wide 1400px
Article Content 760px

Spacing Scale

8px
16px
20px
gutter
32px
40px
gap
64px
padding