概要

2001年3月28日に 浜崎あゆみ の初アルバム 「A BEST」が発売され、 15年の時を経た2016年3月28日にリマスター盤『A BEST -15th Anniversary Edition-』が発売されることとなった。 「SHARE YOUR MEMORY」は、その連動企画として制作された、浜崎あゆみと共に時代を歩んだファンの思い出が「A BEST」のジャケットに埋め込み、一つのモザイクアートにするという作品である。 思い出は Twitter を通して投稿され、ユーザのアイコンがモザイクに使用された。 浜崎あゆみ自身の思い出もモザイクの一部として使用され、アーティストとファンを結ぶ場としても機能している。

担当範囲

ユニバはフロントエンドを担当し、タイトなスケジュールの中でバックエンド側と仕様の調整をしながらコンテンツを仕上げていった。

サーバ側で情報をテンプレートに埋め込むか、フロントエンド側で情報を書き換えるか、など制作アプローチは進行していきながら調整し、最終的に全ての情報をAPI経由で取得するアプローチに変更し、フロントエンドとバックエンドをあえて密にさせないことで、制作のスピードを速めた。

表現上のこだわり

ポイントはモザイクアートの良さでもある全体部と詳細部、各モザイク部の切り替え表現である。 制作当初は CSS の Transform プロパティを利用して実現させようとしたが、ほとんどのスマートフォンでレンダリングのパフォーマンスが出ず断念。 WebGL をベースとした表現に移行し、ユーザが満足できるパフォーマンスを得られる仕様とした。(WebGLの描画には 2D 表現を得意とする pixi.js 、アニメーションの制御などは Tween.js を採用。)

それだけではなく、 ユーザがモザイクをタップすることで表示される思い出のtweet部分だが、twitter embedを用い情報を取得し、DOMを吐き出す形で表示している。 この際、画面にはWebGL部分とDOM部分が混在することになるが、DOMを表示させるタイミングでアニメーションを連動させることで、WebGLとDOMの境界線をなくし一体感を持たせた。

これらの演出は細い線やキビキビした動きを中心にしており、ウェブっぽさの中に 浜崎あゆみの持つ洗練さをイメージさせるように努めたのもこだわりの一つである。

また、表現の部分で苦戦したスマートフォンだが、多様な画面サイズにおいては、WebGL と CSS の両方向から折り合いをつけ、画面サイズにかかわらない表示も実現させた。

まとめ

記事の執筆時点では 5,700 人近くのユーザが参加しており、それぞれが 浜崎あゆみとともに歩んだ人生への思い思いのメッセージを投稿している。 弊社社員の多くはちょうど浜崎世代だということもあり、「SHARE YOUR MEMORY」リリース後、弊社全員で浜崎あゆみ出演の音楽番組を見たのですが、きっと参加してくださった多くの人も同じ放送を見ていたのでしょう。 この案件を通じて改めて「A BEST」は素晴らしいアルバムだと再認識させられました。

この記事を読んだあなたも是非「あゆ」との思い出を「SHARE YOUR MEMORY」に投稿してみてはいかがでしょうか。

(文：Jun Mori、編集：Yu Kanakura)