CSSで作る｜ハンバーガーメニューの制作事例｜jQuery、JavaScript

東京都現代美術館（CSS＋JavaScript）

（画像引用：東京都現代美術館ホームページより）
https://www.mot-art-museum.jp/

右上に配置されたハンバーガーメニューはタップするとメニューを表示し、閉じるボタンに瞬時に変わる仕様です。ページ数が多いのでアコーディオンを利用して見やすさに配慮しています。上部には言語切り替えやTwitterやYoutubeへのリンクといったメニューを配置しています。

みなとみらい総合法律事務所（CSS＋jQuery）

（画像引用：みなとみらい総合法律事務所ホームページより）
https://mmslaw.jp/

固定タイプのヘッダーの右上に設置されたハンバーガーメニューは、三本線ではなく二本線のデザインです。ハンバーガーと例えられる三本線メニューが多いこともあり、二本線はとくにスッキリした印章を受けます。タップすると二本線が回転しメニューを表示します。二本線ならではの動きが爽やかです。メニューは白い余白を上手に使ったシンプルな構成であり、無理に縦に並べず、見やすさを重視した2列構成です。

エルゴヒューマン専門店（CSS＋jQuery）

（画像引用：エルゴヒューマン専門店ホームページより）
http://www.ergohuman.ne.jp/

小さめのハンバーガーメニューは、右上に黒い背景に赤いラインという目立つ色合いで設置されています。タップすると右側から流れた赤い背景に中央揃えでメニューを表示しています。フォントサイズは小さめでインパクトのある赤い背景と空間を活かしたデザインがユニークだと言えるのではないでしょうか。

ルミネ（CSS＋jQuery）

（画像引用：ルミネホームページより）
http://www.lumine.co.jp/
ルミネのホームページは全体的にスタイリッシュな印象であり、横と縦に存在するフォントの印象がユニークです。右上にシンプルに存在するハンバーガーメニューは、長さの違う二本線がオシャレな印象を作っています。タップするとグレーの背景がページ一面に広がり、メッセージ性の高いメニューがシンプルに並ぶのが印象的です。このページはコーポレートサイトということもあり、このメッセージ性の高いメニューの表示の仕方はとても有効なものに感じます。

すみだ水族館（CSS＋jQuery）

（画像引用：すみだ水族館ホームページより）
https://www.sumida-aquarium.com/

すみだ水族館のホームページは、深いブルー系の美しい水族館の画像の中にハンバーガーメニューがある視認性の高いデザインです。ハンバーガーメニューの三本線の真ん中だけ長さが短いことも、デザイン上の小さな工夫でしょう。タップすると、スクロールが必要な多めのメニュー構成ながら、深いブルーにホワイト文字と広めの余白が見やすさを演出しています。ラインの引き方や言語切り替えのアイコンなどやわらかい雰囲気が素敵です。水族館のイメージを大切にして作り上げた訴求力のあるデザインだと感じます。