静かな森の、もうひとつの物語。 『パティスリー GIN NO MORI ルディック』 ブランドの世界観をWEB体験へ翻訳するまで

心地よさを追求
調整を重ねたインタラクション

―― スクロールの演出も特徴的ですが、最初から現在の形を想定していたのでしょうか。

実は、最初は違う設計でした。

今回のビジュアルは、一枚の中に小さな出来事がたくさん描き込まれています。そのまま上から下へ通り過ぎてしまうと、一つひとつのシーンを見る時間が十分に生まれないのではないかと考えました。

そこで最初のカンプでは、一部のシーンが画面中央まで来るとスクロールを一度止め、操作を続けることで吹き出しだけが切り替わり、その内容を読み終えてから次の場面へ進む設計にしていました。

静止画のカンプだけでは体験の良し悪しを判断しきれないので、実際にモックアップまでつくり、ブラウザ上でスクロールしながら検証しています。

―― 実際にブラウザで試してみて、印象が変わったのでしょうか。

触ってみると、想定していたほど気持ちよくありませんでした。

物語をじっくり見てもらうためにつくった“間”が、ユーザーにとっては「スクロールしているのに進まない」という引っかかりにもなっていたんです。

演出として成立させることよりも、サイト全体を気持ちよく巡れることのほうが、この世界には合っていると感じました。

そこで画面を強制的に止める仕組みはやめ、現在のようにスムースにスクロールできる構成へ変更しました。

その代わり、前後にある根っこの移動速度を変えたり、キャラクターや吹き出しが少し遅れて現れたりと、ページの流れを止めない範囲で視線を留める工夫を残しています。

―― 一度考えた演出を捨てるという判断も、インタラクション設計では大切なのでしょうか。

最初に立てたアイデアをそのまま実現することよりも、実際に触ったときにどう感じるかを優先することは大切にしています。

今回も、「ここでは立ち止まって見てほしい」という意図そのものは変わっていません。

ただ、それをユーザーの操作を止めることで実現するのではなく、動きの強弱や速度差によって自然に視線を導く方法へ切り替えました。

スクロールを物語のテンポとして扱うという考え方は同じでも、そのテンポをどうつくるかは、実際のブラウザ上で何度も試しながら判断していきました。

パッケージの魅力を
最大化させたホバー演出

インタビュイー：くぼたえみ

―― もうひとつ、Webで重要だったのが「ルディックコフレ」の小箱ですね。

看板商品であるルディックコフレの24種類の小箱は、どのように並べても絵柄がつながる設計になっています。

この仕掛けは商品そのものの魅力であると同時に、“遊び心”というブランドコンセプトを体現している存在でもあります。

そのためWebサイトでも、小箱を単なる商品写真として並べるのではなく、つながる楽しさや、発見の面白さが伝わる見せ方をしたいと思っていました。

そこで田渕さんに相談したところ、画像素材は静止画しかなかったのに、小箱たちがまるでその場で動いているように見せる表現を提案してくださったんです。

インタビュイー：田渕 将吾

―― 田渕さんは、この商品の面白さをWeb上でどのように再解釈したのでしょうか。

24種類の小箱は、単にパッケージのビジュアルがきれいということではなく、実際に箱を手に取り、並べ替えながら「ここもつながる」「こんな絵になるんだ」と発見していくところまで含めて商品の魅力だと思いました。

なのでWebサイトでも、完成した組み合わせを写真で見せるだけにはしたくありませんでした。

画面上に並んだ箱へマウスを重ねると、その中のひとつがくるりと回転する。側面が現れた瞬間に、隣の箱の正面と図柄がピタッとつながる。
そこで初めて、パッケージに仕込まれたルールをユーザー自身が発見できます。

説明文で「絵柄がつながります」と伝えることもできますが、Webであれば、その面白さそのものを触って理解してもらえる。
僕は、こういうところにデジタルならではの価値があると思っています。

リアルの商品体験をそのまま画面の中へ再現するのではなく、その商品の何が楽しいのかを考えて、Webに適した別の体験へ翻訳する。

