「ハーゲンダッツアイスクリーム工場見学」Webと映像制作の裏側 ─ チームを横断することで生まれる突破力
今回は、IN FOCUSが手がけた「ハーゲンダッツアイスクリーム工場見学」の特設サイトと映像の制作秘話についてお話しします。
IN FOCUSのプロジェクトメンバーに集まってもらい、座談会形式でインタビューを実施。3DCGやモーショングラフィックが詰まった「大人も子どもも楽しく学べるコンテンツ」をどのように実現していったのか、制作の進め方やその裏側について語ってもらいました。
アイスクリーム工場見学Webサイト
https://www.haagen-dazs.co.jp/brand/special/hd-factory/
プロジェクトの始まり。まずは企画作りから
ーこのプロジェクトはどのように始まったんですか？
関山（映像プロデューサー）：ハーゲンダッツ ジャパンさんから「創業40周年を記念して、アイスクリームの製造工程を紹介するWebサイトや映像を作りたい」と声をかけてもらい、この話が始まりました。
ハーゲンダッツの工場は世界に3か国しかないのですが、そのうちの1つが群馬県にあるんです。一般には公開されておらず、工場を見学してみたいという声も多いとのこと。バーチャル上で、工場の存在や商品に込めたこだわりを広く知ってもらいたい、というご依頼でした。
中島（映像ディレクター）：ただ、工場の説明をお勉強のように流しても面白くならない。CGやアニメーションを使って、楽しく紹介していこうと考えました。最初のプレゼンに持っていった企画書の一部がこちら。アトラクションのように没入感のある見せ方を提案しました。また、CGの工程パートと、イラストを使った解説パートを交互に出すことで、飽きさせないためのメリハリを作っています。
兼石（クリエイティブディレクター / Webディレクター）：最初に試した方向性は、工場感を強調したスチームパンクなテイストでした。そこからハーゲンダッツのブランドカラーに沿うような、クリーンで高級感のあるトーンに近づけていきました。クライアントになるべく具体的なイメージが伝わるよう、提案段階からWebも映像も構成図やビジュアルなどを色々と用意しました。
中島：企画の段階でナレーションも全部作りましたね（笑）。クライアントもワクワクしてくれて、とてもいいリアクションをいただきました。プレゼンには別案も用意していたのですが、こちらの案ですぐに決定しました。
兼石：Webと映像のメンバーが一緒になって、企画やビジュアルの立ち上げから考えていきました。多部門あるIN FOCUSではこのように案件を進めていくことも多いです。それぞれの専門領域の知見を現場レベルで交わすことができるのは、とても学びになりますし、面白いですね。
手書きから始めたメインビジュアル。世界観を作り上げるまでの模索
ー企画が決まり、そこから実制作に入っていったと思うのですが、何から着手しましたか？
兼石：まずは、メインビジュアルのデザインから入りました。ここで決定した世界観が全体の基準になるのでとても重要でした。最初はどんなビジュアルにするかアイデアを出しながら、中島くんや僕が手書きで絵に起こしていきました。ただ、これを実際に3Dにしたらどうなるのかは、まだイメージできていませんでした。
ーラフ画の時点で原形はうかがえますが、完成まではまだ遠そうです。ここから3DCGにはどうやって起こしていったんですか？
関山：3DCGの制作はKASSENさんに依頼しました。クオリティーの高いCGやかっこいいVFXを作っている会社さんで、いつかご一緒してみたいと思っていて、今回声をかけさせてもらいました。
兼石：KASSENさんにラフ画を見せながらこちらのアイデアを伝えて、一度CGに起こしてもらいました。上がってきた3Dを見て「あの雑な絵が立体になってる！」と感動しました。ただ、もう少しハーゲンダッツらしい高級感や、物語が始まりそうなワクワク感を盛り込みたく、どうやって詰めていけばいいかを悩みました。
中島：CGの修正を何度も依頼すると時間も工数も大きくかかるので、なるべく的確にフィードバックをまとめる必要があったんですよね。
兼石：想像やフォトショだけで調整の最適解を探るのが難しすぎて…。そこで、KASSENさんの初稿を、Blenderで自分の手元にざっくり再現することにしました。手間はかかりますが、その代わりレイアウトや配色、質感をしっくりくるまで試行錯誤することができました。その結果をフィードバックに落とし込んで、KASSENさんに仕上げてもらいました。
中島：自分たちで色々試せるようになったので、カップのフタをかきまぜ器にしてみよう、みたいなアイデアも生まれましたよね。デザインが決まってKASSENさんに動きも付けてもらい、最終的なメインビジュアルとイントロの映像ができあがりました。
製造工程を3DCGでファンタジーに表現
ー各工程のCGも、デザインが可愛く動きも面白いので、ずっと見ていられます。
中島：実際の工場では機械の中まで見えなかったり、そのまま再現しても絵的に面白くならない工程が多かったりします。そこで、ファンタジーを交えながら楽しく表現することにしました。
兼石：見せ方のアイデアがすぐ浮かぶ工程もあれば、どうしようかみんなで悩むものもありました。そういうときはデザイナーの永束さんが「こういうのはどうですか？」と突破口になるような参考アイデアを見つけてきてくれるんですよね。
永束（Webデザイナー）：自分なりに参考画像や動画を沢山ストックしておくのですが、会話しながらふと思い出して「こういうのありましたよ」と出していました （笑）。
兼石：その引き出しの精度の高さに、だいぶ助けられました。
ーアイデアを具体的なCGに起こしていく作業は、どのように進めていったんですか？
兼石：工程CGは、KASSENさんとも進め方を相談し、最初に僕の方でBlenderでデザインを作る流れにしました。想像を膨らませながら、高級感とワクワク感を共存させるイメージで作っていきました。6工程分作るのは大変でしたが、「ここにエアダクトを付けて」とか「金のフチをあしらって」みたいな感じで作り込んでいくのは楽しかったです。空想の機械とはいえ、何が行われているかがちゃんと伝わらないと意味がありません。どう動かすかも想定しながら仕上げていきました。
中島：Blenderでデザインができたら、KASSENさんに送り、そこからブラッシュアップや実際の動きを付けてもらいました。ミルクが勢いよく流れるシーンや、冷却の表現、カップに充填されるクリームの質感などは、クライアントのこだわりにも応えてもらい、とてもいい感じに仕上げてもらいました。
兼石：パイプの中をクリームがクルクル流れるシーンがあるのですが、ここは後から追加することが決まったので、僕の方で動画まで仕上げました。今回の案件でBlenderのスキルが鍛えられました（笑）。
永束：フロアマップの3Dも兼石さんが作りましたよね。
兼石：フロアマップは最初、シンプルなデザインにして画像で置こうと考えていたのですが、永束さんから、「マップももっと作り込んで、なんなら動かしたい」という熱いプレッシャーを受けたので、頑張りました（笑）。その結果、映像にも使われることになったので、やってよかったなと。
ー永束さんはWebデザイナーですが、3DCGの制作フェーズから一緒にやられたんですか？
永束：そうですね。普段はWebデザインがメインですが、今回は全体のトンマナやデザインについて映像やグラフィックのチームと何度もミーティングしながら、一緒に考えていきました。チームの垣根を超えて試行錯誤できたのは、とてもいい経験になりました。
ー映像はCGだけでなく、解説部分もイラストが動いて、見ていて楽しいですよね。
中島：CGパートで盛り上がっても、解説パートが退屈だと一気にトーンダウンしてしまいます。そこで、イラストやモーションを使って楽しくテンポよく伝える形にしました。メリハリを付けるため、イラストはあえてコラージュやクラフト感のあるテイストに。CGとの対比を作ることで飽きのこない見せ方を狙っています。イラスト素材はグラフィックチームの千﨑さんに作ってもらいました。結構たくさん作ってもらったよね（笑）。
千﨑（グラフィックデザイナー）：はい、最初はニュアンスをつかむのが難しくて、たくさんバージョンを作りました。ハーゲンダッツという高級感のあるイメージと、子どもから大人まで分かりやすく楽しめるバランスを探っていくというか。色数やテクスチャーの調整はもちろん、模様や牛の向きなど細かな違いも色々作りました。映像になったときに自分が作ったデザインが動いているのを見て、とても感動しました！
中島：モーショングラフィックは映像チームの田中さんが担当してくれました。イラストが小気味よくアニメーションしたり、場面が流れるように切り替わったり、最後まで一気に見られる作りになっています。
田中（映像エディター / モーショングラフィックデザイナー）：どんなモーションだと人は気持ちいいと感じるか、ストーリーがスムーズに入ってくるかは、いつも作業するときに考えています。シーンのつなげ方は中島さんともたくさん話し合いました。千﨑さんが、編集しやすいようにレイヤーを細かく分けてくれていたのがありがたかったです。
実写パートは群馬工場で撮影
ー実写パートは群馬工場まで実際に行って撮影されたんですよね？
中島：はい、撮影は片岡さんが担当してくれました。これまで一度も対外的に公開されていないので、貴重な現場をたくさん撮影してきました。
片岡（映像ディレクター）：撮影で意識していたのは、ファンタジーな世界観と混ざったときも、違和感がない見え方にすることです。レンズもメインビジュアルと合わせてソリッドなものにしたり、暗い場所でも綺麗に撮れるカメラを使って馴染ませたいなと思いました。最終的に中島さんと田中さんで、実写シーンが浮かないよう上手くまとめてくれて。
中島：実写パートで生っぽいリアルさが出るのは避けたかったので、スローにしたり色味を調整することで馴染ませていきました。
Webサイトは丸窓から工場を覗いているような体験に
ーWebサイト制作の話も教えてください。
兼石：映像がいい感じに仕上がってきていたので、Webも負けていられないなと。Web上では工場見学のツアーを巡っているような体験を作ろうと考えていました。そのための仕掛けとして丸窓を配置しています。せっかくのCGなので全画面で出したいところですが、あえて中を覗き込むような構図にすることで、見ている自分と工程現場の位置関係や、隠れている領域の広がりを無意識に想像させるような効果を狙っています。
また、スクロールするだけで画面が変化して工程を順番に巡っていくような作りにしています。CGパートが派手に見える分、閲覧操作はシンプルにしたいと考えていました。
永束：スクロールの気持ちよさはかなり追求しましたよね。工程の番号が出てきて、それが丸窓になって徐々に大きくなって、その上に解説パートがかぶさってきたり。一連の動きの中で色んな変化を付けると、画面がカクっとなったり、違和感が出やすくなります。引っかかりのない動きになるよう、エンジニアの阿部さんが根気強く調整してくれました。
ーたしかにスクロールの動きがスムーズで、どんどん進めたくなります。実装についても、こだわったところなどを教えてください。
阿部（フロントエンドエンジニア）：要素の重なりが複雑で、どんな構造で組むかを結構悩みました。途中で上に戻ったり、メニュー画面から飛んだり、どんな使い方をされてもバグが起きない仕組みにもしなければなりません。
兼石：挙動を安定させるために、設計から作り直したりしてたよね。
阿部：ベースに関わる箇所を試行錯誤するため、3回くらい作り直しています（笑）。それと、複数の動画を扱うサイトだったので、読み込みや制御にも手がかかっています。hls.jsというライブラリを使ってストリーミング再生させたり、音量制御のロジックを組んだり。個人的にはWeb上でも3D表現ができたのがよかったです。最後に出てくる3つのカップはThree.jsで実装していて、マウスで傾くような動きも付けています。
永束：インタラクティブなサイトは、実装してみないと感触がつかめないことがよくあって。今回のように、ある程度作った状態から思い切って根本から見直すこともあります。
兼石：阿部君をはじめ、うちのメンバーはみんな最後までモチベーション高く付き合ってくれるので、頼りになります。細かい詰めをあきらめずにやり切ると、やっぱり最終的なクオリティが格段に上がるんですよね。
オリジナルのBGMと効果音を作って臨場感を演出
ー今回は、音楽もオリジナルとお聞きしました。
中島：盛り上がりのあるイントロのBGMや、各工程の機械音や環境音を、今回オリジナルで作っています。没入感を出すためにシズルにこだわりました。音源は、信頼しているコンポーザーの岩田さんとサウンドデザイナーの安江さんに依頼。音をつけたことで一気に臨場感が上がったと思います。
チームをまたいだプロダクションマネジメント
ーマネジメントの話も聞かせてください。映像・グラフィック・Web全てに関わるポジションで感じたことはありますか。
石崎（プロダクションマネージャー）：僕はPMとして、調整役、進行管理を担当しました。クライアントであるハーゲンダッツ ジャパンさん、3D制作のKASSENさん、そしてIN FOCUSの映像チーム・Webチーム・グラフィックチームと、たくさんの方々と関わりました。前職は映像会社だったので、領域を横断したり、ここまでがっつりとCGを使ったプロジェクトも初めてで新鮮でした。
中島：石崎くんは、IN FOCUSに入って初めてのプロジェクトだったよね。いきなり映像だけでなくWebやグラフィックのスケジュールや予算まで管理することになったのは大変だったろうなと。2日に1回は打ち合わせをしていた気がする（笑）。
石崎：そうですね。ただ、部門が連携しながらいいものができあがっていくのを間近で見ることができました。入社してすぐにIN FOCUSの強みを知ることができたのがよかったです。
公開後の反響と、クライアントからの言葉
ー皆さんの努力が重なって完成した今回のプロジェクト。公開後の反響を教えてください。
中島：アイスクリーム工場見学のリリースが、沢山のメディアに取り上げられているのを見ました。SNSの反応も大きく、千﨑さんのXの投稿は、10万件くらいのインプレッションがありましたよね。
兼石：Webサイトも、ブレーンやWeb Designingに取り上げていただきました。また、「CSS Design Awards」では「SITE OF THE DAY」、「FWA」で「FWA OF THE DAY」、「AWWWADS」では「Product Honors」にノミネートされたりしました。
関山：何よりクライアントに喜んでもらえたのがよかったよね。ハーゲンダッツ ジャパンさんとは今回初めてご一緒したのですが、「IN FOCUSさんに依頼してよかった」と言ってもらえたのが嬉しかったです。
兼石：出来上がったものにとても感動していただき、社内での評判も非常に良いとのお話でした。Webや映像をメディア関係の方に見てもらったり、工場の映像をテレビ番組などに活用いただいているとのことです。
石崎：最終的に、アイスクリーム工場見学を「40周年のコンテンツの目玉のひとつにします」と言ってもらいましたよね。また、8月に開催されたハーゲンダッツのポップアップストアのデザインを、工程CGの世界観を参考にされたとのことで、それも嬉しかったです。
兼石：小さい娘が二人いるのですが、完成した映像を見せたら、二人でキャッキャ言いながら5回連続で見てました。その時に、「子どもも楽しんで学べる」というお題を達成できたかな、と思いました。もちろん見終わったあとに「ハーゲンダッツ食べたい！」とねだられました（笑）。
チームを横断できることの強み
ーIN FOCUSでチームをまたいで実現した本プロジェクト。横断型だからこそできたことを教えてください。
石崎：全員社内で状況が可視化できているからこそ、進行や予算の調整とかも、スピーディーに相談できました。
千﨑：私も入社したばかりで他部門と関わることができたので、全体の流れを知るきっかけになりました。
中島：自分の部門だけだとできない経験ができるというのは、やはり楽しいですよね。新しい知識や技術を見るだけでも勉強になります。今まで以上にお互いの部門とより深く関われたなと感じました。
兼石：メンバー同志の距離が近いので、フラットに意見を出し合って密に連携できるのがいいですね。それぞれの専門スキルがあるので、社内で色んなことを試しながら進められることが、高いパフォーマンスにも繋がりますし、IN FOCUSの強みだと思っています。
今回のnoteは以上となります。それではまたお会いしましょう。
X
https://x.com/infocus_inc
Instagram
https://www.instagram.com/in_focus_inc/
この記事が気に入ったらサポートをしてみませんか？