メール受信設定のご確認をお願いいたします。

AdverTimes.からのメールを受信できていない場合は、
下記から受信設定の確認方法をご覧いただけます。

×

『PERFECT DAYS』公式サイト、映画をより豊かな体験へと変えるコンテンツ制作の裏側

share

2023年12月に公開された映画『PERFECT DAYS』は、『パリ、テキサス』『ベルリン・天使の詩』『ブエナ・ビスタ・ソシアル・クラブ』などの作品で知られる、ドイツのヴィム・ヴェンダース監督の新作だ。共同脚本・プロデュースにクリエイティブディレクター 高崎卓馬氏が参加、主演を務めた役所広司さんがカンヌ国際映画祭で最優秀男優賞を受賞したことで、公開前から大きな話題を集めた。そんな本作の公式サイトも、映画とともに注目されている。

Webサイト 映画『PERFECT DAYS』

平山という人にアクセスするための手段としてのWebサイト

通常、映画の公式サイトと言えば、予告篇となる動画が流れ、公開情報や劇場情報などが表示される。しかし、このサイトでまず出てくるのが「Days Of Hirayama 映画にならなかった平山の353日」と題された「scrolling book」だ。enterを押すと、黒い世界にぼんやりとした光が広がる画面へと変わる。そして道を掃く竹ぼうきの音、カラスの鳴き声、雨が降る音…など日常のさまざまな音とともに、静かに波が押し寄せてくるように物語が浮かびあがってくる。そこに綴られているのは、平山の1日。映画をすでに観た人であれば、その文章から映画のシーンをあらためて自分の頭の中に再生できるだろう。これから映画を観る人にとっては、その文章からシーンを想像する楽しい時間になるに違いない。

公式サイトの流れを見ることができる映像

このように、一般的な映画の公式サイトと一線を画す『PERFECT DAYS』の公式サイト。制作は、どのようにスタートしたのだろうか。

「クリエイティブディレクターである高崎卓馬さんからは映画としての大きな意思を示していただいた上で、Webへのオーダーは『手法はどんなものでもいい。最終的に映画に興味をもってもらうことがゴール』というシンプルなものでした」と話すのは、本サイトを手がけたイム ジョンホ氏率いるmountのテクニカルディレクター 岡部健二氏。

本サイトの企画をはじめ全般を手がけた岡部氏は「映画を拝見すると、とても淡々とした物語で、小さな起伏が大きな感情の揺らぎに繋がる構造になっている。まるでブランコの振り子のような構造だと思いました」と、制作の始まりを振り返る。

「大きな事件も起こらない。最初から最後まで小さな起伏の蓄積だけで物語が成り立っているにもかかわらず、観ている人には最後に大きな感動が沸きあがる。時間軸と共に盛り上がる通常の映画とは違う物語や展開で、これをWebでどのように表現し、どのように情報を伝えていくべきか、当初はとても難しく感じました」(岡部氏)

企画に頭を悩ませる中で、高崎氏のこんな言葉がその突破口になった。

「映画も、平山という人物にアクセスするための手段のひとつだったのかもしれない」

この言葉によって、「ただ映画を紹介するのではなく、Webサイトも平山という人にアクセスするためのひとつの手段として、映画とは違うかたちで平山をとらえてみよう」と、考え方を切り替えた。そして「平山の平凡な日々の繰り返しの中で、映画で見てとれる情景とは違う、平山の意識の底、または彼の目に映る何かを描写できたら、映画をより豊かな体験にできるのではないか」(イム氏)と考えた結果、生まれたのが言葉と音によるメインコンテンツ「Days Of Hirayama」だ。この物語は、高崎氏に映画のプロットをベースに、Webコンテンツ用として新たに書き起こしてもらった。

このコンテンツにアクセスしたときに、言葉に合わせて聞こえてくる音は、膨大な映画の音素材などをもとに細かくチューニングしたものだ。

