top of page

Splineとは？次世代のインタラクティブ3DデザインツールSpline3Dでできること

  • 2月15日
  • 読了時間: 9分

モデリングも、アニメーションも、インタラクションも1つで完結。オールインワンの3Dデザインツール・Spline 3Dとは


Spline3D（通称スプライン）は、リアルタイムで動く3Dインタラクティブデザインを作れるデザインツールです。


3Dとデザイン用のプラットフォームを示す画像。黒背景にカラフルな幾何学模様とウサギのキャラクター。中央に英語のテキスト。
引用元：Spline 3Dの公式WEBサイト トップページ(2026年時点)

3Dとデザインのためのオールインワンプラットフォームとある通り、3Dモデリング、アニメーション、物理演算、インタラクションまで、全てSpline内で作れます。


3Dモデリングと聞くと、blenderやCinema 4Dなどが一般的ですが、そういった従来の3Dツールは静止画もしくは動画として書き出すことがほとんどです。


さらに、blenderで作った3DモデルをWeb上でインタラクティブに動かす場合は、Three.jsなどを使った高度なプログラミングが必要になります。


しかし、Splineの強みはインタラクティブな3Dデザイン、つまりWebやアプリ上でクリックしたり、マウスホバーしたりといった「ユーザーの動作」に反応するインタラクションも設定できるという点です。


丸い目の青い惑星のキャラクターが虹色のリングの中にいて、星と宇宙の背景があるアニメーション画像。楽しげな表情。
マウスホバーで追尾するインタラクション付きの3Dバッジ。Spline Universeのロゴ制作ページより

レスポンシブ設定も対応しているので、スマホやデスクトップ、タブレットなど、様々なデバイスで「触って動かせる」3Ｄデザインを作れるのが、Spline 3Dの大きな魅力です。


3Dとデザインのためのオールインワンプラットフォーム、Spline3Dでできること


Splineでは、3Dモデリング、マテリアル、ライティング、アニメーション、インタラクション設定すべてを同じ画面上で行えます。


blenderよりもUIがシンプルなため、3Dデザインに慣れていない他業種のデザイナーや、3Dデザインに挑戦してみたい！という方でも、比較的扱いやすいツールだと思います。


今回は、インタラクティブな3Dデザインが完成するまでの工程ごとに分けながら、Spline 3Dで実際にできることをご紹介します。


① 3Dモデリング

Splineでは、球体や正方形などの基本的な形状を組み合わせて、3Dオブジェクトを作成できます。


ペンツールで描いた線をパスに変換したり、メッシュ編集などもできるため、Spline内で様々な3Dモデリング可能です。


また、リアルタイムでの共同編集が可能なため、複数人で同時に3Dモデリング・アニメーションを設定するといったチームでの作業もできます。


こちらは、実際にすべてSplineを使ってモデリングしました。👇


満月の下で、白いゴーストがキャンディを手に持ち、夜空を背景に飛んでいる。木の枝や墓石が見え、「HAPPY HALLOWEEN!」の文字。

ユニークなものでは、シェイプブレンドというモデリング方法もあります。


こちらはグミやお餅のように、柔らかく、ぐにゃ～っとした形状を組み合わせて3Dモデルを作っていきます。


白い球体2つが黒い背景に表示され、1つは弧を描いて移動中。赤と緑の矢印が球体に向かう。トランジションの様子が見える。

②マテリアル設定


モデリングしたオブジェクトには、グラデーションといった色のほか、アウトラインレイヤーを使って線画風の3Ｄデザインも作成可能です。


青と黄色のロボットがいます。背景にグラフと数字（21:51:25）が表示されたスクリーンがあり、吹き出しに「CLICK HERE!」。
Splineのアウトラインレイヤーを使って作った3Dデザイン

マテリアルレイヤーを組み合わせることで、トゥーンシェイディング風のものやガラスのような質感など、様々な質感を表現できます。


このレイヤーの設定は、Photoshopなどと操作感が近く、グラフィックデザインに慣れている人は扱いやすいのではないでしょうか。


黒、オレンジ、ピンクのウサギの彫刻が3つ並んでいる。黒い背景に「Displace」のテキストが青でハイライトされている。


③3Dアニメーション

