アスキーアートのような表現が WebGL 以外の演出・装飾にもマッチした Good Fella のウェブサイト

doxas : 2026-06-02 12:10:19

兄弟で営むスタジオ

今回ご紹介するのは、Good Fella というスタジオのウェブサイトです。

サイト上には二人の男性がたびたび登場するのですが、どうやら兄弟でスタジオを運営しているみたいです。

実の兄弟で制作会社を運営しているというのは珍しいことのようにも感じますが、サイト内には二人を撮影した写真や、それを連想させる実装などがたびたび登場しますしすごく仲の良い兄弟なのでしょうね。

今回のサイトでは、WebGL 実装はアスキーアートのような表現に用いられています。

自分が見た範囲では他には WebGL を使った演出はなさそうに思えましたが、CSS などを活用した演出は無数に含まれているので、サイト全体として見てみると演出は多めのウェブサイトかもしれません。

アスキーアート部分は、カーソルの動きに応じてインタラクティブに反応する他、クリックすることでも変化が起こるようになっています。

サイトを開いた直後の状態だと、この記事のトップ画像のようにオレンジ色っぽい感じの文字によってグラフィックスが表現されています。

カーソルをホバーさせると、そのカーソルの周辺だけが違う色に変わるようになっているのですが、ひとたびクリック操作をしてやると、その色の扱いが反転します。

もともとのオレンジっぽい色は消えてカラフルな姿に変わる感じですね。

スクリーンショットではちょっと見えにくいかもしれませんが、じっくり観察してみるといろいろおもしろいと思います。

冒頭のキービジュアル以外の部分で言うと、各ページの最下部にあるフッター部分にも同様の演出があります。

アスキーアートで表現されたふたつの手が描かれていて、これ元の素材は絵画だと思いますが、なにか仲の良い兄弟を連想させるようなビジュアルでそういう点でも見事にマッチしているように感じます。

クリックするとカラーが反転するような演出は、フッター部分でも同様に実装されているようです。

キービジュアル部分をよく観察しながらカーソルを動かしてみるとわかりますが、微妙に深度マップを使った擬似 3D っぽい表現も盛り込まれているんですよね。

これなにかのライブラリやフレームワーク的なものを使っているのかもしれないですが、すごく質感のよいアスキーアートで見た目がいいかんじです。

WebGL を使っていないところにも CSS などを駆使した無数のエフェクトが実装されていて、とにかくいろんなものが動きます。そういうところも、全体として見ると統一された質感を持っているような感じがします。