パティスリー GIN NO MORI ルディック

1. 01

   ヒーロー

   ターコイズの地に銀色の木の根と枝を這わせ、焼き菓子の箱や缶を枝に吊るすように散らす。左下にセリフ体のロゴと筆記体の「Ludique」、左中段にイタリックの縦並びナビ。

2. 02

   STORY

   リボン型の見出し飾りの下に明朝体の2行見出し。左に地上の店と地下の工房を断面で描いたイラスト、右に中央揃えの縦長の物語文を置き、背景を水色から濃紺へ移す。

3. 03

   PRODUCTS：ルディック コフレ

   箱を組み合わせたギフトボックスの大きな絵と、商品名・筆記体の欧文名・短い説明を右に配置。枝の上に動物のイラストを添える。

4. 04

   フレーバー紹介

   パッケージを斜めに積み上げた絵の間に、半透明の白い円で6種のフレーバー名（筆記体の仏語＋和文）を浮かべる。

5. 05

   ルディック ボワ

   丸い缶のシリーズを枝の周りに配置し、5種の商品名を同様の小さな円で示す。

6. 06

   パッケージの秘密・About

   フルページキャプチャが9000pxで切れているため、以降は抽出データの見出しのみ確認。パッケージの解説と、パティシエのキャラクター紹介（About Patissier）が続く。

7. 07

   News・Other Brands・フッター

   お知らせ、系列ブランドへのリンク、フッターで構成（見出しのみ確認）。

• 抽出データに Lenis があり、慣性スクロールで大きなイラストの流れを滑らかに見せている
• 手前の木の根はぼかしがかかって画面をまたいでおり、スクロール速度の異なるパララックスで奥行きを出していると思われる（GSAP ScrollTrigger の scrub で y を動かすと再現できる）
• キャプチャで商品見出しが二重に写っており、見出しがスクロールに合わせてフェードや位置移動で現れる演出と思われる
• 左のナビ（Top〜OtherBrand）は固定表示で、現在地の項目を丸印で示す
• 抽出データに Swiper があり、後半の商品やニュースの切り替えに使われていると思われる（キャプチャ範囲外のため未確認）

スクロールのコマ撮りLenis · 370–10000ms

検出された技術:LenisSwiperWordPressGoogle Fonts

• 01サイト全体を1枚の絵巻として描き、セクションの境目を木の根や枝のイラストでつなぐ
• 02背景はターコイズから濃紺へのグラデーションで、地上から地下への物語の移動を色で表す
• 03和文は明朝体、欧文の商品名は筆記体にし、仏語の名前を小さな円のバッジにまとめる
• 04商品写真ではなくパッケージのイラストを主役にし、世界観と商品の見分けを両立させる

1---
2title: "パティスリー GIN NO MORI ルディック 再現用デザイン仕様書"
3source: https://ginnomori.info/ludique/
4katapick: https://katapick.com/sites/ginnomori-ludique
5category: ブランド
6region: 国内 (JP)
7tags: [イラスト, セリフ体, ブルー基調, スクロール演出, 固定ナビ, ロングページ]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# パティスリー GIN NO MORI ルディック — 再現用デザイン仕様書
17 
18> 焼き菓子の箱が、森の枝にぶら下がってる。焼き菓子ブランド「GIN NO MORI ルディック」のサイトは、ターコイズの森の枝に細密画のようなパッケージを吊るし、商品一覧を絵本の見開きにしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22