Beauty Healthcare Food

夢中になれる明日

クラシエのデザインシステムをカタログ化したプレビューです。コーポレートサイトの computed style 実測値に基づき、カラー、タイポグラフィ、コンポーネント、レイアウトトークンを可視化しています。ヘルスケア・化粧品・食品の多彩なプロダクトラインを持つクラシエらしい、カラフルで親しみやすいビジュアルが特徴です。

製品を探す 企業情報 ブランド一覧 →

01 / Colors — 実測値

カラーパレット

Brand — 多彩なプロダクトラインを反映するマルチカラー
Brand Yellow
#ffd500
主要 CTA・ハンバーガーボタン背景
Brand Pink
#ffa8e2
キャンペーン・グラフィック要素(最頻出ユニーク背景色)
Brand Blue
#248cff
キャンペーン要素・リンク強調
Brand Lime
#b2ff53
キャンペーン・ヘルスケア系アクセント
Brand Orange
#ffa646
食品系アクセント・ポイント色
Orange Dark
#ff8c00
オレンジ濃い目バリエーション
Brand Purple
#6c55f0
キャンペーン・特別感のあるアクセント
Text & Neutral
Text Primary
#272727
主要テキスト・見出し・CTA テキスト
Text Secondary
#585858
補足テキスト・キャプション
Text Dark
#2b2e38
濃いテキスト・ナビゲーション
Background & Surface
Page Background
#fafaef
ページ背景(ウォームクリーム)
Surface Light
#f8f8f8
検索バー・入力背景
Surface Beige
#f0f0e2
セクション背景・ボーダー
White
#ffffff
ヘッダー・カード背景
Footer Dark
#272727
フッター背景
Semantic — 推奨補完値
Danger
#dc2626
エラー・削除(推奨)
Success
#16a34a
成功・完了(推奨)
Warning
#d97706
警告・注意(推奨)

02 / Typography — 実測値

タイポグラフィ階層

font-feature-settings: "palt" — body 全体にグローバル適用
夢中になれる明日 — H2 title-lv1
35px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onトップ
製品情報・ブランド一覧 — H2 title-lv2
24px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onトップ
いち髪・肌美精・ナイーブ — H3 title-lv3
16px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onトップ
本文テキスト — クラシエは「夢中になれる明日」をコーポレートメッセージに掲げ、ヘルスケア、ビューティケア、フーズの3事業を展開しています。日本語本文は 13px / line-height 1.8 で、コンパクトでありながら十分な行間を確保。グローバルに適用された palt(プロポーショナルメトリクス)により、和文テキストの詰め組みが実現されています。
13px / 400 / line-height 1.8 / letter-spacing 0.05em / palt:on全体
ナビゲーション — 製品情報 / 企業情報 / IR
13px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onナビ
フッターテキスト — Copyright, プライバシーポリシー, サイトマップ
13px / 500 / line-height 1.8 / letter-spacing 0.05em / palt:onフッター
CTA ボタンラベル
15px / 700 / line-height 1.3 / letter-spacing 0.05em / palt:onCTA

プロダクトサンプル

🌸
Beauty

いち髪

日本の純・和草プレミアムエキス配合。ダメージ補修と予防の両立で、使うほどに芯から美しい髪へ。

製品詳細を見る
💊
Healthcare

葛根湯

かぜのひきはじめに。クラシエの漢方薬シリーズは、伝統処方を現代の技術で飲みやすく仕上げています。

製品詳細を見る
🍦
Food

ねるねるねるね

知育菓子シリーズ。お子さまの好奇心を刺激し、作る楽しさを味わえるユニークなお菓子です。

製品詳細を見る

04 / Article — 本文組版サンプル

記事組版サンプル

夢中になれる明日

クラシエグループは「夢中になれる明日」をコーポレートメッセージに掲げ、ヘルスケア、ビューティケア、フーズの3つの事業を通じて、お客さまの健やかで美しい毎日をサポートしています。

多様な事業領域

漢方薬やヘルスケア製品で健康を、ヘアケア・スキンケアで美しさを、お菓子やアイスクリームで楽しさを。ひとつの企業の中に、暮らしのさまざまなシーンに寄り添うブランドが揃っています。

サステナビリティへの取り組み

容器包装の環境配慮、原材料の持続可能な調達、製造工程での省エネルギーなど、事業活動のあらゆる側面で環境負荷の低減に取り組んでいます。

お知らせ:製品に関するお問い合わせは、各ブランドサイトまたはお客様相談室までご連絡ください。受付時間は平日 9:00〜17:00 です。

※ 本プレビューのテキストはデザインシステムのサンプルです。最新の製品情報は公式サイトをご確認ください。


05 / Buttons — Yellow Pill が基本

ボタンバリエーション

製品を探す
Primary CTA — Pill / #ffd500 / radius 50px
企業情報
Secondary — White Pill + Border
ブランド一覧 →
Text Link — #272727
Hamburger Button
Hamburger — Circle / #ffd500 / radius 50%
Pills / Badges — ブランドカラーバリエーション
Beauty Campaign Healthcare Wellness Food Special Default

カードコンポーネント

クラシエ薬品

漢方薬・医薬品を通じて、人々の健康な暮らしに貢献します。葛根湯をはじめとする漢方薬シリーズが主力製品です。

クラシエホームプロダクツ

いち髪、肌美精、ナイーブなど、毎日の美容と暮らしを豊かにするブランドを展開しています。

クラシエフーズ

ねるねるねるね、甘栗むいちゃいました等、お菓子・アイスクリームで楽しさを届けます。

研究開発

漢方の知見と最新テクノロジーの融合。独自の研究開発体制で、新しい価値を創造し続けます。

CSR・サステナビリティ

環境配慮型パッケージの開発や、持続可能な原材料調達に取り組んでいます。

採用情報

多様な事業領域で、あなたの「夢中」が見つかる。新卒・中途採用の最新情報をお届けします。


07 / Forms — Pill Inputs

フォーム要素

Default — border #f0f0e2 / radius 50px
Focus — border #ffd500 / shadow yellow 3px
Error — border #dc2626 / shadow 3px
Search Input(ヘッダー検索バー)
Search — bg #f8f8f8 / radius 50px / border transparent

08 / Elevation — 推奨値

Depth & Elevation

Level 0: Flat
影なし — 基本
Elevation 1
0 2px 8px rgba(0,0,0,0.06)
Elevation 2
0 8px 24px rgba(0,0,0,0.08)
Elevation 3
0 16px 40px rgba(0,0,0,0.10)

09 / Layout — Spacing & Radius

スペーシング & ラディウス

Spacing Scale(8px ベース)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px
Medium
8px
Large
16px
Pill
50px
Circle
50%