目次
「むちゃくちゃやりたい」からの声がけ
最初に紹介されたのは、ベンチャーキャピタル「ANRI」のフルスクラッチによるコーポレートサイト制作です。
プロジェクトの背景には、VC業界のコモディティ化という課題がありました。さらに佐俣アンリさんは、会社の規模や社会的責任が大きくなる中で、一般的な「あるべき姿」と自分が情熱を感じる「ありたい姿」との間に微妙なずれを感じていたといいます。
太田さんはこのプロジェクトについて、「本CI刷新プロジェクトの中でANRI様とニューピース様で見出した”ANRIさんらしさ”をしっかり表現し、ポテンシャルを持った起業家の方々に、ANRIさんと一緒にやれば何かすごい未来が生まれるんじゃないかと直感してもらうブランド形成をしよう、というのが今回のゴールでした」と語ります。
このプロジェクトは、NEWPEACEの高木新平さんが全体を取り仕切り、ケルンのタカヤ・オオタさんがロゴ・CI開発を担当、FunTechがWeb・3Dモーションを担当するという、複数の制作会社が入る大型案件でした。
プロジェクトのきっかけは、高木さんとタカヤ・オオタさんからの声がけでした。「むちゃくちゃやりたいので、FunTechさんにお声がけしました」という直球のオファー。太田さんは「むちゃくちゃやるならFunTechだというところで声をかけていただいて、全力でむちゃくちゃやってやろうっていうのがこのプロジェクトの最初ですね」と振り返ります。
FunTechのチーム構成は、太田さんがWebのアートディレクションとプランニング、PM、ワイヤーフレーム制作を担当。トップデザイナーの仮屋さんがWebデザイン、オランダ人3Dクリエイターのテレンスさんが3Dモデルやテクスチャ制作、橋本さんがエンジニアリングを担当する4人体制でした。完成までの期間は約8ヶ月です。
作って壊しての繰り返し
このプロジェクトの特徴は、通常の丁寧な進め方ではなく、「アジャイル制作」を採用したことでした。
太田さんによると、通常の案件では企画書を70枚ほど作成し、戦略的にコンセプトやビジュアルを提案していくといいます。しかし、今回はそうした丁寧な進め方ではなく、「とにかく作って壊して検証しての繰り返しでした」と語ります。
まず取り組んだのは、タカヤ・オオタさんが作ったロゴを3Dでどう使っていくかの検証でした。暫定のロゴモデルデータを受け取り、テレンスさんがCinema 4Dに取り込んで、テクスチャをとにかく貼り替えまくる。その検証結果をクライアントチームと共有し、「どれがANRIさんらしいか」「どれがANRIさんのコンセプトを体現できるのか」を協議しながら、実現可能性も含めて検討していきました。
ある程度方向性が決まってきてからは、Webデザインの検証に入ります。太田さんによると、「キービジュアルだけで多分70枚ぐらい作った」といいます。さらに、同時進行でロゴ制作も進んでいたため、「ロゴも最終的にちゃんと固まってない状態でずっと作ってた」という状況でした。
「Explosion」コンセプトの誕生
そうした試行錯誤の中から、新しいコンセプト「Explosion（爆発）」が生まれました。これはタカヤ・オオタさんからの提案で、破片が爆発して飛んでいくビジュアルが、ロゴの周りに浮かんでいるというクリエイティブです。
この方向性が定まってから、Cinema 4Dでデモを作成し、インタラクションのイメージを全員で共有していきました。太田さんは「このデモが出てきて初めて、ANRI様チーム、制作チーム全員が、CI含めたビジュアル表現に「すごくいいね」という共感が生まれ、ここから本格的に進んで行った記憶がある」と振り返ります。
制作過程では、タカヤ・オオタさんがFunTechのオフィスを訪れ、テクスチャを自由に編集できる自作GUIツールをみんなで操作しながらテクスチャを決めていくといった、会社の垣根を超えた共創も行われました。
Three.jsをカスタマイズ、技術的挑戦
デザインが固まってから、エンジニアの橋本さんにバトンタッチされました。
橋本さんのミッションは、テレンスさんが作った完成度の高いデモを、Webブラウザ上でサクサク動かすことでした。橋本さんは「一からアイデアを作ってっていうよりはもうこれをいかに動かすかで、2点を気をつけてやりました」と語ります。
1つ目は「高速の状態変化に耐えうる設計」です。4つのテクスチャ（3Dモデルの表面の質感）がコロコロ変わるという仕様で、どんなに高速で無茶な遷移をしてもサクサク動くようにする必要がありました。
橋本さん：「Three.js（★1）の標準的なマテリアル設定を一から再構築して、ANRI専用のマテリアルを作りました」
さらに、背景に浮かぶキューブが1つ1つ違う動きをしたり、テクスチャが1個1個違ったりする表現も必要でした。これも動作に影響する3Dモデルの頂点数を調整しながら試行錯誤しながら実装していったといいます。
2つ目は「無茶な画面遷移に耐えるシーン設計」です。このサイトはトップから下層へ移る、下層からトップに戻る、ストーリーページにいくといった特殊な遷移をするサイトでした。
橋本さん：「こういうのって本当にすぐバグりやすいので、あんまり良くないとされてるようなものなんですけど、これをなんとかしようっていうところで、関わる全ての状態を管理する1つの基幹クラスみたいなやつを作って、全ての状態遷移がシームレスに線形遷移するような内部的な仕組みにしてたりします」
こうした技術的な挑戦を経て完成したANRIのコーポレートサイトは、VC業界のみならず、クリエイター層からも高い評価を得ました。
2人で3ヶ月、Framerで挑む
続いて紹介されたのは、スタートアップ「Neu」のコーポレートブランディング事例です。
Neuは5年目のスタートアップで、創業期を駆け抜け、これから採用や本格的なビジネス変革を仕掛けていくタイミングでした。太田さんは「実力は備わってきたけど、そもそもコーポレートサイトもなかった状態だったので、成長フェーズにおける独自性っていうのはちゃんと作っていきたい、広告にかける熱量を表現していこうというところがテーマでした」と語ります。
このプロジェクトの特異性は、チーム2人で3ヶ月という体制でした。太田さんがディレクションを担当し、デザイナーの堀野さんがデザインから実装まで全てを担当しました。
エンジニアを起用しなくても済んだ理由は、Framer（★2）を使っているからです。
太田さんは企画段階で、Nueの「広告にかける変態性」を見出しました。
太田さん：「本当にマニアックに広告っていうのを科学していく彼らの姿が面白かったので、Neuの顧客からも評価されている点だし、本当に唯一性だなと思ったので、この辺をちゃんと出していこうというのが企画の始まりですね」
そこから「広告にこだわりと偏愛を」というコピーを作り、ビジュアル案に落とし込んでいきました。太田さんの意図は、とにかくテキストをたくさん表示すること。Neuの事業的にも「選び抜いた言葉作り」が一番の強みだったため、それをビジュアルとして表現したかったといいます。そして「狂気性を出していきたい」という要望を堀野さんに依頼しました。
ノーコードの限界に挑む
ここから堀野さんにバトンタッチされ、デザインと実装の話が語られました。
堀野さんは今回、Framerでの実装が初めてで、普段コーディングをしたことがないデザイナーです。そのため、自分の中で3つの目標を立てて取り組んだといいます。
1つ目は「めちゃくちゃ驚かせたい」。当時、Framer制作の案件がギャラリーサイトで見られるようになってきたタイミングだったため、今までにないようなものを体現したかったといいます。
2つ目は「デザイナーだからできる調整」を追求すること。思いついた時にすぐ作って、やりたいようにテストができる可能性を期待していました。
3つ目は「ノーコードでどこまでできるのか検証する」こと。Framerでできるとは聞いていたものの、実際にどこまで可能なのかを自分で確かめたかった。そのため、カスタムコードを使わず、Framerの標準機能だけで挑戦しました。
堀野さん：「ノーコード上でできる実装をギリギリまで攻めると決めたので、結構手広く実装を手がけたかなと思っています」
実際の制作では、初回の段階で今のビジュアルに近いところまで到達していました。立体的にしたり、陰影をつけたり、消したり、色反転させたり、平面で遊んでみたりと、色々試しながら探っていったといいます。
Blender×Framerで実現した「変態性」
最終的にブラッシュアップされたビジュアルには、堀野さんならではのこだわりが詰まっていました。
3Dモデルの裏側にもテキストが流れているという表現です。堀野さんは「この『見えないところにもテキストが流れている』という、僕だけのこだわりなんですけど、この変態性を出すべく、最終的にはBlender（★3）で3Dアニメーションを制作しました」と語ります。
ではどうやって実装したのか。
堀野さん：「通常通り背景付きで映像として書き出して、同じシルエットでベクターデータのSVGを作って、Framer上でそのSVGを使ってマスクをかけるっていう形で、あたかも背景透過したような挙動で3Dを置いてるように見せました」
他にも、流体シェイプのようなボタンも、カスタムコードを使わずに実装しています。当初は頼みの綱となるコンポーネントがあったものの、Safariでは使用できないことが判明。堀野さんは「ここが結構大事なポイントでもあったので、なんとかFramerの機能だけで再現するように実装しました」と振り返ります。
さらに、ヘッダーを駆け抜ける流体シェイプも堀野さんのお気に入りポイントです。
堀野さん：「構造的にはすごい簡単で、バリアント（★4）で背景に全体配置したこの青いボックスを位置をずらして配置していってのをつなげるだけなんですけども、Framerのレイアウトコンポーネント（ヘッダーやフッターなどの固定要素を共通で配置させる機能）を用いることによって、ページごとに再読み込みみたいなのが発生せずに、アニメーションのアクティブな状態を保持したまま遷移ができる」
こうしたノーコードでの挑戦を成し遂げ、社内も含めて驚かせるクリエイティブができたと堀野さんは語ります。
国内初のFramerエキスパート認定、そして10周年へ
このNeuのプロジェクトを終えて、太田さんは「やっぱり国内でここまでやりきった事例がなかったので、我々の目標である『自流の手法で圧倒的クリエイティブを作る』という2025年の目標を、7月ぐらいに達成できたというところは大きな収穫でした」と振り返ります。
このプロジェクトをきっかけに、FunTechは国内初のFramerエキスパート認定を受けることとなりました。
セッションの最後、太田さんは来年5月に迎える10周年に向けたリブランディングの構想を「チラ見せ」しました。新しいCIやロゴ、言葉を決め直している最中で、「撮影だけはNG」という条件付きで会場にプロトタイプが公開されました。
おわりに
8ヶ月をかけたフルスクラッチのエンジニアリング（ANRI）と、2人3ヶ月で実現したノーコード開発（Neu）。手段は大きく異なりますが、その根底にあるのは「クライアントの熱量を最大化する」という一貫した姿勢です。
「むちゃくちゃやりたい」というオーダーに対し、技術とアイデアで応え続けるFunTech。彼らが示した技術選択の多様性は、手段にこだわらず、クライアントにとって最適な方法を選ぶことの重要性を教えてくれました。
★1 Three.js：Web上で3D表現を実現するJavaScriptライブラリ
★2 Framer：デザインから実装まで一貫して行えるノーコードツール
★3 Blender：オープンソースの3DCG制作ソフトウェア
★4 バリアント：Framerで要素の状態を切り替える機能
