# Lindt de Matcha｜リンツ｜LPのWebデザイン参考

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

- URL: https://www.lindt.jp/f/lindtdematcha
- 解説ページ: https://katapick.com/sites/lindt-de-matcha
- カテゴリ: LP / 地域: 国内（JP）/ 業種: チョコレート・菓子
- テイスト: 写真主体、余白、セリフ体、ミニマル、くすみカラー
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 30 時間）

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

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

## 配色
- #e8efe6 Sage Mist（背景）
- #0c522e Matcha Green（見出し / ボタン）
- #38251a Cocoa Brown（本文テキスト）
- #dfe7db Pale Leaf（セクション背景）
- #f6f6f4 Porcelain（カード背景）
- #317450 Leaf Green（サブテキスト）

## フォント
- 和文見出し・本文: Shippori Mincho（代替: Shippori Mincho）
- 約物（句読点・括弧）: YakuHanMP（代替: YakuHanMP）
- 英字見出し（Matcha・Melt など）: Optima（代替: Marcellus）

## よくある質問
### Lindt de Matchaのサイトで使われているフォントは？
和文は Shippori Mincho に、約物を詰める YakuHanMP を組み合わせています。英字は Optima です。Optima の無料の代替としては Marcellus が近い雰囲気です。

### 商品写真の接写をFVにするときのコツは？
文字を載せずロゴだけにし、質感が伝わる解像度の写真を全面に使います。スクロールで引いていく演出を付けるなら、GSAP ScrollTrigger で scale を 1.5→1 に戻すと再現できます。

### どんな業種の参考になる？
菓子・食品ブランドの季節限定LP、コスメの新作LPなど、素材の質感と品のよさを前面に出したい商品特設ページの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/lindt-de-matcha からダウンロードできます。
出典: Katapick（https://katapick.com）