Design System Preview
SHISEIDO — 1872年から続く美の哲学

shiseido.co.jp のデザイントークンをカタログ化。シャープな直線、温かみのある中間色、ピンポイントで効かせる資生堂レッド。computed style 実測値に基づく。

DESIGN.md を読む ブランドサイトを見る
01 / Colors

カラーパレット

Brand
Shiseido Red
#c80421
象徴色。重要な見出し・限定強調
Brand Text
#45433e
本文・見出しの基準色（茶味のある DG）
Neutral
Background
#ffffff
ページ全体の基本背景
Border / Surface Subtle
#d3d2cf
仕切り線・セカンダリボタン面
Border Strong
#45433e
強調アウトライン
Footer Background
#3d3d3d
フッター専用のチャコール
Text Inverse
#ffffff
暗い背景上のテキスト
Semantic
Danger / Important
#c80421
Shiseido Red を流用
Warning
未定義
実測値なし（DESIGN.md §2）
Success
未定義
実測値なし（DESIGN.md §2）
02 / Typography — 実測値

タイポグラフィ階層

資生堂のブランド哲学 — Heading 1
28px / 700 / line-height: 1.18 (33/28) / letter-spacing: normalheader
美しさは、人を強くする — Heading 2 (lead)
22px / 700 / line-height: 1.45 (32/22)service__lead
大事なお知らせ — Heading 2 (alert)
22px / 700 / line-height: 1.36 / color: #c80421attention__title
INFORMATION — Heading 2 (news)
22px / 700 / line-height: 1.0 / 英大文字ラベル系news__title
セクション見出し — Heading 2 (section)
21px / 700 / line-height: 1.24 (26/21)main h2
小見出し — Heading 3 / 4
18px / 700 / line-height: 1.22 (22/18)service-s__title / service__sub__title
サイドカラム見出し — Heading 2 (aside)
18px / 700 / line-height: 1.0info__title
コンテンツ小見出し — Heading 3 (small)
16.38px / 700 / line-height: 1.305service__content__title
サービス本文 — Body Emphasis（化粧水・美容液など、肌を整える基礎ケアの考え方をご紹介します。）
16px / 500 / line-height: 1.5 (24/16)service__text
本文テキスト — Body。資生堂のサイトは本文 14px / line-height 1.5 でほぼ統一されています。情報量の多いコーポレートサイトとして読みやすさより一覧性を優先した設計です。letter-spacing は normal、palt も使用しません。
14px / 400 / line-height: 1.5 (21/14) / letter-spacing: normal / palt: なしbody / p / a / li
キャプション — Caption（お買い物に使えるポイントをためる・つかう）
12px / 500 / line-height: 1.5 (18/12)small p

Web フォント方針: Inter（Google Fonts）+ Noto Sans JP（Google Fonts）を読み込み、游ゴシック体は OS インストール環境のフォールバックとして活かす。
詳細は DESIGN.md §3.2 注記を参照。

03 / Article & Product

記事と商品の組版サンプル

大事なお知らせ
SKINCARE STORY

素肌の強さを、内側から育てる。

2026.05.05 ／ Beauty Editorial ／ Reading time: 4 min

資生堂が長年研究してきたのは、肌そのものが本来持つ「美しさを生み出す力」です。化粧品はその力を奪うものではなく、肌の自律的な働きにそっと寄り添い、引き出すための存在であるべき—— それが、1872 年の創業以来、私たちが守り続けてきた基本姿勢です。

角層という、いちばん外側のレイヤー

肌の表面には、水分と脂質、そして天然保湿因子（NMF）でできた精緻なバリアがあります。このわずか 0.02mm の薄い層が、外的刺激から肌を守り、潤いを内側にとどめる役割を担っています。スキンケアの第一歩は、この層を整えること。化粧水で水分を、美容液で集中ケアを、乳液で蓋を—— ひとつひとつのステップに意味があります。

選び方のヒント

「自分に合うものがわからない」と感じたら、まずは肌の状態を観察してみてください。乾燥なのか、ベタつきなのか、ゆらぎなのか。資生堂の店頭では、肌測定機器を用いた無料カウンセリングをご利用いただけます。最寄りの店舗でお気軽にご相談ください。

SKINCARE
Lotion
Treatment Softener
トリートメント ソフナー
¥6,600 （税込／150mL）
SERUM
Essence
Ultimune Power Infusing Concentrate
アルティミューン パワライジング コンセントレート
¥12,100 （税込／50mL）
MAKEUP
Lipstick
ModernMatte Powder Lipstick
モダンマット パウダー リップスティック
¥4,400 （税込）
商品一覧を見る
04 / Buttons

ボタンバリエーション

資生堂のボタンは border-radius: 0px を徹底。装飾的な影は使わず、罫線・余白・タイポグラフィの強弱だけで階層を作ります。

新着情報
Primary（白地・タブ的）
16px / 700
資生堂グループ情報
Secondary（グレー塗り）
16px / 500
ブランド一覧
Outline Strong（強い枠）
14px / 400
さらに見る
Outline（細枠）
14px / 400
大事なお知らせ
Danger（参考実装）
16px / 700
05 / Cards

カードコンポーネント

BEAUTY METHOD

朝のスキンケア、3 ステップで完了

洗顔・化粧水・乳液の基本ステップを、忙しい朝でもきちんと続けるためのコツをご紹介します。1 つひとつの所作にかける時間は、自分を整える時間でもあります。

続きを読む
PRODUCT GUIDE

美容液の選び方

保湿、エイジングケア、美白—— 目的別に最適な美容液を選ぶための判断軸を、資生堂の研究員が解説。自分の肌状態と相談しながら選んでください。

続きを読む
BRAND STORY

1872 年、銀座から始まった

日本初の洋風調剤薬局として銀座に誕生した資生堂。150 年を超えるブランドの歩みと、これからの美容に向き合う姿勢をたどります。

続きを読む
06 / Forms

フォーム要素（3 状態）

入力欄も角丸を使わず、44px のタッチターゲット高さを基準に。フォーカス時は border を #45433e（Border Strong）に切り替え、エラーは Shiseido Red を最小限に使います。

デフォルト — border: 1px solid #d3d2cf / radius: 0px / height: 44px
フォーカス — border: 1px solid #45433e（Border Strong）
エラー — border: 1px solid #c80421（Shiseido Red）／メッセージは最小限のテキストで
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1（推奨）
0 1px 2px rgba(0,0,0,0.06)
Level 2（推奨）
0 4px 12px rgba(0,0,0,0.08)

実測値はすべて box-shadow: none。資生堂はフラットを徹底しており、影に頼らずに階層を表現します。Level 1 / 2 は「どうしても必要な場合の推奨値」です。

08 / Layout

スペーシングとコンテナ幅

Spacing Scale（8px ベース）
XS
8px
S
16px
M
24px
L
40px
XL
58px
XXL
80px
Container & Content Widths
Container Max 1280px
Main Content 940px
Article（読み物） 680px
Footer Padding（左右） 80px
Breakpoints

Mobile: ≤ 767px ／ Tablet: 768 – 1024px ／ Desktop: > 1024px
タッチターゲットは 44px × 44px 以上（WCAG 基準。--swiper-navigation-size: 44px とも整合）。