本当の書籍のような動きとポップなスタイルが見事に組み合わされた清水建設の採用特設サイト

doxas : 2025-08-05 12:09:56

リアルと非リアルの共存

今回ご紹介するのは、清水建設株式会社の採用スペシャルサイトです。

いわゆる「本」をビジュアルのテーマとしたウェブサイトで、まるで実際の書籍を手に取るようなイメージで、清水建設という企業についていろいろ知ることができるようになっています。

バーチャルとリアルが不思議な温度感で共存しています。

今回のサイトは採用のために作られたものだということもあって、コンセプトが結構しっかりしています。

本棚から気になる本を手に取るように、同社の取り組みやその背景にある考え方などを知ることができます。

これ実際、比喩ではなく本当に、好きな本を選ぶような体験がウェブサイト上でできるように工夫されており、イントロの導入部分などもストーリー性を感じる作りになっています。

3D シーンは、WebGL などを実装したことがない方にはちょっとわかりにくいかもしれないですが、遠近感が控え目の平行投影で描かれます。

全体が平行投影であることで、どこか非リアルなかんじと言いますか、なんとなく空想の物語のようなポップな質感が演出されています。

現実世界とはちょっと違った視覚効果だからといって、いわゆるアニメや漫画のような完全な空想的表現に終止しているのかというとそうではなく、モーションの付け方などはリアル寄りの本物っぽい味付けになっています。

このリアルと非リアルのバランスが今回のサイトで個人的には最も注目したいポイントかもしれません。

この上のスクリーンショット、本がパッと開かれてページがめくれていく途中の状態をキャプチャしたものなのですが、まあこれ静止画で見ても意味がわからないですね……

実際に動いている様子は、まるで本当に柔らかい紙が風に吹かれてめくれていくかのような質感になっていて、作り込みがすごいです。

本を手に取り、それをまた本棚に戻す、という一連の作業をディティールにこだわって実装したという感じがあり、モーションのひとつひとつまで思いがこもっている感じがします。

ウェブ上に数多ある WebGL コンテンツの全体を見ると、おそらく割合としては透視投影（いわゆる遠近感のあるパースがつく）で実装されているものが多いと思います。

それだけに、透視投影の CG というのはまずそのパッと見たときの第一印象が強く、そのどこか現実感が希薄なイメージに良くも悪くも閲覧者の感覚が引っ張られるような気がしています。

今回のサイトではポップで楽しげな雰囲気を平行投影の CG で演出しつつ、本が取り出されたり戻されたりする際の動きやページがめくれるモーションではリアルな質感を表現しており、それらが上手に組み合わされているところが興味深いなと思います。