［PLST］

全員野球で走り抜けた１ヶ月半。

次世代を担うメンバー主体の

プロジェクトの制作秘話。

「時間との戦い」という言葉がぴったりのプロジェクトでしたが、それでも妥協せずに進めることができたのは、多くの方々の支えがあったからです。限られた時間の中で、私たちができる最大限の取り組みを実現することができました。

私もキックオフしてから毎日焦って緊張していました...。
それでも全員が一切の妥協なく、全ての工程においてそれぞれが全力で取り組んだからこそ、このプロジェクトをやり切れたと思います。企画・デザイン・実装はもちろん、ウォームリザーブパンツの魅力を伝えるためのすべての素材（写真や言葉など）の制作も一から行うことができたのは、クライアントやパートナーの皆さまのプロフェッショナルかつ迅速な対応のおかげです。

社内の制作メンバーも連日朝から夜まで一丸となり、デザイン、実装、音制作のすべてにおいて、納品日ギリギリまでよりよいものを目指してブラッシュアップを続けていました。全ての工程が同時に進行していく中、皆が一丸となって取り組むことで、チームとしての力を発揮できたと思います。今回のプロジェクトを通して改めて、多くの方々に支えられていることを実感しました。

特に、コンテンツやビジュアルを決める段階では、ブランドコンセプトに沿いつつ、派手すぎないけれどインパクトのあるWebサイトを作るためのバランスにとても悩みました。

クライアントからは「既存のお客様に馴染むPLSTらしさを継承しながら、Web上でのインパクトも出してほしい」との要望がありました。商品の上品さやブランドの雰囲気を損なうことなく、垢抜け感ときちんと感を兼ね備えた表現を追求し、AD林さんやTD岡部さんとも繰り返し議論しました。

最終的には、PLSTらしさとウォームリザーブパンツの魅力を両立させるため、全ての素材（写真や文章など）を弊社主導で新たに制作。既存の素材に頼らず、一から作り上げたコンテンツによって、商品の魅力をより鮮明に伝えることができました。

最初に「浮く」というキーワードが出てきたのは、岡部さんからでした。日常風景の中にいる人が飛んでいるような写真集を岡部さんが知っていて、こういう違和感はどう？という案から始まりました。ただ、浮遊感と言ってもいろいろあって、本人が自らジャンプしている感じなのか、浮かされているのか、自分の意志を感じるのかなど、なぜ浮くのか・どう浮くのかを詰めるのが難しいところでした。

最初は足元の角度だけがどこか不思議で、地に足がつかない程度で考えていましたが、最初のコンセプトからちょっとずつアップデートされて、先方ともすり合わせて、最終的には浮遊感よりも意思をもって前に進んでいくような浮き方になりました。 このニュアンスや、浮く意味をクライアントとすり合わせるのは、かなり難しかったです…。

「あったかい」ことを伝えるデザインは世の中にたくさんありますが、その多くがサーモグラフィの表現に依存していました。演出を考える上で「サーモには逃げない」を合言葉に、直感的に暖かさを感じられる方法を探しました。

その中で出てきた案が、『熱源が自分の近くをまわる』というアイデアでした。熱の塊みたいなものが、パンツを履いている人に影響を与えたら面白いんじゃないか…と。このインタラクションを私たちは「熱源くん」と呼んでいました。

テスト撮影では、足裏の見え方が自然に映る角度や、浮遊感が伝わるアングルを徹底的に検証しました。本番では、レタッチ用に足裏だけの素材も撮影。レタッチャーの方々には、短いスケジュールの中で無理な要望にも快く対応いただき、本当に感謝しかありません...。仕上がりを見たPLSTの皆さんが、「パンツの柄がこんなに綺麗に見える仕上がりにしていただきありがとうございます」と喜んでくださったのが印象的でした。

浮遊感だけでなく、インタラクションの熱源がパンツに色移りしているような表現も検証を重ねました。岡部さんがモック制作を早期に進めてくださったおかげで、デザインの静止画だけでは伝わりにくいニュアンスを共有でき、テスト撮影でもそれを活用しながら検証を進めることができました。

