あれもこれもが波打ちます！インタラクティブな演出たっぷりな Mohammed Amine Bourouis さんのポートフォリオ

doxas : 2026-02-10 12:18:31

動きが多いサイトだが嫌味はない

今回ご紹介するのは Mohammed Amine Bourouis さんというウェブのフロントエンドでデベロッパーとして活動している方のポートフォリオサイトです。

サイト内に配置されたさまざまな要素が波打つように動きます。

けして複雑なモーションではないからか、動くものが多い割には変な嫌味な感じはあまりしません。もちろん人によってはうるさく感じてしまうこともあるかもしれませんが、個人的には演出の味付けの仕方が巧妙なのかなという感じがします。

今回のサイトは最初から最後まで、結構演出が多いです。

理路整然と情報が整理されているというよりは、いろんな演出も含めてエンタメ的に楽しんでほしい、そういう思想を感じるウェブサイトと言い換えてもいいかもしれません。

イントロで最初に出てくるのがギラギラの金色文字ですからね。

そういう心構えをして見てほしいというのがキービジュアルにも表れている気がします。

この上の画像を見ると、背景にうっすらと引かれているラインが途中でたわむように歪んでいます。

このサイトの上から下まで全体に、このラインは常に表示されていてカーソルなどで上をなぞってやると、それに反応してラインが歪みます。

また、スクロールなどの操作に対してもなにかしらのインタラクションが設けられているのが普通で、RGB シフトなども駆使しながら動きの大きな演出が次々に現れます。

サイトの全体を通じて、いろんなものが波打つように動くんですよね。

この波打つ動きって WebGL 実装の観点で言うと非常に安価と言いますか、手軽にできる演出なんですよね。なので古今東西いろんなところでこれを使った演出って使われてきたと思います。

そういったオーソドックスな演出を使うからこそ、あるいは、ある意味で多くのユーザーが見慣れている演出を使うからこそ、より演出としての見せ方の余白が広くなると言うか、どれだけ手を加えるかにセンスが問われるのだと思います。

今回のサイトは演出が多くて、冒頭にも書いたように人によってはうるさく感じたり、非常に無駄な要素が多くあるように思ったりするかもしれません。

個人的な感想を言ってしまうと、わたしは WebGL 実装を見慣れてしまっているので今回のサイトにうるさいという感じは抱きません。むしろ、これだけいろんなものが動くのにうるさくなりすぎてないな、ということを思いました。

それはたぶん、サイトのイントロの時点からこのサイトには演出が多くありますよ、という空気を盛り込んでおいて、そのうえで１つ１つ丁寧に実装しているからなんだろうなと感じました。