【制作背景】Spline3DとWixで作るインタラクティブなポートフォリオ：3Dゲームデザインへの挑戦
- Aya
- 8月10日
- 読了時間: 20分
更新日：8月19日
Splineを使った3Dのインタラクティブポートフォリオを作ろうと思ったきっかけ
Splineエキスパートデザイナーになってから約1年。2025年6月に、Splineハッカソンというイベントが開催されました。
ちょうど次のSpline3Dの自主作品を作ろうと思っていたところなので、約1週間という決められた期間を利用して、Splineのゲームコントロール機能を使ったインタラクティブポートフォリオを作ろうと決意。
ハッカソン後もポートフォリオ作品の1つとして常設したかったので、既存のポートフォリオとして使っているWix Studioのウェブサイトに統合することを前提に、制作を開始しました。
今回、Splineという3Dインタラクティブデザインツールを使うにあたって、自分の中で下記のような制作ルールを決めています。
3Dオブジェクトは全てSpline内でモデリングし、外部の3Dオブジェクト（objやfbxなど）を使わないこと
スマホとタブレットでも操作できるようにレスポンシブ設定を行うこと
Splineの変数、ゲームコントロールの機能を使うこと
ちなみに完成したSplineの3Dインタラクティブポートフォリオは、こちらからご覧いただけます。
プロモーションビデオはこちらです。（BGM付）
3Dインタラクティブポートフォリオのコンセプトと世界観
インタラクティブポートフォリオを作るにあたって、まずは世界観の設定からアイデア出しを行いました。
自主作品なので自分が好きなように・自由にデザインできるという楽しい面もありますが、期限も限られていたので、事前にしっかりとコンセプトを決めました。
コンセプト：自分らしさがつまった小さな島
最初に考えたのは、「自分らしさが詰まった小さな世界、ユーザーが自ら探検したくなる・知りたくなるようなポートフォリオをつくりたい」ということです。
単に作品や自己紹介、スキルを表示するだけの一方的なポートフォリオではなく、折角Splineを使うので、インタラクティブな要素（ユーザーのクリックなど、外部からの動作によって反応が返ってくるような双方向なしくみ）をできる限りシーンに取り入れたいと思いました。
私は沖縄のような南国の海が好きなので、海と島をフィールド環境にすることに。
それぞれの島には、異なるテーマが設定されていて、島を探索しながら自分が提供するサービスやスキル、またより親近感を持ってもらえるようなパーソナルな紹介（好きな音楽や趣味、インスピレーションの得方など）を情報として組み込むため、いくつかアイデアを書き出しました。
最初はキッチンや空港などもアイデアとして挙がっていたことが分かります。
また、文字情報は3Dシーン内で作ると扱いづらいので、最終的に統合するWix Studioでポップアップ表示する仕様にしました。
全体のトンマナ、キャラクターデザインなどの世界観は、ウェブサイトのLITTLE FUJIのブランドデザインに合わせて、シンプルでかわいい・元気でカラフルな色合いにしています。
また、「Splineでここまでできるのか！」と思うような"Splineの限界"に挑戦したかったので、モデリングは全てSplineで行うことに。（Splineはobjやfbx形式の3Dモデルをインポートすることができます）
3Dシーンのデータサイズを抑えるためにローポリでメッシュ数をなるべく減らし、、基本のオブジェクトの組み合わせでモデリングを行うことを前提に制作を開始しました。
使用ツール
今回使用したツールはSpline3Dと、Wix Studio、Figmaです。
Figmaではリファレンス収集とムードボードの作成、使用するフォントの確認を行いました。
3Dデザインの際、制作前にリファレンス（参考画像）を沢山集めてからモデリングした方が圧倒的にスムーズに進められます。
Splineでの3Dデザインとの制作プロセス
ここからは実際の制作プロセスを振り返ってみようと思います。
①フィールドデザイン：プレイヤーが探検できる島の設計
まず最初に、フィールドのデザインから開始しました。
プレイヤー（ポートフォリオを訪れた人）がキャラクターを動かし、探検できる島を設計するため、大体の配置と各島の大きさを仮のオブジェクトでいくつか配置を検証しました。
スマホ＆デスクトップ両対応のカメラ配置と島のレイアウト調整
カメラの配置もこの時点で設定し、最終的な画角から島全体が見える位置を探っていきました。 今回デバイスに限らず、デスクトップとスマホの両方でもSplineのシーンを体験できるようにしたかったので、縦長のスマホサイズでの見え方を考え、最終的に少し縦長の円形の配置にしました。
カメラは立体的なパースペクティブと、オーソグラフィックの2種類で配置し、没入感のある視点・斜め上から俯瞰してみれる視点の機切り替えができるようにしました。
島の構成とテーマ決め
スタート地点の中心の島の周りには、大小異なるサイズの島があります。分かりやすいように、中心から左側はサービス紹介をメインとしたビジネス向け、右側はAbout Me（私に着いて）のパーソナルなエリアに分けました。
それぞれの島にはメインテーマを設定しています。サービス紹介エリアはLITTLE FUJIのウェブサイトと構成を一致させるため、ウェブデザイン・アニメーション・3Dデザインの3つにしました。
グラフィックデザインは他領域と被る分野でもあるので、今回のインタラクティブポートフォリオには含めていません。
島の右側の「私について」という自己紹介部分では、自分を構成する特に好きなもの、影響を受けているものをテーマにしました。
本
ゲーム
音楽
の3つです。
また、日本出身・ニュージーランド在住のデザイナーというユニークな経歴も入れたかったので、思い切って日本とニュージーランドの形の島も追加しました。
それぞれのメインの島はサイズの違いや高低差をつけ、3Dらしさをより感じられるデザインにしています。島のには橋と階段で行き来ができるように設計しました。
フィールドのデザイン（島の地面と海）
島の構成とそれぞれのテーマを決めた後は、フィールドデザインに取り掛かりました。島の地面と地面、背景の空のマテリアルの設定です。
Splineの3Dシーンサイズを最小限に抑えるため、島のデザインである表面の草と地面の2層の配色は、オブジェクト数を減らすためにDepthレイヤーで表現しています。これにより、ほとんどの島は単体のオブジェクトで構成しつつ、2色のレイヤー層があるデザインを実現しています。
また、今回の島のデザインで特にこだわりたかったポイントの一つ・海のマテリアルは、表面の波模様とアニメーション、南国の海のようなきれいな青のグラデーションと透明感を表現できるよう、マテリアルの調整を何度も行って納得するまで調整しました。
遠くにいくほど濃い青になっていくグラデーションが上手くできたと思います。
海の青と島の鮮やかな黄緑が映えるように、背景の空の色は薄めに設定しました。
②Spline3Dでのモデリングとマテリアル、アニメーション設定
Splineシーンの大半を占める島と海が固まったところで、次は細かいオブジェクトのモデリングとマテリアル設定に取り掛かりました。なお、アニメーション設定は今回ループアニメーションで統一したため、モデリング・マテリアル・アニメーションまで一気に仕上げています。
島を繋ぐ橋の3Dモデリングとマテリアル設定
島間を繋ぐ橋は、Splineのシーンサイズ最適化のため、クローンを使い同じシェイプで構成していきました。少し変化をつけるため、それぞれの木の板に少し回転をつけ、配置をずらしたアレンジを加えています。
ちょっとガタガタな不規則な並びの方が、リアル感が出ます。今回はフォトリアリスティックなスタイルとは正反対のスタイルですが、その中に"現実世界のようなリアルさ"の要素を適度に入れることで、より生き生きした3Dデザインになるのではないか、と思っています。
木の板の木目模様は、画像テクスチャを使った表現も考えたのですが、オブジェクトが多くなりシーンサイズが大きくなることを踏まえ、画像ではなくパターンレイヤーで表現しました。
個人的にこのマテリアルを作り込んでいくのが一番好きな工程です。blenderはノードで複雑なマテリアル・テクスチャを作れますが、Splineではこのマテリアルレイヤーを組み合わせることで、様々な表現ができます。
ここらへんはひたすらトライアンドエラーを繰り返し、数値やレイヤーモードをいじってみることで、偶然生まれた「思いもよらない産物」が案外うまくいったりします。
島のメインオブジェクトの3Dモデリングとマテリアル、アニメーション設定
次に各島のテーマに沿ったメインオブジェクトのモデリングに取り掛かりました。
例えばウェブサイトサービスの島には、デスクトップパソコン。音楽がテーマの島にはレコードプレーヤーを、日本をテーマにした島には鳥居という風に、各島のテーマに沿ったモチーフを決めてデザインを進めていきました。
ライティングとカラーアセットは早い段階で決まっていたため、3Dアセットはモデリング・マテリアル設定・アニメーションまで一気に仕上げました。
島の数は10個ほどあったので、必然的に作成する3Dモデルの数が多く、またハッカソンの期間内でも通常の仕事と並行して作成していたので、この3Dアセットデザインのプロセスが一番時間がかかったと思います。
キャラクターデザインとモデリング
メインオブジェクトを作り終えたところで、ようやく島の全景が見えてきました。次は3Dキャラクターデザインです。
キャラクターデザインは何種類かバリエーションを作成し、友人に意見を聞いて最終的なデザインを確定しました。シンプルな形のキャラクターですが、頭のパーツがぴょこぴょこ動くところなど、全体的に自分好みのかわいくてちょっととぼけた感じの表情が気に入っています。
なお、それぞれのメインオブジェクトとキャラクター、細かいパーツは、島のフィールドシーンとは別ファイルのSplineシーンでアセットを作成・管理し、デザインが固まってから島のフィールドシーンに合体させました。
細かい要素パーツのモデリング
キャラクター、メインオブジェクトなどのモデリングとアニメーションが完成したことで、再度島の全体図を俯瞰し、すき間が目立つところに追加のオブジェクトを加えることにしました。
とはいえシーンサイズを大きくしたくなかったので、クローン機能を使って同じオブジェクトのサイズを変えて配置しています。例えば木、島の間に追加した踏み場となる小島などです。
問い合わせに繋げるCTAのためのポストを追加
最後の3Dオブジェクトとして、ウェブサイトやポートフォリオへの問い合わせに繋がるCTAを追加するため、Splineでメールボックス（郵便受け）を作りました。
キャラクターが近づくと蓋が開き、中からボタンが出てきます。ボタンには各サイトのURLをハイパーリンクとして追加し、クリックするとリンク先のウェブページが開くようになっています。
データサイズ最適化のためのマテリアル設定
Splineのシーンサイズを最小限に抑えるため、また色の管理をしやすくするために、マテリアルの色はカラーアセットに登録しています。基本的にはこのカラーアセットから色を設定しているので、マテリアルを都度作成する必要がなくなり、効率的にデザインを進めることができました。
③Spline3Dのゲームコントロール設定
プレイアブルキャラクターのステートとアニメーション設定
シーンサイズを抑えるためにシンプルな形を基本としていますが、プレイアブルなキャラクター（ひよことエイリアン）は、ジャンプすると表情が変わるように細かいアニメーションを設定しました。
よりリアルな動きに近づけるため、手足と頭のパーツのアニメーションにわずか時間差を設けています。
キャラクターは、最初に仮のモデルで3Dシーン内に配置し、島にあるオブジェクトとキャラクターとのサイズ感対比や、ディスタンスイベント（キャラクターが近づくとアニメーションがトリガーされる仕組み）の距離の調整を行うことから開始しました。
コリジョン（3Dオブジェクト同士が衝突判定になる範囲）はカプセルの形で設定し、近すぎず・遠すぎない距離を実際にSplineのプレビューシーン内でキャラクターを動かしながら調整しました。
コリジョンが近すぎるとオブジェクトが多いエリアでは複数のオブジェクトが同時にトリガーされてしまい、逆に遠すぎるとプレイヤーが「インタラクション（何らかの仕掛け）があるかどうか」が分からないので、あまりゲームになれていないような人でも楽しめるゲームバランスを探っていきました。
キャラクターの可動範囲と環境オブジェクトのサイズ感調整
プレイアブルキャラクターは橋から落ちてしまっても島内を移動ができるように、小さな足場も追加しました。適度に足場と島を離すことで、ジャンプ（スペースキーもしくはタップ）で上手く渡れるように、ゲーム要素を取り入れています。
また、Spineシーン内でキャラクターが稼働できる範囲を限定するため、島の周りには透明な壁を配置しました。これにより、キャラクターが意図しない場所まで行ってしまうことを防ぎつつ、ある程度島の周囲（海）を泳いで探索できる自由さも取り入れることが出来たと思います。
④Spline3Dでのインタラクティブ設定と変数の追加
キャラクターの操作によりトリガーされるインタラクティブアニメーションの追加
メインオブジェクトのほとんどは、何らかのアニメーションかインタラクションをSplineで設定し、キャラクターが近づくとトリガーされ、Splineで設定した"アクション"が発動する仕組みにすることで、訪問者が島を隅々まで探索したくなる仕掛けを散りばめました。
Riveのアニメーションサービスをテーマにした島では、Splineの物理演算も使用し、キャラクターが一番上のブロックに到達すると、くす玉が割れる隠れアチーブメントが設定されています。
Spline3Dの変数①リアルタイムな時間表示設定
今回自分で課した制作ルールの1つに、Splineの変数を使うというルールがありました。blenderやCinema4Dと違い、3Dデザインとインタラクティブなアニメーションのほか、今までは高度なプログラミング技術が必要だった変数でさえもSplineで実装できるというSplineならではの特徴・強みを存分に活かしたかったからです。
とはいっても私自身はプログラミングの知識は初心者レベルなので、比較的簡単に実装できる"時間"の変数と、カウンターの変数を使うことにしました。
時間の変数は島の中央・後ろに設置したデジタル時計に設定しています。この時計は2つ配置し、左側の赤い時計はプレイヤーの現地時間を、右側の青い時計は私（ニュージーランド）のローカルの時間帯がリアルタイムで表示されます。
私はニュージーランドを拠点に世界中のクライアントと仕事をしているので、グローバルさを取り入れたかったのと、このインタラクティブポートフォリオの島を訪れた人により没入感・近い距離感を感じてもらうために導入しました。
Spline3Dの変数②カウンター：島を隅々まで探索して集める星の鍵のしくみ
もう一つの変数はカウンターです。
島内に星の鍵を10個配置し、キャラクターが星の鍵に触れることで、キャラクター左上のカウンターに集めた鍵の数が追加されていきます。
この変数設定は少し複雑だったので、Splineコミュニティに共有されていたいくつかのデータを参考にしながら仕組みを理解するため、このインタラクティブポートフォリオのプロジェクトの開始前にテストシーンで実験していました。
星の鍵を島全体に散りばめることで、この島を訪れた人が「隅々まで探検したい！」と思えるようなインタラクティブポートフォリオを目指しました。
ゲーミフィケーション：全ての鍵を集めてアンロックするアチーブメントのデザイン
星の鍵を10個すべて集めると、アチーブメントがアンロックされます。これは私自身小さい頃から星のカービイやスタフィーなどのゲームが大好きで、「ゲーム」というエンターテインメントとクリエイティブ性が自分らしいデザイン・考え方やインスピレーションの基盤ともなっているので、自分のインタラクティブポートフォリオに取り入れたい要素の1つでした。
Spline内にmp4のサウンドエフェクトをインポートし、星の鍵を入手した瞬間・10個すべて集めた時などに効果音が出るように設定しています。
アチーブメントにはキャラクターの頭の上に王冠が追加されたり、島の中央にLITTLE FUJIの象徴であるFUJI（富士山）が登場したり、背景に虹がかかるなどの面白い仕掛けを追加しました。
ちなみに富士山の頭からはポコポコ煙が出ていますが、これはSplineのパーティクルで設定しています。
ぜひ実際にLITTLE FUJI Islandをプレイして、アチーブメントの達成を目指してみてください。
⑤Wix Studioへの統合とVeloを使った連携
以上でSpline側での作業は一通り終わったので、最後のプロセス・Wix Studioへの統合に移ります。
Wix Studioでは2025年8月現在、Splineをコンポーネントとして追加するような設定がなく、カスタムコードで追加する方法しかありません。
ハッカソンにはFramerもしくはWebflowでの作成にボーナス点が追加されるというルールがあったのですが、試しにWebflowを使ってみても操作感に慣れず、また普段からWix Studioをメインで使っているので、今後自分のサービス内・スキルとの掛け合わせでSplineを使うため、Wix StudioとSplineの統合は課題の1つでもありました。
Spline3DとWix Studioの統合：Splineシーン上のトリガーでWixのイベントを発火させる
Webflow側で最初にテストをしたところ、Webflow側からのイベント（クリックなど）でSplineシーン内のオブジェクトに設定したインタラクションを発火させることはできたのですが、今回私が実現したかったのはその逆でした。
つまり、Spline3Dシーン上でのイベントにより、ウェブブラウザ側でのアクションを発火させたかったのです。
そのため、Spline側の設定としては、島内の青いはてなボックスにMouse Down（ボックス上をマウスでクリック、スマホの場合はタッチ）のイベントを追加しました。
最も難関だったのはWix Studio側での設定です。Wix Studio側では、はてなボックスと同じ数のライトボックスを作成しました。
Wix Studioで新規のページを作成し、カスタムコードでSplineの3Dシーンを読み込みます。その上にライトボックスをがポップアップで表示される仕組みです。
ただし、Splineで設定している指定のオブジェクト（はてなボックス）に触ったときにだけ、特定のライトボックスを表示させるには、現状WixのVeloでカスタムコードを設定するほかありませんでした。
Veloは全く使ったことがなかったので、この分野に詳しいWix Velo デベロッパーの新堀さん（N5-Creation）にお力添えいただき、SplineのオブジェクトのMouse DownイベントとWix Studioのライトボックスアクションを連携させることに成功しました。
SplineではObject IDというそれぞれ固有のIDが3Dオブジェクトに割り振られているので、このオブジェクトIDでイベント発火の元となるはてなボックスを指定しています。
Wix Studioでのロード画面追加
最終的にSplineの3Dシーンのデータサイズは2.8MBになりました。
Wix Studioも経由しているので、どうしても3Dシーンのロードに時間がかかってしまうため、Wix Studio側ではページにロード画面を追加しました。
ロード画面の背景には島の様子やプレイしている実際の画面をぼかしで入れることで、待っている間もわくわくするような工夫を心掛けました。
この表現は、どうぶつの森でドードーエアラインを使って他の島にフライトする時のロード画面から着想を得ています。
デバイス検証
Wix StudioとSplineの統合がようやく設定完了した後、最後にデバイス検証を行いました。
Spline3Dシーン単体はデスクトップ・タブレット・スマホでも適宜確認し、サイズ感や配置を調整していましたが、実際にWix Studioに組み込んだ後だとロード時間の長さが気になったので雲などの一部の3Dオブジェクトを泣く泣くカットし、なんとか3MB以下のサイズに抑えました。
今後もSplineの3Dシーンのデータサイズ、ウェブサイトやアプリに統合後のローディング時間は課題の1つかなと思います。
Spline3Dの可能性と限界への挑戦
以上がSplineで作成した3Dのインタラクティブポートフォリオ・LITTLE FUJI Islandの制作プロセスでした。
Splineでの3Dアセットのモデリングに加え、その当時LITTLE FUJIにはサービスの下層ページがなかったので、 同時進行でサービス一覧ページ・サービス詳細ページもWixで作成していくというかなり強行突破なスケジュールでした。笑
１週間ほど明け方まで作業していたのでへとへとでしたが、なんとかハッカソンに提出し参加できたこと、また作り切ったことに達成感を感じています。
逆にハッカソン期間というタイムリミットがなかったら、ウェブサイトの下層ページ着手すらしていなかったので、やはり個人プロジェクトでもきちんと期限を設けることが大事だなと改めて思いました。
Splineの3Dシーンのデータサイズ最適化のための工夫
今回、3Dシーンのデータサイズ最適化のため、全ての3DオブジェクトをSpline内でモデリングしました。
一応Splineでメッシュの編集やサブディビジョンの数値を増やすことはできますが、メッシュ数（ポリゴン数）を増やすほどSplineのシーンサイズが大きくなってしまうので、最小限のメッシュでオブジェクトを形作っていきました。
基本的なシェイプを組み合わせるだけでなく、メッシュ化して編集することで、少し複雑な形を作ることができました。
マルチディメンションで活用できるSplineの3Dデザインと、インタラクティブデザインの可能性
私はSplineを使い始めて1年半ほどとなりますが、Splineを使うまではblenderやWompなど他の3Dソフトウェアも使っていました。
その中でもSplineは苦手だった3Dモデリングが楽しくなるほど使いやすく、また何よりも、プログラミングの知識を持たないデザイナーでも3Dとインタラクション設定を手軽に作れることが衝撃的でした。
Splineのウェブサイトにもあるように、Splineは3Dを様々なデザインとコラボレーションすることができる革新的な3Dツールだと思います。
また、私は2025年5月に、SplineエキスパートデザイナーとしてSplineでCCOを務めるCaroline（キャロライン）と、フリーランス向けプラットフォームContraのプロダクト部門リーダー・Allison（アリソン）と一緒に、ライブイベントに登壇させていただきました。
その際、SplineのCCO・キャロラインとの会話で「Splineでマルチディメンションなデザインを実現する」という言葉がとても印象的でした。
まさに私がやりたかったデザインの表現方法、アプローチと重なる部分があったからです。
3Dデザインを単なる3Dイラスト・画像・3Dアニメーションとして終わらせるのではなく、アプリやウェブサイト、ARなど、他のデバイスに搭載し、「触って動かせる3D体験」をユーザーに届けることができるのが、Splineならではの面白いところであり強みだと思います。
実際にSpline3Dのプロジェクトでは、クライアントにはプロダクトデザイナー・エンジニアが多く、そういった他業種のプロフェッショナルと一緒に3Dデザインを進めることがほとんどです。
今後もSplineを使って、3Dを幅広いデバイス・シーンと融合させたマルチディメンション（多面的）なクリエイティブデザインを作っていきたいと思います。
なお、上記の登壇イベントは全て英語になっています。日本語訳をつけて解説した記録はnoteで公開していますので、興味のある方はぜひこちらもご覧ください。
まとめ：Splineを使った3Dのインタラクティブポートフォリオ作りで学んだこと
訪問者が「知りたい」という好奇心を持って、自ら探索できるポートフォリオを目指して
最後になりますが、今回のSplineを使った3Dインタラクティブポートフォリオというプロジェクトは、私にとって大きな挑戦でした。
キャラクターデザインとゲームデザイン、3Dモデリング、マテリアル設定、インタラクションの設定、ウェブページのデザインを同時進行で行ったので、本当に間に合うか・作り切れるか不安もありました。
実際作り始めて見るととても楽しくて、何よりも「ゲームを作ること」は一つの夢でもあったので、Splineを使ってそれを叶えられたのはとても嬉しく思います。
今回のコンセプトである「自分らしさが詰まった小さな世界」、そして「ユーザーが自ら探検したくなる・知りたくなるようなポートフォリオ」を形にできたことで、自分がどんなデザインが好きなのか・どんな物に影響を受けているのか、これからどんなデザインを作っていきたいかを改めて深堀りできたと思います。
インタラクティブポートフォリオ・LITTLE FUJI Islandを通じて、3Dデザインの面白さやSplineの可能性、そしてLITTLE FUJIという私自身について少しでも興味を持っていただければ幸いです。
コメント