こんにちは。ジョージです。
サイトづくりには機能の進歩により常に変化が生じてきます。
今回は、スマホの一部に関する時代の終焉とはじまりについてお話しします。
それがスマホのハンバーガーメニューです。
ハンバーガーメニューとは？
ハンバーガーメニューとは、主にスマホにあるナビゲーションメニューを開くための3本線のボタンです。
名前の由来はハンバーガーみたいだからです。
メニューがずっと出ているより隠して必要な人だけ開けるメニューは使いやすさ、見やすさともにGoodですよね。
でも、押しづらくないですか？
ハンバーガーメニューは右下に配置するべき
ハンバーガーメニューを上（右上、左上）に配置するべきではない理由は、
ずばり、押しづらいからです。
現在のスマホづくりの主流は「画面を大きく、長くしていく」ことなので、もっと押しづらくなってきています。
ストレスを与えないハンバーガーメニューの位置は右下なのです。
ハンバーガーメニューが右下にあるメリット
- 上にあるより親指で押しやすい
- 左利きの人でも押しやすい
- 右利きの人はさらに指で隠れるのでサイト内を見る時に邪魔にならない
- デザインのオリジナル性がある
ユーザーの利便性＝ユーザビリティを考えると右下配置がベストです。
現にJINなど大手Wordpressテーマのスマホメニューも右下配置のハンバーガーメニューを採用しています。
出典；JINデモサイト11
ハンバーガーメニューが右下にあるデメリット
- メニューが上にあると思い込む人が多いため見逃す
- 右手で隠れる
- 誤って押しちゃう
など結構デメリットも大きいです。
ただ、前述したように画面サイズが大きくなるスマホでは、ハンバーガーメニューが指の届きづらい上にあるストレスをなくすことが優先順位が高いです。
2021年は、ハンバーガーメニューが上から右下になっていく年になると予想します。
ハンバーガーメニューの参考サイト
ハンバーガーメニューを実際に自分のサイトに入れ込んでみましょう。
・株式会社アーティス様の記事です。
JavaScript不要！CSSだけでハンバーガーメニューを実装する方法
余計なコードなどいりません。CSSだけでハンバーガーメニューを実装する方法です。
