弊社は、これまでピエール・エルメの Web サイト制作に、デザインと実装の両面から継続的に携わってきました。
年末に公開される「NOËL」のマカロンのサイトは、その中でも毎年スペシャルサイトとして制作しているページです。

2025年も過去の延長ではなく、あらためて表現や体験の設計から考え直し、新たに制作しました。
深海をモチーフにした世界観や、サイト全体を通して展開される演出など、細かな検討を重ねながら形にしています。

本記事では、NOËL 2025 特設サイトの制作を振り返りつつ、デザインと実装の両面から、表現や実装をどのように組み立てていったのかを紹介したいと思います。

実際のサイトはこちらです。

01 テーマと表現

今回制作した NOËL 2025 特設サイトは、年末に公開されるコンテンツとして、例年と同様に力を入れて制作したページです。

テーマとして提示されていたのは、「深海(アビス)」をモチーフにした世界観。
冒頭は、海面からマカロンが海底に向かって落ちていくアニメーションから始まります。そこからスクロールに合わせて、背景のグラデーションや泡の演出が少しずつ変化していきます。

要素を場面ごとに切り替えるのではなく、同じ要素の状態を変えていくことで、ページ全体が徐々に沈んでいく印象をつくりました。スクロール量がそのまま深さに対応する構成です。

当初は逆方向の流れも想定していましたが、体験としての自然さを優先し、現在のものに落ち着きました。

商品情報のエリアでも、背景の泡や揺らぎはそのまま残しながら、商品画像の周囲に泡のフレームを重ねています。視線を商品に集めると同時に、海の中の要素としての泡もそこで見せ続けることで、流れを断ち切らず、世界観の中でフォーカスをつくっています。

また、パッケージにも使われているサンゴのイラストが持つきらめきや質感を、Web 上でも表現できないかという要望があり、制作の中でも表現として工夫したポイントの一つです。

02 実装について

今回のサイトでは、砂や泡の表現を画面全体で動かしています。そのため、処理負荷を前提に実装を組み立てました。

砂は WebGL のシェーダーを使用し、パーティクルで構成しています。数が数万個に及ぶため、CPU では負荷が高くなり重くなってしまうため、GPU で並列処理できるように GPGPU という技術を採用し実装しました。描画や動きの計算を GPU で処理することで、数万個のパーティクルが滑らかに動くように実装しています。

通常のテキスト要素では、砂のアニメーションを表現できないため、一部のテキストを 3D モデルとして作成し、WebGL で描画・配置。ただし、そのままでは検索やテキスト選択ができなくなってしまうため、SEO 的観点からも DOM 上には同内容のテキストも配置し、表現と情報の両立を図りました。

背景では、泡が画面下部から上部へと浮かび続けています。
初めは画面全体に満遍なく漂っていますが、スクロールが進みサンゴのイラストの位置に達すると、左右へと散るようにしています。中央から泡が減ることで、自然にコンテンツへ視線が向かうようにしています。

この泡も砂と同じく WebGL のシェーダーで制御し、ノイズ関数を用いて形状を変化させ、水中らしい速度や揺れ幅になるよう調整しました。

一方で、商品情報エリアで商品画像を囲む泡は、別のアプローチを取っています。こちらは以前ブログで解説した SVG の円アニメーションを応用したものです。
視線を集めるフレームとして機能させながら、水中の揺らぎとしても違和感が出ないよう、動きや歪みを調整しています。

サンゴのイラストに使われている箔押しの質感を、Web上でもどう再現するかも今回のテーマでした。スクロール位置に応じて色味や干渉の見え方が変化するようにし、きらめきがわずかに揺らぐ印象をつくっています。

この表現はサンゴのイラストだけでなく、一部のテキストにも展開しています。強いエフェクトではなく、あくまで質感として馴染ませることで、全体の世界観に統一感を持たせました。

ブラウザ差への対応

ブラウザごとの差も、実装を進める中で意識していた点のひとつです。
SVG で表現していた部分が Safari では重くなることが判明したため、その箇所は Canvas に置き換えて、サイトのパフォーマンスが落ちないように調整しました。

Chrome で問題なく動いていても、Safari やスマートフォンで成立しない表現は採用していません。
見た目や動きの印象を変えずに、さまざまな環境で無理なく動作するようにしています。

03 デザイナーとエンジニアの連携

今回の制作では、早い段階で動きを確認できるモックを用意しました。砂や泡、揺らぎといった表現は静止画では判断できないため、密度や速度、スクロール時の変化量を実際に動かしながら決めていく必要があったからです。

制作チーム内でも、完成デザインを渡してから実装するという流れではなく、動く状態を前提に進めています。砂や泡の密度、揺らぎの強さ、スクロール時の変化量などは、実際に動かした状態で確認しながら決めていきました。静止画で固めてから実装するのではなく、挙動を見ながら細部を詰めていく進め方です。(正しいか確認取りたい)

このモックは制作チーム内の検証だけでなく、ピエール・エルメの本社がフランスにあるため、本国側との共有にも使っています。完成形を言葉で説明するのではなく、実際の動きを見せながら認識を揃えていきました。

動きの強さのバランス

調整の中で、結果的に採用しなかった表現もあります。
たとえば、商品周りの揺らぎや動きについては、当初はもっと強くかけることも可能でした。

ただ、動きを強めすぎると視線が演出に引っ張られ、商品そのものが見えづらくなります。そのため、動きをなくすのではなく、意識しない程度に抑えています。
結果として、表現を足していくというよりも、「どこで止めるか」を決めていく作業が多かった、という印象です。

04 まとめ

弊社では、社内のデザイナーとエンジニアが普段から一緒にプロジェクトに関わり、それぞれの視点や知見を共有しながら制作を進めています。
職種は違いますが、お互いの領域を理解しているからこそ、表現と実装を分けずに扱うことが可能です。

また、エンジニアもヒアリングの段階から直接やり取りに入り、技術的な可能性や制約を共有しながら、「どうすれば実現できるか」を具体化できることも S2 の特長です。
というのも、日々新しい技術に触れ、表現の幅を広げている土台があるからです。今回の砂や泡の表現も、その積み重ねの一つ。

NOËL 2025 の制作も、こうした関わりの中で形になりました。
対話を重ねながら、デザインと技術の両面から最適な形を探る。それが私たちの進め方です。

Web サイトの制作やリニューアルをご検討の際は、ぜひお気軽にご相談ください。