PERFECT DAYS 公式サイト：映画では描かれなかった353日の“平山”にアクセスできるサイト

概要

「PERFECT DAYS 公式サイト」とは、ヴィム・ヴェンダース監督の映画『PERFECT DAYS』本編では描かれなかった、主人公ー平山の353日にアクセスできる映画公式サイト。本編12日間を除く日々の平山の意識・視界を、文章・映像・音などで表現しており、１日が終わると別の日が始まるループ構造で変化を体験できる。黒基調の画面と平山が見ているような木漏れ日の映像を行き来する画面構成など、デザインにこだわりながら、同時に微細な変化を文字や音で表現する制作ツールを開発。文字1つ1つからつくりこみ、単なる映画情報の掲載サイトではない、映画を補完・アップデートできる場を実現している。作品の魅力を深める「PERFECT DAYS 公式サイト」の制作アプローチは、広告の可能性を拡げ、あらゆるクリエイティブに波及すると期待されている。

PER_sub1

PER_top

なぜ生まれたのか？

Webサイトを、映画とは違うかたちで「平山にアクセスするひとつの手段」と位置づけ制作に着手した。制作にあたっては、映画で描かれている、繰り返す日々の中で生まれる小さくも美しい揺らぎにフォーカス。353日の日々の中で平山の意識の底や目に映る世界を描写するという、コンセプトを発案した。それを具現化するため、クリエイティブディレクターの高崎卓馬氏が、映画をベースとしたWeb限定の物語「Days of HIRAYAMA」を書き起こし。同コンテンツを軸につくりこみ、日々に生まれる揺らぎを感じられるサイトを構築した。

「PERFECT DAYS 公式サイト」は、映画とともに国内外から注目され、高い評価を獲得。世界最大級の広告祭「Cannes Lions 2024」では、Design部門でシルバーを、Digital Craft部門でブロンズを受賞している。

なぜできるのか？

デザインとテクノロジーの組み合わせ

文字・音・映像・動き・インタラクションなど、サイト内の細部までデザイン・つくりこみを行い、微細な変化を体験できるサイトを構築している。「Days of HIRAYAMA」の文章に合わせて映像・環境音を流す手法をベースに、表現の方向性を検討。動くプロトタイプを10個ほど作成・検証し、最終的に3つの制作用ツールを開発した。また映像には、映画内で平山が撮る写真を想起させる、木漏れ日のビジュアルを活用。サイトをスクロールすると黒い画面から切り替わる仕掛けにして、物語を客観的に見る視点と平山の目線・意識を行き来するような体験を提供している。

文字ツールによる微細な文字表現

開発した専用の文字ツールで、「Days of HIRAYAMA」の文章が1文字1文字、書き順どおりに描かれ、1画ごとバラバラになる動きを可能にしている。ツールで文字を1画ごとなぞってパーツに分解し、始点＝赤／終点＝緑で、なぞった軌跡を色情報として保存。1枚の画像に輪郭・ストローク情報を記録してスプライトシートを構築し、動きのある文字表現を実現している。構築にあたっては、400種類以上の文字・2,000画以上を分解して画像化した。

文章と音を融合させる音ツール

文章と音の連動を設定するツールを開発。読んでいる文章の位置に合わせて、環境音や音楽が自然にミックスされて聞こえる仕組みを構築した。映画の音素材を含めた117個の環境音と、17種類のアンビエントな音楽を活用し、文章のどこの位置で、どんな音をどのくらいのボリュームで鳴らすか、チューニングを重ねて細かく設定。耳障りよく心地よい音でありながら平山の存在を感じられる、絶妙なバランスを重視し音をつくりこんだ。また、画面スクロールに伴う音の早回しなどが起こらない安定感のある設計で、10以上のトラックが重なるシーンでも、自然で滑らかな音の再生を可能にしている。

微調整が可能な文字詰めツール

文字表示のクオリティを高めるため、Webブラウザ上で簡単に文字詰めできるツールも開発した。実装したページに対して開発モードでアクセスすると、見出しや本文などをリアルタイムで文字詰めでき、微細な表示調整が可能。さらに箱組み専用モードを搭載して、文章の改行指定や、約物（「。」などの記号）が行頭にこないようにする禁則処理設定も可能にしている。また、Adobeのillustratorと同じショートカットを採用し、操作性も確保。作業効率も考慮して、複数人での同時操作を可能にした。