
パースのないビジュアルを駆使した無人サービス関連事業を展開する Elecctro のウェブサイト
ポップな味付けがいい
今回ご紹介するのは Elecctro という無人機やサービスの開発を行う企業のウェブサイトです。
無人系のサービスに特化しているってすごくおもしろいですよね。
日本はよく自動販売機大国みたいに言われますが、無人系のサービスは今後どんどんニーズが増えていきそうですし、おもしろい事業だなと思います。
ウェブサイト上には多彩な事業領域が上手にまとめられています。
リンク:
あえてパースをつけないことでうまれる質感
今回のサイトでは、WebGL を用いて 3D 表現をしている部分がいくつかあります。
ただ、同じ 3D モデルを使っていても、その描画スタイルがパース有り・無し両方使い分けされているのがおもしろいです。
トップページ部分は、パースのない平行投影で描画されています。

この図を見せられると、パースを掛けない平行投影が生きる場面があるんだなっていうことがわかるのではないでしょうか。
一般的な three.js や 3DCG の文脈だと、まずはパースの掛かった透視投影で描かれる CG を前提にすると思うのですが、平行投影には独特な質感というか雰囲気があって、これを上手に使いこなせるのはすごくかっこいいなと個人的には感じます。
いろいろなプロダクトが一覧でまとめられているトップページからは、クリックしてその簡単な概要を確認できるようになっています。

さらに、ページ上部にあるヘッダに並んでいる Projects の部分から、より詳しい詳細ページへ遷移することもできます。
この詳細ページがまたおもしろくて、こっちの WebGL 実装は平行投影じゃなくて透視投影で描画されているんですよね。トップページとは打って変わってパースが掛かった絵になっています。
この両者の使い分け、どこまでデザイン的な意図があってやってるのかわかりませんが個人的にはすごく興味深く感じました。

サイト全体のテーマカラーがあって、それを CG にもうまく反映している部分などすごく全体としての一体感があります。
WebGL の文脈で平行投影とか透視投影とかの話をするのって、開発者であればまあ普通にあることかなと思いますが、デザインの文脈からそういったことにまで考えが及ぶのって、デザイナーさんであれば当然なんですかね…… だとしたら本当にすごいことですよね。
たくさんの 3D モデルを使っているので、多少ローディングに時間は掛かります。一度読み込みが終わってしまえば、閲覧体験は比較的スムーズですね。
ぜひチェックしてみてください。