HAGAMO𝙎𝙥𝙝𝙚𝙧𝙚 (Hybrid Autonomous Ground / Aerial MObility System)
- Website
125
Release
Our Services
DICが開発を進める球体型マルチコプターHAGAMOSphereのCES 2025特設プロダクトサイトのフロントエンド実装
Client
DIC (1)
DICが開発を進める球体型マルチコプター「HAGAMOSphere®（アガモスフィア®）」の特設プロダクトサイトで、フロントエンド実装を担当しました。
HAGAMOSphere®は、立方体のフレームに8つのプロペラを積んだドローンです。機体を傾けずに、水平にも垂直にも移動できます。幾何学形状の球体ガードに収めれば、地上を転がって進むこともできます。空と陸の両方で使えるドローンとして期待されており、2025年の CES Innovation Awards で Honoree に選ばれました。
傾かずに飛ぶ / 転がって進む を、
図解のまま動かす
コンセプトのパートでは、プロダクトの2つの特徴を、それぞれ1つのシーンで見せています。
1つ目のシーンは、8つのプロペラを独自のアルゴリズムで制御し、機体を傾けずに移動するという特徴です。機体は真上に上がり、そのままの姿勢で横へスライドします。説明は直線の軌跡だけに絞り、余計な演出は加えていません。「傾かない」ことが、ひと目でわかるようにしました。
2つ目のシーンは、球体ガードを付けて地上を転がる特徴です。横への移動に2回転の回転を重ね、さらに CSS の三角関数で計算した円弧の軌跡を合わせました。これで、図版の上を球体が転がっていくように見えます。移動・回転・軌跡にはそれぞれ別のイージングを付け、転がり出すときの重さと、止まるときの余韻を出しています。
どちらのシーンも CSS アニメーションだけで作っています。画面に入ったときに、見出し、本文、図版の順に表示され、そのあと動き始めます。
スクロールのあいだも、球体は浮かんでいる
シーンが続くあいだ、背景には機体のビジュアルを固定しています。機体は sin 波でゆっくり上下し、真下の影もその動きに合わせて伸び縮みします。こうして、その場でホバリングしているような浮遊感を出しました。
このパートだけはスクロールスナップを有効にし、1画面に1シーンずつ収まるようにしました。パートの外では自然にスクロールできるよう、スナップのオン・オフをスクロール位置で切り替えています。スマートフォンでは画面幅が限られるため、活用例のシーンに入ると機体が画面の端へ退き、内容の邪魔をしないようにしています。
活用例は、Lottie で軽やかに
「調査・探索・監視」「被災地支援」「ドローンレース」の3つの活用例には、Lottie のアニメーションを使いました。少しずつタイミングをずらして表示し、それぞれの場面でドローンが働く様子を、軽いデータのまま滑らかに見せています。