Design System Preview
CHOYA -- 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。1914年創業のチョーヤ梅酒。明朝体見出し + ゴシック体本文の二書体構成で、老舗の品格と現代的な清潔感を両立するデザインシステム。computed style 実測値に基づく。

商品を見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
CHOYA Green
#16ae41
ブランドカラー・見出し
Button Green
#2dae37
年齢確認CTA
Category Accent
Gold
#ccac38
CRAFT CHOYA
Red
#e14141
その他
Blue
#3d9cc8
ノンアルコール
Orange
#ee9303
ソフトドリンク
Pink
#fb5e82
食品
Neutral
Text Dark
#333333
強調テキスト
Text Primary
#666666
本文・ボーダー
Border Light
#cccccc
入力欄の枠線
Surface Light
#f5f5f5
セクション背景
Background
#ffffff
ページ背景
Surface Dark
#323232
CM/MOVIE セクション

02 / Typography -- 実測値

タイポグラフィ階層

セクション見出し -- H2 Section
Noto Serif JP / 36px / 600 / line-height: 1.3 / letter-spacing: 0.15em / color: #16ae41セクション見出し
ページタイトル -- H1 Page Title
Noto Serif JP / 31px / 400 / line-height: 1.3 / letter-spacing: 0.075em商品ページ
おすすめ見出し -- H3 Recommend
Noto Serif JP / 25px / 700 / line-height: 1.3 / letter-spacing: 0.15emおすすめセクション
CTAテキスト -- Button Text
Noto Serif JP / 20px / 500 / line-height: 1.3 / letter-spacing: 0.1emゴーストボタン
商品名 -- H3 Product Name
Noto Sans JP / 16px / 400 / line-height: 1.3 / letter-spacing: 0.1em商品一覧
本文テキスト -- 梅酒づくりの歴史は古く、江戸時代にはすでに家庭で仕込まれていた記録が残っています。チョーヤは1914年の創業以来、100年以上にわたり梅と向き合い続けてきました。ABCabc 123
Noto Sans JP / 14px / 400 / line-height: 2.0 / letter-spacing: normal本文
キャプション・注釈テキスト -- Caption (10px)
Noto Sans JP / 10px / 400 / line-height: 1.3キャプション

梅酒づくりの世界

百年の梅仕事 -- 一粒の梅から生まれる芳醇な一杯

チョーヤ梅酒は、1914年の創業以来、「本物の梅酒」にこだわり続けてきました。人工的な香料や酸味料を一切使わず、梅の実と砂糖、そして酒だけで仕込む。その素朴で誠実なものづくりが、百年を超えて愛される理由です。

南高梅へのこだわり

チョーヤが使用するのは、紀州和歌山産の南高梅。果肉が厚く、香り豊かなこの品種は、梅酒の味わいを左右する最も重要な素材です。毎年6月、完熟して自然落下した梅だけを手作業で収穫します。一粒一粒に宿る太陽と風の記憶が、梅酒の深い味わいとなって現れます。

時間が醸す芳醇さ

梅酒の仕込みに近道はありません。梅の実をゆっくりと酒に漬け込み、冷暗所で静かに熟成させる。数ヶ月から数年の時を経て、梅のエキスが酒に溶け出し、琥珀色の美しい液体が生まれます。この「待つ」工程こそが、チョーヤ梅酒のまろやかな口当たりと奥行きのある風味を生み出す鍵です。

酸味料、香料、着色料 無添加

梅、砂糖、酒。チョーヤ梅酒の原材料はシンプルです。人工的な添加物に頼らず、素材そのものの力を最大限に引き出す。この「引き算の美学」は、日本のものづくりの精神そのものであり、チョーヤが百年以上守り続けてきた哲学です。


04 / Buttons

ボタンバリエーション

商品を見る
Ghost CTA (Primary)
はい、20歳以上です
Pill CTA (Age Gate)
EN
Language Selector
Category Buttons
梅酒
梅酒
CRAFT
CRAFT CHOYA
ノンアル
ノンアルコール
ドリンク
ソフトドリンク
食品
食品
その他
その他

05 / Cards

カードコンポーネント

CRAFT CHOYA

The CHOYA SINGLE YEAR

厳選された紀州産南高梅だけを使用。1年以上じっくりと熟成させた本格梅酒。

詳しく見る
梅酒

さらりとした梅酒

すっきりとした飲み口の本格梅酒。ロック、水割り、ソーダ割りで幅広く楽しめます。

詳しく見る
ノンアルコール

酔わないThe CHOYA

ノンアルコールでも本格的な梅の味わい。梅から抽出した天然梅エキスを使用。

詳しく見る

06 / Forms

フォーム要素

デフォルト -- border: #cccccc, radius: 0px
フォーカス -- border: #16ae41 (CHOYA Green)
20歳以上の方のみご利用いただけます
エラー -- border: #e14141 (Red)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし・ボーダーのみ(基本)
Elevation 1
0px 2px 8px rgba(0,0,0,0.08)
Elevation 2
0px 4px 16px rgba(0,0,0,0.12)
Focus Ring
#16ae41 (CHOYA Green)

CM / MOVIE セクション

Surface Dark (#323232) を使用した暗い背景セクション。CM動画や映像コンテンツの表示に使用される。白テキストとのコントラストで映像を引き立てる。

CMを見る

09 / Layout

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

Spacing Scale
4px
8px
16px
24px
40px
80px
Content Widths
Container 1200px
Content Area 1000px
Article 680px