本記事はnoteからの転載となります。

スタジオディテイルズ（以下、ディテイルズ）という名前は「神は細部に宿る」に由来します。私たちがものづくりの現場で向き合うディテイルや、クオリティの基準、それを実現するまでの葛藤などを実際の事例で紐解くシリーズ【God is in the details】。

第2回目は、PRESS BUTTER SANDなど複数のスイーツブランドを展開する株式会社BAKE（以下、「BAKE」）様のブランドサイト。世界観に没入するWebサイトはどのようにできたのか。ディレクター北川、デザイナー井出、そしてエンジニア岩崎に話を聞きました。

聞き手：石井翔太郎（Goodpatch）

“既にいいもの”を超える。高難易度のプロジェクト

——そもそも、本プロジェクトはどんな経緯からはじまったのでしょうか？

北川裕紀乃（以下、北川）：BAKE様の主力ブランドであるPRESS BUTTER SANDのブランディングで、新たなブランド展開に合わせサイトを刷新したいとのご依頼でした。
WebのUI/UXと更新性の改善がメインの課題で、具体的には「ニュースだけではなく、新しいフレーバーが出た際にも自分たちで更新したい」など、課題や希望が既に明確化されていましたね。

——クライアント側が洗い出していた課題以外に気づいたことなどは？

北川：問い合わせ時点で、改善点が詳細に洗い出してありリニューアルへの熱意をとても感じました。私自身、既存サイトがとても素晴らしいと思っていたので、そのクオリティを超えることに対するプレッシャーが大きくて。

BAKE様は毎回すごくいい制作会社さんと組んでおられ、今回「スタジオディテイルズに頼んでよかった」と思ってもらわないといけないなと、プレッシャーがモチベーションにも繋がりました。

井出裕太（以下、井出）：BAKEさんはとにかく写真が素晴らしくて、極端な話、写真とUIだけで十分いいサイトが成り立ってしまうレベルなんです。でもそれだと、ディテイルズが関わる意味がなくなってしまう。色々な会社さんがある中で、あえてディテイルズに相談いただいた理由はどこにあるんだろう、どうすればお互いの良さを掛け合わせられるだろう、とすごく考えました。

岩崎航也（以下、岩崎）：上がってきたデザインを見たとき、「キービジュアルの背景色をCMSで更新できるようにしたい」という要望もあり、正直ちょっと不安でした。そこまでできるWebサイトはなかなかないので。

ですが、ディレクターの北川、デザイナーの井出とは今までもプロジェクトを一緒にやっていたこともあり、密にコミュニケーションができたので、実装のイメージを持つことができました。難易度で言えば過去一でしたね。

——全体のコンセプトはどのように決めていったんですか？

井出：PRESS BUTTER SANDをどのようにブランディングしてきたのかについての参考資料や記事を先方からたくさんもらって、キーワードを出していきました。その中で、例えば「インダストリアルデザイン・工業的なデザインを意識している」とか「帯の色は鉄が溶けるイメージ」などヒントが出てきて。それをどうWebに落とそうか考えていった感じです。

僕の中で「工業的なもの」を解釈していくと、昔の工場でいろんなモノがラインに並んでいるイメージが浮かんで。サイトトップのキービジュアルは、工場の流れ作業をイメージした動きになっています。

写真を横スクロールするだけだと、今まで見たことがないものにはならないなと。写真と一緒に、世界観に合わせて背景の色が変わるような遊びの要素を入れつつ、工場感もあるキービジュアルを制作しました。

岩崎：ディテイルズのデザイナーは、PDFで数十ページに及ぶ指示書を毎回作ってもらえるんです。なので、実装側は迷いなく進められる。細かなリファレンスも載っているので、指示書だけでイメージがついて実装しやすいんです。

井出：僕は逆に「気持ちよさ」っていう、感覚的なところまでよく読み取って再現してもらえるなと、いつも感激しています。

岩崎：そこは、これまでの制作の経験に依る部分が大きいですね。

デザイナーとエンジニアの絶対的な信頼関係の生み出すもの

——今回、更新性という課題が明確にあった中で、苦労したことや達成感を感じたことはありましたか。

岩崎：先ほどもお話しした通り、キービジュアルの背景色や、ギャラリーページで画像の周りを回転しているテキストまでCMSで変更できる仕様に対応したことですね。それを実現するためにWebGLも使いました。それ以外にもCMSで更新できる箇所が多かったので、全部実現できたときは達成感がありました。その分、管理画面は今までにないくらいボリューミーになりましたけど（笑）

——ディレクションにおける苦労は？

北川：更新性は最初から要件としてありましたが、単に写真が変えられるだけだと見たことあるサイトになってしまうと思ったんです。やるからには、ディテイルズが関わったからこそ発揮できる質の高いクリエイティブをお届けしたいと思い、更新性を担保しつつ世界観をより強められるデザインになるようリファレンス提案の段階から意識していました。

井出：PRESS BUTTER SANDの世界に入っていく感覚を持ってもらうために、Webだから表現できる奥行き、レイヤー感を特に意識しましたね。紙のデザインは平面で魅せる表現ですが、Webならではのレイヤー感を追求したかったんです。これはディテイルズがWebサイト制作においてこだわっているポイントの1つで。入社当初から「レイヤー感をもっと気にして」「平面的なデザインになっているからデザインを制作しなおして」というフィードバックをよくもらっていました。

