SWEETNESS FOR ALL

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

ブランドサイトを見る キャンペーン一覧

01 / Colors
Color Palette
Brand
Lotte Red
#dd1d18
ナビ背景・英語見出し・CTA・カルーセル
Lotte Red Dark
#c6130e
ホバー・プレス・クローズボタン
Neutral
Text Primary
#333333
本文・商品名・見出し
Text Secondary
#6b6b6b
日本語サブタイトル・補助テキスト
Text Tertiary
#666666
タブの非アクティブ文字
Black
#000000
一部要素のテキスト
Surfaces
White
#ffffff
ページ背景・メインセクション
Surface Warm
#efece7
"新商品" "ブランドを探す" セクション背景
Surface Light
#f5f4f0
ABOUT セクション背景
Semantic -- 推奨補完値
Danger
#dc2626
エラー・削除(推奨)
Success
#16a34a
成功・完了(推奨)
Warning
#d97706
警告・注意(推奨)

Typography
Campaign キャンペーン
EN: 30px / 900 / 0.06em / #dd1d18 • JP: 16px / 700 / 0.24em / #6b6b6bバイリンガル見出し
ABOUT LOTTE ロッテについて
EN: 30px / 900 / 0.06em / white • JP: 16px / 700 / 0.24em / white赤背景バイリンガル
ロッテ -- H1 (Logo Area)
28px / 700 / line-height 1.15 / letter-spacing normalロゴ
新商品のご紹介 -- H2 Section Title
21px / 700 / line-height 1.15 / letter-spacing normalセクション
チョコパイ -- H3 Product Title
16px / 700 / line-height 1.15 / letter-spacing 0.06em商品名
ガーナミルクチョコレート -- H3 Product Card
14px / 700 / line-height 1.15 / letter-spacing 0.04emカード内
本文テキスト -- ロッテの基本ウェイトは 700。line-height 1.15 は日本語サイトとしては異例にタイトだが、ボールドの太さとあいまって力強い印象を生む。
14px / 700 / line-height 1.15 / letter-spacing normal / color #333333Body
ABOUT セクションの本文 -- ここだけ line-height 2.0 と広く取り、長文の可読性を確保している。白背景上の白文字ではなく、実際にはロッテレッドの背景上に白文字で表示される。
16px / 700 / line-height 2.0 / letter-spacing normalABOUT 本文
補助テキスト -- ブランド説明等に使用。line-height は 1.5 で本文より広い。色は #6b6b6b。
14px / 700 / line-height 1.5 / letter-spacing 0.06em / color #6b6b6bBrand Desc
ナビゲーションリンク
16px / 700 / line-height 1.15 / letter-spacing 0.12em / color white (on red bg)Nav Link
タブラベル -- お知らせ(唯一の weight 400)
16px / 400 / line-height 1.15 / letter-spacing normalTab
フッターテキスト -- 13px / 700
13px / 700 / line-height 1.15 / letter-spacing normalFooter

03 / Product
New Products
CHOCO PIE
NEW

チョコパイ 濃厚仕立て

しっとりケーキでクリームをサンドし、チョコでコーティングしたロッテの定番商品。

GHANA
BEST SELLER

ガーナミルクチョコレート

ガーナ産カカオを使用した、まろやかなミルクチョコレート。1964年発売のロングセラー。

XYLITOL

キシリトールガム

歯科専売品と同じキシリトール配合。特定保健用食品として認可されたシュガーレスガム。

KOALA

コアラのマーチ

コアラの絵柄が楽しいひとくちサイズのチョコビスケット。365種類以上の絵柄。


About Lotte

1948年の創業以来、「お口の恋人」をスローガンに、チョコレート、ガム、アイスクリームなど、人々に愛される菓子・食品を作り続けています。ガーナチョコレート、キシリトールガム、チョコパイなど、世代を超えて親しまれるブランドを多数展開しています。

ブランドの取り組み

サステナビリティへの取り組みとして、カカオ農家の支援プログラムや、パッケージのプラスチック削減に注力。2030年までにプラスチック使用量25%削減を目標に掲げています。

品質へのこだわり

原材料の選定から製造工程まで、徹底した品質管理を実施。ガーナチョコレートにはガーナ産のカカオ豆を100%使用し、キシリトールガムにはフィンランド産の白樺由来キシリトールを配合しています。

キャンペーン情報:ガーナチョコレート手づくりレシピキャンペーン開催中。対象商品を購入してレシートを送ると、オリジナルグッズが当たるチャンスがあります。

ABOUT LOTTE

ロッテは「お口の恋人」として、チョコレート、ガム、アイスなど、世代を超えて愛されるおいしさをお届けしています。素材にこだわり、品質を追求し、お客様の毎日に笑顔と幸せをお届けします。

ロッテについて詳しく見る

05 / Buttons
Buttons
ブランドサイトを見る
Primary / #dd1d18 / radius 5px
キャンペーン一覧
Outline / border 2px / radius 5px
赤背景上のボタン
SNS公式アカウント一覧
Outline White / border 2px solid white / radius 5px
Carousel Controls
Arrow: bg #dd1d18 / radius 5px • Dot active: bg #dd1d18 • Dot inactive: white + border #dd1d18
Tabs
お知らせ
キャンペーン
IR情報
採用情報
Active: #333333 + red underline / Inactive: #666666 / 16px / 400

Find Brands
CHOCOLATE
チョコレート
ICE CREAM
アイス
GUM & CANDY
ガム・キャンディ
BISCUIT
ビスケット

07 / Forms
Forms
Default -- border #cccccc / radius 5px
Focus -- border #dd1d18 / shadow 3px
正しい電話番号を入力してください
Error -- border #dc2626 / shadow 3px

Depth & Elevation
Level 0: Flat
影なし -- 全要素の基本
Level 1 (推奨)
0 2px 8px rgba(0,0,0,0.08)
Level 2 (推奨)
0 4px 16px rgba(0,0,0,0.10)
実測では全要素 box-shadow: none。階層は背景色切り替え(白 / #efece7 / #f5f4f0 / #dd1d18)で表現

09 / Layout
Layout
Spacing Scale(8px ベース)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
None
0px
Small
5px
Circle
100%