Splineとは？

Splineとは、主にWeb用に簡単に3Dグラフィックスを作成することができるソフトです。

Splineは3Dの経験に関係なく、あらゆるデザイナーに適した使いやすい3Dデザイン・ツールです。フル機能の3Dアプリ (Cinema 4DやBlender など)よりも簡単に習得できます。

Splineの利点

設定や機能の負荷に悩まされることがありません。何よりも、ブラウザベースで無料なので、文字通り誰でも、どのコンピュータを持っていても使用できます。

Splineは、2020年末にリリースされました。SplineはBlender、3D Max、Cinema 4Dのような典型的な3D環境ではありません。Blenderのようにノードを組まなくてもマテリアルを簡単に作れることが大きな特徴です。

Splineで制作したオブジェクトを直接ウェブサイトにアップロードできます。 Spline には、ライブURL、バニラJavaScript、反応コードなどのWebテクノロジ用の多くのエクスポート・オプションがあります。オブジェクトやアニメーションをエクスポートして、ゲーム、ビデオなどを作成することもできます。

例としてSplineのInstagramを見ると、ポップな3Dグラフィックスが公開されています。

今回はSplineに関するチュートリアルをまとめました 。プログラムを始めるために知っておくべきことについてのチュートリアルを見ました。

Splineで出来ること

• 3Dモデリング

• 3Dシーンを作成

• リアルタイムコラボレーション

• アニメーション

• インタラクティブ機能

• webサイトへの埋め込みコード作成

などなど…他にも多くの機能があります。

SplineのUIに慣れよう

何よりもまず、Splineに移動し、そのインターフェイスに慣れてください。直感的なワークスペースになるようにデザインされています。

デザイン系のソフトと似ていて、UIがとてもシンプルで、普段AdobeのソフトやFigmaを使っている人はとても使いやすいと思います。初心者でもすぐに慣れて感覚的に操作することができます。

ブラウザの翻訳機能で日本語に変換すると、日本語に切り替えることもできます。

Spline にはダウンロードできるデスクトップ・アプリがありますが、Webサイト内でも作業できます。

Splineで3Dを始めてみよう！

詳しい操作方法については、「Yuka Ohishi」さんがyoutubeにアップしているチュートリアルが非常に分かりやいので、こちらを見るのがおすすめです。こちらの動画で一気にSplineについて、レイアウト、ツールの使用方法を学ぶことができます。

ますます重宝されるようになってきた、3Dスキル！ プロになったらやっぱりBlenderなどに移行することになるかもしれないけど、まず3Dの世界に踏み込んでみるならSplineがおすすめです🙌

他の3Dソフトとの違い

私のように以前に3Dに挑戦したけど挫折した人、または３Dに初挑戦する方々にとてもおすすめのソフトです。

Blenderやcinema4dといったソフトに比べ、出来ることは少ないですが、十分にハイクオリティーな3Dを作る事ができます。また操作が簡単で、UIがシンプルなので、他のソフトよりもUXフレンドリーといえると思います。

⚠️注意点は、SplineはWebで使用できる3Dグラフィックを作るソフトウェアであることです。3Dオブジェクトとして出力することはできず、公開用のURLや画像、動画といった形式でしか出力することができません。

Splineのライブラリの例

Splineにはたくさんの創造性を刺激するライブラリの例が表示されます。 これらのサンプルを開いてみてください、何ができるかについてのアイデアを得ることができます。

0から作るのは難しいという方も、初めはライブラリを使って操作方法などに慣れることができます。

Splineは他のプログラムよりも直感的なワークスペースになるようにデザインされていますが、Figmaや、XDなどのデザインアプリも使用したことがない場合は、少し時間を取って自分の方向性を理解するようにしてください。 

Photoshop や Illustrator と同じように、ペン ツールをつかんでベジエ ハンドルを使用してパスを描画し、独自のカスタム シェイプを作成することもできます。

ナビゲーション

パネルにいくつかのオブジェクトを配置したら、3D 空間で構成を調整するために移動する必要があります。 ナビゲートする方法を学ぶ必要があります。これをいくつか覚えておくことをお勧めします。

• Option/ALTを押しながらドラッグして、コンポジションの周りを周回します。

• スペースを押したままドラッグして、コンポジションをパンします。

• マウスのスクロール ホイールを上または下に使用して、拡大または縮小します。 または CMD/CTRL +/-

• 時間をかけてカメラ コントロールをいじって、構図に最適な表示オプションを確認してください。また、オブジェクトを見失った場合は、右クリックして [カメラをリセット] を押して、構図の中心に戻します。

