Splineとは？次世代のインタラクティブ3DデザインツールSpline3Dでできること
- 2月16日
- 読了時間: 7分
モデリングも、アニメーションも、インタラクションも1つで完結。オールインワンの3Dデザインツール・Spline 3Dとは
Spline3D（通称スプライン）は、リアルタイムで動く3Dインタラクティブデザインを作れるデザインツールです。
3Dとデザインのためのオールインワンプラットフォームとある通り、3Dモデリング、アニメーション、物理演算、インタラクションまで、全てSpline内で作れます。
3Dモデリングと聞くと、blenderやCinema 4Dなどが一般的ですが、そういった従来の3Dツールは静止画もしくは動画として書き出すことがほとんどです。
さらに、blenderで作った3DモデルをWeb上でインタラクティブに動かす場合は、Three.jsなどを使った高度なプログラミングが必要になります。
しかし、Splineの強みはインタラクティブな3Dデザイン、つまりWebやアプリ上でクリックしたり、マウスホバーしたりといった「ユーザーの動作」に反応するインタラクションも設定できるという点です。
レスポンシブ設定も対応しているので、スマホやデスクトップ、タブレットなど、様々なデバイスで「触って動かせる」3Ｄデザインを作れるのが、Spline 3Dの大きな魅力です。
3Dとデザインのためのオールインワンプラットフォーム、Spline3Dでできること
Splineでは、3Dモデリング、マテリアル、ライティング、アニメーション、インタラクション設定すべてを同じ画面上で行えます。
blenderよりもUIがシンプルなため、3Dデザインに慣れていない他業種のデザイナーや、3Dデザインに挑戦してみたい！という方でも、比較的扱いやすいツールだと思います。
今回は、インタラクティブな3Dデザインが完成するまでの工程ごとに分けながら、Spline 3Dで実際にできることをご紹介します。
① 3Dモデリング
Splineでは、球体や正方形などの基本的な形状を組み合わせて、3Dオブジェクトを作成できます。
ペンツールで描いた線をパスに変換したり、メッシュ編集などもできるため、Spline内で様々な3Dモデリング可能です。
また、リアルタイムでの共同編集が可能なため、複数人で同時に3Dモデリング・アニメーションを設定するといったチームでの作業もできます。
こちらは、実際にすべてSplineを使ってモデリングしました。👇
ユニークなものでは、シェイプブレンドというモデリング方法もあります。
こちらはグミやお餅のように、柔らかく、ぐにゃ～っとした形状を組み合わせて3Dモデルを作っていきます。
②マテリアル設定
モデリングしたオブジェクトには、グラデーションといった色のほか、アウトラインレイヤーを使って線画風の3Ｄデザインも作成可能です。
マテリアルレイヤーを組み合わせることで、トゥーンシェイディング風のものやガラスのような質感など、様々な質感を表現できます。
このレイヤーの設定は、Photoshopなどと操作感が近く、グラフィックデザインに慣れている人は扱いやすいのではないでしょうか。
③3Dアニメーション
Spline 3Dでは、オブジェクトの移動・回転・拡大縮小などを使って、3Dアニメーションを作成できます。
基本はステートと呼ばれる「状態」を設定し、そのステートを切り替えていくというステートアニメーションの仕組みが基本となっています。
例えば、立方体の最初の状態を白色で、ベースステートとします。
次に、新しいステートと追加し、黄色に色が変わる状態を作ります。
さらにステート2を追加し、色が水色に、大きさも少し大きくなる状態を設定します。
3つのステート（状態）をつくったら、次にトランジションのアクションを追加し、1秒かけてそれぞれのステートに変化していくアニメーションを設定します。
つまり、立方体は白、水色、最後に少し大きくなって黄色に変化するというアニメーションができあがります。
このようなステートアニメーションのほか、キーフレームを打ち込んでいくタイムラインアニメーションもつい最近新たに追加されました。
このキーフレームを設定していくタイムラインアニメーションは、AfterEffectsなどの動画編集ソフトに似ているので、映像制作の経験がある人はこちらのタイムラインアニメーションが馴染み深いかもしれません。
私は普段ステートアニメーションを主に使っていますが、タイムラインアニメーションを使ったチュートリアル動画もYouTubeで紹介していますので、ぜひこちらも参考にしてください。
④インタラクション
Splineの最大の特徴が、リアルタイムで反応するインタラクションの設定です。
マウスによるクリック、スマホ画面でのタップ、マウスホバー、ドラッグアンドドロップなどの操作をトリガーとして、シーン内の3Dオブジェクトを動かしたり、設定したアニメーションを再生することができます。
マウスダウン、スクロール、キーダウンなどの「イベント」を設定し、どのオブジェクトを対象とするのか、どのようなアクションを開始するのかを指定します。
このインタラクションも一切コードを書かずに設定できるため、デザイナー自身がリアルタイムでインタラクションを試しながら調整できる点も大きなメリットです。
実際にSpline 3Dで作ったインタラクティブな3Dシーン
実際に、Splineを使って、簡単なアニメーションとインタラクションを設定した3Dシーンを作成してみました。
LITTLE FUJIのロゴをSplineでモデリング・作成し、ロゴの上にマウスホバーするとロゴが大きくなり、さらにクリックすると1回転します。
また、物理演算効果も設定しているため、ロゴ周辺にあるパーツをドラッグで動かすことも可能です。
ドラッグアンドドロップで動かしたオブジェクトは、離すと無重力空間に漂うかのようにふわふわ浮かびます。
デスクトップ・スマホ版両方からでも操作可能です。
もっと広い画面で触ってみたい！という方は、こちらからフルスクリーンで体験いただけます。
Spline 3Dの始め方｜ブラウザ版とデスクトップ版の違い
Spline 3Dは、公式ウェブサイトからブラウザ版を利用できます。
アカウント登録が必要ですが、無料プランもありますので、ぜひ気軽に試してみてください。
自分のパソコンにインストールできるデスクトップ版もあります。
Windows、Mac OSに対応。
ブラウザ版とデスクトップ版で動作環境に差異はありませんが、私は主にブラウザ版を使っています。
ライトモード、ダークモードの切り替えも可能なので、ご自身の編集しやすい環境を選びましょう。
3Dデザイン初心者にもおすすめ！Splineを始めてみよう
以上がSplineの簡単な紹介でした。
Splineは、
モデリングからアニメーション、インタラクション設定まで1つで感ける
レスポンシブ対応可能
リアルタイムでの共同編集が可能
という特徴を持つ、オールインワンのインタラクティブ3Dデザインツールです。
「3Dデザインは初めて」
「動画や静止画だけでなく、触って動かせるインタラクティブなデザインを作ってみたい」という方に、特におすすめです。
今後もSplineの魅力や具体的な使い方、機能などをブログで紹介していこうと思います！
質問等があれば、お気軽にお問い合わせください。
Splineエキスパートデザイナー・Ayaka Fujiのプロフィール
Ayaka Fuji / Spline expert
日本人初のSplineエキスパートデザイナー。LITTLE FUJI Design Studio代表。
Spline 3D・Hana・Riveを活用し、Web・アプリ向けのインタラクティブデザインを制作。
ポップでかわいい表現から、リアルスティックな3Dプロダクトビジュアルまで幅広く対応。
プロダクトの特徴を捉えた3Dモデリングのほか、3Dならではのリッチなマテリアル表現、複数のアニメーション設定とインタラクションを組み合わせた「思わず触りたくなる3D体験」を得意とする。
また、デスクトップやスマートフォンなど様々なデバイスへの搭載を前提に、シーンサイズの最適化を意識。モデリングからアニメーションまでをSpline内で完結させるアプローチを基本としている。
実績・メディア
ContraとSplineによる共同開催のウェビナーにゲストスピーカーとして登壇
YouTubeチャンネル「Spline Universe」で、Splineの初心者向けチュートリアルを発信
Spline expert認定デザイナー（日本人初）
コメント