大丸松坂屋百貨店のリブランディングから生まれたビジュアルアイデンティティ（以下、VI）「百様図」。紙の重なりによって生まれる無限の柄の変化を、Web上でどう伝えるか。日本デザインセンターとmount inc.が、物理的な検証とツール開発を往復しながら、動的な表現をWeb上でかたちにしていったプロセスをふり返ってもらった。

※本記事は月刊「CGWORLD + digital video」vol. 334（2026年6月号）からの転載となります。

関連記事

・全てに意図を通す、mountのものづくり。mountの「本質を捉える」仕事術

大丸松坂屋百貨店「百様図」 特設サイト

日本デザインセンターとmountとの出会い

CGWORLD（以下、CGW）：まずは、日本デザインセンター（以下、NDC）さんが大丸松坂屋百貨店（以下、大丸松坂屋）のリブランディングに携わった経緯を教えてください。

三澤 遥 氏（以下、三澤）：三澤デザイン研究室に、大丸松坂屋のリブランディングプロジェクトでクリエイティブディレクターを務めるTAKT PROJECT・吉泉 聡さんからお声がけいただいたのがきっかけです。最初は何をつくるかも決まっていなくて、会社のあり方をどう言語化して、プロモーションして育てていくか、デザイナーとしてお手伝いしてくださいというところからのスタートでした。

佐々木 耕平 氏（以下、佐々木）：当初は、当時の大丸松坂屋の社長が、グループの様々なWebサイトのトーンがバラバラなことを気にされ、統一してほしいというご依頼でした。しかし、吉泉さんはその「バラバラであること」自体が「大丸松坂屋らしさ」だとブランドの軸を定義され、それをグラフィックとして表現するタイミングで僕らにご相談いただいたんです。そこで、ショッピングバッグは百貨店とお客様のコミュニケーションツールとして大きな影響力があると考え、その改訂を軸に、新たなVI 「百様図」を考えていきました。

CGW：mountさんへWeb制作を依頼した経緯は？

三澤：林さんと最初にお会いした時点では、すでに紙袋と「百様図」というVIの提案自体はまとまっていました。以前からPOLAのWebサイトを拝見していて、ぜひご一緒したいと考え、大丸松坂屋側にお伝えした上で、こちらからご相談しました。私たちは基本的に手を動かして、アナログで物理的にモノをつくっています。そこにまったく異なる発想でつくれる方が加わることで、これまで表現したくてもできなかったことが実現できるのではないか、という期待がありました。

林 英和 氏（以下、林）：お話を伺ったときに、モノとアイデアと熱量の全てがすごく強いプロジェクトだと感じて、「これはやるしかない」と思いました。百様図のように無限に変化する柄は、映像よりもWebの方が適しているんじゃないかというイメージが、ぼんやりと浮かんだんです。「何かできそうだ」という漠然とした自信があり、すごくワクワクしながら帰ったのを覚えています。

変化し続ける状態そのものをビジュアル化した「百様図」

CGW：百様図の着想はどこから生まれたのでしょうか？

三澤：大丸松坂屋は全国に15店舗ありますが、それぞれが支店ではなく、本店のように個性をもっていて、地域のお客様から愛されています。そのあり方をどう表現するかを考えたときに、様々な価値観を受け入れられる「百様」という言葉が浮かびました。定型のない、変化し続ける状態そのものをビジュアルにしたいと考えていて、動きのある柄として考えていきました。

CGW：配色や枚数、形状の決定にはかなり時間がかかったと聞いています。

佐々木：ビビッドな配色を試したり、切り抜きのサイズを細かく変えたりと、かなり検証しました。物理的に手を動かしているので偶然生まれるパターンも多く、プロッターで紙を正確にカットしながら検証をくり返しました。同じ紙でも、重なり順が変わるだけでまったくちがう印象になるんです。最終的に形になるまで1年ほど試行錯誤し、7色まで絞り込みました。

三澤：大丸はピーコックグリーン、松坂屋はロイヤルブルーというそれぞれのコーポレートカラーを基調にしています。キーカラーは大丸は黄色、松坂屋の図柄には、包みに使われていたカトレアの花の朱色から引用した差し色を加えていて、さらにサブカラーとしてそれぞれに緑とグレーを入れています。両者には共通してホワイトベージュも使用し、それが全体の背骨のような役割を担っています。

百様図の形状・色彩の検証

• 

• 

• 

• 

“動き続ける状態” をWebで可視化する

CGW：そこからWebサイトにはどう展開されたのでしょうか？

