卓越したアニメーション表現が見事！ IT 業界を様々な形で変革へと導いた株式会社パラダイムシフトのウェブサイト
丁寧な仕事に思わず脱帽！
今回ご紹介するのは、株式会社パラダイムシフトのコーポレートサイトです。
IT 業界と関わりの深い企業さんということもあり、今回のサイトではパラダイムシフト社が手掛けてきた、文字通りの「パラダイムシフト」が手書き風のイラストで年代別にまとめられています。
もちろん、企業情報や提供しているサービスなどのコーポレートサイトとして必要な情報も見事にまとめられており、必要な機能と美しいビジュアルが一体となったレベルの高いサイトとなっています。
リンク：
文字やイラストに対する揺れるような表現
今回のサイトでは、トップページで最初に発生するイントロ演出の部分から、積極的に WebGL を利用した演出が取り入れられています。
ページのロードが完了すると、まずは画面の奥のほうから様々なイラストが飛び出してくるような演出が入ります。
これは歴史を一足飛びに駆け抜けるような爽快さが感じられる演出になっていて、そのままトップページが流れるようなスムーズさで表示されます。
恐らく、大抵の人はこの最初のイントロ演出の時点で、このサイトが持つ独特な雰囲気をしっかりと感じることができるのではないでしょうか。
印象的な手書きのイラストのそばに、西暦で数値が表示されているのがわかるかと思いますが、これがパラダイムシフト社がそれらの事業に関わったタイミングを表しているのでしょうね。
かなり早い段階から、IT に携わってきた企業であることがトップページからしっかり伝わってきます。
また、上の画像では文字（アルファベット）がグネグネと波打つように歪んでいるのがわかるかと思いますが、今回のサイトではこの波打つように揺れる動きが演出のベースとして随所に使われています。
個人的にすごく印象的だったのが、この揺れ動く文字の演出と同時に使われる、背景が浮き上がってくるようなトランジション演出です。
こちらは、もしかしたらすごくさりげない演出なので気が付かない場合もあるかもしれませんが……
よーく観察してみると、ノイズを使って濃淡を付けた状態を、うまくアルファマップとして利用してインクが染み出してくるかのように徐々にイラストが鮮明になっていく感じですね。
これはすごく美しい演出だと思いました。
当サイトで WebGL 実装を紹介するときは、どうしても静止画での紹介になってしまうので、そのサイトを実際に閲覧しているときに感じることができる「動き」や「質感」を伝えることが難しいです。
今回のサイトの場合、特にその「動きや質感」にこそ演出の本質的な部分があるように思いますので、ぜひ実際に動く様子を見てみてもらいたいなと感じる実装だと感じました。
WebGL を使っている部分に限らず、ナビゲーションやメニューの表示など、あらゆる面でハイレベルな実装になっていると思います。
ちなみに、今回のサイトのディレクションは株式会社スタジオ ディテイルズさん、そして WebGL の実装は池田さん（ikeryou.jp）が担当されたそうです。このタッグは……毎回やばいですね……
ぜひチェックしてみてください。
