Landing PageJapanPicked 2026.09.26

Lindt de Matcha｜リンツ

LPのWebデザイン参考 — チョコレート・菓子

出典: lindt.jp

Editor's note — 編集部の視点

FVは抹茶の粉とチョコの超ドアップだけ。

リンツの抹茶シリーズ特設ページ「Lindt de Matcha」は、素材の質感で言葉より先に味を想像させ、セージグリーンの余白と明朝体で、季節限定の品のよさを静かに伝えている。

IrisColor & Brand

チョコの茶色はほとんど見せずに、本文の文字色にだけ #38251a のココア色を忍ばせてるのがいい。抹茶ラテにほんの少しチョコを溶かしたみたいな、やさしい温度感がすき。

1ロゴ以外の文字を置かないFV。粉の粒まで見える接写が、コピーの代わりに味を語る
2商品はMelt・Texture・Freshと食感で章立てする。種類で分けないから、選ぶ前に味わい方を想像できる
3背景は淡いセージ、見出しは深い抹茶色の明朝体。緑の濃淡だけで、ページ全体のトーンをそろえる

Color

Lindt de Matcha｜リンツの配色

Typography

使用フォントと無料の代替

和文見出し・本文

Aa あア

使用: Shippori Mincho
代替: Shippori Mincho

約物（句読点・括弧）

Aa あア

使用: YakuHanMP
代替: YakuHanMP

英字見出し（Matcha・Melt など）

Aa あア

使用: Optima
代替: Marcellus

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型36px · 1.55 · 400
小見出しKatapick 型24px · 1.2 · 500
本文The quick brown fox — 参考を型にする15px · 2 · 400
ボタンKatapick 型14px · 1.5 · 300
注釈The quick brown fox — 参考を型にする12px · 1 · 300

Structure

ページ構成（上から順）

01
ヒーロー
角丸で囲んだ画面いっぱいに、クリーム色のチョコの曲面と抹茶の粉の接写。中央上にLindtのロゴ、左上に「Lindt de Matchaとは」など4項目の縦並びのナビ。
02
イントロ
抹茶スイーツを並べた俯瞰写真と、「リンツのこだわりが生み出す本物の抹茶チョコレート。」の明朝体の文章。
03
写真の帯
ギフトバッグ、バウムクーヘン、苺と抹茶のデザートなどの写真を横一列に並べる。
04
Matcha（こだわりの抹茶）
大きな「Matcha」の英字と抹茶の写真とともに、「天空の抹茶®」と茶商を紹介する長いセクション。
05
いろいろな味わいを楽しむ Lindt de Matcha
Melt・Texture・Fresh の章ごとに、商品写真と短い説明を並べる。
06
Lineup・Gift
抹茶シリーズの商品一覧とギフトアソート。
07
Store・フッター
店舗限定のドリンクやジェラートの案内と店舗情報。

Interaction

アニメーション・インタラクション

スタックは GSAP と Lenis。FVの接写は、スクロールで引いていき商品全体が見える演出と思われる
写真の帯は、スクロールに連動して横に動く、またはマーキーで流れると思われる
Matchaセクションは高さ5,400pxの長い区間で、ピン留めして写真とテキストを順に切り替えていると思われる
右下にメニューボタンを固定表示し、長いページでも各章へ戻れる

スクロールのコマ撮りLenis · 250–1200ms

Lindt de Matcha｜リンツをスクロールしたときのフレーム1 — 01

Lindt de Matcha｜リンツをスクロールしたときのフレーム2 — 02

Lindt de Matcha｜リンツをスクロールしたときのフレーム3 — 03

Lindt de Matcha｜リンツをスクロールしたときのフレーム4 — 04

Lindt de Matcha｜リンツをスクロールしたときのフレーム5 — 05

Lindt de Matcha｜リンツをスクロールしたときのフレーム6 — 06

検出された技術:GSAPLenisGoogle Fonts

Reproduce

再現するときのポイント

01背景は #e8efe6 のセージにし、白ではなく素材の緑に寄せたトーンでページ全体を包む
02見出しと本文は Shippori Mincho、英字は Optima 系で。細い明朝と余白で季節限定の特別感を出す
03FVには文字を入れず、素材の接写写真1枚とロゴだけにする
04商品は種類ではなく、食感（Melt / Texture / Fresh）などの体験軸で章立てする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

lindt-de-matcha.katapick.md

1---
2title: "Lindt de Matcha｜リンツ 再現用デザイン仕様書"
3source: https://www.lindt.jp/f/lindtdematcha
4katapick: https://katapick.com/sites/lindt-de-matcha
5category: LP
6region: 国内 (JP)
7tags: [写真主体, 余白, セリフ体, ミニマル, くすみカラー]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# Lindt de Matcha｜リンツ — 再現用デザイン仕様書
17 
18> FVは抹茶の粉とチョコの超ドアップだけ。リンツの抹茶シリーズ特設ページ「Lindt de Matcha」は、素材の質感で言葉より先に味を想像させ、セージグリーンの余白と明朝体で、季節限定の品のよさを静かに伝えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22