三澤：紙を実際に触りながら見ていると、ずっと動き続けているように感じるんです。でも紙袋にすると、その瞬間で止まってしまう。根底にある「動いている」という状態をどう伝えるか。その部分を、mountさんにはWebで形にしていただきました。単にCG的に構築するのではなく、手で紙を動かしたときに生まれる最小限の変化がどう見えるか、そこまで理解して制作してくださったと感じています。

林：展示などであれば動きを体験できますが、それを全ての人に届けるのは難しい。Webであれば、より多くの人にこの体験を届けられる。そこは僕らの役割であり、ある種の使命だと感じていました。

CGW：初期にはどのような提案をされたのでしょうか？

林：今回は制作期間が限られていたので、企画・デザイン・実装を並行して進めていました。明確なゴールにまっすぐ向かうというよりは、NDCさんも含めて、それぞれが手を動かしながら探っていくような進め方でした。ある意味では非効率ですが、それが結果的には良かったと思っています。

岡部健二 氏（以下、岡部）：制作の途中では、それぞれのパートしか見えていなかったので、組み上がった状態を想像できませんでした。最後にそれらが組み上がったときに、初めて「良くなりそうだ」と思えたんですよね。

三澤：最初にもってきていただいたデモが、その“組み上がった状態” だったんです。見た瞬間、言葉が出なくなるくらい衝撃を受けました。本当にいいものを見ると、言葉が出なくなるんですよね。できないことをお願いしてしまっているのではないかと不安もあったのですが、「あと少しでとんでもないところにいくのではないか」という期待に変わっていきました。

林：説明的な要素が先にくると、模様のしくみを感覚的に伝えるのが難しいと感じていました。そうした中で、三澤さんから百様図の構造図を見せていただき、それが考え方を整理するきっかけになりました。

三澤：動き続けている永続性を表現するには、文字がなくても伝わる、絵本のようなサイトにしたい。子どもでも海外の方でも伝わるものにすることが今回の目標でした。

佐々木：構造図には「見立て」と書いているのですが、手を動かしていると、柄が夜の街や海の水面など、何かに見えてくる瞬間があるんです。15店舗それぞれのお客様が、それぞれの街を思い浮かべられるように、Webでもこの「見立て」を大事にしてほしいとお伝えしました。

林：概念図は「見立て」と5つの原理から成り立っています。原理と原理を行き来するようなものにすれば、見立てをたくさん見せることができるし、体験としても楽しいものになると考えました。

「見立て」と5つの原理による構造

• 

• 

• 

• 

• 

• 

制作と並走するツール開発と検証プロセス

CGW：実装面で特に大変だったのは？

岡部：ツールをつくること自体は最初から決めていました。ただ、展開や動きが決まらないと最適なツールは設計できないんですよね。一方で、どんな展開になっても社内のデザイナーとNDCさんのデザイナーが一緒に触れるツールにしないと、最後に詰んでしまう気もして。そのバランスはずっと悩んでいました。

林：いつもはツールをつくる手が早い岡部が、今回は結構難航していて。

佐々木：寺田さんにツールの使い方をレクチャーしていただいたとき、「これ、最初からほしかったやつだ」と思って衝撃を受けました。紙での検証はどうしても時間がかかるので、ずっと検証用のツールがあればいいと思っていたんですが、僕らの技術力では難しかったんです。

三澤：自分たちがスタディで妄想していた状態が、ちゃんとビジュアルとして動いているのを見て驚きました。

林：実はサイトの中では、物理的にはあり得ないような、紙の上下がいつの間にか入れ替わるような動きを自然に見せています。こういった工夫は、寺田がアニメーションを付ける過程で発見していったものなんです。

寺田奈々氏（以下、寺田）：岡部さんが、ほしい機能をものすごいスピードで追加してくれて。それを使いながらアニメーションを付けていきました。

岡部：ツールとしては、位置や形が決まった状態を指定して、その間をアニメーションで補完するしくみになっています。補完の仕方も、カッと動いたり、ズズッと動いたりと、いくつかパターンをもたせています。

佐々木：Webサイトが出来上がりつつある最後の段階で、オノマトペを入れることで見立てのイメージを喚起できるんじゃないかと差し込んでしまって……。

三澤：社内でも意見が割れたんですが、林さんに相談したら「絶対あった方がいい」と。

林：僕らは柄に向き合っている時間も知識も、NDCさんには到底及ばない。仮に自分たちでやったとしても、付け焼き刃でそれっぽいものにしかならない。だからこそ、ツールを通して柄をNDCさんにつくってもらえるしくみを用意することが、このプロジェクトの完成度を高める上で不可欠でした。そのひとつの表れがオノマトペで、柄をつくりながら同時にレイアウトもしていただけた。これはツールがあったからこそ実現できたことだと思います。

制作を支えた専用Webツール

