レスポンシブ編 09 / 10 実践 約5分
スマホのナビゲーション｜メニューの畳み方
PCで横並びのメニューを、スマホでどう畳むかを解説します。ハンバーガーメニューの作りと、押しやすさの基準まで扱います。
この教材で学べること
- メニューを畳む方式の選び方
- ハンバーガーメニューの構造
- タップしやすいサイズの基準
ヘッダーのメニューは、PCでは横に並びますがスマホ幅では入りきりません。畳み方にはいくつか方式があり、サイトの性格で選びます。
畳み方の選択肢
| 方式 | 向いている場面 | 注意点 |
|---|---|---|
| ハンバーガーメニュー | 項目が4つ以上ある一般的なサイト | 開かないと中身が見えない |
| そのまま横に並べる | 項目が2〜3個で短いLP | 文字が小さくなりすぎないこと |
| 下部固定のタブ | アプリ的な使い勝手にしたいとき | 実装の手間が増える |
| メニューを置かない | 1ページ完結のLP | 問い合わせボタンだけは常に出す |
迷ったらハンバーガーメニューが無難です。ただし「開かないと何があるか分からない」という欠点があるため、問い合わせなど最重要の導線は、メニューの中に隠さず常時表示にするのが定石です。
ハンバーガーメニューの構造
押しやすさの基準
スマホは指で操作します。マウスカーソルより指のほうがはるかに大きいため、小さいリンクは押せません。次の基準を守ってください。
| 対象 | 最低サイズの目安 | 守らないと |
|---|---|---|
| ボタン・タップ領域 | 縦44px以上 | 押しづらく、離脱の原因になる |
| リンクどうしの間隔 | 8px以上 | 隣を誤タップする |
| ハンバーガーのアイコン | 44×44px以上の反応範囲 | 反応せず「壊れている」と思われる |
| 閉じるボタン | 同上、かつ分かる位置に | メニューから戻れなくなる |
レスポンシブ編の最後は確認手順とチェックリストです。