［KOKUYO Vol.5］

追求したのはWebGLの

品質と最適化。

飛び出すノートに込めた、

コクヨの「全体像」と「好奇心」

ノートをめくるたびに次々と飛び出す、コクヨの“モノ”と“コト”。
ワクワクする世界が広がります。このスペシャルコンテンツは、単に120周年を記念する派手なプロモーションのためではなく、コクヨの過去・現在・未来を繋ぐ思想そのものを表現するために企画されました。

CD・ADの米道は、こう語ります。

「スペシャルコンテンツで表現したかったことは明確に2つ。
概念図の全体像と『好奇心を人生に』というメッセージです」“概念図”とは、プロジェクト初期の方針策定で定めた「コクヨとは何か？」を俯瞰する下記の図のことです。

コーポレート、プロダクト、マガジンの各領域では、それぞれのスポットを表現することはできていましたが、唯一表現できていなかったのが概念図の全体感。
コクヨの全体像を体験として見せることができる場所は存在していませんでした。
そして、コクヨのコーポレートメッセージでもある「好奇心を人生に」これらをいかにしてコンテンツに落とし込んでいくかが、企画時の肝となりました。

コンセプト企画・設計の段階で検討された案は、20案以上。その中で私たちが最終的に選んだモチーフは「キャンパスノート」、構想の原型としてあったのが「飛び出す絵本」です。

ノートに書かれたアイデアが立体となり、飛び出し、人や社会と溶け合っていく——。

これは、コクヨが120年間続けてきた「人を想い、アイデアをかたちにし、モノやコトとして社会に届ける。それらが人びとに好奇心をもたらし、豊かな社会を形成する」ことのメタファーであり、コクヨでしか成立しないコンセプトでした。

「飛び出す絵本」というコンセプトが固まり、“好奇心”というテーマをどうコンテンツ内に体験として落とし込むのか。
その議論の中で生まれたのが、「AIグラスのようなものをかけると、ノートに描かれたものが立体的に飛び出して見える」というアイデアでした。
現実世界とワクワクが具現化された世界をつなぐ “フィルター”としての発想は、コクヨの新VIである594度の「斜めのライン」による世界の切り替え というコンセプトに発展しました。

コピーライティングを手がけてくださったのは小藥元さん。
コクヨの120年の歴史、未来のビジョン、社員インタビューなどの膨大なインプットをもとに、物語を紡いでいってくださいました。
ストーリーは「過去・現在・未来」を辿る形で構成されています。帳簿、文具、家具、空間、通販、THE CAMPUS、そしてコクヨの未来から構成される7つのセクション。121年目の挨拶文へと繋がっていきます。

イラストレーションを担当いただいたのは、髙橋あゆみさん。数百点に及ぶオブジェクトを、コクヨらしい「ワクワク感」「色彩の鮮やかさ」で描いていただきました。

CGアニメーションを担当いただいたのは、MORIE Inc.のみなさん。動きのイメージを米道・井出中心にお伝えしイラストに動きをつけていきました。実装時も密な連携を行なっていただくことで、イメージ通りの世界をつくりあげることができました。

音楽を担当いただいたのは、有村 崚さん。
7つのセクションごとに楽曲を変化させるというアイデアを採用し、計8曲制作いただきました。単一のBGMではなく、物語の進行に合わせて音が追加されたり、雰囲気が変わったりすることで、体験が豊かになっていくことを表現しています。

TD梅津は当初、物理的な正確性を追求するため、多数（100〜200個）の計算点を用いた物理演算で実装。しかし、この手法は、計算量が膨大になるためパフォーマンス面での課題が残りました。そこで、アプローチを見直し、16個の制御点から滑らかな曲面を生成する「ベジェ曲面」を生成。これにより、軽量かつ自然なページめくりが実現しました。

TD梅津が技術的に最も困難だったと語るのは、「3Dモデルとページの連動」。ページがめくれる動きに合わせて、その上に配置されたアニメーションする3Dモデルをリアルタイムで追従させることでした。技術が実現可能かどうかの検証だけで、約2週間を要したといいます。

ノートの上に配置されている3Dモデル（鳥や人物など）は、多数の小さな三角形の集合体で構成されており、常にアニメーションしている状態。ページがめくれる動きに合わせて、この動いている3Dモデルの全頂点座標を取得し、ページの変形に追従させる必要がありました。

さまざまな検証を経て、最終的には追従させることに成功。これにより、ページをめくっている最中でも商品や人が生き生きと動き続けるという、本コンテンツにおける最も印象的な体験が実現されました。

ページの遷移に合わせて音楽が途切れることなく滑らかに切り替わるシステムを構築。完璧な同期を目指す高負荷な手法と、単純再生による遅延の課題を乗り越え、パフォーマンスと品質を両立させる中間的な手法を発見し、実装したといいます。
具体的には、下記の3つのアプローチを検証し、一番負荷の低い3番目の方法を採用しています。

1.完璧な同期

MP3のフレーム単位（0.001秒レベル）で完全に同期させる手法。極めて正確だがパフォーマンスへの負荷が非常に高く、古いスマートフォンではクラッシュの原因となったため断念。

​​2.単純な再生

次の曲を単純に再生する手法。簡単だが、曲の切り替わりでズレが生じ、体験を損なうため不採用。

3.1.と2.の中間的手法。

次に再生するBGMデータをあらかじめ読み込み、「いつでも再生できる状態」で待機させておく。ページがめくられた際、前の曲が再生されていた時間（たとえば10:00）を取得し、次の曲をその時間から再生開始する。

 3について、再生位置を探す時間が発生しないため、遅延が少ないといいます。厳密にはコンマ数秒のズレが発生する可能性はあるものの、人間には知覚できないレベルであり、パフォーマンスと品質を両立させる最適な解決策となりました。