ハンバーガーメニュー

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ハンバーガーメニュー

ハンバーガーメニューの三本線アイコンは、限られた画面にナビゲーションを畳み込むための世界共通の記号です。このページでは、クリックで三本線が「×」へ変形する定番から、回転・ジャンプといった遊びのあるバリエーションまで、開閉トリガーの演出を集めています。

地味に見えて、この小さなアイコンはモバイルUXの入口そのものです。変形アニメーションには「いま開いている／閉じている」という状態を伝える実用的な意味があり、単なる飾りではありません。

今回はハンバーガーメニューをクリックした時のアニメーションを作りました。

おさえておきたいところ

ハンバーガーメニューを使う目的と使いどころはこんな感じです。

       目的：ナビゲーションを収納し、パネルの開閉を明示
使いどころ：クリック

3本線が「×」に

2本線が「×」に

3本線が1本線に

MENUがCLOSEに

MENUが「×」に

3本線が回転して「×」に

3本線が奥行きを持って回転して「×」に

3本線が横方向に回転して「×」に

3本線がジャンプして「×」に

実務メモ（2026年追記）

当時のデモはそのまま残しています。実務での要点は、見た目より「ボタンとしての正しさ」です。トリガーは必ず<button>で実装し、aria-expandedとaria-controlsで開閉状態を明示する――ここまでやって初めて、スクリーンリーダーやキーボード利用者にも使えるUIになります。また三本線アイコン単体は高齢層を中心に認知されないことがあり、「メニュー」の文字ラベル併記が今も堅実です。

• タップ領域は44×44px以上を確保（アイコンの見た目より当たり判定を大きく）
• 変形アニメはtransformのみで実装すると滑らか
• :focus-visibleでキーボード操作時にも状態が見えるように
• 開いた先のメニュー全体の設計はグローバルナビゲーション１から順に整理しています

次回の予定

ユーザーを的確に情報に導くテキストナビゲーションを作ってみようと思います＼＼\٩( ‘ω’ )و //／／