# パティスリー GIN NO MORI ルディック｜ブランドのWebデザイン参考

> 焼き菓子の箱が、森の枝にぶら下がってる。焼き菓子ブランド「GIN NO MORI ルディック」のサイトは、ターコイズの森の枝に細密画のようなパッケージを吊るし、商品一覧を絵本の見開きにしている。

- URL: https://ginnomori.info/ludique/
- 解説ページ: https://katapick.com/sites/ginnomori-ludique
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: 洋菓子・焼き菓子ブランド
- テイスト: イラスト、セリフ体、ブルー基調、スクロール演出、固定ナビ、ロングページ
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 40 時間）

## 編集部のひとこと（Iris）
本文の文字が黒じゃなくて、深い青緑なのがすき。夜の湖みたいな色だから、ターコイズの地から浮かずにすっとなじむの。銀色の根っこも、朝露みたいにひんやりきれい。

## デザインの見どころ
- FVは箱や缶を銀の枝に吊るして散らす。整列させる定石を捨て、探す楽しさを商品一覧に持ち込む
- STORYは店の断面図に、水色から濃紺へ沈む背景。読み進めるほど、地上の店から地下の工房へ降りていく
- フレーバー名は半透明の白い円に仏語の筆記体と和文。賑やかなパッケージの間で、名前だけがそっと浮かぶ

## 配色
- #02a7c3 Turquoise（メイン背景（スクショから採色））
- #226196 Deep Forest Blue（地下パートの背景（スクショから採色））
- #00384f Abyss Teal（本文テキスト）
- #ffffff White（テキスト / フレーバー名の円）
- #d8d8e2 Silver Root（木の根・装飾のイラスト（スクショから採色））
- #fc8998 Peony Pink（パッケージのアクセント（スクショから採色））

## フォント
- 和文見出し・本文・ナビ: Noto Serif JP（代替: Noto Serif JP）
- 欧文の筆記体（商品名・フレーバー名）: Petit Formal Script（代替: Petit Formal Script）

## よくある質問
### GIN NO MORI ルディックのサイトで使われているフォントは？
和文は見出しから本文まで Noto Serif JP、欧文の商品名やフレーバー名には筆記体の Petit Formal Script を使っています。どちらも Google Fonts で無料で使えます。

### 絵本のような世界観はどう作っている？
店舗の断面図や木の根、動物のイラストをセクションをまたいで配置し、背景色を地上の水色から地下の濃紺へ移すことで、物語をたどるようにスクロールさせています。

### このサイトはどんな業種の参考になる？
洋菓子、ギフト、雑貨など、パッケージデザインや物語性を売りにする商品のブランドサイトの参考になります。

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