多層的・重層的な表現が随所に見られる抽象と具体の混在がおもしろい Penguin Capital のコーポレートサイト

doxas : 2026-09-02 11:59:50

ウェブサイトのなかに多数のレイヤー

今回ご紹介するのは、アセットマネジメントや不動産関連事業を展開する Penguin Capital という企業のウェブサイトです。

今回のサイトは最近リニューアルされたものみたいなんですが、ビジュアルにもすごく深い意図が込められているような感じがあり、見ていて非常に興味深い事例だなと感じます。

WebGL を用いている部分もそうでない部分も、すごく多層的で凝った作りになっています。

わたしはあまり詳しく知らなかったのですが、ファーストペンギンという概念があるそうです。

これは、たくさんの群れで行動するペンギンのグループのなかで、真っ先に、天敵がいるかもしれない海に飛び込んでいくペンギンを指す言葉らしいです。

もうこの逸話の時点で深みがあって非常におもしろいなと感じるのですが、ここから連想させるようなさまざまな仕掛け、ビジュアルが今回のサイトにはたくさん施されています。

トップページの演出は、同社のロゴマーク、ファーストペンギンを模したそのシルエットを表現したものになっています。

いくつかの矩形領域があり、そこを通して違った質感のロゴマークが見えるという非常に凝った作りです。

このキービジュアル１つで、本当に多面的・多層的なものを表現していますよね。

同じように、サイト内にはレイヤー構造がたびたび現れます。

レイヤー構造的に表現しているのは、サイト全体としての、なにか一貫したコンセプトみたいなものなんですかね？

ちょっとデザイン的にどのように落とし込まれているのかまでは自分の知見・知識では理解しきれなかったのですが、間違いなく、意図を持って作られているなというのは素人なりに感じます。

WebGL を使って表現されている部分もそうでない部分も、同じルールというか意図や思想の上で構築されている感じがあって非常にかっこいいです。

キービジュアル部分の表現は、複数の質感を１つの画面内で同時に表すことが目的なのかなと想像しますが、しかしこういったインタラクティブ性の高い見せ方というのは作るのなかなか大変そうですね……

ただ今回のサイト上ではそれらはうまく調和が取れている感じがあって、無理にまとめたというよりは、自然と一体感を持って表現できているなと感じました。

ポストエフェクトなどを駆使しなくても、こういった形で複雑な演出をすることができるということを示した貴重な事例だなと思います。