実際に制作で使用されたオリジナルツール。穴のサイズや位置、色、レイヤー構成などを細かく調整できる。制作の進行に合わせて機能を随時追加しながら発展していった。

紙の質感をいかにデジタルで再現するか

岡部：三澤さんたちに最初に見せたとき、「紙はもっとままならないものだよね」と言われたのを覚えています。1枚だけを動かしているつもりでも、他の紙もつられて動いてしまうような微妙なニュアンスがある。それをどう再現するかで、かなり調整を重ねました。

三澤：紙って不器用な素材なんですよね。シュッシュッと正確に動くものではなくて、どこかもたついていて、可愛げがある。誰もが知っている素材だからこそ、ちょっとしたちがいで“偽物っぽさ” が出てしまう難しさもあります。

岡部：なので、いただいたサンプルをずっとテーブルに置いて、眺めながらつくっていました。紙のプロの方々に見せるものをつくるというのは、正直とてつもないプレッシャーでしたね。

CGW：紙の質感は、撮影したものを使われているのですか？

岡部：素材自体はNDCさんから提供していただいています。ただ、紙の小口まで表現したいという要望があって。そこは描画パフォーマンスとの兼ね合いでかなり悩みました。最終的には、小口の“もっこりした” ニュアンスだけを抽出して、疑似的に再現しています。

林：スタディのモックでは気になっていたところだけど、どうつくったの？

岡部：穴のサイズを可変にする必要があるので、紙の写真をそのまま使うことはできませんでした。エッジの処理はプログラムで行なっていて、イメージとしてはPhotoshopのベベルのような処理を変形させている感じです。厚みをもった3Dメッシュではなく、あくまで2D処理で擬似的に表現しています。

林：Webはどうしてもパフォーマンスとのせめぎ合いになるので、厚みをもたせた3Dデータにすると途端に重くなってしまう。こういったサイトでは、最終的に必ずぶつかる壁ですね。

岡部：影についても同じで、Illustratorのドロップシャドウのような処理は使っていません。仮想的に光源を設定して、物理的な関係性に基づいて影を計算しています。距離によってボケ方が変わるような、ソフトシャドウの質感をかなりシビアに調整しました。

佐々木：音のブラッシュアップも印象的でしたよね。最初はもっと大胆でダイナミックな音だったのが、最終的にはかなり繊細で、かすれたような音に調整されていった。

林：紙の音は実際にいろいろ録音して、その中から良い部分を使っています。ただ、実際の紙の音はかなり繊細で、スマートフォンやPCのスピーカーだと聞き取りにくい。どうしても強調する必要があって、そのバランス調整が難しかったですね。

プロジェクトを通して見えたもの

CGW：最後に、このプロジェクトをふり返って、お互いへの印象をお聞かせください。

林：分野こそちがいますが、軸足の置き方はすごく似ていると感じました。ものづくりに対して、ただひたすらにがむしゃらに向き合っていくところというか。ぼんやりと掲げた高いハードルに向かって進むのって、本当に大変なんですよね。落ち込むことも多い。でも、そのハードルは下げずに、何とか近づいていく。その姿勢は、ものづくりにおいて一番大事なことだと思っていて、そこが共通していると感じました。

三澤：誰かにとっては当たり前に見えていることの中に、実は大きな発明があると捉えていて、それを楽しんでつくっているところに、すごく共感しました。どこを目指しているのかが最初から明確に見えているわけではなくて、どこか朧げなんだけれど、つくっていけばきっと見えてくるはずだと信じて進んでいく。そのスタンスもすごく近いと感じています。

佐々木：POLAの仕事でmountさんを知って、自分たちが想像もできない領域を、ツールをつくることで実現されていることに驚きました。つくり方そのものをつくっている。そこに憧れに近い感情がありました。実際にご一緒してみると、毎回葛藤しながらつくり上げている姿が見えて、シンパシーと感動と敬意を改めて感じました。

岡部：純粋に楽しかったですね。毎回、手ぶらでは行けないなと思って、何かしら“お土産” をもっていく感覚で臨んでいましたし、NDCさんもツールで検証したりブラッシュアップを重ねたりしていて、お互いに同じ熱量で良いものをつくろうとしていた。その感じがすごく心地よかったです。

寺田：すごく楽しかったです。最後の紙袋が動くシーンを三澤さんに気に入っていただけたと聞いて、一生の思い出になりました。

三澤：一生の思い出にするのはまだ早いですよ（笑）。これからもたくさんありますから。

Information

6月1日（月）〜5日（金）に開催されたオンラインイベント「CGWORLD Web Design Week」にて、mount inc.が手がけた様々なサイト制作の裏側について語っていただきました。こちらもぜひご覧ください。

詳細・ご購入はこちら