3D シーンは質感たっぷり！日本語にも対応した Variable fonts の Solare スペシャルサイト
見れば見るほど芸が細かい
今回ご紹介するのは、Variable fonts で日本語にも対応している Solare のウェブサイトです。
フォント用に１つのスペシャルサイトがわざわざ WebGL まで使ってガッツリと実装されているというのがまずすごいですよね。
サイト内は縦スクロールのみで閲覧可能なシンプルな構造ではありますが、情報量も多く、隅々までしっかりと実装された素晴らしい完成度のウェブサイトとなっています。
リンク：
流体風のエフェクトもかっこいい
Solare という名前は太陽を想起させる響きがあると思うのですが、今回のサイト上でも太陽を模したようなオブジェクトが登場します。
サイトのロードが完了した直後に表示されるのがまさにそれで、黄色い巨大な太陽のようなオブジェクトがイントロシーンを華々しく彩ります。
太陽の表面は常にゆっくりとアニメーションしていますが、カーソルを動かしてやるとちょっとした流体風のエフェクトも見ることができ、より太陽っぽさが強調されています。
イントロシーンからスクロールしていくとどんどんシーンが変化していくような構成なのですが、最終的に太陽のようなオブジェクトが水面に入ると 3D シーン自体はいったんそこで落ち着きます。
そのままスクロール操作を続けていくと、続けて普通にコンテンツが下から出てきて一般的なウェブサイトと同じように内容を読み進めていくことができるようになります。
水面の表現や、背景に見える岩のオブジェクトの雰囲気など、背景の多くの部分はテクスチャで陰影をベイクしている形ですが全体的な「見え」はかなり高級感のある仕上がりになっています。
コンテンツを読み進めていくと、WebGL を使っていない部分もめちゃくちゃ気合いが入っていると言いますか……
全体的にすごく丁寧かつ大胆に実装されている感じがします。
ちょっと変わったレイアウトやアニメーションが多く登場しますし、いっそのこと完全に割り切って動画で表現されているセクションなんかも出てきます。
負荷を軽く抑えつつ、伝えたいことをうまくまとめていますよね。
より複雑な質感表現は動画で表現するという割り切りも。
WebGL を使ってインタラクティブな 3D シーンを作れることは、動画をただ見せるだけのコンテンツとは違った体験をユーザーに提供します。
しかし一方で、その代償として負荷が高くなってしまったり、また実装コストが跳ね上がってしまったりと、実際に運用に乗せようとするといろいろ難しい部分も出てきます。
今回のサイトはそのあたりすごくバランスよくいろいろな技術を取り入れていて、それでいて見た目や表現にも妥協は感じられず、すごく完成度が高いなと思いました。
ぜひチェックしてみてください。
