【作り方】Studioのハンバーガーメニュー｜スマホナビの実装手順

スマホでは、画面幅が狭いためナビゲーションを三本線のハンバーガーメニューにまとめるのが一般的です。メニュー項目をすっきり隠せて、本文を広く見せられるため、スマホ閲覧が多い今のサイトでは必須のUIと言えます。

Studioではトグル機能を使って、コードなしでハンバーガーメニューを実装できます。この記事では作り方と、開閉が動かないときの対処を解説します。

150名以上が参加するノーコードコミュニティ「ノーコードサロン」には、Studio制作や案件の実務知見が集まっています。本記事では現場の知見と、サロン内で実際に寄せられる相談内容をもとに、つまずきやすいポイントを一次情報で具体的に解説します。一般論ではなく「実際に手が止まる場所」に踏み込んで説明するので、読み終えたあとすぐに手を動かせるはずです。

ハンバーガーメニューの作り方

ハンバーガーメニューは、開くためのアイコンと、開いたときに表示されるメニューパネルを用意し、アイコンに開閉（トグル）の動作を設定する流れで作ります。閉じるボタンにも閉じる動作を割り当てておくと、ユーザーが迷わず操作できます。次の手順で進めましょう。

1. メニューを開くアイコン（三本線）を配置する
2. 開いたときに表示されるメニューパネルを作る
3. アイコンにトグル（開閉）の動作を設定する
4. 閉じるボタン（×）にも閉じる動作を割り当てる

開閉が動かない時のチェック

メニューが開かないときに確認すべきは、主に3点です。トリガー（アイコン）と対象（パネル）の紐づけが正しいか、メニューパネルの初期状態が非表示になっているか、そして重なり順がコンテンツより前面になっているか。特に初期状態が表示のままだと、常にメニューが出っぱなしになるため、まずここを確認しましょう。

• トリガー（アイコン）と対象（パネル）の紐づけが正しいか
• メニューパネルの初期状態が「非表示」になっているか
• 重なり順がコンテンツより前面になっているか

PCとスマホで表示を出し分ける

実務では、PC版はテキストのナビゲーション、スマホ版はハンバーガーメニュー、というように表示を出し分けるのが定番です。Studioではブレイクポイントごとに各要素の表示・非表示を切り替えられるため、PCではハンバーガーを隠し、スマホではテキストナビを隠す設定にします。これにより、どの画面サイズでも最適なナビゲーションを提供できます。

スマホナビで意識したいユーザー体験

ハンバーガーメニューは省スペースで便利な一方、メニューが隠れることで使いにくくなる側面もあります。スマホ来訪者が迷わず目的の場所へ行けるよう、ユーザー体験の観点で次の点を意識しましょう。

重要な導線は隠さない

申し込みやお問い合わせなど、最も重要な導線は、ハンバーガーの中に隠さず、常に見える位置にボタンとして残すのがおすすめです。メニューを開かないと行動できない状態は、機会損失につながります。隠してよいのは優先度の低いリンクだけだと考えましょう。

開閉が直感的に分かるようにする

三本線のアイコンは一般的に「メニュー」と認識されますが、開いたときに閉じ方が分からないと混乱します。開いた状態では×印などの閉じるアイコンを明確に表示し、誰でも直感的に操作できるようにしましょう。背景をタップしても閉じられると、さらに親切です。

ハンバーガーメニューの見栄えを高める

機能するだけでなく、開いたときの見た目も印象を左右します。メニューが開いた瞬間の体験を丁寧に作り込むことで、サイト全体の質感が上がります。

背景オーバーレイで見やすく

メニューを開いたときに背面のコンテンツが透けて見えると、メニューが読みづらくなります。半透明の黒いオーバーレイを背面に重ねると、メニューがくっきり見やすくなります。オーバーレイをタップしたら閉じる設定にしておけば、操作性も同時に高められます。

開閉にアニメーションを添える

メニューがパッと切り替わるより、ふわっとスライドして開く方が、丁寧で洗練された印象を与えられます。ただし動きが長すぎると、開くまで待たされてストレスになります。0.2〜0.3秒程度の軽快なアニメーションにとどめ、テンポよく操作できるようにしましょう。

スマホ全体の使いやすさを高める

ハンバーガーメニューはスマホ体験の一部にすぎません。メニュー単体だけでなく、スマホ全体の操作しやすさを意識することで、来訪者に快適に回遊してもらえます。次の点もあわせて整えましょう。

親指で届く位置を意識する

スマホは片手・親指で操作されることが多いため、重要なボタンは画面下部など親指が届きやすい位置に置くと使いやすくなります。画面上部だけに操作を集めると、片手では押しづらくなります。指の動きを想像しながら配置を考えることが、快適な体験につながります。

読み込みを軽くする

スマホはモバイル回線で見られることも多く、重いサイトは表示に時間がかかって離脱されます。画像の圧縮や不要な要素の削減で、できるだけ軽く保ちましょう。メニューがすぐ反応する軽快さは、サイト全体の印象を大きく左右する要素です。

重要な情報を上に置く

スマホは縦に長くスクロールするため、最も伝えたい情報やCTAは早い段階で目に入る位置に配置しましょう。下までスクロールしないと分からない構成は、多くの人に届きません。スマホでは特に、上から順に優先度の高い情報を並べる意識が大切です。

ハンバーガーメニューは、スマホ閲覧が主流の今、欠かせないUIです。開閉の仕組みを正しく作り、重要な導線は隠さず、開いたときの見栄えや操作性まで配慮する。スマホ全体の使いやすさとセットで整えることで、来訪者がストレスなく回遊できる、親切なサイトに仕上がります。

よくある質問

Q1PCとスマホでナビを分けられますか？

分けられます。ブレイクポイントごとに、PC用のテキストナビとスマホ用のハンバーガーメニューの表示・非表示を切り替えます。PCではハンバーガーを非表示、スマホではテキストナビを非表示にすることで、画面サイズに応じて最適なメニューを出し分けられます。

Q2メニューが開きません。なぜですか？

多くの場合、トグルのトリガーと対象パネルの紐づけミスか、パネルの初期状態が表示のままになっていることが原因です。アイコンを押したときにどのパネルを開くかが正しく設定されているか、そしてパネルの初期状態が非表示になっているかを順に確認しましょう。

Q3メニューを開いたら背景を暗くできますか？

できます。メニューパネルの背面にオーバーレイ（半透明の黒いボックス）を重ね、メニューと連動して表示する設定にすると、背景が暗くなりメニューが見やすくなります。オーバーレイをタップしたらメニューが閉じるようにしておくと、操作性もさらに良くなります。

まとめ

ハンバーガーメニューは、アイコン→パネル→トグル設定の順で作ります。開かないときは紐づけと初期状態（非表示）を確認しましょう。PCとスマホでナビの表示を出し分ければ、どの画面でも使いやすいナビゲーションになり、スマホ来訪者の回遊性を高められます。