# Hanaに3Dが登場 - Spline blog (https://spline.design/ja/blog/introducing-3d-shapes-hana)

> 3Dと2Dをひとつに

[ブログ](https://spline.design/ja/blog)

2025年12月10日

# Hanaに3Dが登場

3Dと2Dをひとつに

[Hanaを開く](https://app.spline.design)

長いあいだ、デザインの「プロセス」のほとんどは2Dのキャンバスの上で行われてきました。

2Dと3Dの歴史的な隔たりは、技術的な複雑さに根ざしています。2Dのデザインツールはリアルタイムかつ高品質（見たままが得られる）へと進化しましたが、3Dははるかに多くの計算能力を必要とするため、リアルタイムの作業は低い品質でしか実現できませんでした。

しかし、テクノロジーはハードウェアとソフトウェアの両面で大きく進歩し、私たちのチームもこの数年で大きな前進を遂げました。その結果、根本的なマイルストーンを達成できました。3Dと2Dを同じキャンバスの上で、リアルタイムに組み合わせることです。

マウスを動かすかタッチして操作できます（Hanaでつくった体験）

## 3Dと2Dの融合

私たちは、デザインキャンバスは使えるすべての次元を活用すべきであり、ユーザー（人間でもAIエージェントでも）が、目の前の課題に最適なものを選べるべきだと考えています。

残念ながら、理屈ではそうでも、3Dで何かを実装するのは技術的な悪夢であり、2つのシステムを組み合わせるとさらに悪化します。

現在のデザインツールや従来のツールの多くは、似たアプローチで構築されています。プレビューで作業し、「レンダリング」を押すか作業を「引き渡し」、誰かが別の技術スタックを使って実物を実装する、というものです。

つまり、現在のデザインツールのほぼすべてはリアルタイムではありません。そのため3Dには通常、専用のツールが必要で、その出力は最終的に平面の画像や動画として扱われたり埋め込まれたりします。編集もできず、インタラクティブでもありません。今日のデザインワークフローの水準に合わない、遅いプロセスです。

これを変えるには、新しいアプローチが必要です。

Hanaでつくった体験

## リアルタイムがすべての土台

Hanaをつくるとき、私たちはリアルタイムでありながら、2Dで描画できるものなら _何でも_ 描画できるように設計しました。つまり、Hanaのレンダラーは、ピクセル単位で正確なさまざまなエフェクト（影やブラーなど）、ベクターシェイプ、ブーリアンなどを、すべてリアルタイムで処理できます。

これは、Hanaのエフェクトパイプラインを活用して、3Dグラフィックスもリアルタイムで描画できることを意味します。

要するに、Hanaは3Dと2Dをひとつに組み合わせられるのです。

Hanaでリアルタイムの3Dに変えたベクター

## 2つの世界をひとつにする道のり

2Dのキャンバスに3Dを加えるのは簡単そうに思えますが、実際には無数の課題があります。たいていの場合、2つのレンダラーを同時に動かすか、複数のランタイムを組み合わせる必要があり、ダウンロードに時間がかかって理想的ではありません。

Hanaは3Dと2Dで同じランタイムを使うので、より効率的で、はるかに柔軟です。

もうひとつの大きな問題は品質、というよりも品質の不足です。

3Dの品質には、アンチエイリアス、解像度、ポリゴン数（または高いボクセル密度）、オブジェクトの数など、いくつもの要素が関わるため、同じ品質を保ったまま2つのシステムをひとつにまとめるのは困難です。

Hanaでは、どんな2Dシェイプでもつくって3Dオブジェクトに変換でき、元のシェイプとのリアルタイムのつながりも保たれます。

つまり、いつでも元のシェイプを変更でき、3Dオブジェクトは元のシェイプに連動してリアルタイムに再生成されます。

これにより、2Dのコンポジションの中での3D制作の生産性が大きく向上します。たとえば、3Dテキストを簡単につくり、その色、フォント、そのほかのプロパティを変えても、非破壊的なワークフローの中でテキストの柔軟性はすべて保たれます。

レイアウトは動的に更新でき、3Dオブジェクトは2Dのコンポジションのルールに従います。

Hanaの3D Shapesでつくった体験

## 3Dは2Dに従う

Hanaでは、すべての3Dオブジェクトが独自の座標系をもっています。それでも2Dキャンバスのルールと振る舞いに従い続けるので、ふだん2Dオブジェクトに使っているものは何でも3Dオブジェクトに適用できます。

これによって、デザインの幅が大きく広がります。

## 制限事項

現時点で、Hanaの3D／2Dシステムで使える機能は限られています。

どんな2Dシェイプも3Dに押し出せ、マテリアルもかなりの程度までコントロールできますが、新しい可能性の余地はまだたくさんあります。

理想的には、3Dシステムはどんな種類の3Dオブジェクトやシーンも描画でき、制限がずっと少ないものであるべきです。

## これははじまりにすぎません

Splineではこの数年、2D、3D、そしていずれは4Dを統合する、一貫したデザインシステムをつくるために懸命に取り組んできました。

このわくわくする新しい未来に向けて、これからも前進を続けていきます。

— Splineチーム 🌸

## ブログのほかの記事

[2026年11月3日Spline Arenaのご紹介](https://spline.design/ja/blog/introducing-spline-arena)[2026年10月21日Spline for ChatGPTのご紹介](https://spline.design/ja/blog/introducing-spline-for-chatgpt)[2026年8月27日Hana V2のご紹介](https://spline.design/ja/blog/hana-v2)

[Spline](https://spline.design/ja)

チームとそのエージェントのための3D・2Dエディター。Web、iOS、Androidに公開できます。

#### SplineについてAIに聞く

#### 製品

- [3Dデザイン](https://spline.design/ja/3d-design)
- [Hana](https://spline.design/ja/hana)
- [Omma](https://omma.build)
- [AI 3D生成](https://spline.design/ja/ai-generate)
- [Spline MCP](https://spline.design/ja/mcp)
- [Spline Arena](https://spline.design/ja/arena)
- [料金](https://spline.design/ja/pricing)
- [Enterprise](https://spline.design/ja/enterprise)

#### ランタイム

- [Web](https://spline.design/ja/web)
- [iOS](https://spline.design/ja/ios)
- [Android](https://spline.design/ja/android)

#### アプリ

- [ダウンロード](https://spline.design/ja/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirrorをダウンロード](https://spline.design/download-mirror)

#### 学ぶ

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ja/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [ソリューション](https://spline.design/solutions)

#### コミュニティ

- [Splineコミュニティ](https://community.spline.design)
- [Blog](https://spline.design/ja/blog)
- [更新履歴](https://spline.design/ja/changelog)
- [教育](https://spline.design/ja/education)
- [Contra](https://spline.design/contra)
- [アフィリエイト](https://spline.design/ja/affiliate)

#### 会社

- [導入事例](https://spline.design/ja/customers)
- [採用情報](https://www.ycombinator.com/companies/spline/jobs)
- [セキュリティ](https://spline.design/ja/security)

#### 法的情報

- [利用規約](https://spline.design/terms)
- [プライバシー](https://spline.design/privacy)

#### お問い合わせ

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.