
どこか日本へのリスペクトを感じる WebGL を活用したビジュアルが熱い Ameen Abdullah さんのポートフォリオ
読み上げ機能の声が……
今回ご紹介するのは、クリエイティブデベロッパーとして活動されている Ameen Abdullah さんという方のポートフォリオサイトです。
サイトの冒頭、入口のところで英語と日本語が選べるようになっているのですが、この選択肢のどちらを選んだかによって、サイト内のナレーションが変化するようになっています。
英語版はどうやらご本人? というかんじもしますが、日本語版は女性の声優さんのようなボイスで印象の落差がだいぶあります笑
リンク:
Ameen Abdullah | Creative Developer Portfolio
技術的にもおもしろい
今回のサイトは、全体的に WebGL で実装された部分が多く演出がもりもりなタイプです。
トップページの冒頭シーンは、どこか幻想的な感じでとても美しいビジュアルをしています。
画面の下のほうに時間帯を切り替えることができるボタンがあり、朝と午後でだいぶ印象が変わります。

また、このシーンからそのままスクロール操作を行うことでコンテンツが切り替わっていくのですが、この切り替わる際のトランジションもちょっと変わっていますね。
シーンがまるごと、そのままいったん描画が停止した状態で静止画となり、そのままスクロールで動いて画面からはけていくという感じです。
同時に画面の下からは別のシーンがせり上がってきて、それが画面にぴったりはまるところまでスクロールするとそのシーンがおもむろにインタラクティブに動くようになります。

各シーンは、それぞれなにかしらの WebGL による 3D シーンとなっており、RGB ディストーションや流体エフェクトなど、見た目にも派手なエフェクトが掛かっています。
また冒頭にも書いたように各セクションごとにナレーションがついているのですが、日本語版にしているとなんかすごく……
複雑な気持ちになります。
いや、けして悪い意味ではないのですが、可愛らしい女性の声でナレーションされるとやっぱり印象が変わってきますね。

今回のサイトのような WebGL を用いたウェブサイトの場合、ロード時や描画時の負荷が結構問題になることが多いと思います。
これは想像ですが、今回のサイトの場合はそういった負荷や負担みたいなネガティブな要素はいったん考えないことにして、ビジュアル偏重で作っているのかなという感じがしました。
ナレーションの音声再生など、あまり見かけない仕組みも面白いと思います。
ぜひチェックしてみてください。