疑似立体表現などを駆使したこだわりのビジュアルがすてきな Karim Saab さんのポートフォリオサイト

doxas : 2025-06-25 12:09:26

スマートでかっこいい雰囲気

今回ご紹介するのは、ディレクターやデザイナー、そして開発者でもある Karim Saab さんのポートフォリオサイトです。

ディレクションからデザイン、そして実装まで自分でできるというのはなんともすごいですね。マルチな才能をお持ちの方みたいです。

今回のサイト上にもその多彩なスキルを連想させる、多様なスタイリングや表現が盛り込まれています。

今回のサイトには、WebGL を用いた表現がいくつかありますが、いずれも平面的な処理になっています。

立体を用いる必要はない、というのは全体としてのデザイン的な背景があっての判断なのだろうなと思いますが、それがここではうまく機能しているように感じます。

自分はデザインについては素人なのであまり知ったようなことは言えないのですが、もし今回のサイトに無理やりに 3D 表現を組み込んでいたら、きっとチグハグな印象になってしまったと思います。

アイコン部分など、ごく限られた要素が立体的に描かれている程度で、あくまでも表現の中心は 2D 的な処理・演出です。

トップページの冒頭、キービジュアルの部分はカーソルの位置にノイズを用いたマスク処理が発生するようになっていて、そのマスクされた部分だけがカラフルな色に演出されるようになっています。

こういうシンプルな見せ方で、平面なのに奥行きのある演出ができているというのは面白いですよね。

また、各種事例の詳細を記した下層ページでは、疑似立体表現が使われていますね。

この手の疑似立体は一時期すごく流行していて頻繁に見かけましたが、最近は目にする機会も少なくなりました。

静止画では伝わりようがないのですが、カーソルを動かしてやるとまるで風景やオブジェクトが動いて視差があるかのように演出できるテクニックですね。

WebGL 実装として、はじめて疑似立体的な演出をしていたのはわたしの記憶のなかではたしかトランスフォーマーかなにかの案件だったような気がしますが……

あれは最初に見たときは本当に驚きましたね。原理的には、深度を焼き込んだバッファを作って視差を作るわけですが、仕組み的に必要な素材がすべて平面なのでその手軽さとビジュアルの印象の良さが相まって一気に流行した感じだったと思います。

今回のサイトの疑似立体表現は、残念ながら品質としてはそれほど高くない感じがします。実際やってみるとわかるのですが、意外と深度マップを上手に作るの難しいですからね。