本物の質感へのこだわりがすごい! ハートランドビールのアートプロジェクト Journey Around HEARTLAND

doxas : 2017-11-14 15:03:23

圧倒的な本物志向に驚かされる

今回ご紹介するのは、和製の WebGL プロジェクトです。

日本の大手酒造メーカーとして誰もが知っている「キリン」のハートランドビールというブランドがあります。このハートランドビール、2015 年からアートプロジェクトを行っているのですが、その 2017 年版のサイトが公開されています。

2016 年も WebGL と森をテーマにした美しいサイトが話題になりましたが、今回は「本」をテーマに、徹底的に本物志向で、まるで本物の本をめくっているかのような経験がブラウザ越しに体験できるようになっています。

WebGL 部分を実装したのはホムンクルスの代表も務める木村 靖裕さん。その実装に対するこだわりなども含めてご紹介しようと思います。

音が聞こえる環境で閲覧してほしい

このプロジェクトは EPOCH Inc. さんが主体となり制作が進められたもので、同社の PRODUCTION WORK のページから、制作に携わった方々のクレジットを見ることができます。

今回の作品は、目で見て楽しいだけでなく、耳から入ってくる音の効果にまでもこだわった作品になっており、閲覧には、音を聴くことができる環境を是非におすすめします。

さて、ページのロードが完了すると、ハードカバーの本を模したシーンが出てきます。

驚くべきことに、今回のサイトはその閲覧している環境や時間帯に応じて微妙に描画されるシーンが変化するようになっているそうで、私がこの記事を書いている夜の時間帯には、虫の音が静かにりんりんと響き渡るような、そんな世界観になっていました。

その他にも、光の当たり加減が時間帯によって変化したり、スマートフォンで閲覧している際にはジャイロセンサーから得られる傾きに応じた光加減の変化なども起こるようになっています。

のっけから、いきなり隅々まで徹底したこだわりを感じさせてくれるシーンが展開されていくのですが……かといってそれらの演出は、けして過度に誇張されたものとなっているわけではないので、静かに、ゆったりと読書しているかのような、そんな気分に浸ることができます。

サイトでは、ビールを片手にゆったりと本をめくっている、そんなシーンをうまく再現していますね。

スマートフォンなどのタッチデバイスでは画面をスワイプ、PC 等での閲覧であれば、マウスによるドラッグ操作で、本を次々とめくっていくことができるようになっています。

一定までドラッグ操作を行ってみれば、本のページが隅のほうから少しめくれ上がる様子を確認できるでしょう。

そしてボタンを離す(タップしている指を離す)と、さらりとページがめくれていきます。

冒頭にも書いたように、今回のサイトはそのビジュアルだけでなく、音にも異常なこだわりを持って作られています。

ページをめくるときの紙が擦れるような音は、実際の本で使われている、本来のそのページの用紙が発する音と同じものが使われているそうです。ですから、ページをめくる度に変化する用紙の紙質に応じて、その都度、異なる効果音が鳴るようになっています。

しなやかにスルリと滑るような音が鳴るタイプの紙もあれば、スッと静かに音が響くタイプの紙もあります。こんなところまでこだわって実装されている本の WebGL デモは、これまで見たことがありません。

さらに驚くのは、音だけではなく、その紙の堅さまでもが WebGL 作品上で再現されていること。

これはアニメーションしているものを見てみれば一目瞭然ですが、スクリーンショットでも、十分にその違いを見分けることができると思います。下の二枚の画像のうち、上段はしなやかで柔らかい紙質のもの、下段が比較的堅いものをキャプチャした様子です。

本のページは全部で 200 ページほどあり、そのボリューム感もすごいです。

ページ数は多いのですが動きは非常にスムーズで、これだけ大量のイラストをストレス無く表示するために様々な工夫が凝らされていることがうかがえます。

単なる一枚の紙を表現するとは言っても、これだけしなやかに動く様子を見せるためには、それなりに平面を分割して、細分化した状態でポリゴン化しておく必要があるので、それをそのままふつうに重ねただけだともっと処理が重くなってしまうはずです。

途中には、パンチ穴が空いているページなどもあるのですが、そういった部分までしっかりと再現されていて、パフォーマンスに配慮しながらも、やはり質感や本物志向な作品の性格に妥協しないで実装されていることがわかりますね。

丸く色が塗られているのではなく、実際にそこは物理的な穴が空いている状態として再現されている。

ビジュアルへのこだわりだけを見ても、時間帯による光の加減の変化という「環境」に対してのものと、紙の質感表現という「物質」に対してのものがギッシリ詰め込まれています。

それらに加えて、環境音、紙をめくる物理的な音の再現など、たった一冊の本を表現するのにかなり贅沢な作り込みがなされていることがわかります。

作者の木村さんはスマートフォンでの閲覧や、大量のページを再現するためのパフォーマンスにも気を配ったとおっしゃってましたが、むしろこだわっていない部分が見つからないほどの、本当に驚くべき完成度のサイトだと感じました。

利用しているイラストが多いので、通信環境が微妙な状態では初期ロードが若干時間を要するかもしれませんが、200 ページのイラスト本一冊を丸々再現していると思えば、驚くほどのスピードでロードも終わります。

こだわりをギュッと煮詰めて固めたような、驚くべきサイトに仕上がっていると思います。

ぜひチェックしてみてください。

リンク:

Journey Around HEARTLAND | ハートランドビール

EPOCH Inc.(株式会社エポック)

homunculus Inc. | 株式会社ホムンクルス

share

follow us in feedly

search

search

monthly

sponsor

social