今回のルディックでは、その考え方を象徴する仕掛けになりました。

少しずつ完成度を高めていく
エンジニアとのコミュニケーション

―― こうした細かなインタラクションは、どのように実装へ落とし込んでいったのでしょうか。

こうしたサイトをつくるときは、静止したデザインカンプをつくって終わりにはしていません。

どのパーツを分解するのか。どのくらいの角度で動かすのか。スクロールに対してどの速度でずれるのか。何が常に動き、何がユーザーの操作に反応するのか。

今回は各シーンごとに、そうした動きを細かく設計しました。

実際のフロントエンド開発を担当してくださったのは、Orunicaの高橋さんです。

動きの意図や数値、タイミングなどを共有しながら実装していただき、ブラウザ上で動いたものを一緒に確認しながら調整を重ねていきました。

―― 数値まで決めていても、実際に動かしてみないとわからない部分があるのでしょうか。

数値だけを決めれば、狙った体験になるわけではありません。

ほんの少し速いだけでもキャラクターが落ち着かなく見えたり、動きが大きすぎると元のイラストが持っていた品のよさがなくなったりします。

だから実際にブラウザで触りながら、「もう少し遅くしたい」「ここはもう少し弱くしたい」といった感覚的な部分まで、高橋さんとやり取りしながら詰めていきました。

―― そう考えると、インタラクションデザインは「動きを考える」だけの仕事ではなさそうですね。

そうですね。Webサイトのアートディレクションやインタラクションデザインは、画面上の見た目だけを決める仕事ではないと思っています。

ユーザーがどの順番で見て、どこで立ち止まり、どこに触れ、どんな小さな発見をするのか。

そこまで含めて設計し、それをエンジニアと一緒に実際のブラウザ上の体験へ落とし込んでいくことで、グラフィックとして存在していたルディックの「遊び心」が、見るものから、触れて体験するものへ変わっていく。

今回、一番取り組みたかったのはそこでした。

商品紹介を超えた、
“隠れ家に迷い込む体験”

インタビュイー：くぼたえみ

―― 2026年春のブランドデビュー以降、どのような反応がありましたか。

ルディックは2026年に大阪・心斎橋店、名古屋・栄店がオープンし、開店直後からSNSやテレビ、スイーツ専門メディアなどで数多く取り上げられました。10月には博多店の開店も予定されています。

制作者の立場として特に嬉しかったのは、24種類の小箱を自由に選び、組み合わせる体験に対して、多くの反響をいただけていることです。

パッケージ同士を並べることで絵柄がつながる仕掛けは、ビジュアルの美しさだけではなく、「誰に贈ろうか」「どんな組み合わせにしようか」と考える時間そのものを楽しんでいただくために設計したものでした。

実際に店頭で商品を並べながら組み合わせを考えてくださるお客様の様子や、SNSで楽しそうに投稿してくださる様子を見ると、お客様それぞれの楽しみ方を見つけていただけていることが何より嬉しいです。

―― Webサイトについては、完成してどのような手応えを感じていますか。

Webサイトにおいても、単なる情報発信の場ではなく、ブランド体験の場として機能させることができたと感じています。

今回のプロジェクトでは、ブランドの世界観をどこまでデジタル上で再現できるかが重要なテーマでした。

メインブランドのときと同様、ブランド全体の世界観を設計する立場と、それをWeb体験へ翻訳する立場とで、密に対話を重ねながら制作を進めることができました。

その結果、当初想像していた以上に魅力的な体験を実現できたと感じています。

―― 最後に、このプロジェクトを振り返って、改めてどんな場所をつくれたと思いますか。

私たちがつくりたかったのは、商品を紹介するWebサイトではなく、ルディックという世界に入り込む体験そのものでした。

お客様がサイトを訪れたときに、チェスとナッツの隠れ家に迷い込んだようなワクワク感を少しでも感じていただけていたら、作り手としてこれ以上嬉しいことはありません。

そして、GIN NO MORIとルディックの物語がこれからどのように広がっていくのか、私自身も楽しみにしています。