WordPress の作例をカラフルで美しいカレイドスコープを通して感じる Qode Kaleidoscope が面白い
ひとつの側面が切り出されて見えてくるもの
今回ご紹介するのは、Qode という WordPress を柱にビジネスを展開している組織のウェブサイトで、カレイドスコープを利用した演出が特徴的な作品です。
半分は私個人の推測ですが、WordPress のテーマ作成や、実際に WordPress を利用したサイト作成を行う際に、彼らが特に色やその組み合わせにこだわって日頃から制作を行っているのだと思います。
今回のサイトでは、そんなこだわりの色の組み合わせを、万華鏡のように表現することでより深く考察したり楽しんだりしてみようということなんじゃないかな……たぶん……
リンク:
Qode Kaleidoscope - WordPress through a lens of color
一瞬の美しさに思わず見入ってしまう
一般的な万華鏡もそうだと思いますが、一部を切り出して胸像として描画するこの手の手法では、もともとのイメージが持っている印象とは全く異なる風合いが偶然に出現することがあります。
また、常にシーンは変わり続けていくので、一瞬感じた美しさや感覚も、次の瞬間には過去のものになってしまってどんどん風景が変わっていきます。
この刹那的な美しさや楽しさこそが、今回のサイトの最大の魅力かなと思います。
トップページでは、まず負荷を選択するフェーズがあり、そのあと簡単なイントロ演出が用意されています。
このワンシーンだけ見ると、一瞬 Google のサイトかなと思っちゃいますが、今回のサイトは全体的にマテリアルデザインっぽい、あまり色彩にグラデーションの掛かっていない表現が多いですね。
各作品のページでは、画面の中央にカレイドスコープが、そしてその周囲にはサークル状に事例の名前が配置されています。
シーンはドラッグ操作などで次のページへの遷移などができますが、基本的には放置しておいても一定時間で次々と別の作品へ移っていきます。
逆にじっくり眺めたい場合は、画面の右上のほうに自動ページ送り停止のボタンがあるので、クリックするとよいでしょう。
カレイドスコープなので、めまぐるしく印象や風合いが変化するのが本当に面白いですね。
直線、曲線、暖色、寒色などなど、様々な要因が変化するので、ずーっと見ていられるような感覚になります。
ちなみに、カレイドスコープの部分をクリックしてやると、元になった事例の紹介を見ることができるようになっています。
どういうコンセプトアートがカレイドスコープとして表示されていたのか、答え合わせというわけじゃないですが確認できるようになってる感じですね。
立体的な表現こそ出てきませんが、サイト全体のインタラクションもスイスイと心地よい感じですし、ビジュアル全体の印象として完成度が高いサイトだなと個人的には感じました。
曲線と直線をうまく組み合わせたレイアウトやページのルーティング、アニメーション等も見事です。
WebGL 的な見どころというのはそこまで特別なものはないのですが、ところどころでホワイトノイズを利用した演出があったり、要所要所で個性的な演出に WebGL が活用されています。
ぜひチェックしてみてください。