「企画提案の場で、高崎さんが『音の変態』が必要とおっしゃったのが印象的でした。音の大事さはみんな理解していたものの、この言葉がその後の音づくりにおいても妥協なく取り組むためのキーワードになった気がします」(岡部氏)

そんな「音の変態」として声をかけたのが、音楽家の佐藤礼央氏だ。佐藤氏は数々の広告・映画音楽を手掛け、過去にmountとも仕事したこともあり、信頼が厚かった。

「何度も、さまざまな方向で検証しました。耳障りの良さを求めると当たり障りの無い環境音になってしまうし、かといって文章を読むのを邪魔するほどの存在感があってもいけない。平山の息づかいが感じられる、心地よさと生々しさの絶妙なバランスを探っていきました」(岡部氏)

方向性、文字と音による演出などは決まったが、サイトの目的としてここを訪れた人に「この映画を観たい」という気持ちになってもらわなくては意味がない。また、映画を観る前にも観た後にも楽しめる内容で、なおかつネタバレしてはらならないなど、クリアにしなくてはいけないことはまだあった。

「つくりこめば何か見えてくるかも。でもやっぱりそれだけじゃ足りない、何かジャンプできる仕掛けも必要だ、と考えていました。映画の中で、平山が木漏れ日を見て、目を細めて微笑むシーンがあるのですが、それを見たときに、ジャンプできる要素はこれだ!と思いました」(岡部氏)

当初はうっすらと光が差す黒い画面に物語の文字だけが流れる演出だったが、スクロールすると画面が一変、流れるように木漏れ日を写したビジュアルと文字に切り替わる。映画の中で、平山は時折、自分のカメラで木漏れ日の写真を撮る。このビジュアルはそれをイメージしており、「平山が撮った写真」という設定にした(実際はフォトグラファー 杉田知洋江氏が冊子などのために撮影した写真を使っている)。この木漏れ日のビジュアルを、イム氏と岡部氏は「平山モード」と呼んでいる。

「平山モードの変化は、平山を客観的に見ている黒い画面/平山の主観のような木漏れ日にピントがあっている画面。その2つを意識の膜をくぐるように行き来する、という意図でつくっています」(岡部氏)

サイトを訪れ、客観的に物語を読んでいた人の目線が、スクロールすることで平山が木漏れ日を見たときの目線へと変わる仕掛けになっているのだ。

「彼の吐息、手触りや意識の外にある音、彼が見たであろう東京の意味ある景色。そんなことをブラウザの枠の中で文字、映像、音、モーションとインタラクションの組み合わせで手触りのある確かなものとして存在させるようにしてつくりました」と、イム氏。

専用ツールをつくり、Webサイトでも文字詰めを

さらにつくりこみに関しては、一般的なWebサイトではまずやらないことを試みている。「Days Of Hirayama」で下から上がってくる文字は、よく見ると書き順どおりに描かれ、1画ごとにバラバラになる。時には、文字そのものがゆがむこともある。一文字、一文字が、まさに木漏れ日をイメージしている。

また通常、Webの文字はHTMLで書いたものが表示されるが、本サイトでは専用ツールを岡部氏が制作。この専用ツールでなぞった文字の軌跡を、赤=始点と緑=終点の色情報で保存し、スプライトシート化※。それによって、1枚の画像の中に全文字の輪郭・ストローク情報を記録しているため、こうした動作が可能になっている。ちなみに全部で400種類の文字で2000角以上あり、それを一つずつ画像化している。

※スプライトシート:複数の画像を1枚の画像にまとめ、タイル状に配置した画像

文字の動きやストロークを解説した映像

岡部氏はこちらでもまた、文章と音の連動を設定する専用ツールを制作。佐藤礼央氏と共に、読んでいる小説の位置に合わせて、映画の元素材はもちろん、映像から切り出して調整した音など117個の環境音を自然にミックスした状態で聞こえるようにしている。

