Hana V2のご紹介

AIエージェントとMCP、WebGPUレンダリング、リアルタイムの3Dオブジェクトなどを備えた、2Dデザインキャンバスの大型アップデート。

Hanaを開く

本日、Hana V2をリリースします。AIエージェントとMCP、WebGPUレンダリングなどを備えた、2Dデザインキャンバスの大型アップデートです。

今回のリリースには、エージェントとMCPへの対応、GLTFとGLBのモデルの読み込み、SVGとPDFでのエクスポート、改善されたリアルタイムのコラボレーション、WebGPUへの移行、そしてエディタの細かな改善が含まれます。

3DエディタのSplineも、V2をリリースしています。

AIエージェント

Hanaに独自のAIエージェントが加わりました。UIデザイン、ランディングページ、アプリの画面をプロンプトで頼むと、フレーム、テキスト、ベクター、塗りといったHana自身のオブジェクトで結果を組み立てます。できあがるのは編集可能なデザインです。既存のコンテンツを編集することもできるので、手元の画面を指定して、加えたい変更を説明するだけです。

HanaはMCPサーバーも動かしているので、外部のAIツールがHanaの中で直接デザインできます。Claude Code、Cursor、Codexなどは、組み込みのエージェントと同じ能力を使えます。シーンの読み取り、オブジェクトの作成と編集、実際のコンテンツとして使う画像のアップロード、そして作業を確認するためのスクリーンショットの撮影です。

これらのツールはコードと並んで動くので、リポジトリをもとに作業することもできます。Claude CodeやCursorにリポジトリを指定すれば、実際の画面、コンポーネント、コピーを使って、アプリケーションを編集可能なHanaのオブジェクトとしてキャンバス上に再現できます。

モバイルアプリのデザインを3パターンつくるHanaのAIエージェント

2Dキャンバスに3Dを

以前、押し出しによる3Dシェイプに対応しました。どんな2Dシェイプも3Dのジオメトリに変え、元のシェイプとのライブリンクを保つので、シェイプを編集するとジオメトリもリアルタイムに更新されます。

今回のリリースでは、3Dモデルの読み込みに対応しました。GLTFとGLBのファイルは、メッシュ、マテリアル、テクスチャに加え、スケルトン、スキニング、モーフターゲットも含めて3Dオブジェクトとしてキャンバスに読み込まれるので、リグ付きのモデルやアニメーション付きのモデルもアニメーションを保ったままです。アニメーションインスペクターでクリップを選んで再生をコントロールでき、メッシュの設定でライティングとシェーディングをコントロールできます。

3Dオブジェクトも、ほかと同じHanaのオブジェクトです。長方形、テキスト、ベクターネットワークと同じシェイプシステムを使うので、同じトランスフォームが使え、同じレイアウトのルールに従い、同じアニメーションシステムでアニメーションします。

読み込んだ3Dオブジェクトを使ったHanaのデザイン

WebGPUでより速いキャンバス

Hanaは独自のエンジンで描画しており、ベクターシェイプ、ブーリアン、ブラー、影をリアルタイムに最高品質で描きます。そのエンジンがデフォルトでWebGPU上で動くようになり、グラデーション、テッセレーション、ヒットテスト、カリング、押し出しのアニメーション、ファイルの読み込みが速くなりました。

エクスポートとインポート

フレームをSVGでエクスポートできるようになり、ベクターの作品はベクターのままHanaから書き出せます。印刷や受け渡し用にはPDFでもエクスポートできます。

Adobe Illustratorのファイルをキャンバスに直接読み込めるので、既存のアートワークを事前に変換せずに取り込めます。

使い勝手の改善

AltまたはOptionを押したままにすると、選択中のオブジェクトとホバーしているオブジェクトの距離が表示されるようになりました。複数のオブジェクトを選ぶと、それらの間隔が表示されます。グリッドレイアウトメーカーは選択したオブジェクトを設定可能なグリッドに並べ、フレームテンプレートは一般的なデバイスやSNSのサイズをカバーします。

画像にはクリッピングとフィットのコントロールが加わり、CMDを押しながらリサイズハンドルをドラッグすると、塗りを拡大縮小せずにその場でトリミングできます。テキストは省略記号で切り詰められるようになりました。なめらかな角丸が、長方形だけでなくカスタムシェイプとすべての2Dプリミティブに適用できるようになりました。カラーピッカーにはコントラスト比が表示されます。

sine、expo、circ、back、power、ベジェの各バリエーションやspringなど、20種類以上の新しいアニメーショントランジションを追加しました。

共同編集者のカーソルは、遅れて追いかけるのではなく、リアルタイムに更新されるようになりました。各メンバーのカーソルに名前が表示され、選択範囲が枠で示され、範囲選択もその場で見えます。

Hanaでつくったインタラクティブなデザイン

新しいデスクトップアプリ

デスクトップアプリを一から作り直し、macOSとWindowsで以前のバージョンを置き換えました。

ファイルはタブで開くので、複数のプロジェクトを同時に開いておけます。Splineのシーンも同じログインのまま、同じタブバーに並べられます。また、マシンにインストールされているフォントを読み取り、Google Fontsと並べてフォントピッカーに表示します。

外部のエージェントが接続するのもこのアプリです。AIツール(Claude Code、Claude Desktop、ChatGPT、Cursor、VS Code、Antigravity)と一緒に起動すると、Splineが自動的に登録されるので、設定は一切不要です。エージェントがファイルで作業しているときは、タブごとのインジケーターで確認できます。

MCP経由で、プロジェクトのリポジトリからHanaのキャンバスにアプリの画面を追加する

本日から利用可能

Hana V2には、AIエージェントとMCPサーバー、GLTFとGLBのモデルの読み込み、SVGとPDFでのエクスポート、改善されたリアルタイムの共同編集カーソル、WebGPUレンダリング、そして上記のエディタの改善が含まれます。

3DエディタのSplineも、V2をリリースしています。

デスクトップアプリをダウンロードするか、ブラウザでHanaを開いてください。

Splineチーム 🌸

Hanaを開く

ブログのほかの記事