[PLST] A month and a half sprinted through as an all-hands team: the behind-the-scenes of a project led by the members who will carry the next generation

It was a project the phrase “a race against time” fit perfectly, yet we could proceed without compromise thanks to the support of many people. Within the limited time, we managed to realize the very most we were capable of.

I, too, was anxious and tense every day after kickoff…
Even so, it was precisely because everyone gave their all at every stage, without the slightest compromise, that we could see this project through. Being able to produce from scratch not only the planning, design, and implementation but all the materials (photos, words, and so on) to convey the appeal of the Warm Reserve pants was thanks to the professional, swift response of our client and partners.

Our in-house production members, too, worked as one from morning to night day after day, continuing to polish design, implementation, and sound production up to the very deadline in pursuit of something better. With every stage advancing at once, working as one let us bring out our strength as a team. Through this project, I felt anew how supported we are by so many people.

Especially at the stage of deciding content and visuals, I agonized over the balance of making a website that followed the brand concept — not too flashy, yet with impact.

The client asked us to “carry on the PLST-ness familiar to existing customers, while also creating impact on the web.” Without harming the product’s elegance or the brand’s mood, we pursued an expression combining polish and a put-together feel, debating repeatedly with AD Hayashi and TD Okabe.

In the end, to reconcile PLST-ness with the appeal of the Warm Reserve pants, we newly produced all the materials (photos, text, and so on) under our lead. With content built from scratch rather than relying on existing assets, we could convey the product’s appeal more vividly.

The keyword “float” first came from Okabe. He knew a photo book in which people in everyday scenes appear to be flying, and it started from the idea, “how about this kind of strangeness?” But there are many kinds of floating — whether the person is jumping of their own accord, being lifted, whether you sense their will — and nailing down why and how they float was the difficult part.

At first we thought only the angle of the feet would be somehow curious — just enough to feel not-quite-grounded — but it was updated bit by bit from the initial concept, aligned with the client, and in the end became less a sense of floating than a way of floating that moves forward with intent. Aligning this nuance, and the meaning of floating, with the client was quite hard…

There are many designs that convey “warm” in the world, but most of them relied on thermographic imagery. In devising the direction, with “don’t fall back on thermo” as our watchword, we searched for a way to feel warmth intuitively.

The idea that came out of that was “a heat source circling near you.” Wouldn’t it be interesting if something like a lump of heat affected the person wearing the pants? We called this interaction “Nessen-kun” (little heat source).

In the test shoot, we thoroughly verified angles where the soles of the feet look natural and angles that convey the sense of floating. For the real shoot, we also captured material of just the soles for retouching. The retouchers kindly met even our unreasonable requests within the short schedule — I can only be grateful… It was memorable that the PLST team, seeing the result, were delighted, saying, “Thank you for finishing it so the pattern of the pants looks this beautiful.”

Beyond the sense of floating, we also repeatedly tested an expression where the interactive heat source seems to bleed its color onto the pants. Thanks to Okabe advancing mock-up production early, we could share nuances hard to convey with still design images alone, and could use that in the test shoot as we verified.

As for Nessen-kun, warm air drifts around the pants the model is wearing, and it became a “good guy” that shows various expressions in response to user interference like scrolling, the cursor, and taps. Nice to the touch with the cursor. Nice as it always drifts softly. Nice in transitions. There was a difficulty in reconciling all of that in a single simulation. What doxas explained on WebGL Souhonzan says it all — he looked at it that precisely and carefully, so please do check it out.

Touched on a smartphone, Nessen-kun shows a different expression than on PC. It was memorable that Okabe, who had been devising all sorts of things to draw out Nessen-kun’s charm even on a smartphone’s small screen, said when he reached the current form, “That guy’s a good one, isn’t he.”

I’m curious how Nessen-kun works — could you explain just a little, so even I, who don’t know the mechanics well, can understand…!

As for the heat source drifting around the model, its origin point is simply rotating and swaying — put more plainly, it’s just two automatically moving cursors. We specify the range they move within for each individual image.

I see…
And how did you do the effect where the heat source’s light reflects onto the model?

We mask three overlapping images (stacked as below) with the information of the trajectory the heat source draws, so the color transfer is reflected onto the image near the heat source.

In the background we render something colored according to the direction you move the cursor or trace with a finger, plus a visualization of the force’s strength; cross-referencing them, we devised a clipping-mask technique to make it look natural.
The fine play of photographer Yushi Kaku, who proposed color-transfer photos in two colors, shone through and let us make a richer effect.

It was good that we could show the heat-source mock-up to Kaku during the test shoot. I think it was possible precisely because we were running alongside each other.

Besides Nessen-kun, I think the way the photos are shown three-dimensionally is one of this site’s points of care. Looking three-dimensional made the silhouette of wearing the Warm Reserve pants easier to convey.

Placing a 2D model image in a deep, infinitely distant space inevitably creates a sense of wrongness, and resolving it was very difficult. Through much trial and error, we reached the current form.

We finely adjusted the depth map to make the 3D more natural, didn’t we. The three-dimensionality of the image on the MEN’S page where you can see the inside of the jacket is especially clear compared to elsewhere, and I was really moved when I checked the actually implemented version.

In the design, since we made the heat source and the site’s colors overall light and translucent, we layered on a lot of study and verification so the cursor, buttons, and so on could be unified into a fluid, translucent impression, and settled on the current form.

The organic, springy movement of the cursor and buttons is really cute, isn’t it.

We polished the cursor movement right before launch, too.
The circular motion made the changes in the action the cursor indicates clearer, finishing it into a charming, cute movement.

Hayashi gave me feedback that since just changing the text inside the cursor makes the change hard to notice, why not add a circular motion? — and I reflected that. The initial idea of the drag motion for the indicator was also realized thanks to Hayashi’s advice.

Personally I also love the hover on buttons and links. It’s implemented with the image of the heat source the cursor brought along warming the button or link so it takes on color.

Why did you decide to add sound at this timing? Hayashi, in charge of sound-making, please tell us!

I thought it’d be better to have sound at the moments the heat source or scenes switch, so I read the room and just made it ahead of time.

I was surprised when, after the implementation proposal, you said “actually, I’m making the sound” and let us hear some demo tracks.

At first it was a waltz with a light, walking-like beat, and I tried having sounds layer up scene by scene thinking it’d be interesting, but it was busy and not effective, so I dropped it. Then, while looping it as BGM, I made sounds play in sync with the heat source, and at scene switches and on hover/click, and prepared several patterns of sound effects so you can enjoy a variety of sounds.

On the website we let users choose whether to have sound, but with sound the immersion increases sharply, so I’d be glad if you’d view it with sound on.