大戦中にやりとりされた無数の手紙をテーマにした仄暗く重厚な WebGL 実装 The Endless Letter
折り紙のような手紙の演出も見事
今回ご紹介するのは、ロシアがまだソビエト連邦だった第二次世界大戦時、実際にやりとりされた手紙をテーマにした Web Experience です。
About ページによると、大戦中にやりとりされた手紙は実に 10 Billion とのことなんですが、これって日本語の単位だと 100 億ですよね……
それほど多くの手紙がやりとりされていたなんて、想像するだけでもすごいことですよね。
今回のサイトではそんな数多くの手紙の中身を実際に見ることができるのですが、結構生々しい内容もありますのでそういうのが苦手な方は注意してください。(ビジュアルはそこまででも無いのですが、文章が実物ということでかなり気持ちが揺さぶられる可能性があります)
リンク:
背景の演出にもいくつか種類がある模様
今回のサイトでは、手紙がテーマになっているため 3D モデルとして折りたたまれた手紙(便箋)が出てきます。
これらはすべてなにかしらの手紙とデータ的には紐付いていて、実際に内容を読むことができるようになっています。
フォントがちょっと独特なので母国語が英語ではない場合ちょっと読むのに苦労するかもしれませんが、それほど長文の手紙はありませんし、意外と意味を察するのは難しくなさそうです。
ご覧のとおりの薄暗い背景の空間に、無数にばらまかれた手紙がうっすらと浮かび上がります。なんかロウソクなどで照らしているかのような質感で、ビジュアルの雰囲気がサイトのテーマとよくマッチしています。
1941 年からの数年間を、それぞれ縦に順番に並べたようなレイアウトになっていて、各年ごとに手紙を確認できます。
スクリーンショットではちょっと見えにくいと思うのですが、手紙にカーソルをホバーさせたときの演出が秀逸で、うっすらと手紙に関連した写真のようなものが画面上に映ります。
下のスクリーンショットだと、年号の数値のあたりに女性の顔がうっすら見えると思うのですが、リアルタイムに動いている様子ではもう少しわかりやすく見えると思います。
手紙をクリックして選択すると、その手紙の内容(文章)と共にカード型のイメージが一緒に表示されます。
また、戦死者の場合はそれも表示されるようになっているみたいで、兵士が書いた手紙なのか、兵士にあてた家族の手紙なのか、はたまた一般市民の手紙なのかなど、いろいろなことを考えさせられる内容になっていますね。
ちょっとわかりにくいかもしれないですが、この手紙の内容を表示する詳細シーンには、背景のパターンがいくつか用意されているみたいです。
戦時下を思わせる火の粉のようなものが描かれるシーン、あるいはシトシトと静かに雨が降り注いでいるシーンなど、すごく雰囲気があります。
舞い上がる火の粉がより一層雰囲気を演出してくれます。
今回のサイトは、ソビエト時代のロシアにおける手紙のやりとり、を扱っているものですが、第二次世界大戦は日本人にとってもかなり歴史的に意味のある出来事なので、私のような実際には戦争を知らない世代であってもいろんなことを連想してしまいますね。
WebGL を使って立体的に表現を行うとき、その立体であることの意味みたいなものが大なり小なり必要だと個人的には常々思うのですが、今回のサイトの場合は「深い底なしの暗闇」みたいなものが上手に表現されていてこれは 3D ならではだなと感じました。
またぼんやりと写真が浮かび上がってくる演出など、空気感もよく考えて作り込まれていると感じました。
ぜひチェックしてみてください。