計測装置の構造がまるで取扱説明書のような線画タッチで描かれる Alphane Labs のウェブサイト

doxas : 2025-08-28 12:06:36

ありそうであまり見かけない実装例

今回ご紹介するのは Alphane Labs という計測機器の製造・販売などを行っている企業のウェブサイトです。

商業用の分析装置などに限らず、電化製品などの説明書でもシンプルな線画でイラストが描かれていることはよくありますよね。

今回のサイトではまさにそういった雰囲気の 3DCG がリアルタイムに描き出されます。この手の表現ってありそうで意外と見かけないですよね……

今回のサイトの 3D 表現は、いわゆるポリゴンを用いた普通の 3D 表現に、さらに枠線のようなラインを重ねて描画しています。

こういった漫画やイラストのような線画的な表現って 3D ではあまり見かけないだけに、なんかすごく個性的な印象で目に映ります。

丸い物体のシルエットだけが浮き上がっていると、これはこれで独特な風合いを感じますよね。まるでイラストのように見えるかもしれませんが、リアルタイム CG です。

ページをどんどんスクロールしていくと、よりエッジの効いた、直線的なラインを持つオブジェクトも出てきます。

これがまさしく計測機器の一種なのだと思うのですが、本当に取扱説明書から飛び出してきたような見た目です。

独特な質感で、個人的にはこういう表現って本当にかっこいいですし好きです。

あえて平行投影を使っているところも見事としか言いようがありません。

さらにスクロールしていくと、シーンが動的に変化していきます。

途中、大きさを表すインターフェースが出てきたり、あるいはテキストがポップアップするようにシーンに重なってきたりと結構動きの要素が多くあります。

シーンはいろいろ変化していきますが破綻しているように感じる場面は皆無で、機能性や特徴をしっかりとウェブサイト上で説明しています。

この手の表現、つまりラインを効果的に使った表現って、一見すると簡単そうに見えるかもしれません。

というのも、誰もが幼少期にはこうやってラインを使ってイラストや図を描いた経験を持っているはずですし、そういう意味で一般的な CG と比較してある種、原始的な外観でもあるからです。

ただ CG の経験がある人ほど、実はこの手の見た目を実現するのって結構面倒だということがわかります。その面倒さの部分もあって、こういう表現ってあまり見かけないというのもあるんでしょうね。

実際、使い所が難しいというか、サイト全体のデザインのトーンと一致していないと使いにくい表現だと思うんですよね。その点、今回のサイトは全体として非常にまとまりのある仕上がりになっていると感じました。