2019年6月3日にLINEスタンプでも人気のキャラクター「もちごま」の公式サイトをキャラクター作者momiの協力・監修のもと弊社で制作しました。

今回はその制作の裏側を少しご紹介しようと思います。

< point1 > アニメーションするシャチやクジラ

本サイトはページの一面をWebGL(three.js)で表現しています。そのため、海の奥行きがとても綺麗に表現することができました。そして一番目につくのはやはり、素早く海中を泳ぐシャチや、大きく迫力のあるクジラかと思います。こちらは、ページをスクロールして閲覧する際に、自然に画面内に現れるようスピードやフェードイン・アウトの調整をしています。

< point2 > マウスやタッチに追従する魚の群れ

背景にはたくさんの魚が泳いでいますが、これにはBoidsという群の動きを模倣するアルゴリズムを使用しています。GLSLを用いたGPGPUで処理を行なっているため、非常に軽く、大量の魚を描画することができました。
さらにマウスやタッチといった、ユーザーからのアクションに反応するような動きにすることで、より長時間サイトを楽しめるようにしています。

※もともとの3D的な表現を、イラストタッチの表現するように工夫しました。

< point3 > スクロールで海の深さを感じさせる

海の表現はもちごまの柔らかさや可愛らしさを表現する上でとても重要だったのですが、日の光が射す透明感や、深く潜るほど暗くなるような水の表現は、一枚の絵だけではなかなか表すことができませんでした。
そこでGLSLを用いたポストプロセスを画面全体にかけることで、より海らしい表現を実現しました。
スクロール量を一つのパラメータとして、スクロールが少ないうちは全体を明るく、日の光が海の中まで照らすようにし、また、スクロールが多くなるにつれて光を減らし、海の色を濃くすることで、海底らしさを再現しています。

もちごまが泳ぎ回る海の情景を感じていただけるよう、こんな工夫を随所に盛り込みました。

PCやスマートフォン、それぞれの環境でも閲覧していただけるようバッチリ作り込んでおりますので、ぜひサイトへアクセスして、もちごまの世界を楽しんでみてください！

■「もちごま」公式サイト
https://mochigoma.com/