COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

Splineの使い方を解説!3DオブジェクトをWeb上で動かしてみよう!

  • Web制作ハウツー
  • 特集
  • WebデザインTips
  • Web最新トレンド
Splineの使い方を解説!3DオブジェクトをWeb上で動かしてみよう!

最近のデザインには、3Dがよく取り入れられています。流行が戻ってきたY2Kだったり、2024年にAppleから発売される「Apple Vision Pro」の影響もあってか、3D表現がトレンドになっているなと感じます。

そんな3DCGですが、「どうやって作るんだろう?」「作るの難しそう?」と思っている人も多いのではないでしょうか。

じつは誰でも簡単に作れて、Webサイトに埋め込みができる凄いツールがあります! それが「Spline」です。

今回は「Spline」とはどんなツールなのかを紹介し、実際の使い方を簡単に解説したいと思います。
一緒に3D制作の一歩を踏み出しましょう!

Splineとは

Spline

https://spline.design/

Splineは、主にWeb用の3Dオブジェクトを作成できるツールです。ブラウザ上で動かせるため、アプリをダウンロードする必要がありません(アプリ版もあります)。基本無料で、UIもシンプルで直感的に扱うことができるため、初めて3D制作に取り組む人にはうれしいサービスです。

Splineのとくに優れているなと感じたことは、作った3DファイルをWebに埋め込むことができることです。URL書き出しやコード書き出しなどさまざまな書き出し形式があり、Web制作に大いに活用できる点がとても魅力的で、表現の幅も広がるなと感じました。

他にも素晴らしい機能がたくさんあるので、実際にSplineに触れて確かめてみましょう!

Splineを使ってみる

おすすめのチュートリアル

僕は下記のチュートリアルを一通り見ました。日本語で解説している動画や記事は少ないですが、Spline公式や海外のクリエイターの方がたくさん動画を挙げているので、自分の作りたいものに近いものを探して、真似してみるといいと思います!

おすすめチュートリアル

  • Splineで3Dを始めてみよう!
  • Designing 3D Icons with Spline - Part 1

Splineにはlibraryという項目に、テンプレートのような、すでに3Dオブジェクトが配置されているファイルがあります。まずはそのファイルで遊んでみて、基本的な操作方法やオブジェクトの動かし方を体験してみてください。

3Dオブジェクトを作ってみる

今回は下記のラフのような3Dオブジェクトを作ってみます。クーシーブログのロゴがくるくる回っていて、マウスホバーすると変形するといったものです。

3Dオブジェクトのラフ

新規ファイルの作成

「new file」から新規ファイルを作成します。

「new file」から新規ファイルを作成

ファイルを開くとデフォルトで正方形とライトが配置されているかと思います。今回はシェイプを使って立体を作っていくので、正方形は消してしまいましょう。
画面の操作方法は、[option + ドラッグ]で視点を動かし、[スペース + ドラッグ]で画面を動かすことができます。直感的ですね。

画面の操作方法

下絵の配置

では3Dオブジェクトを作成していきます。と、その前に下絵を用意しましょう。この画像を元にしてオブジェクトを作っていきます。今回はクーシーブログロゴの画像を配置します。

画像はy軸に対して垂直になるように配置したいので、画面中央下の視点切り替えの青色のポイントをクリックして、y軸が正面を向くようにします。その状態で画像をドラッグ&ドロップ(もしくはコピペ)で貼り付けます。画像の設定はposition[x:0 y:0 z:-20]、不透明度[40%]に調整しロックをかけます。

下絵の配置

ベクターツールでトレース

では「C」から作っていきましょう。ベクターツールに持ち替えてトレースしていきます。イラレのパスツールでオブジェクトを作っていく感覚とほぼ同じですね。

最初は使いにくいと思いますが、後から選択ツールで調整可能なので、適当にポイントを打っていきます。この時、不透明度を少し下げておくと下絵がうっすら見えてやりやすいです。

ベクターツールでトレース

ベクターパスを閉じたら、選択ツールで微調整していきます。

選択ツールで微調整

これで「C」のシェイプ要素の完成です!視点を変えるとこんな感じです。

視点を変えた「C」のシェイプ要素

押し出し

先ほど作った「C」のシェイプを押し出す(厚みを加える)ことで立体にしていきます。

