Design System Preview
pocarisweat.jp

DESIGN.md から抽出したデザイントークンのカタログ。アイコニックな「ポカリブルー」を軸にしたカラー、タイポグラフィ、コンポーネントの全仕様を可視化。computed style 実測値に基づく。

製品について DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Pocari Blue
#015db2
ブランドカラー・ロゴ・ナビ
Pocari Blue Dark
#004a8f
ホバー・プレス時
Pocari Blue Light
#e8f2fb
アクセント背景
Text
Text Primary
#42515a
本文テキスト(ブルーグレー)
Text Nav
#606d75
ナビゲーション
Text Heading
#333d45
見出しテキスト
Text Link
#015db2
リンクテキスト
Surface & Background
Background
#ffffff
ページ背景
Surface Light
#f6f8f9
セクション背景
Footer
#ebebeb
フッター背景
Border
#e0e4e7
区切り線
Overlay
Dark Navy
rgba(5,33,92,0.8)
ニュースオーバーレイ帯
Frosted Glass
rgba(255,255,255,0.4~0.8)
半透明オーバーレイ
Semantic
Danger
#cc0000
エラー・注意
Success
#2e8b57
成功・完了

フロステッドグラス オーバーレイ

0.4 alpha
Frosted Light
0.5 alpha
Frosted Medium
0.8 alpha
Frosted Strong

ポカリスエットのサイトでは半透明ホワイトのオーバーレイでコンテンツ領域に奥行きを持たせている。
影(box-shadow)の代わりにフロステッドグラスが深度を表現する特徴的な手法。


02 / Typography

タイポグラフィ階層

ポカリスエットは、からだにうるおいを — Display Heading
24px / 700 / line-height: 1.4 / letter-spacing: normalページヘッダー
製品情報 — Heading 2
20px / 700 / line-height: 1.5 / letter-spacing: normalセクション見出し
成分と特徴 — Heading 3
16px / 700 / line-height: 1.5 / letter-spacing: normal小見出し
本文テキスト — ポカリスエットは、汗をかいたときに失われる水分とイオン(電解質)をスムーズに補給する健康飲料です。体液に近い成分バランスで、カラダにうるおいを届けます。ABCabc 123
14px / 400 / line-height: 1.8 / letter-spacing: normal本文
ナビゲーション / メタテキスト — Navigation Text (13px)
13px / 400 / line-height: 1.5 / color: #606d75ナビゲーション
リンクテキスト — Link Text (12px Bold)
12px / 700 / line-height: 1.5リンク・ラベル
フッター / 注釈テキスト — Caption (11px)
11px / 400 / line-height: 1.5 / color: #606d75フッター・注釈
Font Stack
font-family: Helvetica, Arial, "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN", メイリオ, Meiryo,
  "MS Pゴシック", "MS PGothic", sans-serif;
欧文優先型(Helvetica 先頭)。Web フォントは不使用。
※ preview.html では環境非依存のため Noto Sans JP を先頭に追加

記事・製品紹介の組版サンプル

からだにうるおいを届ける、ポカリスエット

ポカリスエットは1980年の発売以来、日本の夏を支える健康飲料として親しまれてきました。汗をかいたときに失われる水分とイオン(電解質)を、スムーズに補給できるよう設計されています。

体液に近い成分バランス

人間の体液に近い電解質バランスで構成されているため、水分の吸収がスムーズです。ナトリウム、カリウムなどの電解質が、汗で失われたミネラルを効率よく補います。Na+ や K+ といったイオンが最適なバランスで配合されています。

日常の水分補給から、スポーツ時の水分・イオン補給まで。ポカリスエットは、暮らしのさまざまなシーンで活躍する健康飲料です。

正しい水分補給の知識

のどが渇いたと感じたときには、すでに体内の水分は不足しています。こまめな水分補給を心がけることが大切です。特に夏場の運動時や、入浴前後、就寝前のタイミングでの水分補給が推奨されています。


04 / Buttons

ボタンバリエーション

ポカリスエットのサイトはスクエア(角丸なし)のボタンが基調。画像ベースのナビゲーションが中心で、テキスト CTA は簡潔。
製品情報を見る
Primary (Blue)
On Dark Background
詳しく見る
White on Blue
キャンペーン
Outline White

カードコンポーネント

💧
2024.07.15

夏の水分補給ガイド

熱中症予防に欠かせない、正しい水分補給の方法をご紹介します。こまめな水分補給が大切です。

詳しく見る >
🏃
2024.06.28

スポーツとイオン補給

運動中に失われるイオン(電解質)の補給がパフォーマンス維持の鍵。科学的な根拠をもとに解説。

詳しく見る >
🧪
2024.05.10

ポカリスエットの成分

体液に近い電解質バランスで設計。ナトリウム・カリウム・マグネシウムなどの配合について。

詳しく見る >

06 / Forms

フォーム要素

デフォルト — border: #e0e4e7, border-radius: 0
フォーカス — border: #015db2 (Pocari Blue)
正しい電話番号を入力してください
エラー — border: #cc0000 (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
0 1px 3px rgba(0,0,0,0.12)
Level 2
0 2px 8px rgba(0,0,0,0.15)
Focus Ring
#015db2 (Pocari Blue)
Frosted Glass as Depth
ポカリスエットのサイトでは box-shadow ではなく半透明ホワイトオーバーレイ(Frosted Glass)で深度を表現する。
Frosted 0.4
Frosted 0.5
Frosted 0.8

08 / Layout

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

Content Widths
Main Container 960px
Article Content 620px
Spacing Scale
4px
8px
16px
24px
32px
48px
64px
Design Characteristics
Square Components
border-radius: 0 — 全コンポーネントがスクエア基調
Image-Driven Layout
画像中心の構成。テキストは簡潔に
System Font Stack
Helvetica 先頭の欧文優先型。Web フォント不使用
Flat + Frosted Glass
影を最小限に抑え、半透明オーバーレイで深度表現