熱源くんについては、モデルさんの着用しているパンツの周りに温かい空気が漂っていて、それがスクロールやカーソル、タップなどのユーザーの干渉による様々な動きに応じて色んな表情を見せてくれる「いい奴」になりました。カーソルを触って気持ちいい。常にふわふわ漂っていて気持ちいい。トランジションさせて気持ちいい。それらを、一つのシュミレーションで両立させる難しさがありましたね。以前doxasさんがWebGL 総本山にて解説してくださったことが全てです。そのくらい的確で丁寧に見ていただきましたので、ぜひご覧ください。

熱源くんはスマホで触るとPCとは違った表情を見せます。スマホの狭い画面でも熱源くんの良さを引き出すために、さまざまな工夫をしていた岡部さんが、今の形に辿り着いた時に「あいつ、いい奴ですよね」と言っていたのが印象的でした。

熱源くんの仕組みが気になるのですが、仕組みにあまり詳しくない私にも分かるように少しだけ解説をお願いします…！

モデルさんの周りに漂っている熱源については、熱源の発生源が回転しながらゆらゆら動いているだけで、もっと噛み砕いていうと自動的に動くカーソルが2体いるだけ。それらが動く範囲を画像1枚ごとに指定しています。

なるほど…。
熱源の光がモデルさんに反射する演出についてはどうやってるんですか？

下記のように重なっている）3つの画像を、熱源が描く軌跡の情報でマスクして、熱源の近くの画像に色移りが反映されるようにしています。

カーソルを動かしたり指でなぞったりする方向に応じて色付けしたものと力の強さを可視化したものを裏でレンダリングしていて、それらを照らし合わせてクリッピングマスクのテクニックで自然に見せるように工夫しました。
カメラマンのカク ユウシさんが色移りのある写真を2色分提案してくださったファインプレーが光り、よりリッチな演出にすることができました。

テスト撮影の際に熱源のモックをカクさんに見せることができて良かったです。併走していたからこそできたことだと思います。

熱源くん以外にも、写真を立体的に見せている部分は本サイトのこだわりの一つだと思います。立体的に見えることで、ウォームリザーブパンツを履いたときのシルエットがより伝わりやすくなりました。

奥行きのある無限遠の空間に2Dのモデルの画像を配置すると、どうしても違和感が生まれてしまい、その違和感を解消するのが非常に難しかったです。試行錯誤を重ねて、現在の形にたどり着きました。

Depth mapを細かく調整して、より自然な立体になるように工夫しましたよね。特に、MENSページのジャケット裏が見える画像の立体感は、他の部分よりもわかりやすく、実際に実装されたものを確認したときはすごく感動しました。

デザインでは、熱源やサイトで使っている色を全体的に軽やかで透明感のある感じにしたので、カーソルやボタンなども流体的で透明感のある印象に統一できるよう、たくさんスタディと検証を重ねて、今の形に落ち着きました。

カーソルやボタンの、有機的でもちもちした動きが本当に可愛いですよね。

カーソルの動きも公開直前にブラッシュアップしていましたよね。
円運動によって、カーソルが示すアクションの変化がより分かりやすくなり、愛嬌のある可愛い動きに仕上がっていました。

林さんに、カーソル内のテキストが変わるだけでは変化が分かりづらいから、円運動を加えてみたらどうか？とフィードバックをもらって、それを反映させてみました。インジケーターをドラッグする動きの初期アイデアも林さんのアドバイスがあってこそ実現できました。

個人的にはボタンやリンクのホバーもお気に入りです。カーソルが連れてきた熱源がボタンやリンクを温めて色づくようなイメージで実装しています。

このタイミングでなぜ音をつけようと思ったんですか？音づくり担当の林さん、教えてください！

熱源やシーンの切り替わるタイミングで音が鳴る方がいいと思っていて、空気を読んで先に作ってみたんだよね。

実装提案後に「実は音作ってるんだよね。」っていくつかのデモ音源を聞かせていただいた時は驚きました。

最初は軽快に歩いているようなビートが立っている感じのワルツで、シーンごとに音が重なって行くと面白いのではと思って試してみたけど、忙しくて効果的じゃなかったのでやめたんだよね。それから、BGMとしてループさせつつ、熱源と同期して音が鳴ったり、シーンが切り替わる時やホバー・クリックした時に音がなるようにして、SEも幾つかパターンを用意して色んな音で楽しめるようにしました。

webサイトでは、ユーザーに音の有無を選択していただくようにしていますが、音ありだと没入感がグッと増すので、ぜひ音ありで見ていただけたら嬉しいですね。