【必見のテクニック】厳選20例でハンバーガーメニューのトレンドを紐解く

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、Demystifying the Hamburger Menu: 20 Hand-Picked Examplesを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

14,436 views

読了時間 : 約4分58秒

ハンバーガーメニュー(※)はここ数カ月で認知度が急上昇し、現在Webサイトとモバイルアプリの双方において当たり前のように使用されています。このメニューの役割は、あなたを直観的な操作でそのWebサイトやアプリ内をナビゲートすることです。ハンバーガーメニューは、今ではよく馴染みのある分かりやすいUIアクションボタンの一つとなりました。見慣れた3本バー（ハンバーガーに見えることが名前の由来です）のデザインで、比率はスタイルに合わせて変更可能です。

一般的にハンバーガーメニューはUI内の占有スペースも少なく、クリックを誘発するトリガーとされます。フルメニューのナビゲーションが表示されます。それらは全体的なデザインをより良くする効果が見込まれる、各種アニメーションを取り入れることも可能です。

今回は、美しいハンバーガーメニューの厳選デザインを20例引用しながら、効果的な利用を叶えるための重要ヒントやテクニックをご紹介していきます。例えば、この種のメニューを作成するときは、様々なブラウザとの互換性を考慮して完全表示を果たす必要があります。このように、ハンバーガーメニューに関しては学ぶべき要素やトピックスがたくさんあります。

厳選された素晴らしいハンバーガーメニューアイコンのコレクションを確認し、あなたの今後のデジタルプロジェクトで是非ご活用ください。