PERFECT DAYS

映画で描かれていない
主人公の353日を体験する、
唯一無二のデジタルブック。

映画『PERFECT DAYS』の世界における「静かな感情の揺らぎ」を損なうことなく、映画の主人公に迫るための“もうひとつの物語”としてWebサイトを設計。予告編や劇場情報を並べるだけでは伝わらない作品の魅力を届けるために、テキスト・映像・音響を繊細に統合したWebならではの表現を行いました。

目次

クライアントについて

映画『PERFECT DAYS』

  • 映画の概要

    「パリ、テキサス」「ベルリン・天使の詩」などで知られるドイツの名匠ヴィム・ヴェンダースが、役所広司を主演に迎え、東京・渋谷を舞台にトイレの清掃員の男が送る日々の小さな揺らぎを描いた作品。2023年・第76回カンヌ国際映画祭コンペティション部門では、主演をつとめた役所広司が日本人俳優として2人目となる最優秀男優賞を受賞。

プロジェクトが目指したもの

一般的な公式サイトの構成では、予告編や公開情報だけが前面に出てしまい、本作が大切にしているものが伝えられないと考えました。Webだからできる表現で作品を表現してこそ、閲覧者が映画を観る前には楽しみが増える、鑑賞した後には余韻を楽しめる。その両方にしっかりと作用するWeb体験を設計することを目指しました。

プロジェクトタイムライン

期間 : 4ヶ月 (2023年8月 ~ 2023年12月)

Point1 - 映画の紹介だけでなく、Webにしかできない形で主人公に迫るスクロールブック

コンテンツ設計

映画では描かれない視点で
主人公・平山を描く
「Days of Hirayama」

映画の共同脚本を手がけ、本Webサイトのクリエイティブディレクターでもある高崎卓馬氏の「映画も、平山という人物にアクセスするための手段のひとつだったのかもしれない」という言葉を受けて、Webもまた独自の方法で、主人公に迫ろうとしました。平山という人物の本質は、日々の「ルーティン」にあります。映画本編では、その静かな繰り返しの中に、小さな起伏の蓄積だけで物語が成り立っているにもかかわらず、観ている人には最後に大きな感動が湧き上がる。その本質をWebでも表現することにしました。ここを訪れた人に「この映画を観たい」という気持ちになってもらわなくては意味がない。また、映画を観る前にも観た後にも楽しめる内容で、という発想から生まれたのが、高崎氏書き下ろしのオリジナル小説「Days of Hirayama」でした。 1年間365日のうち、映画で描かれなかった353日を綴ることで、平山の平凡な日々の繰り返しの中に潜む、映画では見えない彼の意識の底や、彼の目に映る何かを描き出し、映画をより豊かな体験にできるのではないかと考えました。

映画では描かれていない353日間を高崎氏による描き下ろしの物語で綴りました

Point2 - スクロールの動きに合わせて、小説と117個の環境音が展開される

体験設計

客観と平山の主観を行き来しながら
物語を体験

「Days Of Hirayama」では、ページをスクロールする行為そのものが物語体験へと変換されます。画面に表示される文章の進行に合わせて、竹ぼうきで道を掃く音、カラスの鳴き声、雨音、遠くを走る車の気配など、映画の音素材をもとに細かくチューニングされた117個の環境音が自然にミックスされて再生されます。うっすらと光の差す黒い背景に文字だけが流れる状態から、ユーザーのアクションによって木漏れ日を写したビジュアルと文章が重なる構成へと移り変わります。これは、作中の平山がときおり自分のカメラを向ける行為を手がかりに、「彼が見ていた、あるいは撮ったと想定される景色」を画面上に示すためのものです。音、文字、画面の変化、操作を重ね合わせることで、物語を外側から読んでいた視線が、いつの間にか平山が風景を見つめる視点へと近づいていく。その緩やかな移行そのものが、読み手の記憶に残るよう意図しています。

Point3 - 小説を味わい深く演出するための文字にまつわる独自ツール開発

