いかにも若さを感じさせるド派手でポップな雰囲気が楽しい Mike Wojo さんのポートフォリオサイト
マウスボタン押下で世界が一変！
今回ご紹介するのは、ウェブ開発を中心に活動している Mike Wojo さんのポートフォリオサイトです。
最初の印象から結構派手な演出でぐいぐい来る感じのサイトですが、フォントの書体のおかげもあって非常にポップで楽しげな雰囲気に満ちた、興味深いサイトになっています。
たぶんですが、実装は Pixi.js ベースだと思います。
3D というよりもどちらかというと 2D 特化な演出が多いですが、非常に楽しく面白いサイトになっています。
フォントなどの色使いも絶妙
今回のサイトは全体の構成としては結構シンプルです。
トップページのイントロ部分と、About ページなどのいくつかのテキストベースのページから構成されています。
共通するのは、どこか可愛らしい印象のフォントと、少しだけサイケデリックな感じのエフェクトたち。
まるで宇宙やカオスを連想させるような感じのビジュアルなのですが、フォントや、インタラクティブな演出の効果によって、とても楽しげな印象に仕上がっています。
サイトのイントロ部分では、WANDER の文字が宇宙空間に溶け出していくかのような、渦を巻くエフェクトが登場します。
静止画で見るとどうしてもわかりにくいのですが……実際に動いている様子を見ると、かなりカラフルに見えると思います。キャプチャしたものだけを見るとちょっと彩度が低いように感じるかなと思いますが、実際にはかなり色が激しく入れ替わるため、このくらいの彩度がちょうどいい感じです。
奥から手前に空間が伸びてくるような、そんな演出になっています。
そして、マウスボタンをクリックしたままホールドすると、インタラクティブに反応する演出を見ることができます。
下の画像の、上段が通常の何もしていない状態、下段がホールド中の様子です。
巨大な BAM! の文字がなんともポップな感じで面白いですよね。
実際にはこちらの文字も激しく点滅するように色が変化するので、動いているものを見てみるとまた違った印象に見えることでしょう。
これらのイントロ部分の他にも、About ページなどではまた少し違った感じの演出を見ることができます。
About や Contact といった、そのページのタイトルに相当する文字が背景で反射するような軌跡を描きながら描かれます。手前側のテキスト部分も、フォントのカラーリングなどが比較的くっきりとした印象に仕上がっており、メリハリのある表現がいい感じです。
ポートフォリオサイトは、その人の感性をそのまま表現できるという意味で、ウェブサイトのなかでも特に面白いジャンルに属していると思います。
今回のサイトは、彼の若さやエネルギッシュな雰囲気を存分に表現していますし、なによりフォントを含む演出全般の楽しげな感じがとても心地よいです。
カラーリングは一見ド派手、しかし実際には適切な彩度で病的な印象を持たせないギリギリのラインを突いているようにも感じます。このあたりのバランス感も、彼の才能の一端なのかもしれません。
非常に楽しい演出が興味深いサイトとなっています。
ぜひチェックしてみてください。
