大丸松坂屋 百様図 特設サイト
大丸松坂屋の新しいシンボル。
無限に変化するVIの仕組みを
デジタルで体験。
大丸松坂屋の新しいシンボル「百様図」。
大丸松坂屋が大切にする価値観をもとに日本デザインセンター（NDC）の三澤研究室の皆さんが制作されたこのVIの特徴を最大限伝えるために、まるで紙を触っているかのような体験ができるウェブサイトを制作。Webサイトに留まらず、駅構内のサイネージやTV CMなどにも展開しました。
目次
クライアントについて
株式会社 大丸松坂屋百貨店
-
事業内容
伝統的な百貨店事業のほか、「AnotherADdress」、 「明日見世」、「ARToVILLA」など、「小売」の枠を超えたライフスタイル提案を多角的に行っています。
-
特徴
北は札幌から南は博多まで、全国にわたって15店舗を展開。地域とつながり、地元の文化や風土を大切にしながら、独自性や個性を発揮した店舗づくりを行う。
プロジェクトが目指したもの
NDCの三澤研究室の皆さんが新たにつくった「百様図」は、5枚の紙が重なり、動くことで、無限のパターンが生まれるという動的な模様です。この大丸松坂屋の新しいビジュアルアイデンティティを、Webサイトで「体験」することができないかと考えました。Webサイト上で、まるで紙を触って動かしているような体験ができることで、「百様図」が持つキャラクターや無限性を、直感的に感じてもらうことを目指しました。
プロジェクトタイムライン
期間 : 8ヶ月 (2024年12月 ~ 2025年7月)
Point1- 百様図の原理を直感的に理解できることを目指して
コンテンツ設計
Webサイトで何を
感じてもらうべきか。
三澤研究室の皆さんと
アイデアを出し合う。
「百様図」は、5枚の紙が重なって、少しの動きによって柄が無限に生まれる、動く模様。その構造的なおもしろさをWebサイトでどのように伝えるかという検討から始まりました。そこで、百様図を素材となっている「原理」と、紙の重なりによって見えてくる「見立て」を行き来する構造を企画。言葉にとらわれず、直感的に百様図を感じてもらえるような体験を作っていきました。物理的に触れることのできない画面の中で、紙の重なりやずれやわずかな抵抗感を感じられるように、徹底して紙の物性を追求しました。さらに、ページを訪れたり、ループしたりするたびにランダムな変化が生まれる構造を取り入れることで、百様図の無限性を体現。実際の紙を触る以上の体験がWebサイトでできるよう、質感や物量など、細部までこだわり抜きました。
Point2 - 紙の質感を再現するために制作されたWebGL製の独自ツール
WebGL実装
紙ならではのテクスチャ、動き、
ズレまで
質感をとことん追求
Webサイト上でいかに紙らしさを感じるかを追求し、百様図専用の制作ツールを開発しました。紙の大きさや色、穴の形状や大きさなどを自由に指定でき、それらを重ねてレイアウトし、紙らしい動きや変化をアニメーションとして細かく設定できる仕組みになっています。「見立て」の柄の生成、カメラワーク、アニメーションをツール上で設定し、その結果が即座にWebサイトへリアルタイムで反映される制作フローを構築しました。このツールを使って、百様図をつくった三澤研究室のデザイナーさんとも密に連携をとりながら調整と検証を重ね、柄のパターン自体の精度も高めていきました。
Point3- 独自ツールから駅構内の大型サイネージやCM映像へと展開
メディア展開
Webツールを改造し、
動画編集ツールに。
TV CMや大型ビジョンの
映像に展開
百様図のプロモーションの一環として、TV CM、TVer CM、百貨店内のサイネージ、駅構内サイネージなどを制作。Webサイトで追求した百様図らしさと紙の質感を、映像でも最大限伝えられるように制作を行いました。
実際の投影サイズでの最適な見え方を確認するために、プロジェクターを用いて検証を実施。それぞれのサイズの映像で意図した印象を正確に伝えられるように、柄の大きさや文字サイズなどの調整を重ねていきました。
作り手の声
-
林
-
300年以上続く歴史の転換に立ち会えて光栄でした。同時にとんでもないプレッシャーも感じつつ。
チーム一丸となって踏ん張りました。みなさんおつかれさまでしたー！ -
岡部
-
NDCさんとの二人三脚、とても刺激的で楽しかったです。
たくさん勉強させていただきました。
紙の物性にとことん向き合い、独特の触り心地のサイトになったと思います。
ぜひ隅々まで触り尽くしてほしいです！
アワード
-
Web GRAND PRiX 13th 2025
-
Corporate - GRAND PRIX
-
Spikes Asia 2026
-
Digital Craft - SILVER
クレジット
CLIENT：株式会社 大丸松坂屋百貨店
-
Creative Direction：三澤 遥＋日本デザインセンター / Art Direction, Sound Design：林 英和（mount inc.） / Technical Direction, Development：岡部 健二（mount inc.） / Design：山﨑 末鈴（mount inc.） / Development：寺田 奈々（mount inc.）, 山下 亜加里（mount inc.） / Produce：吉田 耕（mount inc.） / Project Management, Information Architecture：仲橋 祥子（mount inc.） / Copy Writing：長瀬 香子（日本デザインセンター） / Pattern Design：佐々木 耕平（日本デザインセンター）, 山口 敏生（日本デザインセンター） / Photo：北村 圭介 / Retouching：釼持 孔明 / Design Management：曽根 良恵（日本デザインセンター）
-
MOVIE_Creative Direction:三澤 遥＋日本デザインセンター / Art Direction, Planning, Direction:林 英和（mount inc.） / Direction, Motion System Development:岡部 健二（mount inc.） / Edit:山下 亜加里（mount inc.） / Design:山﨑 末鈴（mount inc.） / Produce:吉田 耕（mount inc.） / Project Management:仲橋 祥子（mount inc.） / Copy Writing:長瀬 香子（日本デザインセンター） / Music:佐藤 教之, 佐藤 牧子（heima） / Design Management:曽根 良恵（日本デザインセンター） / Post Production Advisory（TV CM, TVer）:山本 純平（Geek Pictures Inc.） / Post Production（TV CM, TVer）:IMAGICA Lab.