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

スマートフォンに最適化したホームページが増加するに伴いハンバーガーメニューを目にする機会も増えました。ご存知の人も多いかと思いますが、ハンバーガーメニューはスマートフォン向けのホームページのヘッダーなどによく設置されている三本線のメニューボタンです。三本線の形状がハンバーガーに似ていることから、この名称で呼ばれています。ドロワーと呼ばれることもあります。

設置場所はヘッダーにも限りませんし、PC利用時も見かけることが多くあります。以前はハンバーガーメニュー とともに「MENU」というテキストをつけるなど、メニューであることを認知させるようにしたものも多くありました。しかし、最近はすっかり三本線のデザインだけでメニューとして認知している人が多いでしょう。

たくさん見かけるハンバーガーメニュー、見せ方はホームページによって様々に異なるので、CSSの勉強においてもとてもプラスになります。今回は、ハンバーガーメニューの事例をいろいろとピックアップしてご紹介したいと思います。CSSだけではなくjQueryやJavaScriptも使って上手に魅せている素敵なハンバーガーメニューをチェックしてみましょう。

RSR（CSS＋jQuery）

（画像引用：RSRホームページより）
https://rsr.wess.co.jp/2019/

大人気のライジングサンロックフェスティバルのホームページです。もっとも基本的でありシンプルなハンバーガーメニューの事例として最初にピックアップしました。ヘッダー右上のハンバーガーメニュー をタップすると簡潔なメニューが表示されます。ベーシックな作り方として把握しておきましょう。

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

明治大学（CSS＋jQuery）

（画像引用：明治大学ホームページより）
https://www.meiji.ac.jp/

明治大学のホームページは固定したヘッダーの右上にハンバーガーメニューを配置しています。ヘッダーにはアクセスや検索、言語切り替えメニューも搭載しており、ユーザーの利便性への配慮を感じます。ハンバーガーメニューをクリックすると多くのメニューが存在していることがわかります。規模にもよりますが、大学のホームページはページ数が多いことが多く、メニューが複雑になりがちです。このホームページはアコーディオンを使うことで、できるだけ初期表示の状態をごちゃごちゃさせずに工夫しているところが魅力と言えるでしょう。

カリモクキャット（CSS＋jQuery）

（画像引用：カリモクキャットホームページより）
https://karimoku-cat.jp/ja/

モノトーンが印象的なシンプルでページ数が少なめのホームページです。右上に配置されたハンバーガーメニューをタップすると、上からメニューが流れるように表示されるさわやかな動きが印象的です。主なメニュー大きなフォントで表示し、下には会社概要やプライバシーポリシーといったメニューやソーシャルボタンを設置しています。右サイドには言語切り替えを配置し、スクロールせずにどのメニューも綺麗に認識できるところが素晴らしいです。

東京都現代美術館（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/

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

T4 BUILDING OSAKA （CSS＋JavaScript）

（画像引用：T4 BUILDING OSAKAホームページより）
https://t-4.jp/t4-bldg/

動的な要素が溢れるページです。ラインを上手に使ったレイアウトや画像の展開と縦横のフォントの混在など、とにかくユニークであり芸術性を感じます。左上に配置された小さめのハンバーガーメニューは、タップすると独自性のある動きをして、シンプルなメニューを右サイドに表示します。トップページの凝り方と反して、メニューはとてもシンプルというギャップは、ユーザーのこころをくすぐる要素にもなりそうです。

ロンドマーク（CSS＋jQuery）

（画像引用：ロンドマークホームページより）
https://www.rondomark.jp/

ロンドマークのホームページはダークな印象の中、動きのあるトップページがつくる雰囲気が独特な世界観を生んでいます。右上にある小さなハンバーガーメニューをタップすると、ページの上部に2行のメニューを表示します。ページ一面や左右から出現するメニューが多い中、上部にメニューが表示される仕様はめずらしいでしょう。メニュー項目が少ないこともあり、可読性もよいと言えます。

まとめ

今回ご紹介したハンバーガーメニューは、どれもユーザーのことをよく考えて作っている様子を伺えるものばかりです。ハンバーガーメニューは利便性かつデザイン性の高さが求められるため、CSSの技術はもちろん、マーケティング力など多くのスキルが求められます。様々なホームページの制作事例を積極的にチェックして、エッセンスの吸収を繰り返してみることをオススメします。ユーザビリティの高いホームページは日頃からの継続的な努力によって、出来上がるのだと思います。

企業事例を見てみる

CSS｜アニメーション制作の有名企業事例

CSSを使って実現できることの中でもアニメーションは、特に制作者のセンスが光るものと一つでしょう。動的な表現は、ユーザーにボタンがあることを認識させたり、クリックの動機をつくるなど、ホームページの閲覧をスムーズにする助けにもなるものです。マウスカーソルをメニューに重ねた際の色の変化など小さなものから、もっと目立った動きが印象的なものまで、CSSで作れるアニメーションはたくさんあります。今回は、CSSで作れるアニメーションの事例として、様々な業界のホームページをピックアップしました。定番とも言えるアニメーションを搭載したものもあれば、ちょっとめずらしいものもあります。ぜひ、チェックしてみてくださ

先進的なBtoB企業が採用する！Instagram（インスタグラム）運用事例20選

最近人気のSNSであるInstagram（インスタグラム）ですが、動画活用が注目を集めているのを背景にビジネス利用が増えつつあります。 今回は、Instagramを運用しているBtoB企業の事例をまとめてご紹介します。