「TOMOMI SHIBAKUSA」の裏側に迫る #02
Web版「WHAT’S ON +」は、気になるデジタルコンテンツの制作の裏側を制作者ご本人に解説してもらう企画です。Webサイト公開記念となる初回は、2024年6月18日に発売された『Web Designing』8月号の「WHAT’S ON +」でも取り上げた「TOMOMI SHIBAKUSA」のWebサイトを制作したtote inc.の山口国博さんに、本Webサイトの技術的な側面を解説していただきました。
話してくれた人
山口 国博さん
インタラクティブなWebサイトの企画・デザイン・開発を得意とするデザインスタジオ、tote（トート）フロントエンジニア。音楽業界で多数のアーティスト特設サイトやオフィシャルサイトなどの制作実績多数。デザイン性を重視した演出系のサイトづくりに取り組んでいます。レトロゲーム好き。
目次
ドット演出の現実：延々と続く格闘の日々
「TOMOMI SHIBAKUSA」
プロジェクトを進める中で、私たちは、しばしば根本的な問題に直面しました。特に処理内容に問題が見つかった場合、思い切って大幅な変更を検討する必要があります。さまざまな課題にぶつかりながらも、その中でも特に大変だったのは、画面遷移時に使用されていたキラキラ光って見えるドットの機能です。
このドットの機能は非常に魅力的で、サイトに華やかさと視覚的な楽しさを与えていますが、このキラキラ光るドットの機能もまた、非常に重たい処理を必要とするものでした。画面遷移のたびにドットが光り輝き、滑らかに動くためには、多くの計算が必要で、その結果、システムにかかる負荷は非常に大きくなりました。ユーザーに快適な操作感を提供するためには、この負荷をどうにかして軽減する必要がありました。さまざまな方法を試みましたが、最終的にはドットの機能を極限まで落とすという大胆な決断を下さざるを得ませんでした。
特に立体感を出すための厚みや質感、そして複雑なアニメーションの動きは、CPUやGPUに大きな負担をかけます。そこで、これらの複雑な表現機能は処理負荷を軽減するために、現在では省略することになりました。
現在の抑えられた見た目とは裏腹に、かつてこの3Dオブジェクトは驚くほど多くの表現機能を備えていました。厚みやテクスチャ、そしてアニメーションなどの技術を駆使して、立体感や質感、模様、さらには複雑な動きまで表現することができました。そのオブジェクトは立体的なので見ているだけで楽しめるものでした。
軽量化作業は、非常に困難で忍耐を要するものでした。何度もテストを繰り返し、細部にわたって調整を行い、どうにか負荷と表現の折り合う点を見つけ出しました。しかし、その一方で、元々の華やかで美しいドットの効果を諦めることになり、少し寂しい気持ちもありました。今回は、ドットをランダム位置でたくさんつくるコードを皆さまにご紹介します！
〈次回へ続く〉6月26日水曜日更新予定
○ドットをランダム位置でたくさんつくる（抜粋・省略・整形）
let item = [];
for (let i = 0; i < consts.list.x; i++) {
item[i] = [];
for (let j = 0; j < consts.list.y; j++) {
if(Math.floor(Math.random() * 4) == 0) {
item[i][j] = new ItemListSpangleLayer({ render: container, callback: (args) => {}});
item[i][j].object3D.position.x = (i * (consts.item.radius * 2)) - (((consts.list.x * (consts.item.radius * 2)) / 2) - consts.item.radius);
item[i][j].object3D.position.y = (j * (consts.item.radius * 2)) - (((consts.list.y * (consts.item.radius * 2)) / 2) - consts.item.radius);
} else {
item[i][j] = null;
}
}
}
