サイト全体のテーマカラーが変化する独特な演出に思わず脱帽！川久ミュージアムのウェブサイト

doxas : 2020-07-10 14:41:21

WebGL だけに頼らないサイトづくり

今回ご紹介するのは、和歌山県にあるホテル川久が、所蔵している美術品などを展示している私設美術館「川久ミュージアム」のウェブサイトです。

ホテル川久はヨーロッパ調の美しい建築で有名なホテル。もちろん、一般の宿泊客も普通に利用できる施設なのですが、ちょっと調べてみるとその外観は本当に西洋のお城みたいな感じです。

その中身は世界中から集められた職人さんたちの技術の結晶であり、とあるサイトによれば総工費は４００億円規模にのぼるそうです。

今回のサイトは、そんなホテル川久が「オーナー秘蔵の品々を公開した私設の美術館」をオープンさせたということで作られたスペシャルサイトとなっています。

今回のサイトでは、WebGL の実装には Pixi.js が使われているみたいです。

主に、背景部分の演出や、ページ冒頭の部分にある画像が次々と浮き上がってくる部分に WebGL の実装が組まれている形です。

WebGL 以外の部分の実装もとにかくかなりこだわって作り込まれている感じがあり、縦に長い、いわゆる SPA の構造なんですが、本当に美術館で作品めぐりをしているかのような様々な刺激を存分に感じられるサイトとなっています。

この上の画像を見ると、背景の部分に細かいギザギザ模様があり、上半分と下半分でカラーリングが大きく異なっているのがわかるでしょうか。

実際にサイトで動く様子を見てもらうとわかりやすいのですが、この境界のギザギザ模様は、一定の間隔で下から上に向かって流れていきます。それと同時に、背景の色が変化する感じですね。

また、画面の右側には、たくさんの画像がランダムに配置されたような構図になっており、この部分ではマウスカーソルでのドラッグ操作などで次々に画像が湧き出してくるような演出を見ることができます。

画像は本当に次々出てくるので、様々な美しい画像をたくさん並べて楽しむことができます。

また、ページ内には WebGL の演出だけでなく、様々な工夫が見られます。

たとえばページ全体の中盤あたりでは、CSS を使った立体表現なども楽しめます。

こちらはカーソルの位置に応じてインタラクティブに動くだけでなく、カーソルをホバーさせてやると詳細テキストが見えるという芸の細かい演出です。

さらに、冒頭で紹介した「色の境界線が流れてきて、背景色が切り替わる演出」が発生すると、そのたびにとても興味深いことが起こります。

よーく観察していないと、もしかしたら気が付かない人もいるかもしれませんが、背景の配色が変化するのに連動して、サイト内のその他のパーツの「全体のテーマカラー」も変化しているんですよね。

それらは例えば要素ごとの背景色であったり、あるいは文字の色だったりするのですが、同じサイトを見ているはずなのに全く違った印象に次々と変化する様子は、本当に面白いですね。

以下は、あくまでも私の個人的な感想というか思ったことをそのまま書いてしまうので、今回のサイトの造り手の方々が狙ったものなのかどうかはわかりませんが……

そもそもホテル川久には、和洋折衷というか、「様々な国の様々な技術を持った職人たちによって作られた」という歴史的な経緯があります。そして、今回のサイトの主役である川久ミュージアムでも、やっぱり様々な文化圏から多種多様な美術品が展示されている形になるわけですよね。

今回のサイトでは、背景色が次々と切り替わったり、あるいはいろいろな画像が次々と現れたりと、見ているうちにどんどん印象が変わっていくんですよね。

これってまさにホテル川久の持つ多様性や多面性、それらが融合したときの迫力や荘厳さに通じる、川久ミュージアムらしい演出なんじゃないかなと思いました。（まじで単なる個人の感想で恐縮ですけど……）