Design System Preview
meiji — 日本語版

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

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

01 / Colors

カラーパレット

Brand
Meiji Red
#d90000
ブランドカラー・見出しアクセント
CTA Red
#e30200
CTA ボタン背景
Primary Red
#ff0000
--primary-color(基準色)
Category Accents
Accent Blue
#407bbe
--accent-color1
Accent Orange
#ffa24b
--accent-color2
Accent Green
#00ae83
--accent-color3
Text
Text Primary
#06171f
--text-color1(ダークネイビー)
Text Red
#d90000
--text-color2(見出し強調)
Gray 1
#59636b
--gray-accent1(補助)
Gray 2
#7c8a95
--gray-accent2(不活性)
Surface & Border
BG White
#ffffff
--bg1 ヘッダー・カード
BG Light Blue-Gray
#edf3f7
--bg2 ページ背景
BG Medium
#dde5eb
--bg3 ホバー面
Border
#b7c4ce
--gray-accent3 ボーダー
Border Light
#cfdae3
--gray-accent4 淡ボーダー
Footer
Footer Dark
#27455c
フッター背景
Footer Darkest
#06171f
フッター最下部
Green (Sub)
#468254
サステナビリティ関連面

タイポグラフィ階層

商品情報 — Display (h2)
40px / 700 / line-height: 1.8 / letter-spacing: 0.06emセクションタイトル
おいしい笑顔のために — Display Light
40px / 300 / line-height: 1.25 / color: --gray-accent1装飾見出し
ピックアップ — H3 Pick-up
42px / 200 / line-height: 1.8 / 超軽量ウェイト特集見出し
サブセクション見出し — H2 Sub
24px / 700 / line-height: 1.8 / letter-spacing: 0.04emサブ見出し
お知らせ — H2 Red Heading
16px / 700 / line-height: 1.8 / color: #d90000 (Meiji Red)ブランド見出し
リードテキスト。明治は、赤ちゃんからお年寄りまでの「健康・栄養」に関する事業を展開しています。 — P Lead
20px / 400 / line-height: 1.8 / letter-spacing: 0.06emリード文
本文テキスト。全テキスト要素で line-height 1.8 を統一するのが明治サイトの最も特徴的なデザインシグネチャーです。letter-spacing 0.06em とあわせて、広い行間・ゆったりした字送りの読みやすい組版。 — Body
16px / 400 / line-height: 1.8 / letter-spacing: 0.06em本文
ナビゲーション — Nav (15px / 500)
15px / 500 / line-height: 1.8グローバルナビ
補足テキスト・日付 — Small (14px)
14px / 400 / line-height: 1.8 / color: --gray-accent1補足

食品・栄養に関する記事の組版

カカオの産地と風味の関係

チョコレートの味わいは、カカオ豆の産地によって大きく異なります。産地ごとの特徴を理解することは、より豊かなチョコレート体験の第一歩です。

ガーナ産カカオの特長

西アフリカのガーナは世界第二位のカカオ生産国です。ガーナ産カカオは、バランスの取れた風味と穏やかな酸味が特徴で、ミルクチョコレートとの相性が抜群です。収穫から発酵、乾燥までの工程が品質に直結するため、現地の農家との協力体制が重要になります。

栄養情報

カカオポリフェノールには抗酸化作用があり、適度な量のダークチョコレートの摂取は健康維持に役立つとされています。カカオ分 70% 以上のチョコレートには、鉄分・マグネシウム・食物繊維も豊富に含まれています。

乳製品の役割

ミルクチョコレートに使われる乳製品は、カカオの苦味をまろやかにし、クリーミーな口どけを生み出します。牛乳に含まれるカルシウムやたんぱく質も、チョコレートの栄養価を高める要素です。乳酸菌を活用した発酵食品との組み合わせも、近年注目を集めています。


04 / Buttons

ボタンバリエーション

Category Badges
乳製品
Brand Red
菓子
Accent Blue
栄養食品
Accent Orange
健康
Accent Green
企業情報
Dark Navy

カードコンポーネント

乳製品

明治ブルガリアヨーグルト

本場ブルガリアのLB81乳酸菌を使用。整腸効果のある特定保健用食品として、毎日の健康をサポートします。

詳しく見る →
菓子

明治ミルクチョコレート

1926年の発売以来、日本のチョコレート文化を牽引してきたロングセラー。厳選されたカカオ豆と新鮮なミルクの調和。

詳しく見る →
健康

明治プロビオヨーグルトR-1

強さひきだす乳酸菌。1073R-1乳酸菌を使用したヨーグルトで、毎日の体調管理を手軽にサポートします。

詳しく見る →

06 / Forms

フォーム要素

デフォルト — border: #b7c4ce, radius: 4px
フォーカス — border: #407bbe (Accent Blue)
正しい電話番号を入力してください
エラー — border: #d90000 (Meiji Red)

Depth & Elevation

Level 0: Flat
影なし(基本状態)
Level 1
0 2px 8px rgba(0,0,0,0.06)
Level 2
0 4px 16px rgba(0,0,0,0.08)
Level 3
0 8px 24px rgba(0,0,0,0.12)
Focus Ring
#407bbe (Accent Blue)

08 / Layout

スペーシング & コンテンツ幅

Spacing Scale
4px
8px
16px
24px
48px
80px
Border Radius
2px
4px
8px
12px
Content Width
Max Container 1200px
Content Area 1000px
Article / Text 680px