# Hanaのご紹介 - Spline blog (https://spline.design/ja/blog/introducing-hana)

> インタラクティブデザインのための新しいキャンバス。

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

2025年4月23日

# Hanaのご紹介

インタラクティブデザインのための新しいキャンバス。

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

Hanaは、インタラクティブデザインへの新しいアプローチです。パフォーマンスを核にゼロから構築したHanaは、洗練されたインターフェースからダイナミックなビジュアルまで、インタラクティブな2D体験をデザインしてアニメーションさせ、本番環境に届けるためのリアルタイムのキャンバスです。

Hanaを使えば、高速で無限のキャンバスの中で、振る舞い、反応する、ステートベースのリッチなコンテンツをつくれます。

ホバーまたはタッチで操作できます（Hanaでつくった体験）

## できること

Hanaのために、ベクターデータをリアルタイムで高速に処理できる新しいレンダリングエンジンを構築しました。モダンなベクターネットワークの編集、ステートベースのトランジション、GPUで高速化されたエフェクトを、ブラウザネイティブで共同作業できる環境で使えます。

Hanaでデザインしたものは、すべてデフォルトで本番環境にそのまま使えます。シンプルなシェイプでも複雑なインタラクティブ体験でも、Hanaのエンジンは、どんなWebサイトやアプリにも簡単に埋め込めるリアルタイムのインタラクションを処理できるように設計されています。

精密なベクター描画から、やわらかな影やブラーまで。Hanaは、パワーとシンプルさを、軽やかでありながら限りないかたちで両立させています。

Hanaでつくった体験

## リアルタイムのデザインコラボレーション

Hanaのフレームは、エディタの中で独立して動く、再生可能なコンポーネントにできます。「Animate」モードが不要になるので、制作のプロセスがシンプルになります。エディタのフレーム上で直接再生して、体験をそのまま操作できます。フレームは、ライブURLや画像などとして個別にエクスポートすることもでき、今後さらに形式が増える予定です。

リンクを共有すれば、共同編集者はすぐに参加して、キャンバスを体験し、貢献できます。すべての編集はライブで反映され、フィードバックは即座に届きます。最初からマルチプレイヤーとして、きちんと設計されています。

Hanaは、すでに対応しているSplineの3Dエディタのリアルタイムコラボレーションのシステムを活用しているので、チームはより速く動き、常に足並みをそろえられます。

Hanaでつくったベクターネットワーク

## リアルタイムのベクターネットワーク

ベクターネットワーク（2016年にFigmaが導入した概念）を使うと、ひとつのポイントに2本以上の線をつなげられるので、あらゆるシェイプを簡単につくれます。

Hanaはこのアプローチをさらに進め、リアルタイムの環境でベクターネットワークをつくれる初めてのシステムを導入しました。

さらに、多階層のブーリアンを使えば、高度なシェイプや流動的なエフェクトをつくり、アニメーション可能な複雑なシェイプを簡単に実現できます。

## インタラクションとアニメーション

イベント駆動のインタラクションで、ホバーのステートからキーボード入力まで、デザインに振る舞いを加えましょう。トランジションをアニメーションさせ、フローを組み立て、キャンバスの上で直接モーションを試せます。ツールを切り替える必要はありません。

Hanaでは、モーションとインタラクションは後回しのものではなく、デザインのプロセスの一部になります。

## 本番に向けたエクスポートと共有

Splineの3Dエディタと同じように、Hanaでもどのフレームからでもライブのインタラクティブなリンクを生成できます。すべてが本番環境への埋め込みに最適化されているので、デプロイ先でもエディタと同じように美しく表示されます。

## インタラクティブ性の新時代

これは、インタラクティブに考えるための新しいメディアです。プロダクトのデザインでも、UIのインタラクションでも、リッチなインタラクティブ体験の制作でも、Hanaはあなたのアイデアを形にするお手伝いをします。

**Hanaは、これから先のための土台です。**

2D／3Dのデザインとインタラクションがシームレスに融合し、そのままデプロイされる。そんな、現在のSplineのエコシステムという大きなビジョンへの第一歩です。

皆さんがHanaで何をつくるのか、楽しみにしています！

— Splineチーム 🌸

[詳しく見る](https://docs.spline.design/doc/what-is-hana/doccoU2VnAOm)

## ブログのほかの記事

[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.