WebGL実装

没入体験をつくりだすための
徹底したつくり込み

文字を単なる情報ではなく「触れる造形」として扱い、一画ずつ分かれて書き順通りに描かれていくような演出を実施。そのために一文字一文字の軌跡をデータ化する専用ツールを開発し、スプライトシートとして管理することで、生きた文字の動きを可能にしました。また、ブラウザ上で文字詰めを細かく調整できるツールも制作。見出しや本文全ての文字詰めを行い、約物の位置や文字間まで整えています。

画数に応じたアニメーションをするための実装
環境音とスクロールが連動するようにタイミングの微調整を行いました
一文字ごとに文字の間隔を目視で調整するためにツールを開発

作り手の声

岡部

「映画は、平山という人物にアクセスするための1つの手段だった」という高崎さんの言葉を胸に、ウェブなりに平山を捉えようともがいた日々でした。 毎朝、安藤忠雄設計のトイレ前を通るたび、「なんとかなってくれ」と願掛けしていました。

仲橋

映画の中の、忙しない日々ではつい見逃してしまうような繊細な日常の美しさに、救われたような気持ちになりました。人生のいろんな局面で、観るたびにみえ方が変わる作品になりそうです。
そんな映画のWebサイト。聴こえる音、1文字の1角まで、繊細に、丁寧に作りました。

このサイトに関する記事

アワード

ADC Annual Awards 2024

Interactive – Digital Craft – Art Direction – SILVER

Interactive – Digital Craft – Sound Design – BRONZE

Interactive – Online / Mobile Websites – Website – MERIT

Brand / Communication Design – Branding – Branding Systems / Identities – Digital – MERIT

D&AD Awards 2024

Digital & Social – Promotional Websites – GRAPHITE PENCIL

Cannes Lions International Festival of Creativity 2024

DESIGN – DIGITAL & INTERACTIVE DESIGN – SILVER

DIGITAL CRAFT – FORM – BRONZE

BRAND EXPERIENCE & ACTIVATION – TOUCHPOINTS & TECHNOLOGY – SHORTLIST

DESIGN – DIGITAL & INTERACTIVE DESIGN – SHORTLIST

One Show 2024

Interactive, Online & Mobile – Websites – Desktop & Responsive – MERIT

Spikes Asia 2024

Brand Integration & Sponsorships / Partnerships for Branded Content – GRAND PRIX

Use of Mobile & Devices – BRONZE

Use of Social & Digital Platforms – SHORTLIST

UI – SHORTLIST

New York Festivals Advertising Awards 2024

DIGITAL/MOBILE: Craft – Music/Sound Design – SILVER

DESIGN: Brand Design – Digital/Mobile – SILVER

DIGITAL/MOBILE: Craft – Interface & Navigation (UX/UI) – SILVER

ACC TOKYO CREATIVITY AWARDS 2024

Design – FINALIST

BRANDED COMMUNICATION CATEGORY A: DIGITAL EXPERIENCE – FINALIST

1st Tech Direction Awards 2024

Website / App – GOLD

MAD STARS 2024

Interactive Stars – SILVER

Design Stars – CRYSTAL

The FWA

FWA OF THE DAY

CSS Design Awards

WEBSITE OF THE DAY

クレジット

CLIENT: 映画『PERFECT DAYS』/ MASTER MIND
-
Creative Direction, Story, Copy Writing: 高崎 卓馬(電通) / Produce: 矢花 宏太(電通) / Produce: 秋山 駿(電通) /
Art Direction, Design: イム ジョンホ(mount inc.) / Planning, Technical Direction, Development: 岡部 健二(mount inc.) / Design: タイ トウオン(mount inc.) / Development: 須多 望(mount inc.) / Development: 山下 亜加里(mount inc.) / Project Management: 吉田 耕(mount inc.) / Project Management, Information Architecture: 仲橋 祥子(mount inc.) / Special thanks: 渡辺 俊(mount inc.)/ Sound: 佐藤 礼央(Sound+Light)