アルファベットなどを独特なライン描画を用いて表現する不思議な世界観！ Wonderland のウェブサイト
オランダのデザインスタジオ
今回ご紹介するのは、Wonderland というオランダにあるデザインスタジオのウェブサイトです。
彼らが強調するのは UX デザイン。そのユーザー体験までを踏まえたサイト作りなどが評価され、アワードの受賞歴なども多くあるデザインスタジオですね。
ウェブサイトは、ワンダーランドのその名にふさわしくどこか不思議な印象……
ラインを用いて表現される世界観はとても不思議な感じになっています。
ロードに失敗することもあるので注意
一番最初に書いておくと、このサイトはたまにロードが失敗してしまうことがあり、何度かリロードしているうちに描画が始まることがありました。
OS のせいなのか、あるいは通信環境のせいなのか……ちょっと細かく原因までは調べていませんが、もしロードが失敗して画面がまったく更新されないときは、何度かリロードしてみるといいでしょう。
きちんとロードが完了すると、Wonderland の頭文字である「W」をあしらったイメージが、こちらもライン描画をベースにしたレンダリングで表示されるはずです。
ロードが終わった直後に、W の文字が表示されたあと遷移する画面では、地面の部分がぐにゃぐにゃと波打つような、そんな不思議な世界が描かれます。
このシーンではマウスカーソルの位置に対するインタラクションと、マウスボタンのホールド状態によって起こるインタラクションが仕込まれています。
マウスを動かしたり、あるいはボタンをホールドしたままにしたりすると地面の波打つ密度が変化したりして、ライン描画の不思議な質感を楽しむことができるでしょう。
そして、このサイトの表現のなかで極めて興味深いのが Work のページで表示されるアルファベット群です。
このサイトには円柱形の、要はシリンダー型のオブジェクトがたくさん登場するのですが、それらが宙に浮いて散らばったような画面が最初に表示されます。
そして、マウスで案件名の上にカーソルをホバーさせると、その案件の頭文字の形に、シリンダーがちょうどよく組み合わさるという演出を見ることができます。
言葉で説明するのは難しいのですが、一見バラバラに散らばっているだけのシリンダーが、見る角度によっては見事に文字の形にぴったりと合わさる様子は必見モノです。
単にオブジェクトをラインで描くだけでなく、微妙に手書きのように線画揺らいだように描かれることで、どこか暖かみのある印象になっているのが面白いですね。
また、3D であることを活かした、アルファベットの表現も見事で、これは静止画だけだとどうしてもうまくイメージしにくいと思いますので、ぜひ本物を見てみていただきたいところです。
冒頭でも書いたとおり、このサイトはどうしても読み込みに失敗することがあるようで、その点だけは注意していただけたらと思います。
非常に特徴的で、ワンダーランドの社名にぴったりとハマる世界観を表現しているサイトだと思います。
ぜひチェックしてみてください。
