Blenderで命を吹き込む。ANIMAL FACEの誕生の裏側にある3Dイラストのこだわり

デザイン 3D イラスト

MASASHI NAKAMURADesigner / CEO

スタジオスプーンが2022年に自社企画としてリリースしたWebアプリケーションのANIMAL FACE（アニマルフェイス）を皆さんはもう触っていただけましたでしょうか？

ANIMAL FACE（新しいタブで開く）

このWebアプリケーションは、Blenderで制作した愛らしい3Dイラストを主役に据え、子どもたちにも楽しく遊んでもらえる動物当てクイズゲームになります。

ビジュアル領域（デザイン・3Dイラスト）をワンストップで担当した私が、Blenderを使用した3D制作でこだわったポイントや、そしてチームでの開発の裏側をお届けします。

「他社と差別化できるWebアプリケーションを作りたい」「ユーザーの愛着を高めるデザインのヒントがほしい」と考えている企業のWeb担当者様は、ぜひ最後までお付き合いください。

3Dイラストから生まれた動物当てクイズ

Webアプリケーション制作の始まりは、本件のプランナー・ディレクター・エンジニアリングを担当した、共同代表の中村明史さんからの「WEBの音声認識の実験していたら面白くなってきたから、このまま3Dイラストを用いてこどもの絵本みたいな仕上がりにしたい」という一言でした。

Blenderでこだわり抜いた愛らしさ

Blenderを立ち上げ動物たちの制作をスタートしましたが、ここにはデザイナーとしてのこまやかなこだわりが詰まっています。

Blenderで制作した動物の3Dイラスト

ミリ単位で印象が変わる、顔の要素の配置バランス：イラスト制作において、動物の可愛さを作り出すのは繊細な作業です。目、鼻、口、耳といったパーツの距離感や角度が、ほんの少し変わるだけで、冷たい表情に見えたり、間が抜けた表情に見えたりします。リアルな動物をベースにしつつも、デフォルメを重ね、直感的に可愛いと感じる配置を模索しました。
光がもたらす陰影と、輝きの表現：3Dイラストが、画面越しでも温かみを感じてもらえるよう、以下のディテールを作り込みました。
- 目と鼻の輝き：ガラスや水滴のような瑞々しいハイライト（光の反射）を入れ、動物イラストの瞳に意志を宿らせました。
- 美しい陰影を崩さないライティング：常に立体感が美しく際立つよう、ライトの配置や強さを何度もテストしました。
UI/UXと3Dを融合させる画面：3Dイラストの魅力を最大限に活かすためには、単にWeb上に配置するだけでなく、Webアプリケーションとしての使いやすさとのバランスがとても大切になります。この3Dの動物たちが、画面のどの位置に、どんな大きさで配置されれば、操作の邪魔をせず、かつ大きな魅力を放つか、ビジュアル領域を一人で担当したからこそ、3DモデルのアングルをUIデザインと同時並行で最適化していくことができました。

デザインから実装へ

出来上がった3Dイラストをベースに、ここからはエンジニアチームへのバトンタッチです。

当時はエンジニアリングも行っていた明史さんが直接実装しながらプロトタイプが完成しました。そのプロトタイプを元に何往復かデザインを調整しながら、最終的なスマートフォン化やこまかなUIの作り込みやパフォーマンス最適化等をエンジニアの遠藤さんが仕上げてくれて、完成！

私の作った3Dイラストが、Webブラウザ上で遊べるゲームアプリケーションへと形を変えていきました。

ANIMAL FACE のゲーム画面 — ANIMAL FACE：https://animal-face.pages.dev/（新しいタブで開く）

企業のWeb担当者様へ

「自社のWebアプリケーションなどに3Dを取り入れるのは、コストや技術的なハードルが高いのでは？」そう思われるWeb担当者様も多いかもしれません。

しかし、スマートフォンのスペック向上やWeb技術（WebGLなど）が格段に進化した現代において、3D表現は競合サービスと大きく差別化する投資になると考えます。

Webアプリケーションに3Dを取り入れることで、具体的に以下のようなビジネス価値が生まれます。

滞在時間の向上：ユーザーは動くものや立体的なものに自然と目を奪われます。触るとリアクションが返ってくる3Dキャラクターがいるだけで、アプリの操作自体が楽しい体験に変わり、滞在時間や再訪率の向上に寄与します。
ブランドのファン化の促進：文字やフラットなアイコンだけでは伝わりにくい企業の温かみやサービスの親しみやすさを、3Dのビジュアルはユーザーの感情に訴えかけることができます。ANIMAL FACEのような愛らしい3Dイラストは、ユーザーとの心理的距離を縮め、ブランドのファンを作るきっかけになります。

ANIMAL FACEは、まさにそんなユーザー体験（UX）を体現した、スタジオスプーンからの提案なのです。

おわりに

プランナー、デザイナー、エンジニアがそれぞれのプロフェッショナルな専門性を発揮して形になったANIMAL FACE。

私たちスタジオスプーンは、デザインと開発技術を掛け合わせ、サービスに新しい命と価値を吹き込むものづくりを得意としています。

自社サービスのUI/UXを刷新して、もっとユーザーに愛されるアプリにしたい。
新規事業のWebアプリケーションで、他社に負けないインパクトを残したい。
自社のキャラクターを活かして、リッチなWeb体験を作りたい。

そんな想いや課題をお持ちのWeb担当者様、ぜひ一度私たちのANIMAL FACEを触っていただき、その可能性を体感してください。
そして、皆さんが思い描くワクワクするWebアプリケーションの未来を、私たちと一緒にカタチにしていきませんか？

お問い合わせやご相談、いつでもお待ちしております。