• 操作
  • ハンバーガーメニュー

#hamburger menu 006

画面全体に線が出現

参考サイトURL
動きの解説

メニュー展開時に、背景に大きなロゴやイラストの線画(ストローク)が描かれるアニメーションは、ブランドの世界観をアーティスティックに表現します。ただのメニュー画面を一つの作品のように魅せることができ、ユーザーの期待感を高めます。SVGのパスアニメーション(stroke-dasharray)を用います。線画が描かれた後にメニュー項目がフェードインするなど、時間の流れ(シーケンス)を設計することで、情報の優先順位を整理し、洗練された印象を与えることができます。