Spline 3Dでは、オブジェクトの移動・回転・拡大縮小などを使って、3Dアニメーションを作成できます。


基本はステートと呼ばれる「状態」を設定し、そのステートを切り替えていくというステートアニメーションの仕組みが基本となっています。


例えば、立方体の最初の状態を白色で、ベースステートとします。


次に、新しいステートと追加し、黄色に色が変わる状態を作ります。


さらにステート2を追加し、色が水色に、大きさも少し大きくなる状態を設定します。


3Dソフトウェアの画面。中央に白い立方体があり、周囲に赤、青、緑の矢印。右側に「Edit Event」メニューと「Base State」選択中。

3つのステート（状態）をつくったら、次にトランジションのアクションを追加し、1秒かけてそれぞれのステートに変化していくアニメーションを設定します。


つまり、立方体は白、水色、最後に少し大きくなって黄色に変化するというアニメーションができあがります。


回転する白い立方体が黒い背景に表示されている。シンプルでモノクロのデザインで、動きがリズミカル。

このようなステートアニメーションのほか、キーフレームを打ち込んでいくタイムラインアニメーションもつい最近新たに追加されました。


黒い背景に黄色の正方形が表示されたデジタル編集画面。タイムラインや設定オプションが左下に配置され、操作が可能。
Splineに追加されたタイムラインアニメーション

このキーフレームを設定していくタイムラインアニメーションは、AfterEffectsなどの動画編集ソフトに似ているので、映像制作の経験がある人はこちらのタイムラインアニメーションが馴染み深いかもしれません。


私は普段ステートアニメーションを主に使っていますが、タイムラインアニメーションを使ったチュートリアル動画もYouTubeで紹介していますので、ぜひこちらも参考にしてください。


暗い背景に、眠っている洋ナシのキャラクターが浮かぶ可愛らしいイメージ。「Spline 3D Tutorial: SLEEPING PEAR」のテキストが表示。


④インタラクション

Splineの最大の特徴が、リアルタイムで反応するインタラクションの設定です。


マウスによるクリック、スマホ画面でのタップ、マウスホバー、ドラッグアンドドロップなどの操作をトリガーとして、シーン内の3Dオブジェクトを動かしたり、設定したアニメーションを再生することができます。


イベント編集画面の中に、「スタート」「マウスアップ」「キー入力」などの様々なアクション選択項目が並ぶ。背景は黒。

マウスダウン、スクロール、キーダウンなどの「イベント」を設定し、どのオブジェクトを対象とするのか、どのようなアクションを開始するのかを指定します。


このインタラクションも一切コードを書かずに設定できるため、デザイナー自身がリアルタイムでインタラクションを試しながら調整できる点も大きなメリットです。


実際にSpline 3Dで作ったインタラクティブな3Dシーン


実際に、Splineを使って、簡単なアニメーションとインタラクションを設定した3Dシーンを作成してみました。



LITTLE FUJIのロゴをSplineでモデリング・作成し、ロゴの上にマウスホバーするとロゴが大きくなり、さらにクリックすると1回転します。


また、物理演算効果も設定しているため、ロゴ周辺にあるパーツをドラッグで動かすことも可能です。


ドラッグアンドドロップで動かしたオブジェクトは、離すと無重力空間に漂うかのようにふわふわ浮かびます。


デスクトップ・スマホ版両方からでも操作可能です。

もっと広い画面で触ってみたい！という方は、こちらからフルスクリーンで体験いただけます。




Spline 3Dの始め方｜ブラウザ版とデスクトップ版の違い


Spline 3Dは、公式ウェブサイトからブラウザ版を利用できます。

アカウント登録が必要ですが、無料プランもありますので、ぜひ気軽に試してみてください。



自分のパソコンにインストールできるデスクトップ版もあります。

Windows、Mac OSに対応。



ブラウザ版とデスクトップ版で動作環境に差異はありませんが、私は主にブラウザ版を使っています。


ライトモード、ダークモードの切り替えも可能なので、ご自身の編集しやすい環境を選びましょう。


青い背景にライトモードとダークモードを比較するデザインスタジオのUI。中央にキャラクター「LITTLE FUJI」と色のある3Dオブジェクトが配置されている。