通常、このような小説にひとつの音楽を当てた場合、スクロールすると音が早回しになってしまうが、このツールで出力されたデータを用いた実装をすることで、ユーザーがどんな操作をしてもなめらかに音がミックスされる。シーンによっては10以上のトラックが重なることもあるが、その音量も細かく調整されている。

文章と音を連動させるツール

「平山モード(木漏れ日)になると、環境音が遠くに行って、アンビエントな音楽が重なります。アンビエントな音楽も17種類がランダムに出てくる仕掛けになっており、一瞬たりとも同じ状況になることはありません」(岡部氏)

そしてmountでは、今回もう一つツールを開発した。それが実装されたページに対して、ブラウザ上で文字詰めできるというもの。本サイトでは、見出し・UIのみならず、本文まで細かく調整している。元々、mountではグラフィックの感覚を大事にデザインしていることもあり、こうしたツールができたのは自然なことという。このツールでは箱組み専用モードを設けて、改行の指定や約物の禁則処理も可能にした。

実装されたページに対して、ブラウザ上で文字詰めできるツール

一方、コンテンツの上部の「index」をクリックすると、映画にとって重要な情報ページが現れる。こちらもそれぞれのリンクをクリックすると、写真の上に文字が白く浮かびあがる。下層にある情報ページでも、1文字1文字が木漏れ日のようにパラパラと出てくる演出が施されている。

「映画が日常を取り扱っているので、レイアウトはある程度ゆるさをもたせようと意識しています。そこを適度にしめる意味で、丁寧に文字を組んでいく作業を積み重ねています」(イム氏)

こちらには役者やスタッフの紹介の他、劇中登場する音楽や本などのコレクションページもある。

Webサイト 映画『PERFECT DAYS』 情報ページのメニュー
公式サイトの情報ページのメニュー
Webサイト 映画『PERFECT DAYS』劇中でかかる音楽を紹介するページ
劇中でかかる音楽を紹介するページ。

今回は、企画・デザインと並行して実装を行うという、通常とは違うつくり方で、完成までに約3カ月かかった。

「"Web=情報収集のためのもの"だけに収束していってしまうのは、個人的にもったいないと考えています。サイトに触れた人の気持ちを少しでも動かすような表現、しかも他のメディアにはできないWebだからこその表現方法があるのではないか。それを諦めずに追求したい。それこそ、この映画のように、見た人・触れた人の世界の見え方をほんの少しでも変えられたら。このWebサイトが、誰かにとってそうなれているとうれしいと思っています」(岡部氏)

12月22日のロードショー公開後、映画を鑑賞した人の感想がSNSにアップされ続けている。その中には公式サイトのリンクを貼ったり、サイトについて言及しているものも多く、「鑑賞後に公式サイトを見ると、なおよい」「映画の余韻にひたれる」「公式サイトもぜひ見てほしい」という声が寄せられている。

advertimes_endmark

スタッフリスト

企画制作
電通、mount
CD、ストーリー、C
高崎卓馬
Pr
矢花宏太、秋山駿
AD、D
イム ジョンホ
企画、テクニカルディレクション、ディベロップメント
岡部健二
D
タイ トウオン
ディベロップメント
須多望、山下亜加里
プロジェクトマネージャー
吉田耕
プロジェクトマネジメント、インフォメーションアーキテクト
仲橋祥子
音楽・音響
佐藤礼央
Special thanks
渡辺俊

ECD:エグゼクティブクリエイティブディレクター/CD:クリエイティブディレクター/AD:アートディレクター/企画:プランナー/C:コピーライター/STPL:ストラテジックプランナー/D:デザイナー/I:イラストレーター/CPr:クリエイティブプロデューサー/Pr:プロデューサー/PM:プロダクションマネージャー/演出:ディレクター/TD:テクニカルディレクター/PGR:プログラマー/FE:フロントエンドエンジニア/SE:音響効果/ST:スタイリスト/HM:ヘアメイク/CRD:コーディネーター/CAS:キャスティング/AE:アカウントエグゼクティブ(営業)/NA:ナレーター