押し出し方法は簡単で、シェイプを選択した状態で右のプロパティから、shapeのextrusionの値を調整するだけです。今回は「5」くらいにしておきましょう。この要領で要素を作成していきます!

shapeのextrusionの値を調整

位置の調整

すべてのパーツが用意できたら、右のプロパティから位置と色を調整して完了です。

省略した調整内容もありますが、大まかには今の手順で3Dオブジェクトが作れます。他にもさまざまな形成手順があり、もっと複雑な物が作れたりするのでいろいろ試してみてください!

用意されたすべてのパーツ
位置と色を調整

アニメーションの設定

次にSplineの醍醐味であるアニメーションをつけていきます。アニメーションの設定方法もたくさんあって、工夫次第ではいろんなおもしろい動きができそうです。今回は最初のラフで考えていたように、ロゴがくるくる回っていて、マウスホバーするとニョキっとロゴが飛び出る動きをつけていきます。

Splineのアニメーション設定は、初めての人は少し混乱するかもしれませんが、至ってシンプルで、大まかな手順は次の通りです。

  • Statesを追加し、アニメーション終点時のプロパティを設定する。
  • Eventsを追加し、どのトリガーでどんなアクションをするかを指定する。

順番に見ていきましょう。

Statesの設定

アニメーションは「Base States → States」に移り変わる仕組みです。Statesの数を増やせば複雑な動きができそうですね。「coosy blog文字」「プレート」にパーツを分け、それらをまとめるグループを作り、それぞれのStatesを設定していきましょう。

「coosy blog文字」は位置が変わるだけでいいので、Positionを「z:1.25→z:16.25」に変更しました。

Base Stateの状態とZ軸の位置を確認
Stateに切り替えてZ:16.25に変更

「プレート」はニョキっと飛び出すものにしたいので、Extrusionを「5→20」に設定します。

Base Stateの状態とZ軸の位置を確認
Extrusionを5から20に押し出す

二つをまとめる「Group」はくるくる回転させたいので、RotationのY軸を「0→-360」に設定します。

Base Stateの状態と回転を確認
Y軸を0から360に設定

これでStatesの設定は完了です。

Eventsの設定

次にEventsを設定していきます。先ほど設定した Statesと紐づけてアニメーションを設定していきましょう。

まずロゴがくるくる回っているアニメーションです。「Group」を選択し、Eventsを追加します。ActionsはTransitonを選択し、詳細設定は画像のようにします。この設定の意味は、「GroupがBase StatesからStatesに15秒間かけて移り変わり続ける」という命令です。これでロゴが回り続けるアニメーションができました。

「Group」を選択し、Eventsを追加

次にホバーでニョキっと飛び出すアニメーションです。同じく「Group」に新しいEventsを追加します。Eventsの種類は「Mouse Hover」を選択しましょう。

ActionsはTransitonを選択、Targetを「coosy blog文字」に変更し、詳細設定は画像のようにします。この設定の意味は、「Groupにホバーすると、「coosy blog文字」が0.5秒かけてBase StatesからStatesに移り変わる」といったものです。

Transitonを選択しTargetを変更

同じ要領でMouse Hoverイベントに「プレート」をターゲットにしたアクションを追加して完成です!

Hoverイベントにアクションを追加

画面上部の再生ボタンを押して動きを確認してみましょう!

Webに埋め込んでみる

最後に、作成したものを書き出してWebに埋め込む方法を紹介します。難しそうと思われがちですが、とっても簡単です!

まず、書き出したいアングルを定め、画面上部の「Export」を選択します。

画面上部の「Export」を選択

書き出しの詳細設定が立ち上がります。今回はHTMLに書き込むコードとして書き出したいので、「Viewer」を選択し「Play Setting」タブを開きます。ここでの設定によって書き出した後の動きが異なりますので、書き出し後の動きを想定しながら設定しましょう。

いろんな書き出し方法があるのでぜひ試してみてください。今回はズームさせなかったり、マウス動作によってオブジェクトを動かさないなど、いくつか制約をつけました。

下部の「Update Viewer」を選択し、先ほど設定した内容で更新します。

「Update Viewer」を選択して更新

「Overview」タブを開き、「Copy Embed」でEmbedコードをコピーします。

Embedコードをコピー

あとはこのコードをHTML内に埋め込むだけです。これでサイト内に3Dオブジェクトを配置することができました!

まとめ