Spline 3Dの値段は？

2026年現在、Splineには3つの有料プランがあります。

スターター、プロ、エンタープライズ（企業向け）です。


3つの価格プランが表示されたダーク背景の料金表。左から「Starter」青、「Professional」緑、「Enterprise」黒。中央に「Upgrade」ボタン。
Spline3dのプラン（2026年時点）

🚀Starter スタータープラン

月額12ドル、日本円で2,000円ほどの一番安いプランです。


無料アカウントでは3つまでの制限があるSplineファイルが、無制限で作成できるようになります。

また、Webエクスポート（URLとして3Dシーンを公開する時など）に表示されるSplineのロゴを非表示にできることも大きいです。


動画素材のインポートができますが、動画、AndroidやApple、アプリ開発用のファイルでの書き出しはできません。


そのため、

  • 無料プランのファイル数（3つまで）よりはファイルを頻繁に作成する

  • 基本的に静止画の画像もしくはWebエクスポート（URL）での公開を予定している

という方におすすめのプランになります。


🌟Pro プロプラン

月額20ドル、日本円で3,200円ほどのプランです。


スタータープランと同じく、作成できるファイル数が無制限のほか、1つがのファイルに複数のシーンが作成できるようになります。


例えばロード画面を最初のシーンに作成して、メインの3Dシーンに数秒経ったら切り替える…というような構造も可能になります。



また、書き出し形式もアプリ開発（iOS、APK、AppBundle、Vision OSなど）、コードエクスポート（js、React、Three.js、Next.js）、動画書き出しができるほか、変数も無制限に設定できます。


Proプランに月額5ドル追加することで、Spline AIも利用できるようになり、毎月2,000クレジットが獲得できます。

AIクレジットはSpline AIによる3Dモデル生成、テクスチャ生成などが可能です。


  • Splineを仕事として本格的に使いたい

  • Splineで作成したインタラクティブな3Dシーンを、アプリやローカル環境のウェブサイト開発で使いたい

という方におすすめです。


私はこのプロプランで利用しています。


●エンタープライズプラン

エンタープライズプランは全ての制限がなくなり、AIクレジットもカスタムで設定することが可能です。

こちらは基本的に組織単位で使用するプランのため、会社全体でエンタープライズプランを検討している、という方が対象になります。


なお、機能や作成できるファイルに制限はありますが、Splineは無料プランでの利用も可能です。


Splineの月額・年間費用、及びプランの詳しい内容については、こちらのSplineのPricingページをご参照ください。




3Dデザイン初心者にもおすすめ！Splineを始めてみよう

以上がSplineの簡単な紹介でした。


Splineは、


  • モデリングからアニメーション、インタラクション設定まで1つで感ける

  • レスポンシブ対応可能

  • リアルタイムでの共同編集が可能


という特徴を持つ、オールインワンのインタラクティブ3Dデザインツールです。


「3Dデザインは初めて」

「動画や静止画だけでなく、触って動かせるインタラクティブなデザインを作ってみたい」


という方に、特におすすめです。


今後もSplineの魅力や具体的な使い方、機能などをブログで紹介していこうと思います！

質問等があれば、お気軽にお問い合わせください。




Splineエキスパートデザイナー・Ayaka Fujiのプロフィール


デザイナーのプロフィール画像と4つの作品例。作品は3Dデザインで、コンベア、スマートフォンのアプリなどが色鮮やかに表現。

Ayaka Fuji / Spline expert


日本人初のSplineエキスパートデザイナー。LITTLE FUJI Design Studio代表。


Spline 3D・Hana・Riveを活用し、Web・アプリ向けのインタラクティブデザインを制作。

ポップでかわいい表現から、リアルスティックな3Dプロダクトビジュアルまで幅広く対応。


プロダクトの特徴を捉えた3Dモデリングのほか、3Dならではのリッチなマテリアル表現、複数のアニメーション設定とインタラクションを組み合わせた「思わず触りたくなる3D体験」を得意とする。


また、デスクトップやスマートフォンなど様々なデバイスへの搭載を前提に、シーンサイズの最適化を意識。モデリングからアニメーションまでをSpline内で完結させるアプローチを基本としている。

実績・メディア

bottom of page