KOKUYO「好奇心を人生に」飛び出すノートと、
3DCGで創業120周年を体験する特設サイト

期間 : 10ヶ月 (2025年1月〜2025年10月)

コクヨのタグライン「好奇心を人生に」を直感的に体験してもらうため、象徴的な商品「キャンパスノート」を舞台にした飛び出す絵本のメタファーを採用しました。過去・現在・未来にわたるコクヨのものづくりの瞬間に着目し、長い歴史の中で商品やサービスが生まれ広がってきた様々な場面にスポットライトを当てました。過去から未来へとアイデアが連続して具現化される構造で、コクヨの全体像を描き出し、企業理解とタグラインの浸透を同時に達成することを目指しました。言葉で説明するのではなく、楽しく体験することで「好奇心を人生に」を感覚的に理解できる設計としています。

Webサイトではまるで本物のノートをめくる感覚で、コクヨの創造の流れを体感できる仕掛けを実装しました。イラストレーションをもとに100体以上の3Dモデルとアニメーションを作成し、それらを一つ一つ組み合わせてノートの湾曲に沿わせたインタラクションを実現しています。ページをめくるたびに、3Dモデルのアニメーションがノート上で立体的に展開されます。さらに、セクションごとに変わる8曲の音楽をシームレスに切り替えることで、めくるたびにワクワクする体験を提供します。視覚・聴覚・インタラクションが一体となった、没入感のある体験型コンテンツです。

オブジェクトとアニメーションの完成度が表現全体の質を左右するため、制作初期から立体化と実装を前提にした進め方を取りました。イラストラフの段階からMORIE Inc.に3D制作を依頼し、Blenderを用いて平面イラストを3D空間に配置しながら検証を重ねています。平面素材を立体空間に置く際には、遠近感の不自然さや情報量の偏りが生じやすく、配置やスケール、密度感の細かな調整が不可欠でした。全体で約500点に及ぶオブジェクトを扱い、何度も配置をやり直しながら、空間として成立するバランスを整えています。また、3D空間への配置だけでなく、Blender上でのアニメーション付与や、JSONファイルの直接編集など、実装領域にも踏み込みました。イラストレーションを担当した髙橋あゆみさん、CGアニメーションを手がけたMORIE Inc.との密な連携により、平面・立体・動きが分断されることなく、一貫した表現としてまとめ上げています。

ノートのページめくり表現では、当初、物理的な正確性を重視し、100〜200個の計算点を用いた物理演算による実装を試みました。しかしこの手法では計算量が大きく、パフォーマンス面に課題が残りました。そこでアプローチを見直し、16個の制御点から滑らかな曲面を生成する「ベジェ曲面」を採用。これにより、表現の自然さを保ちながら、軽量で安定したページめくりを実現しています。

技術的に最も難易度が高かったのが、ページの動きに合わせて3Dモデルを連動させる処理です。ページがめくれる際、その上に配置されたアニメーション中の3Dモデルをリアルタイムで追従させる必要があり、実現可能性の検証だけで約2週間を要しました。鳥や人物などの3Dモデルは、多数の三角形で構成され、常にアニメーションしている状態です。これらの全頂点座標を取得し、ページの変形に合わせて再計算することで、ページの動きと3Dモデルの動きを同期させています。検証と調整を重ねた結果、ページをめくっている最中でも、3Dモデルが生き生きと動き続ける表現が可能となり、本コンテンツを象徴する体験のひとつが実現しました。

音楽は、有村 崚氏に制作いただきました。単一のBGMではなく、体験の進行に合わせて音が変化していく構成とし、7つのセクションに対応する形で計8曲を制作しています。ページを進めるにつれて音が加わったり、雰囲気が切り替わったりすることで、体験の展開そのものを音でも補完する設計としました。音づくりでは、電子音に偏らず、生楽器の音や環境音、道具の音、人の声などを積極的に取り入れています。視覚表現と同様に、過度な演出感を避け、手触りや人の気配が感じられる音を大切にしました。

制作においては、ページ遷移に合わせて音楽が途切れず切り替わる仕組みも重要な要件でした。完全なフレーム単位での同期は高い負荷がかかる一方、単純な再生切り替えではズレが生じるため、いずれも最適解とはなりませんでした。最終的に採用したのは、次に再生する楽曲を事前に読み込み、現在再生中の楽曲の再生時間を引き継いで再生する方法です。厳密にはわずかな誤差が生じる可能性はありますが、体感上は違和感がなく、パフォーマンスとのバランスを保つことができました。この仕組みにより、視覚的な動きと音の変化が分断されることなく連動し、ページをめくる体験全体を一続きの流れとして成立させています。