収益が子どもたちのために寄付されるオンラインのセミナーコース Unleashing your Best のウェブサイト
仕事にも生活にもフォーカス
今回ご紹介するのは、Victor work さんが提供しているオンラインのセミナーコースに関するウェブサイトです。
日本だとどうしても自己啓発みたいなのは胡散臭いものとして捉えられがちですが…… アメリカとかでは、こういう生き方とか働き方みたいなのが結構しっかり受け止められているようなイメージがあります。（あくまでも個人の印象なので実際は違うのかもしれませんが……）
今回のサイトはそのオンラインコースの概要がある程度つかめるような内容になっていますね。
リンク：
WebGL はインタラクティブな演出に特化
今回のサイトでは、普通に生活し働いている人々を模した、人物の肖像っぽい演出がいくつか登場します。
それらの「人」を表現する部分は SVG で実装されていて、WebGL 一辺倒という感じでもないんですよね。
しっかり演出の切り分けというか用途に応じた取捨選択がされていて、よく考えられていますね。
この上の画像でいうと、人物の肖像の下にまるで波紋のように幾重にも重なったラインが描かれていますが、この部分は WebGL ですね。
こういうシンプルなライン状のオブジェクトを使った演出は、スクリーンショットは撮っていませんがサイトのイントロ演出などにも用いられています。
シンプルだからこそ今回のサイトのようなデザインとうまくマッチしていていいですね。
たぶん、今回のサイトのような内容で演出までゴリゴリだと、ちょっとうるさい感じになってしまうと思うので演出の温度感としてすごくちょうどいいバランスだなと感じます。
個人的にちょっと感じたのは、こういう系だったら WebGL 描画のアンチエイリアスは普通に有効にしたほうがいいのでは、というところですかね。
CG や WebGL 実装をある程度しっかり経験していればアンチエイリアスが負加増につながることはまあ想像はできることですし、納得できることではあるのですが、今回のような線描画として表現するパターンなのであれば線の綺麗さにはもう少し気を配ってもよかったんじゃないかなというのは感じました。
こういうのは、ウェブデザインの文脈でピクセルレベルでレイアウト調整することに意味があるのか、みたいなのと同じで、見る人によってはまあ気にならないことなのかもしれないですが……
WebGL 使い的にはちょっと気になっちゃいました。
セミナーコースの収益は子どもたちのために寄付されるということですが、こういった専用のサイトまで用意して取り組んでいるというのはなかなかすごいですよね。
WebGL の実装としてはライン状のオブジェクトを用いた比較的シンプルな表現が中心ですが、途中にも書いたように SVG との演出上の使い分けなど、ウェブサイト全体の設計としてはかなり丁寧に作られている印象です。
BGM や効果音の使い方もかなり考えられており、特にイントロの演出は迫力がすごいと言いますか、いろんな意味ですごい圧があり、単純に事例としてこういう表現の仕方もあるんだなというのは参考になるのではないでしょうか。（めちゃくちゃポジティブ・アグレッシブなので、若干人を選ぶかもしれませんが……）
ぜひチェックしてみてください。
