HanaのLiquid Glassと3D

Hanaを開く

本日、Hanaの大型アップデートを発表します。リアルタイムのLiquid Glass、3D Transform、Autolayout、Video Layersといった画期的な機能が加わります。

HanaのLiquid Glass

iOS 26の登場とともに、Liquid Glassのエフェクトはデザインコミュニティの注目を集めました。そのエフェクトを、Hanaのあらゆるオブジェクトレイヤーに適用できるようになりました。

Distortionなどのガラスのパラメーターを編集して、屈折の量をコントロールできます。

さらに、iOSのスタイルを超えて、カスタムのガラスエフェクトをつくることもできます。エフェクトの振る舞いの一部を誇張して、より印象的なビジュアルを実現できるよう、パラメーターはさまざまなクリエイティブな表現に対応できる汎用性をもたせています。

重ねられるガラス

多くのデザインツールでは、ブラーやガラスのエフェクトの実装はたいていひとつのレイヤーに限られます。つまり、複数のレイヤーを重ねても、ガラスの歪みは積み重ならず平坦なままです。

Hanaでは、複数のガラスのレイヤーを簡単に重ね、それぞれが背後や下にある要素をどう屈折させるかを、現実と同じように確認できます。まったく新しい創造の可能性が広がります。これはガラスのエフェクトだけでなく、背景のブラーエフェクトでも可能です。

3D Transform

2Dから3Dへの移行は、いつも難題でした。この機能に取りかかったとき、私たちは、何も失わずに2Dと3Dをシームレスに行き来できる方法を実現したいと考えていました。

Hanaでは、どんなオブジェクトも3Dオブジェクトにでき、3D空間での位置（Depth）、回転、遠近感をコントロールするパラメーターが使えます。

これらのパラメーターはすべてアニメーション可能で、ステート／イベントのシステムにも対応しています。

フレームと3Dポータル

フレームを3Dにすると、そのフレームは独自の3D空間をのぞく窓にもなります。これは、内側に奥行きが見えるビジュアル要素、ポータルをつくるのに特に便利です。

やり方は簡単です。フレームの中にアイテムを入れ、フレームを3Dにして、中のアイテムの3D位置や回転を変えるだけ。そのうえでフレームの回転や位置を変えると、中のアイテムが何層もの奥行きをもって描画される様子が見られます。

Autolayout

Hanaが、パラメーターをすべてアニメーションできるレイアウトに対応しました。パディングとギャップをカスタマイズできる、縦方向と横方向のレイアウトをつくれます。

レイアウトはイベントやステートと連動し、リアルタイムに更新されてインタラクティブ性を高めます。

Pinterestのカラムレイアウトに似た、メイソンリーレイアウトにも対応しました。

Video Layers

Spline Hanaのどのレイヤーにも、動画を簡単に埋め込めるようになりました。インタラクティブなプレゼンテーションをつくるときや、モーションをデザインするときに便利です。FillパネルでVideo Layerに切り替えて、動画をアップロードするかドラッグ＆ドロップするだけです。

Splineの3Dエディタと同じように、Hanaの動画もカスタムのイベントでトリガーできます。デフォルトでは動画はStartイベントで再生されますが、これを変更して、マウスイベントなどほかのイベントでトリガーすることもできます。

新しい創造の可能性

盛りだくさんでした！ 今日リリースした新機能を楽しんで、わくわくする新しいデザインをつくりはじめてもらえたらうれしいです。

— Splineチーム

Hanaを開く