2Dから3Dへ。次世代のインタラクティブデザインツール「Spline Hana」デザインチャレンジに参加！
- 1 日前
- 読了時間: 6分
こんにちは、SplineエキスパートデザイナーのAyaです。
この度、Splineのプロダクトの1つ・2Dベースのインタラクティブデザインツール「Hana」を使った賞金付きのチャレンジイベントに参加しました！
Spline × Contra Hana Challenge
次世代のインタラクティブデザインツール、Hanaとは
Hanaは、ウェブ上でインタラクティブデザインが作れるデザインキャンバスです。
Splineは3Dのインタラクティブデザインツールであるのに対し、Hanaは2Dが基本となっており、感覚的にはFigmaに近いと思います。
ウェブベースなのでブラウザ上でサクサク動くし、何よりプログラミングもいらないノーコードなうえ、マウスをホバーする・クリックするといった動作に対してアニメーション設定ができる、インタラクティブなデザインが作成可能です。
無料で利用できますので、ぜひ一度触ってみてください👇
1位は賞金2500ドル！Hana×Contraのデザインチャレンジ「#Design with Spline Hana」
今回、HanaとContraがタッグを組んで「#DesignwithSplineHana」というチャレンジを開催することになりました。
参加は無料で、上位の作品にノミネートされると賞金も出ます。なんと合計5,000ドル以上！日本円で数十万以上なので、なんとも太っ腹なチャレンジです。
特に注目すべきが審査員の方々。
ContraのCEO・ベンをはじめ、Splineのヘッドプロダクトデザイナー、インタラクティブなソフトウェア開発で注目のNot Boring Software社CEO、そしてMetaのプロダクトデザイナーと豪華なメンバーがそろっています。
特に、Meta社のプロダクトデザイナーに、自分の作品を見てもらえるというのは、なかなか貴重な機会ではないでしょうか。
Design with Spline Hanaチャレンジの作品要件
チャレンジにはいくつかのガイドラインと要件がありますが、要約すると
すべてHanaのみを使って作ること。外部からの素材は写真のみ使用可
次にあげるHanaの機能を最低1つ以上は使用すること - 3D transforms（3D変形） - 3D shapes（3Dシェイプ） - 3D Projection（3Dプロジェクション） - Liquid Glass （リキッドグラス効果）
インタラクティブでシーンサイズが最適化されていること
上記の条件を主に満たしていることが必須でした。
デザインチャレンジイベントに参加した背景
私はSplineエキスパートデザイナーとして、普段はSpline 3Dの方を主に使っています。
Hanaはつい最近触ってみたばかりだったので、Hanaでどんなことができるのかが完全に未知数でした。
イベントが開催されてから締切までの時間も、約1週間ちょっとと短かったため、ギリギリまで参加を決めかねていたのですが、「作ってみたい作品のテーマ」が先に頭に浮かんだので、とりあえずやってみよう！と思い制作を開始。
最初の締め切りが2月10日で（後に延長されましたが）、前日の夜ギリギリになんとか仕上げて提出することができました。
正直、自分の思い描いたストーリーボードを、本当にHanaで作り上げることができるのかは自信がなく、何度も諦めそうになったのですが、色々Hanaの機能を試しているうちに、何とか形にすることができました。
実際にHanaで制作した作品・インタラクティブなモーショングラフィックスアニメーション
今回私が制作した作品は、「死」と「生」をテーマにした2つの対となるモーショングラフィックスアニメーションです。
「死」をテーマにしたインタラクティブなアニメーション作品「The Eye」
最初の作品「The Eye」は、フラットな2Dをベースとしたデザインスタイルの作品です。
Hanaのリキッドグラス効果とペンツールを使い、透明な涙を描きました。
まばたきを1回した後、目の上にマウスホバーすると、マウスを追尾するインタラクションを設定しています。
2回目のまばたき後は瞳からハイライトが消え、命が消えたような、ただただ暗い目だけが残るダークなストーリーのアニメーションです。
涙の質感を表現するために、リキッドグラスの設定に微調整を重ねました。2Dのフラットな目も、できるだけ奥行やリッチな質感がでるよう、いくつかエフェクトとグラデーションを重ねて描いています。 ライブプレビューはこちら↓
「生」をテーマにしたインタラクティブなアニメーション作品「Teardrop」
こちらは先ほどの2Dの目を3D化し、涙を流した後に1つの新しい命が生まれるという、「生」をテーマにした作品です。
3Dプロジェクション効果を使って立体的な球体の目を作り、零れ落ちる一粒の涙は、3Dシェイプを使って作成しています。
もちろん全てHanaで作成しているので、一切モデリングは行っていません。
モデリングをしなくても、ここまでリッチな3Dデザインが表現できるHanaには、無限の可能性を感じます。
もちろんこちらの作品にもマウスホバーによるインタラクションを設定しているので、ただ見るだけではなく、作品をブラウザで見た人の動作に反応して動くというインタラクティブなデザインを実現しています。
インタラクティブデザインは没入型の作品にぴったりで、触って動かすという相互的なやり取りを、デザインを通して実現できることが何よりの魅力だと思います。
ライブプレビューはこちら↓
制作で一番苦労したこと
HanaはSplineと比較するとインタラクション設定も選択肢が少なく、またAfterEffectsやRiveのようなキーフレーム・タイムラインアニメーションはありません。
そのため、アニメーションは1つのレイヤーで管理し、ミリ秒単位でタイミングを調整することに一番苦労しました。
アニメーション設定とレイヤー構造がかなり複雑化したため、アニメーションは1つのレイヤーにまとめて設定し、タイムラインをそれぞれ命名して整理。
シーケンス（アニメーションの1区切り）ごとにレイヤーを分けて作成し、最後に1つのレイヤーに統合することで、細かいアニメーションとインタラクティブなデザインを両立させました。
制作背景とざっくりチュートリアルも公開！
今回、作品の簡単なチュートリアルを動画で撮影して提出することも条件の1つだったので、制作過程を録画したものを編集し、クイックチュートリアルをYouTubeに公開しています。
2分程度のざっくりとしたチュートリアル動画ですが、実際にHanaを使ってインタラクティブなデザインを設定する様子や、2Dのベクターシェイプを3Dに変形する様子なども紹介していますので、ぜひご覧いただけると嬉しいです。
デザインチャレンジやイベントに参加するメリット
今回はかなりギリギリの提出となってしまいましたが、賞金あり・なしに関わらず、明確な提出日とガイドラインの元で作品を作る大変良い機会でした。
クライアントワークだと締切厳守・目的や用途が決まっていますが、自主制作だと自分のペース次第なので、いつまで経っても作品を仕上げられない・方向性が定められず右往左往するというのは、クリエイターあるあるではないでしょうか。笑
また、普段はSpline3Dに使い慣れており、Hanaには正直なところ苦手意識を持っていたので、今回自分が思い描いたものをHanaで作り上げられたという点に満足しています。
実際に作っているうちに理解も深まり、Hanaでこんなデザインができるんだ！という発見も沢山あったので、思い切って参加して良かったなと思います。
今後はHanaを使ったデザインも案件に取り入れていけるよう、よりスキルアップと研究に励みたいと思います！
コメント