モノづくりへの想いを見事に WebGL で再現！ 工作マットを想起させるデザインも秀逸な株式会社 YOKOITO のウェブサイト
シンプルでもコンセプトがしっかり伝わる
今回ご紹介するのは、日本の企業のウェブサイトです。
先日リニューアルしたという株式会社 YOKOITO さんのウェブサイトなのですが、なんとこちらのサイト @yulily100 さんと @amagitakayosi さんご夫婦がふたりとも制作に携わっているそうです。
全体のディレクションは YOKOITO 所属の @fugu0510 さんとのことですが、デザインや実装を夫婦ふたりで手がけているというのはなんとも素晴らしいですね。
工作マットをイメージさせるシーンにも工夫がいっぱい
今回のサイトの WebGL 実装を行った amagi さんは、昨年の GLSL スクールに講師として登壇してくださったこともありますので、当サイトをよくご覧いただいているみなさんは、もしかしたら既によくご存知かもしれません。
今回のサイトでは、彼の得意とするシェーダを利用した派手な演出とはちょっと違った、柔らかい印象の温かみのある WebGL 作品を見ることができます。
ページのトップ部分の背景にそれが使われているのですが、モノづくりにこだわりのある企業さんのページということもあって、それで工作マットっぽい印象のデモになっているのかな……
時間の経過と共にラインが形を変えていくのですが、柔軟で枠に嵌らない、そんな広がりのある世界を感じさせる作品だと思います。
次々と姿を変えていくライン状のオブジェクトの動きがとてもおもしろいですね。
微妙にマウスカーソルとのインタラクションも加えられていて、バネが伸び縮みしているような、独特のアニメーションが使われています。
よく見ると、ポストエフェクトとしていくつかのテクニックが用いられていることにも気がつくと思います。
ホワイトノイズを使ってクラフト感を出したり、本当に微妙にですが、若干ビネットのような演出も入っていますね。シンプルなシーン構成だけに、こういったさりげないポストエフェクトが地味にシーン全体の雰囲気と質感を向上させているように思いました。
私自身は、パートナーと一緒になにか創作したり制作を行ったりといった経験が無いのですが、こうやって夫婦ふたりで自分たちの得意な部分を生かしながら仕事できるっていうのはとても素晴らしいですよね。
WebGL の実装部分ばかり解説してしまいましたが、サイト全体のデザインも比較的シンプルで、伝えたいことがぼやけることなく、ストレートに目に飛び込んでくるような、そんな印象を受けました。
WebGL のシーンも、シェーダを活用しつつかなり少ない要素だけで描かれていてセンスを感じさせます。
ぜひチェックしてみてください。