あとは、世界観が異なる複数のブランドを1つのサイトにまとめることが難しかったです。PRESS BUTTER SANDはブランドの主軸で今までを受け継いだもの、プレスバターサンドギャラリーは新ラインで実験的な世界観、八 by PRESS BUTTER SANDは新しい和と洋の垣根を越えたブランド。同じUIを使いつつ、世界観はブランドごとに見せる表現や動きを考えることには苦労しました。

岩崎：ディテイルズには似たようなデザインが全然ないので、プロジェクトのたびに実装スキルも気持ちよさの感覚も異なります。指示書にもない細部における「なんかいい感じ」な動きは、エンジニアが考えて提案していて。エンジニアからも提案をしつつ、基本的にはデザイナーの指示書に沿って実装すると、絶対にかっこいいものができるという信頼関係があるんです。

井出：指示書には書ききれなかった細部をエンジニアさんがフォローしてくれるのが、とてもありがたいですね。

——エンジニアと「動きはこうしたい」とすり合わせる難しさはあるあるだと思うので、とても参考になりました。

北川：エンジニアとの取り組み以外でも、今回チャレンジしたことがあります。それが撮影ディレクションの部分です。「デザインを元に撮影をしたいです」とご提案し商品の写真をデザイン確定後、BAKE様に撮っていただきました。今まで、自社でディレクションした撮影画像を支給するというやり方だったそうで、BAKE様にとっても新しい取り組みだったと思います。

井出：撮影の指示書を作るのがとにかく大変で。元々サイトトップは物撮りした写真をそのまま当てはめる予定だったんですが、実際に当てはめてみたら影の部分に違和感が出てしまったんです。

なので現在のトップは、物撮りした写真と影を作りなおして合成しています。こんなに細部までこだわったことは今までなかったですね。今後BAKE様が同じやり方で運用していけるように、仕様化までやり切ることは新しいチャレンジでした。

いいものを作るために、諦める勇気も持つ

——完成したWebサイトで、みなさんがそれぞれ気に入っている部分が知りたいです。

岩崎：表側からは見えないけど、動きをなめらかにするための工夫をたくさん凝らしています。通常のWebサイトのコーディングでは、トップページを見た瞬間にWebサイト全体に処理が走りますが、今回はWebサイトのページ数も長いため、動きをなめらかにするために、ユーザーから見えていない箇所の処理は止めるようにしています。

特に苦労したのはプレスバターサンドギャラリーのページです。いくら演出がよくても、見る人の手元で綺麗に見えなかったら意味がないので、やめようと判断したものもあります。

井出：実は、ギャラリーのこのページも、本当は背景の絵の具が塗られていく動きにしたかったんです。でもサイトの重さやコスト的に諦めざるを得ませんでした。

——諦めるときの基準は何なんでしょうか。

井出：まずは、当たり前ですが納期に間に合うかどうか。次にお客さんが伝えたいことの中でも優先順位が低い場合です。もっとよくなる可能性はあるが、それをすることでスケジュールが遅延するなら思い切って諦めることはあります。

あとは「よくなる」と思って実際にやってみたら、すごく重くなってしまうこともあるので、そういった場合は演出とサイトの重さの一番塩梅のいいところを探ります。

北川：諦めた部分もありましたが、世界観の表現と更新性を両立できたことは大きかったですね。「ギリギリまで粘らせてください！」と交渉して、公開前日までブラッシュアップを続けた結果、BAKEさんにも「いい世界観ですね」と言っていただけて達成感を感じられました。

——最後に、みなさんがプロジェクトを始めるときに大切にしている心意気について教えてください。

井出：僕は今まで見たことのないものを作ることを毎回意識しています。表現や動きなど、できる限り誰も作っていないものを作れるように、自分のスキルも磨いていっている感じです。

岩崎：ありがたいことに、ディテイルズはデザイン業界の中でも注目されるポジションなので、ただ実装するのではなく気持ちよさを持たせることは常に意識しています。クオリティや触った時の気持ちよさ、作る際のパフォーマンスのために、前職ではやらなかったところにも時間をかけたり。よりよいものを作るために、時間を惜しまない気持ちを大切にしています。

北川：「新しいことに挑戦する」ことを意識しています。小さなことでも自分にとって経験のないことであれば何でも良いと思っています。先入観にとらわれず、色々なことにチャレンジする姿勢をこれからも大事にしたいです。

PRESS BUTTER SAND　https://buttersand.com/
八 by PRESS BUTTER SAND　https://hachi.buttersand.com/

［文］黒木 あや ［写真］Kai Qin［取材］石井 翔太郎、杉本 花織

スタジオディテイルズには、企業や商品が持つ世界観・それを表現するクリエイティブを追求できる環境があります。クライアントの期待を超え、質の基準を塗りかえるアウトプットを生み出す仕事に挑戦したい方は、ぜひご連絡ください。

///
202211追記
STUDIO DETAILS Inc. Company Information