いかがでしたでしょうか。初めて3Dに触れる人にとっては少し難しくも感じたかもしれませんが、SplineはAdobeの制作ツールやFigmaとも似ているため、すぐ使いこなせてしまうと思います!

Blenderなどの他の3D制作ツールに比べると劣る点もあるかと思いますが、Web制作においてはいろんな場面で活用できそうです。僕自身、まだまだ知らない機能がたくさんあるので、Splineで遊びながらいろんな機能を探っていきたいと思います。 みなさんもぜひSplineで遊んでみてください!

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2023/08/18

テキスト:鈴木滉大 デザイン:鈴木滉大

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

WebデザインTips・Web最新トレンドの関連記事はこちら

  • 【2月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年Webデザインの最新トレンドを海外からいち早くピックアップ!Photoshopのライブ共同編集機能、新作デザインツールTOP3、AI動画生成の最前線など、気になる情報をギュッとまとめました。Web制作者、デザイナー、マーケター必見の内容です。

    • Web最新トレンド
  • 求職者に刺さる! 採用サイト「数字で見る」コンテンツ設計と効果を出すポイント

    企業の魅力を最大化し求職者に訴求できる「数字で見る採用サイト」。豊富な実績と知見のあるWeb制作会社クーシーが採用サイトに入れるべき数値や実装のコツ、成功事例などをご紹介します。

    • 採用サイト
    • WebデザインTips
  • 【Webデザイン最新アイデア】プロも絶賛! 超参考になる「ギャラリー・まとめサイト」32選

    今回は、最新のWebデザインアイデアをチェックできるおすすめのWebギャラリーサイトを、デザインに強みを持つWeb制作会社クーシーが厳選してご紹介します。ぜひ活用して、デザインのヒントを見つけてみてください。

    • WebデザインTips
    • Web最新トレンド
  • 【Web担当者必見】2025年春、今押さえるべきWeb業界ニュースまとめ

    2025年の春(3〜4月)に話題となった最新のWeb業界ニュースを厳選してまとめました。Webマーケティング、SEO、トレンド、テクノロジーまで、Web担当者なら必ずチェックしておきたい情報が満載です。

    • Web最新トレンド
  • 【2025年4月最新】Webデザインニュース!海外の最旬情報をご紹介!

    Webデザイン最新情報の第2弾。ChatGPTを使った画像生成プロンプトの最新活用法と、Photoshop、Illustrator、Figmaの新機能を、未来のデザイン業界を切り拓く鍵と共にご紹介します。

    • Web最新トレンド
  • 【4月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    デザイン業界は今月も話題が盛りだくさん。AIの進化やツールのアップデート、インスピレーションを刺激する海外サイトまで、日々変化するトレンドをキャッチアップすることがますます重要になっています。 今回は、デザイン力に強みを持つWeb制作会社クーシーが、注目のAIモデル「o3」「o4-mini」か

    • Web最新トレンド
  • 参考になる! おしゃれなコーポレートサイト16選:金融、学校、エンタメなど業種別にご紹介

    業界別に厳選したおしゃれなコーポレートサイト16選をプロが徹底解説! 「おしゃれ」と評価されるデザイン要素と秘訣を業種ごとに分析しています。金融、学校、ITなど各分野の印象的な事例から、制作プロジェクトに活かせるヒントが満載です。

    • コーポレートサイト
    • WebデザインTips
  • 【5月版】今知るべき2025年Webデザインニュース!海外から最新情報をご紹介!

    最新Webデザインニュースをお届けします。今月は、UI/UXワークフローの効率化に役立つAIツールや、Microsoftが導入した新機能を紹介。さらに、インパクトある海外サイトのファーストビュー3選をピックアップし、実務で活用できるアイデアをお伝えします。

    • Web最新トレンド

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • モーションデザイン

    AIや3Dで魅力的な「動き」を実装。表示速度やSEO・AIOと両立させ、企業の世界観を伝えるブランディングを演出します。

  • Webデザイン

    UIUXと美しさを両立し、ブランドを「カタチ」に。SEO・AIOも考慮した戦略的ビジュアルで目標達成を支援します。

  • Web制作

    コーポレートサイト、採用サイト、ECサイトまで。最新AI技術を掛け合わせ、各サイトの特性に合わせたUIUX設計を実現します。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • Splineの使い方を解説!3DオブジェクトをWeb上で動かしてみよう!
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.