STUDIOでハンバーガーメニューを作る時は、PC用メニューとスマホ用メニューを分けて考えることが大切です。
STUDIOでは、パソコン画面では通常のナビゲーションメニューを表示し、スマホやタブレットでは三本線のハンバーガーアイコンを表示して、クリックするとメニューが開く形にできます。
結論から言うと、STUDIOのハンバーガーメニューは「PC用ナビゲーションをモバイル・タブレットで非表示にする」「スマホ用アイコンをPCで非表示にする」「メニュー内容をモーダルで作る」「アイコンからモーダルを開くリンクを設定する」という流れで作ります。
この記事では、STUDIOでハンバーガーメニューを作る基本手順と、スマホ表示で崩れないための注意点を整理します。
この記事で分かること
- STUDIOでハンバーガーメニューを作る考え方
- PC用メニューとスマホ用メニューの分け方
- ナビゲーションメニューを非表示にする手順
- ハンバーガーアイコンを配置する手順
- モーダルでスマホメニューを作る方法
- アイコンからメニューを開くリンク設定
- メニューを閉じるボタンの作り方
- 公開前に確認したいスマホ表示の注意点
STUDIOのハンバーガーメニューとは
ハンバーガーメニューとは、スマホ画面でよく見る三本線のメニューアイコンのことです。
パソコンでは画面幅に余裕があるため、「トップ」「サービス」「実績」「お問い合わせ」のようなナビゲーションを横並びで表示できます。しかし、スマホでは横幅が狭いため、そのまま表示すると文字が小さくなったり、ヘッダーが詰まったりします。
そこで、スマホではメニュー項目をいったん隠し、三本線のアイコンを押した時だけメニューを表示する形にします。これがハンバーガーメニューです。
STUDIOでは、ブレイクポイントごとの表示設定とモーダル機能を組み合わせることで、スマホ用のハンバーガーメニューを作れます。
ハンバーガーメニューが必要な理由
- スマホ画面でメニューが横に詰まるのを防げる
- ヘッダーをすっきり見せられる
- サービス・料金・実績・お問い合わせへ移動しやすくなる
- スマホでの操作性を整えやすい
- 問い合わせ導線を見失いにくくできる
STUDIOでハンバーガーメニューを作る全体の流れ
STUDIOのハンバーガーメニューは、PC用メニューを隠して、スマホ用のメニューをモーダルで開く流れです。
いきなりスマホ用メニューを作り始めると、PC表示とスマホ表示が混ざって分かりにくくなります。まずは、PCで表示する通常のナビゲーションを作り、その後にスマホ・タブレット用の表示を調整する順番がおすすめです。
ポイントは、同じヘッダーの中にPC用ナビゲーションとスマホ用アイコンを置き、ブレイクポイントごとに表示・非表示を切り替えることです。
以下の流れで進めると、どこで設定しているか分かりやすくなります。
作成の全体像
- PC用のナビゲーションメニューを作る
- PC用メニューをタブレット・モバイルで非表示にする
- タブレット・モバイル用にハンバーガーアイコンを置く
- ハンバーガーアイコンをPCで非表示にする
- メニュー表示用のモーダルページを作る
- モーダル内にメニュー項目と閉じるボタンを置く
- アイコンからモーダルを開くリンクを設定する
- ライブプレビューとスマホ実機で動作確認する
手順1：PC用のナビゲーションメニューを作る
最初に、PC画面で表示する通常のナビゲーションメニューを作ります。
ヘッダー内に「トップ」「サービス」「料金」「実績」「お問い合わせ」などのテキストやボタンを配置します。すでにヘッダーを作っている場合は、そのナビゲーションを使って構いません。
この段階では、スマホのことを考えすぎず、まずPCで見た時に分かりやすいメニューを作ります。あとからブレイクポイントごとに表示・非表示を設定します。
メニュー項目が多すぎるとスマホ用メニューでも見づらくなるため、最初から必要な項目に絞るのがおすすめです。
PC用メニューで決める項目
- トップページ
- サービス内容
- 料金・プラン
- 制作実績・事例
- よくある質問
- お問い合わせ
事業用サイトでは、「お問い合わせ」や「相談する」など、最後に取ってほしい行動をメニュー内に入れておくと導線が分かりやすくなります。
手順2：PC用メニューをタブレット・モバイルで非表示にする
PC用ナビゲーションは、タブレット・モバイルでは非表示にします。
STUDIO公式ヘルプでは、該当のナビゲーションメニューを選択し、レイヤーパネルの表示設定で「モバイル」「タブレット」のチェックを外して非表示にする手順が案内されています。
ここで大事なのは、PC用メニューそのものを削除するのではなく、タブレット・モバイルだけで非表示にすることです。削除してしまうとPC表示からも消えてしまいます。
表示設定を使うと、同じページの中で「PCでは表示」「スマホでは非表示」のように出し分けできます。
PC用メニューを非表示にする手順
PC用ナビゲーションを選択する
ヘッダー内にあるPC用のナビゲーションメニューを選択します。
テキストやボタンをまとめた親ボックスがある場合は、個別のテキストではなく、メニュー全体を囲んでいるボックスを選ぶと管理しやすいです。
レイヤーパネルを開く
左側のレイヤーパネルを開き、選択したナビゲーションのレイヤーを確認します。
どのボックスを非表示にするか間違えると、ヘッダー全体やロゴまで消えることがあります。対象レイヤーを確認してから進めましょう。
表示設定を開く
対象レイヤーにカーソルを合わせ、目のアイコンから表示設定を開きます。
STUDIOでは、ブレイクポイントごとに表示・非表示を切り替えられます。
モバイル・タブレットのチェックを外す
PC用メニューは、モバイルとタブレットでは非表示にします。
デフォルトやスモールでは表示し、タブレット・モバイルでは隠すイメージです。設定後、スマホ幅に切り替えてメニューが消えているか確認しましょう。
手順3：ハンバーガーアイコンを配置する
次に、スマホ・タブレットで表示するハンバーガーアイコンを配置します。
公式ヘルプでは、ブレイクポイントバーでタブレットを選び、ヘッダーにアイコンボックスを追加してハンバーガーメニューアイコンに変更する流れが案内されています。
このアイコンは、PCでは表示せず、スマホ・タブレットでだけ表示するように設定します。PC用メニューとスマホ用アイコンが同時に表示されると、ヘッダーがごちゃついて見えます。
アイコンは右上に置くことが多いですが、ロゴや問い合わせボタンとの位置関係も見ながら調整しましょう。
ハンバーガーアイコンを置く手順
- ブレイクポイントバーで「タブレット」または「モバイル」を選ぶ
- PC用ナビゲーションが非表示になっているか確認する
- ヘッダー内にアイコンボックスを追加する
- 三本線のメニューアイコンに変更する
- アイコンを右上など押しやすい位置に配置する
- レイヤーパネルで表示設定を開く
- デフォルト・スモールでは非表示にする
- タブレット・モバイルでは表示する
手順4：メニュー用のモーダルページを作る
ハンバーガーアイコンを押した時に開くメニューは、モーダルページで作ります。
モーダルとは、現在のページの上に重ねて表示される画面です。STUDIO公式ヘルプでも、ハンバーガーアイコンをクリックした時に表示するメニューをモーダルで作成する手順が案内されています。
モーダル内には、メニュー項目、問い合わせボタン、閉じるボタンを配置します。スマホで見た時に押しやすいよう、文字サイズや余白を大きめに取るのがコツです。
メニュー項目を詰め込みすぎると、開いた時に見づらくなります。必要なページに絞って、縦に並べる形が分かりやすいです。
モーダルメニューに入れる項目
- トップページへのリンク
- サービス内容へのリンク
- 料金ページへのリンク
- 制作実績へのリンク
- よくある質問へのリンク
- お問い合わせページへのリンク
- モーダルを閉じるボタン
事業用サイトでは、最後に「無料相談する」「お問い合わせする」などの行動ボタンを入れておくと、スマホから問い合わせにつなげやすくなります。
手順5：モーダルを閉じるボタンを設定する
ハンバーガーメニューでは、開く設定だけでなく、閉じる設定も忘れないようにしましょう。
メニューが開いても、閉じるボタンがないとユーザーが元のページへ戻りにくくなります。公式ヘルプでは、モーダル上の要素に「モーダルを閉じる」リンクを設定する手順が案内されています。
閉じるボタンは、右上に「×」アイコンを置くか、メニュー下部に「閉じる」と分かるボタンを置くと親切です。スマホでは指で押すため、ボタン周りの余白も確保しましょう。
リンク先を設定する時は、通常のページリンクではなく「モーダルを閉じる」を選びます。
閉じるボタンの設定手順
- モーダル内に閉じるボタンや×アイコンを配置する
- 閉じる動作を割り当てたい要素を選択する
- 右パネルで「設定」タブを開く
- リンク設定メニューの「＋」をクリックする
- リストから「モーダルを閉じる」を選ぶ
- ライブプレビューで閉じる動作を確認する
手順6：ハンバーガーアイコンからモーダルを開くリンクを設定する
ハンバーガーアイコンを置いただけでは、メニューは開きません。
アイコンをクリックした時に、先ほど作ったモーダルメニューが開くようにリンク設定を行います。公式ヘルプでは、モーダルへのリンクを設定するボックスを選択し、右パネルの「設定」タブからリンク設定メニューの「＋」をクリックして、リンク先のモーダルページを選択する流れが案内されています。
設定後は、必ずライブプレビューで確認します。アイコンを押してメニューが開くか、閉じるボタンで戻れるか、各メニュー項目から正しいページへ移動できるかまで見ておきましょう。
公開中のサイトを編集している場合は、公開パネルからサイトを更新しないと公開サイトへ反映されない点にも注意が必要です。
アイコンからメニューを開く設定手順
- スクリーン上のハンバーガーアイコンを選択する
- 右パネルで「設定」タブを開く
- リンク設定メニューの「＋」をクリックする
- 作成したモーダルページをリンク先に選ぶ
- ライブプレビューでアイコンをクリックする
- モーダルが開くか確認する
- 閉じるボタンで閉じられるか確認する
- 公開中サイトなら「サイト更新」まで行う
公式手順は、STUDIO公式ヘルプのモーダル開閉リンク設定でも確認できます。
簡単に作るならセクションパーツを使う方法もある
一から作るのが難しい場合は、STUDIOのセクションパーツを使う方法もあります。
公式ヘルプでは、セクションパーツのメニューにはレスポンシブデザインが設定され、あらかじめハンバーガーメニューが実装されていると案内されています。
初心者の場合は、最初から自作するより、セクションパーツを追加して、不要なボックスやテキストを差し替える方が早いです。ただし、リンク先や表示確認は必ず自分で行う必要があります。
既存のデザインに合わせたい場合は自作、まず動くメニューを作りたい場合はセクションパーツ、という分け方で考えるとよいでしょう。
セクションパーツを使う流れ
- 左パネルで追加パネルを開く
- 「セクション」タブを開く
- ヘッダーまたはフッターのセクションメニューを選ぶ
- 不要なボックスを削除する
- テキストを自分のサイト内容に差し替える
- 各メニュー項目にサイト内リンクを設定する
- ライブプレビューで表示確認する
- 公開中サイトならサイトを更新する
ハンバーガーメニューが表示されない時の確認点
ハンバーガーメニューが表示されない時は、まず表示設定とブレイクポイントを確認しましょう。
STUDIOでは、ブレイクポイントごとに表示・非表示を切り替えます。そのため、PCでは見えるのにスマホでは見えない、スマホでは見えるのにPCでも出てしまう、といった状態が起きることがあります。
よくある原因は、PC用メニューとスマホ用アイコンの表示設定が逆になっていることです。PC用メニューはスマホで非表示、ハンバーガーアイコンはPCで非表示になっているか確認しましょう。
また、対象の親ボックスを非表示にしていると、その中の要素もまとめて非表示になります。アイコンだけを表示したい場合は、レイヤーの階層も確認してください。
表示されない時の確認リスト
- 今見ているブレイクポイントが合っているか
- PC用メニューをスマホで非表示にしているか
- ハンバーガーアイコンをPCで非表示にしているか
- アイコンの親ボックスまで非表示になっていないか
- レイヤーパネルで対象ボックスを選べているか
- ヘッダーの外にアイコンを置いていないか
- 他のボックスに隠れて押せなくなっていないか
- ライブプレビューで確認しているか
クリックしてもメニューが開かない時の確認点
アイコンをクリックしても開かない場合は、リンク設定が正しくできていない可能性があります。
ハンバーガーアイコンは、見た目として配置しただけでは動きません。右パネルの設定タブから、作成したモーダルページへのリンクを設定する必要があります。
また、編集画面上で見た目だけ確認している場合、実際のクリック動作が分かりにくいことがあります。リンク設定後は、ライブプレビューでアイコンを押して確認しましょう。
公開済みサイトを直した場合は、編集画面では動いていても、サイト更新をしていないと公開ページに反映されないことがあります。
開かない時の確認リスト
- ハンバーガーアイコンにリンク設定をしているか
- リンク先に正しいモーダルページを選んでいるか
- モーダルページ自体を作成しているか
- 別ページではなくモーダルを選んでいるか
- アイコンの上に透明なボックスが重なっていないか
- ライブプレビューで確認しているか
- 公開中サイトならサイト更新まで行ったか
スマホで使いやすいメニューにするコツ
スマホ用メニューでは、見た目よりも押しやすさと分かりやすさを優先しましょう。
ハンバーガーメニューは、スマホで片手操作されることも多いです。文字が小さい、余白が狭い、ボタン同士が近い、閉じるボタンが分かりにくい状態だと、せっかく作っても使いにくくなります。
事業用サイトでは、メニュー内に「お問い合わせ」「予約」「相談する」など、行動につながる項目を分かりやすく入れておくことも大切です。
デザインにこだわる場合でも、まずはユーザーが迷わず目的のページへ移動できるかを確認しましょう。
使いやすくするポイント
- メニュー項目を増やしすぎない
- 文字サイズを小さくしすぎない
- リンク同士の余白を広めに取る
- 閉じるボタンを分かりやすく置く
- お問い合わせへの導線を入れる
- タップしやすい位置に配置する
- スマホ実機で開閉を確認する
- 公開後もリンク切れを確認する
公開前に必ず確認したいこと
ハンバーガーメニューは、公開前の動作確認がとても重要です。
見た目だけ整っていても、押して開かない、閉じられない、リンク先が違う、スマホでボタンが押しにくい状態では、ユーザーが目的のページへ進めません。
特に、お問い合わせや予約につながるサイトでは、スマホでメニューを開き、問い合わせページまで実際に移動できるかを必ず確認しましょう。
公開中のサイトを編集した場合は、プレビュー確認だけでなく、サイト更新後の公開ページでも動作確認するのがおすすめです。
公開前チェックリスト
- PCでは通常メニューが表示されているか
- スマホではハンバーガーアイコンが表示されているか
- PC用メニューがスマホで重なっていないか
- アイコンを押すとメニューが開くか
- 閉じるボタンでメニューを閉じられるか
- 各メニュー項目のリンク先が正しいか
- お問い合わせページへ移動できるか
- スマホ実機でタップしやすいか
- 公開中サイトならサイト更新を行ったか
よくある質問
作れます。PC用メニューとスマホ用アイコンを表示設定で切り替え、モーダルを使ってスマホ用メニューを表示する形が基本です。
アイコンにモーダルを開くリンクが設定されているか確認しましょう。右パネルの「設定」タブからリンク設定を開き、作成したモーダルページをリンク先に選びます。
表示設定で、ハンバーガーアイコンをデフォルト・スモールでは非表示にします。反対に、PC用ナビゲーションはモバイル・タブレットで非表示にします。
必要です。モーダルを開けても閉じる手段が分かりにくいと、ユーザーが操作に迷います。右上に×アイコンを置くなど、閉じる動作を分かりやすく設定しましょう。
セクションパーツを使う方法があります。STUDIOのセクションパーツには、あらかじめレスポンシブデザインやハンバーガーメニューが設定されているものがあります。初心者はまずセクションパーツを使い、必要な文字やリンクを差し替える方法もおすすめです。
まとめ：STUDIOのハンバーガーメニューは表示設定とモーダルが重要
STUDIOでハンバーガーメニューを作る時は、PC用メニューとスマホ用メニューを分けて設定しましょう。
PCでは通常のナビゲーションを表示し、タブレット・モバイルではそのナビゲーションを非表示にします。その代わりに、スマホ用のハンバーガーアイコンを表示し、クリックした時にモーダルメニューが開くように設定します。
作成後は、ライブプレビューとスマホ実機で、開く・閉じる・リンク移動・問い合わせ導線まで確認することが大切です。
見た目だけで判断せず、スマホで実際に押して使いやすいかを確認しましょう。ハンバーガーメニューが正しく動くと、スマホユーザーが目的のページへ移動しやすくなり、問い合わせや予約の導線も整えやすくなります。
