Twitter(X)で見かけた Dynamic Action Bar が何故こんなに可愛いのか

まずは Henrik 氏の下記の投稿の動画を再生していただきたい。

Dynamic Action Bar pic.twitter.com/D3yz7LtcW2

— Henrik (@henrikruscon) June 12, 2024

このアクションバーが死ぬほど可愛い。俺にも触らしてほしい。なぜ動画しか提供してくれないだろう…いや、気持ちはわかる。自分だけの宝石箱に入れて「可愛いなこれ。ポチポチ。皆には触らせないよ。ほーら見るだけ楽しんで」みたいな感じでしょどうせ。

まあ、それは創造主の特権ではある。認めよう。俺ら聴衆は「見」に徹するしかない。それもよかろう。

---

まず、この Dynamic Action Bar (通称: ダブちゃん)は、第一印象は非常に落ち着いた印象。

ダブちゃん - 待機状態

ぱっと見 Arc の UI っぽいというか、半径大きめの角丸で親しみやすい、かつ padding が多めに取られていたり各アイコンとタイトルに広めの gap がつけられていて非常に安定感がある。

この時点で優秀さを全く鼻にかけない優等生的な感じで「お、いいね。こういうトレンドも押さえつつ安心感がある UI でプロダクト全体を構築していく感じか。こりゃあ他のコンポーネントもかなりのクオリティだろうな。使いたい」と思わせてくれる。

しかし、メニューの「Apps」の上にマウスカーソルを移動させると…

ダブちゃん - 開き状態

ここで「ボヨーーン」とダブちゃんが広がるわけだ。あの優等生な見た目で！まさか広がるとは思わんやん！
非常に愛嬌ある広がり方をする。この動きは白い皿の上に乗ったゼリーをスプーンでクリックした時のプルルン感。

スローモーションで動きを見てみると、こんな感じの流れだ。

1. Apps にマウスカーソルを持ってくる

2. ダブちゃん全体が膨らみ始める

3. 少し膨らみすぎる  ⚡️

4. 戻る ⚡️

これ 3と4 が重要なんじゃないか? プルルン感の源泉はこれだろ！膨らんで戻る動き。イージングカーブで言うとこんな感じの「行きすぎて戻る」感じ

cubic-bezier(0.68, -0.6, 0.32, 1.6)

---

てか待てよ！この「行きすぎて戻る」ってアニメとかでおんなじようなの見たことないか?

俺の頭の中に「ミッキーマウスが目の前を通り抜けて、少し戻ってくる」「のび太が"じゃあ、行ってくるね！"と言って飛び出してすぐに戻ってきて、顔だけひょこっと出してドラえもんになんか言う」的な映像が流れ込んでくる！

これはおそらく俺たち人類が「可愛い」と強制的に思わされるようにプログラムされている動きなんじゃないか? 「あ、ちょっと勢い余って通り過ぎちゃったね。もう…ドジ太郎♡」と本能が思ってしまう動きなんじゃないか?

ちくしょー。動きに騙された！「私どっしりしてます。動かない側のUIです」からの「ボヨヨーーン」で可愛いを押し付けてきてる。これは可愛さの武道。予備動作なし、最短距離で心臓を撃ち抜く達人の技だ。

俺も触ってみてえ〜