Splineを使った簡単な 3D — チュートリアル

Splineとは何か、3Dに飛び込むことに関心のあるデザイナーにSplineが提供するもの、およびUIがどのように機能するかを理解することができました。 また、これらを自分のデザインで使用する方法、完全にインタラクティブなモデルとしてFramerまたはWebflowに埋め込む方法 についても理解できました。

この時点で、私は本当にシンプルで簡単なものを作りたいと思っていました。

基本 - Splineの紹介

Basics - Introduction to Spline

便利なリソース

このドキュメントでは、Splineのコア機能について説明されています。 新しい機能が実装されると、コンテンツが更新されます。これはとても便利なリソースで、トラブルシューティングのクイック リファレンスとして便利です。

Splineでインタラクティブな3D キーボードを作成する方法

アニメーション化された 3D プロトタイプを Web サイトに埋め込むことができます。

Splineで色がどのように機能するか、またバウンス・ライト、アンビエント・ライティング、コンタクト・シャドウなどのライティングを検討する際に知っておくべき基本的な基礎を理解しました。

ベーシック・ライティング

Splineで色がどのように機能するか、またバウンス・ライト、アンビエント・ライティング、コンタクト・シャドウなどのライティングを検討する際に知っておくべき基本的な基礎を理解しましょう。

ベーシック・デェプスとグラデーション

インタラクティブ・リアクティブ球体の作成

インタラクティブ・リアクティブ球体のマウスをその上に置くと、ブドウが順番に浮かび上がります。

ローカル・グローバル深度マップがどのように機能するか、オブジェクトに光り輝く外観を与える方法、いくつかの役立つヒントとライティングの練習を学びました。

Splineを使用した3Dアイコンのデザイン

これら2つのチュートリアルでは、ベクター編集とSplineのモデリング・ツールを使用して3Dアイコンを作成する方法を学習しましょう。

• ベクターでアイコンを作る

• モデリングツールでアイコンを作る

• 背景の形を作る

• アイコン素材追加

• 最終調整

Splineでアニメーション化する方法

3D シーンの作成、マテリアルの編集、3D オブジェクトのモデリングを簡単に行うことができます。

オブジェクトのアニメーション化は、これまでになく簡単になりました。

トップバーの右側にある再生ボタンを押すと、コンポジションをテストスピンすることができます。

アニメーションを追加しなくても、ユーザーはオブジェクトを回転させたり回転させることができます。アニメーションはありませんが、テクスチャが互いにどのように再生されるかを見ることができます。

Spline の一般的な操作は、マウスホバーです。ユーザーのマウスがオブジェクトの上に置かれると、オブジェクトはスピン、回転、またはバウンドします。これは簡単なトリックで、見栄えがします。

オブジェクトを選択した状態で、右側の [状態] に移動し、[+] アイコンをクリックします。これにより、基本状態と、アニメーション化またはモーフィングする新しい状態が作成されます。基本状態はデフォルトです。それは静止しているあなたのオブジェクトです。State Oneをクリックして、オブジェクトを回転させます。次にBase Stateをクリックすると、オブジェクトが元の位置に戻ります。

ここで、Base StateからState Oneへの移行をトリガーするアクションを追加する必要があります。イベントに向かいます。

ここで、アクションをトリガーするイベントのタイプを選択できます。アニメーションのトリガー方法、繰り返しまたは巻き戻し、イーズインとイーズアウトの方法など、多数のオプションが表示されます。

何よりも、Splineのアニメーション ツールセットは、まだ知らないアニメーションの原則の多くを処理します。オブジェクトは跳ねたり、つぶれたり、伸びたりして、指示しなくても動きます。

書き出し方法

画面上部にある「Export」ボタンを押すと書き出しのメニューが出ます。書き出し可能な種類と形式は下記の通りです。

• Public URL

• Code（Experimental）
  vanilla js（Web Content）
  Three js
  React
  react-three-fiber

• Image
  jpg
  png

• Frame Recording
  MP4
  WebM
  GIF
  image Sequence

• .gitf（Geometry Only）

• .spline

まとめ

今回はブラウザ上で簡単に3Dモデルが作れる、無料のwebサービスSplineをご紹介しました。無料で使えるので3Dに興味がある方は是非試してみてください。

最後までお読み頂きありがとうございました。

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。

［参考資料］

［ツールのダウンロード］

［コースのご紹介］
完全な初心者向けで、このコースに経験は必要ありません。