ヤクルトの想い

人も地球も健康に。
ヤクルトが届ける、乳酸菌の力。

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

お問い合わせはこちら ブランドサイトはこちら

01 / Colors

カラーパレット

Brand
Yakult Red
#e60039
主要 CTA・h2 見出し・ラベルバッジ
Blue Accent
#3f7ac3
リンク・インフォメーション要素
Category Surfaces
Warm Cream
#fbf6ec
食品・飲料カテゴリ面
Warm Pink
#fff2f5
化粧品カテゴリ面
Neutral
Black
#000000
h3 サブタイトル
Primary Text
#323232
本文テキスト
Secondary Text
#6e6e6e
ナビ・補助テキスト
Tertiary Text
#333333
日付・タグ文字
Neutral Surface
#f2f2f2
タグ・フィルター背景
White
#ffffff
ページ背景・カード背景
Semantic
Danger
#cc0033
エラー・削除(推奨)
Success
#16a34a
成功・完了(推奨)
Warning
#d97706
警告・注意(推奨)

02 / Typography

タイポグラフィ階層

人も地球も健康に。 -- Section H2
36px / 700 / line-height 1.5 / color #e60039セクション見出し
乳酸菌シロタ株のはたらき -- Sub H3
24px / 700 / line-height 1.5 / color #000 / border-left 4px solid #e60039サブセクション
食品・飲料カテゴリ -- Nav Mega
19px / 700 / line-height 1.58 / letter-spacing -0.067em / color #6e6e6eメガメニュー
本文テキスト -- ヤクルトは、人々の健康を願い、乳酸菌の研究を続けてきました。「代田イズム」の精神を受け継ぎ、科学に裏付けられた製品を世界中に届けています。腸内環境の研究から生まれた乳酸菌 シロタ株は、生きたまま腸に届く力を持っています。日本語の組版において weight 500(Medium)による可読性の高い本文を実現しています。
16px / 500 / line-height 1.5 / color #323232本文
グローバルナビ -- Nav Link
14px / 700 / line-height 2.14 (30px) / color #6e6e6eナビ
2026.05.31 -- Date
14px / 500 / line-height 1.5 / color #333333日付
新着情報 -- Label Badge
13px / 600 / line-height 30px / color #fff / bg #e60039 / radius 4px 4px 0 0ラベル

本文組版サンプル

人も地球も健康に。

ヤクルトは創始者 代田 稳のもと、予防医学の実現を目指して設立されました。乳酸菌の研究から生まれた独自の菌株を活用し、世界40の国と地域で事業を展開しています。

乳酸菌シロタ株の特長

乳酸菌 シロタ株(L. paracasei Shirota)は、胃液や胆汁にも負けず、生きたまま腸に届く強さを持っています。腸内の有用菌を増やし、有害菌を減らすことで、腸内フローラのバランスを整えます。

研究開発へのこだわり

ヤクルト中央研究所では、乳酸菌・ビフィズス菌をはじめとする微生物の研究を行い、エビデンスに基づいた製品開発を行っています。

代田イズム:「予防医学」「健腸長寿」「誰もが手に入れられる価格で」。この三つの理念が、ヤクルトのすべての活動の原点です。

※ 本ページはデザインシステムのプレビューです。実際の製品情報は yakult.co.jp をご確認ください。


04 / Product Cards

商品カード

🥛
乳製品

Yakult 1000

1本(100ml)に乳酸菌 シロタ株が1000億個。機能性表示食品として一時的な精神的ストレスを和らげる機能が報告されています。

製品詳細 →
🍶
飲料

ジョア

果汁とカルシウムを加えた飲むヨーグルト。毎日の栄養補給に手軽でおいしい乳酸菌飲料です。

製品詳細 →
化粧品

パラビオ

ヤクルトが乳酸菌の研究で培った知見を化粧品に応用。S.E. ローションをはじめ、肌本来の力を引き出すスキンケアライン。

製品詳細 →

05 / Buttons

ボタンバリエーション

お問い合わせはこちら
Primary CTA -- Pill / #e60039 / r50
企業情報
Primary Small -- Pill / #e60039 / r20
ブランドサイトはこちら
Ghost -- Outline Pill / r40
Tags / Badges
新着情報 乳製品 飲料 化粧品 NEW

06 / Cards -- Category Surfaces

カテゴリカード

食品・飲料

乳酸菌飲料「ヤクルト」シリーズをはじめ、ジョアやソフール等、毎日の健康をサポートする食品・飲料ラインナップ。ウォームクリーム面で温かみを表現。

カテゴリ一覧 →

化粧品

乳酸菌の研究から生まれたスキンケアブランド。パラビオやリベシィ等、科学に基づいた美容製品。ウォームピンク面で華やかさを表現。

カテゴリ一覧 →

企業情報

ヤクルトの企業理念、CSR活動、IR情報、採用情報等。ニュートラルサーフェスでコーポレートトーンを表現。

企業情報 →

フォーム要素

Default -- border #ccc / radius 4px
Focus -- border #e60039 / shadow 3px
正しい電話番号を入力してください
Error -- border #cc0033 / shadow 3px

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 Scale(8px ベース)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px
Medium
8px
CTA Small
20px
CTA Medium
40px
CTA Large
50px