作品の持つ世界観を見事に体現！ Pixi.js を利用したシェーダエフェクトが生きるムンク展のウェブサイト
丁寧なアニメーション処理がお見事
今回ご紹介するのは、日本国内で開催されているムンク展のウェブサイトです。
日本でもムンクの「叫び」と言えば非常に有名な作品かなと思いますが、東京都美術館で開催されているムンク展は連日盛況なようです。
このムンク展のウェブサイトに、Pixi.js 製のシェーダを利用したエフェクトが使われています。作品の世界観（といっても「叫び」の世界観ですが……）にぴったりとマッチした演出になっていて、しかもすごく丁寧にエフェクトが作られています。
時間差で収束するアニメーション
今回のサイトは、日本のサイトらしいすごく丁寧な作り。
イントロ部分の派手な演出だけでなく、情報をしっかりと伝えるデザインや配色、工夫されたインタラクションなど、見どころが多くあります。
このサイト、どこが製作したんですかね……
とても丁寧な仕事だと思いました。
イントロ部分の演出は、サイトに訪れた瞬間にいきなり出てくるので、とてもインパクトがあります。
使われているノイズは、たぶんリアルタイム生成ではなく画像ですね。目の細かいノイズを使っているので、よりジャギーっぽい印象の歪みが表現できていて、いい感じです。
Pixi.js を使って「叫び」の画像をノイズで歪ませる演出は、本当にこの作品の世界観にぴったり。
風景が歪んでしまうほどの苦悩を連想させる、とてもうまい演出だと思いました。
また、個人的に面白いなと思ったのは、画像のほうの歪みと、一緒に表示される文字（まあこれも画像ですが……）のほうの歪みと、それぞれの収束する時間に差がある点。
一足先に、背景の「叫び」のほうが収束し、文字周りは少しゆっくりと収束してきます。この微妙な収束の時間差が、よりしっかりと見る人の意識をサイト内に向けさせているのではないかなと思います。
ムンク、というのは人名です。
彼の作品は「叫び」が非常に有名ですが、それ以外にもたくさんの作品が存在し、それぞれに作風やタッチが結構異なります。
結構写実的な絵画とかも、たくさんあるんですよね。
実は私、子供の頃に東京都美術館でやはりムンク展が開催されていたときに、実物を見に行ったことがあるんですよね…… しかも、実は「叫び」って複数のパターンがあり、今回来ている「叫び」は初来日という形になるようです。
ちょっと気になる……
ムンクの「叫び」は、頬に手を当てて叫び声を上げている作品、と思われている場合が多いかと思いますが、実際には、自然や社会が発する強烈な叫びに怯えて耳を塞いでいる様子を描いた絵です。
私が子供の頃に見た「叫び」は、実物だったので当たり前と言えば当たり前なのですが、塗り込められた絵の具の厚みまでくっきりと見えて、絵に込められている感情の強さに子供ながらに怯えたのを覚えています。
もしかしたら、今回来ている「叫び」はもう日本には来ないかもしれないという触れ込みなので、興味のある方は展覧会に行ってみるのもいいかもしれません。
Pixi.js を使って、このムンクの「叫び」の世界を存分に再現した、非常に素晴らしいサイトになっていると思います。
ぜひチェックしてみてください。
