ウェブサイト上の「ハンバーガーメニュー（ハンバーガーボタン、menu、list、bars）」を押下してナビゲーションを表示すると、閉じるボタン「✕」に切り替わる（トグルボタン）を目にするかと思います。
この記事では、ハンバーガーメニューと閉じるボタンが切り替わる際のアニメーション（トランジション）のスタイルに着目します。
実際のウェブサイトにどのようなアニメーションが施されているかを調査しました。
今回、調べたのは日本の大手企業のサイト、1,544件です。
ハンバーガーメニューのアニメーションを分類するにあたり、公開されているライブラリ「Hamburgers by Jonathan Suh」を利用させていただきます。このライブラリー（カタログ）では、17のアニメーションが設けられ、実用できるコードが公開されています。
https://jonsuh.com/hamburgers
「Slider」
<-押下でデモ
一番多いアニメーションは、全体の38.1%のサイトで採用されている「Slider」。
上段と下段のバーが45度回転し、中段のバーが消えます。
動きが小さく、アニメーションが主張せず、自然に切り替わるのが人気の理由と考えられます。
Jonathan氏のライブラリでは中段のバーが水平方向へ移動しながら消失しますが、今回の集計では中段のバーが移動せずにフェードアウトするものもカウントしています。
また、左右反転のものも含めています。
「Boring」
<-押下でデモ
「アニメーション」と呼んではいけないかもしれませんが、ハンバーガーメニューと閉じるボタンの中間のフレームがゼロで、すぐに切り替わる「Boring」が20.9%で次点でした。
UIデザインの際に、そもそもアニメーションを検討しない場合も多いでしょう。
アニメーションありきの視点で考えると「つまらない」「物足りない」パターンと捉えることとなってしまいますが、最もシンプルな表示であり「アニメーションも検討したが採用しない」という結論もあるかと思います。
多くのサイトが当てはまるのは納得です。
「Squeeze」
<-押下でデモ
3位は全体の8.7%で「Squeeze」でした。
上段と下段のバーが中段のバーに重なり、1本になったバーが2本に分かれて広がり閉じるボタンとなるアニメーションです。
常に左右対称のまま、バーが3本、1本、2本と変化する動きは安定感を感じます。
なお、集計では、上段と下段のバーがフェードアウトしていくケースも含めました。
「上下回転」
<-押下でデモ
「Slider」の上段と下段のバーがさらに90度回転するアニメーションが全体の4.8%でした。
左右反転のものも含めています。
板状のものを水平方向に裏返しているようにも感じられ「切り替え感」があります。
これはJonathan氏のライブラリには存在していないため、仮に「上下回転」とラベルしました。
「そのまま」
これも、アニメーションと呼べないですが、ハンバーガーメニューを押下してもアイコンは変化せず、もう一度押下するとナビゲーションが閉じるケースが4.6%でした。
「Spin」
<-押下でデモ
「Squeeze」と同様に3本が1本となったあと、全体が回転しながら「✕」へ変化する「Spin」が3.8%。
左右反転のものも含めています。
ドアノブを回転させるような動きは、メニューの開閉と馴染みます。
補足
上記は、全体（1,544サイト）のうち、1%以上のアニメーションパターンの紹介で、残りの約20%は上記以外のパターンや、開閉メニューが無いサイト（2.6%）でした。
調べてみると想像以上にアニメーションの動きは様々で、そのサイトでしか見られない動きも多くありました。
集計では、3本線のハンバーガーメニューアイコンのほか、2本線や4本線のハンバーガーメニューアイコンの場合も、動きが同様であれば「Slider」「Squeeze」などに分類しています。
全体のうち7.2%は2本線のハンバーガーアイコンでした。
まとめ
ナビゲーションメニューが、画面の上下左右どこから出現するか、どのような速度で出現するか、また、サイトの内容や世界観により適切なアニメーションは変わります。
例えば、装飾的なサイトであれば、アニメーションの動きもリッチな表現が合いそうですし、スピーディーに情報を伝える場合はアニメーションしない（Boring）も立派な選択肢かと思います。
以上、UIを検討する際の一助になれば幸いです。
