# Spline Hana - AIエージェントが支えるデザインキャンバス (https://spline.design/ja/hana)

> HanaはSplineの2Dデザインキャンバスです。GPUで加速するベクター編集、ステートとアニメーション、そしてAIエージェント（Hana自身のエージェントやMCP経由のあなたのエージェント）がチームと一緒にデザインします。

# デザインキャンバスを、AIエージェントの力で

チームと一緒にデザイン。AIエージェント、MCP、そして**GPUで加速するベクター編集ツール**。

[はじめる](https://app.spline.design/signin)[エージェントを接続](https://spline.design/ja/mcp)

ライブラリ

## 動きのあるデザインを、Hanaで

Hanaでつくられた作例を見てみましょう。リミックスしたり作り直したりしながら、アイデアが本番品質の体験になるまでを探れます。

[3D Circular](https://app.spline.design/ui/0c5cafee-bc08-47b1-aa31-41c30beae895)[Fire Character](https://app.spline.design/ui/b0d21f98-f238-4b2c-a6f0-b478719bcc3c)[3D Card](https://app.spline.design/ui/539d3930-61a4-47c9-8324-b81ecb4c93dc)[Cards](https://app.spline.design/ui/0f721512-9f57-455a-8ea9-4641e15a0ca4)[Path Icons](https://app.spline.design/ui/9389d529-f05b-4aa7-9360-11175d1b4e72)

[Noise](https://app.spline.design/ui/c0d70e64-db86-409e-90b5-d03e413eb554)[3D UI](https://app.spline.design/ui/ba70eea9-74e0-4b06-af5e-f622d88b719a)[Power](https://app.spline.design/ui/58ee653d-f29a-489d-83ba-6af3b2086a1a)[Glass Icons](https://app.spline.design/ui/c915f089-5725-47ac-a458-e2df51a45aa1)[Auto Layout](https://app.spline.design/ui/a3144449-bf5c-4189-a3f1-dda35c699bc4)

[Earth](https://app.spline.design/ui/8937cf42-317a-43cb-bbef-d3244437d8c6)[Japanese Text](https://app.spline.design/ui/248fa04b-dae6-4ef4-a457-0eef1e760fbc)[Masking](https://app.spline.design/ui/c7bd1796-a808-44be-8220-fffd02fafbdf)[Blend](https://app.spline.design/ui/98cec79c-bad6-4504-810b-f0a198625a99)[Hana Serif](https://app.spline.design/ui/da8a844d-cff7-403d-b544-d6a0dd8149bf)

デザインツール

## プロのデザインのための、なじみのある高度なツール

おなじみのデザインツール、高度なエフェクト、そして大規模なプロジェクトを整理するための構造。

- フレームベースの無限キャンバス
- ベクターネットワークとブーリアン
- ページとセクション
- グラデーション、ガラス、3D図形

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

## デザインに命を吹き込む

ステート、イベント、アニメーションで、動きとインタラクションを追加。手作業でも、エージェントに頼んでも。

- ステートとイベント
- トランジションアクションでアニメーション
- FollowとLook Atのインタラクション

AIエージェント

## エージェントがデザインできるキャンバス

Hana自身のエージェントがキャンバスでデザインし、あなたのエージェントもClaude、ChatGPT、Cursor、あらゆるMCPクライアントからデザインできます。

- フレーム、エフェクト、インタラクションを作成
- 複数の画面を並行して作成
- MCP経由で自分のエージェントを
- すべて手作業で編集可能
[エージェントを接続](https://spline.design/ja/mcp)

インタラクションのために

## インタラクションのためのデザインツール

インタラクティブなUI、モーション、リアルタイムグラフィックスをデザインするためのツールを、速くてなじみのあるインターフェースで。

- ### おなじみのデザインツール  
フレーム、ペン、ブーリアン、図形などを使って、無限のキャンバスでデザイン。
- ### パワフルなインタラクション  
ステート、イベント、アクションでインタラクティブな体験をつくれます。
- ### アニメーションする体験  
ステートとトランジションで、デザインに動きを加えられます。
- ### ビジュアルエフェクト  
シャドウ、ブラー、ノイズ、ガラス、3Dで、リアルタイムのビジュアルエフェクトを。
- ### リアルタイムのブーリアン  
高度なブーリアンシステムをつくり、リアルタイムにアニメーションできます。
- ### ベクターネットワーク  
ベクターネットワークをつくり、ユニークなインタラクションを与えられます。
- ### キャンバス上でプレビュー  
インタラクションやアニメーションを、キャンバス上で直接プレビューできます。
- ### 本番対応のエクスポート  
インタラクティブなデザインを、Webサイト、Webアプリ、デジタルプロダクトに組み込めます。

コラボレーション

## リアルタイムに、一緒にデザイン

リアルタイムのコラボレーションで、無限のキャンバスにインタラクションをデザイン。チーム全員の共有スペースで整理できます。

### リアルタイムのマルチプレイヤー

チーム全員で、同じファイルでデザイン。

### ロールと権限

EditorとViewerのロールを個別に細かく管理。

### ファイル管理

すべてのファイルとプロジェクトを保存・管理できるチームの共有スペース。

### メモとフィードバック

エディター上で、チームにコメントを残したりメモを取ったりできます。

エクスポート

## インタラクションをWebへ

Webサイト、Webアプリ、デジタルプロダクトに、インタラクティブな体験を手軽に組み込めます。

マウスや指を動かして操作してみてください[シーンをリミックス](https://app.spline.design/ui/2e2daf97-d4bb-4861-9ef6-81348aa5a77d)

index.html

```
<!-- Import the Hana Viewer -->
<script type="module"
  src="https://cdn.spline.design/@splinetool/hana-viewer@1.0.97/hana-viewer.js">
</script>

<!-- Add your design anywhere on the page -->
<hana-viewer
  url="https://prod.spline.design/HfFj1WYWsj69dY8U-Eld/scene.hanacode">
</hana-viewer>

```

[Webflow](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Framer](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Wix Studio](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[HTML / JS](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Notion](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Shopify](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)

## Hanaでデザインをはじめよう

エージェントを接続し、チームを招待して、最初のデザインを今日公開しましょう。

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