コクヨデザインアワード2022 バーチャルトロフィーサイト制作

完成サイト

https://www.kokuyo.co.jp/trophy2022/

コンセプト

コクヨデザインアワード2022のテーマ『UNLEARNING』に即して在り方を新たにデザインした、リモート時代でも喜びを分かち合えるバーチャルなトロフィーです。応募総数と同じ1,031個の要素を持ったトロフィーが1ヵ月に1つずつ完成し、1年間で12種類のトロフィーを楽しめます。全ての変化を見せた1年後には、NFTを付与した3Dデータが受賞者に贈られます。

Webサイトスクリーンショット

本件への弊社の取り組み

「365日、日替わりで3Dモデルを表示するWebサイトを制作したい」とのご依頼を受け、2022年1月より開発に着手し、約2ヶ月間、毎週プロトタイプをクライアントと共有しつつ、全体の設計・細かなサイトの導線・インタラクションなどを作り込んでいきました。

Webサイト全体の制作のメイン技術としてNext.js(React.js)を使いつつ、3Dモデルを表示する部分には、Googleのmodel-viewer を用いました。

品質保証について

また、納品物の品質保証のための取り組みとして、本件では少し特殊な趣向を凝らしました。

model-viewerがWeb Componentsで作られた、サンドボックス化されたフレームワークであること、またそのフレームワークがロードする対象の3Dモデルファイルが365日間変化し続けるという特性があることから、365日全ての日において、製作者の意図した状態でエンドユーザーのデバイスで確実にレンダリングされるかどうかということをテストするために、ヘッドレスブラウザ(playwright)上で365日分(+うるう日)の日付をシミュレートし、スクリーンショットを撮るプログラムを作成し、納品時にクライアントと共に全てのスクリーンショットを肉眼で検品することで、バーチャルトロフィーのデザインが意図通りの変貌を遂げることを確かめることができました。