今回は、ノーコードツールSTUDIOでハンバーガーメニューを作成する方法を紹介します。
「STUDIOでハンバーガーメニューを作成したい!」
「アコーディオンメニューをスマホだけに表示したいけどやり方がわからない。。。」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する方法を真似して頂くと、ハンバーガーメニューを簡単に作ることができますので、ぜひ一緒に作っていきましょう。
100枚以上の画像で、丁寧に解説しております。
ちなみに、この記事を書いている私は、STUDIO関連の案件を40個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでハンバーガーメニューの作成方法を紹介
![](https://design-yandy.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-04-14.57.36.png)
それでは、ノーコードツールSTUDIOでハンバーガーメニューの作成方法を紹介します。
今回は、以下のようなハンバーガーメニューを作成します。
※音が出ますのでご注意ください。
以下のような手順で解説します。
① 管理画面にアクセス
② グローバルナビゲーションの作成(PC画面用)
③ ハンバーガメニューの作成(スマホ画面用)
④ モーダルを利用したメニューの作成
⑤ ハンバーガメニューの遷移先等の設定変更
⑥ サイトの確認
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
① 管理画面にアクセス
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_00_31_09.静止画001-1280x720.jpg)
まずは、STUDIOにアクセスし、今回利用するテンプレートを選択します。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_00_56_18.静止画002-1280x720.jpg)
今回は、この「THE COFFEE」のテンプレートを利用して、解説したいと思います。
「このテンプレートを選択」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_01_08_27.静止画005-1280x720.jpg)
次に、「プロジェクト名」を入力します。
今回は、「ハンバーガーメニュー」と入力をします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_01_15_27.静止画006-1280x720.jpg)
「作成」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_01_19_29.静止画007-1280x720.jpg)
これで管理画面にアクセスできました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_01_22_28.静止画009-1280x720.jpg)
② グローバルナビゲーションの作成(PC画面用)
次に、「ハンバーガーメニュー」を作成する前に、まずはPCの画面で表示するグローバルナビゲーションのメニューから作成します。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_00_39_04.静止画010-1280x720.jpg)
まずは、「メニュー」の土台から作成します。
左側の「矢印」を押して、「エレメンツパネル」を開きます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_01_41_05.静止画011-1280x720.jpg)
そして、「BOX」を選択し、サイトの1番上にドラックアンドドロップします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_01_48_01.静止画012-1280x720.jpg)
この「BOX」の横幅は「100%」、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_01_04.静止画013-1280x720.jpg)
縦幅を「130px」に設定しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_05_21.静止画014-1280x720.jpg)
次に、左側のエレメンツパネルから「Text」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_10_08.静止画015-1280x720.jpg)
先ほど作成したボックスの中にドラックアンドドロップして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_18_23.静止画016-1280x720.jpg)
そして、文字を「Home」と変更しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_22_01.静止画017-1280x720.jpg)
また、この文字のボックスの右側に「パディング」を設定しておきます。
上部のパネルから「ボックス」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_32_04.静止画018-1280x720.jpg)
「パディング」の「右側」を「20」に設定しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_37_25.静止画019-1280x720.jpg)
そして、今回は、このように「Home」、「Price」、「Information」、「Contact」の4つの文字を並べたいので、この「Home」の文字を複製します。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_01_33_20.静止画020-1280x720.jpg)
「Home」を選択した状態で、コピーアンドペーストして3つ複製して下さい。
これで、4つの文字が作成できました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_02_59_06.静止画021-1280x720.jpg)
しかし、このままだと文字が縦に並んでしまっているため、4つの文字が入っているボックスを選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_09_02.静止画022-1280x720.jpg)
「下矢印」をクリックすると、文字の並び方を変更できます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_13_29.静止画023-1280x720.jpg)
以下の赤枠の「右矢印」を押すことで、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_20_14.静止画024-1280x720.jpg)
文字を横に並べることができます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_28_14.静止画025-1280x720.jpg)
また、このままだと、ボックスの真ん中に文字が並んでしまっているため、ボックスの上部に表示されているアイコンをクリックして、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_32_09.静止画026-1280x720.jpg)
以下の赤枠の「右端のマーク」をクリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_38_07.静止画027-1280x720.jpg)
すると、このように、文字が右端に表示されました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_44_01.静止画028-1280x720.jpg)
あとは、複製した3つの文字を変更しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_51_28.静止画029-1280x720.jpg)
今回は、左から「Home」、「Price」、「Information」、「Contact」に文言に変更しておきましょう。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_03_53_15.静止画030-1280x720.jpg)
そして、最後にボタンを押した際に遷移するリンクも設定しておきます。
リンクの設定方法は、「Home」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_04_08_02.静止画031-1280x720.jpg)
右上に表示される「矢印」をクリックすると、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_04_11_14.静止画032-1280x720.jpg)
ここの「リンク」から設定ができます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_04_23_28.静止画033-1280x720.jpg)
「リンク」をクリックして、遷移させたいページのリンクを設定しましょう。
今回は、練習になっておりますので、「Google」のサイトに遷移するように、「https://google.com」を設定しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_04_30_26.静止画034-1280x720.jpg)
他のメニューの文言についても同様にリンクを設定して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_04_46_29.静止画035-1280x720.jpg)
これで「グローバルナビゲーション」が作成できました。
一旦、設定タブの「矢印」と
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_04_55_14.静止画036-1280x720.jpg)
「エレメンツパネル」の「矢印」を押して閉じておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_04_58_17.静止画037-1280x720.jpg)
作成した「グローバルナビゲーション」を見てみると、PC画面や
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_05_09_09.静止画038-1280x720.jpg)
タブレットの画面では、このままでのメニューで問題ないですが、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_05_10_15.静止画039-1280x720.jpg)
スマホの画面にすると、横幅いっぱいにメニューが表示されてしまいます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_05_18_24.静止画040-1280x720.jpg)
そのため、一旦このメニューは、スマホ以外の画面の際に表示するようにしたいので、メニューのボックスを選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_05_36_08.静止画041-1280x720.jpg)
左上にある「表示」をクリックして、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_05_40_10.静止画042-1280x720.jpg)
「モバイル」と「ミニ」のチェックマークは外しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_05_47_08.静止画043-1280x720.jpg)
これで、スマホの画面にすると、グローバルナビゲーションが表示されなくなりました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_05_59_00.静止画044-1280x720.jpg)
③ ハンバーガメニューの作成(スマホ画面用)
それでは、次にスマホ画面用に「ハンバーガーメニュー」を作成していきます。
まずは、編集画面が「iPhone12」になっていることを確認して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_06_08_09.静止画045-1280x720.jpg)
スマホ用のサイズになっていれば問題ありません。
まずは、「ハンバーガメニュー」のアイコンを表示させたいと思います。
先ほどグローバルナビゲーションを作成した時と同様に、左側の「エレメンツパネル」から「ボックス」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_06_29_27.静止画046-1280x720.jpg)
サイトのTOPにドラックアンドドロップして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_06_33_13.静止画047-1280x720.jpg)
そして、横幅を「100%」、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_06_38_00.静止画048-1280x720.jpg)
縦幅を「70px」にしておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_06_42_04.静止画049-1280x720.jpg)
次に、左側にある「エレメンツパネル」から「Icon」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_06_49_26.静止画050-1280x720.jpg)
先ほど作成したボックスの中に、ドラックアンドドロップして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_06_56_04.静止画051-1280x720.jpg)
そして、「ハート」のアイコンを変えたいと思います。
「ハート」のアイコンをクリックし、右上に表示された「矢印」を押して、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_07_11_14.静止画052-1280x720.jpg)
設定タブを開きます。
設定タブに表示されている「ハート」をクリックすると、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_07_19_06.静止画053-1280x720.jpg)
左側にたくさんのアイコンが表示されますので、ここでお好きなアイコンを選択できます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_07_24_23.静止画054-1280x720.jpg)
今回は、こちらの「検索ボックス」に「menu」と入力すると
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_07_33_12.静止画055-1280x720.jpg)
「Navigation」が表示されるので、こちらの3本線のアイコンをクリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_07_39_25.静止画056-1280x720.jpg)
これで「ハンバーガメニュー」のアイコンをサイトに表示させることができました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_07_47_15.静止画057-1280x720.jpg)
ただ、このままだとサイトの真ん中に表示されているので、このアイコンが入っている「ボックス」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_07_54_18.静止画058-1280x720.jpg)
ボックスの上部に表示されているアイコンから「右側」を選択して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_08_01_15.静止画059-1280x720.jpg)
これで「ハンバーガーメニュー」のアイコンが右側に表示されました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_08_06_07.静止画060-1280x720.jpg)
しかし、アイコンがかなり右寄りになっておりますので、上部のパネルの「パディング」の設定で、「右側」に「20」を設定して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_08_21_10.静止画061-1280x720.jpg)
これで「ハンバーガメニュー」のアイコンが適切な位置に表示されるようになりました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_08_34_06.静止画062-1280x720.jpg)
④ モーダルを利用したメニューの作成
次に、以下のように「ハンバーガメニュー」をクリックした後に表示されるメニューを作成していきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_15_56_15.静止画064-1280x720.jpg)
このメニューは、「モーダル」というものを使って作成します。
まずは、ページの右上に表示されている「プラスボタン」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_08_42_01.静止画063-1280x720.jpg)
すると、新規の「ページ」か「モーダル」を選択できますので、「モーダル」を選択して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_08_50_27.静止画065-1280x720.jpg)
これで「モーダル」の編集画面に移動しました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_08_55_21.静止画066-1280x720.jpg)
まずは、メニューの文字の土台となる「ボックス」を配置するために、左側の「矢印」を押して、「エレメンツパネル」を開きます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_01_02.静止画068-1280x720.jpg)
そして、「Box」を選択し、右側にドラックアンドドロップして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_09_22.静止画067-1280x720.jpg)
横幅を「100%」、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_14_18.静止画069-1280x720.jpg)
縦幅を「170px」に設定します。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_19_25.静止画070-1280x720.jpg)
そしてこの中に、「テキスト」を配置していきます。
左側の「エレメンツパネル」から「Text」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_27_05.静止画071-1280x720.jpg)
右側にドラックアンドドロップしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_32_12.静止画072-1280x720.jpg)
そして、文言を「Home」に変更しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_41_15.静止画073-1280x720.jpg)
また、この文字のボックスの下方向に「マージン」を設定したいので、上部メニューから「ボックス」タブを選択し、「マージン」の下方向に「10」を設定しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_09_54_24.静止画075-1280x720.jpg)
そして、この「Home」の文字を3つ複製してください。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_01_10.静止画076-1280x720.jpg)
上から「Home」、「Price」、「Information」、「Contact」に文言を変更しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_05_25.静止画077-1280x720.jpg)
また、先ほどと同様に、この文字にリンクも設定しておきましょう。
「Home」を選択し、設定タブの「リンク」から設定します。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_19_16.静止画078-1280x720.jpg)
通常、「Home」のサイトのリンク先は、この作成しているサイトのHome画面に設定することが一般的ですが、今回は練習のためGoogleのリンク先を設定しておきます。
以下の赤枠の「URL」をクリックした後に、URLを入力するようにして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_35_15.静止画081-1280x720.jpg)
「https://google.com」に設定しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_32_15.静止画079-1280x720.jpg)
ちなみに、サイトのHome画面にリンクを設定したい場合は、「ページ」を押して、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_46_26.静止画082-1280x720.jpg)
こちらの「Home」を選択して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_49_06.静止画080-1280x720.jpg)
他の「Price」、「Information」、「Contact」にもリンクを設定して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_53_21.静止画083-1280x720.jpg)
そして、最後にこのメニューを閉じるボタンを作成しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_10_58_06.静止画084-1280x720.jpg)
まずは、「閉じるボタン」の土台となるボックスを配置したいので、左側の「エレメンツパネル」から「Box」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_07_29.静止画085-1280x720.jpg)
先ほど作成したボックスの上にドラックアンドドロップします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_12_27.静止画086-1280x720.jpg)
横幅を「100%」、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_16_22.静止画087-1280x720.jpg)
縦幅を「70px」に設定します。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_22_12.静止画089-1280x720.jpg)
そして、「エレメンツパネル」から「icon」をクリックして、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_27_11.静止画090-1280x720.jpg)
先ほど作成したボックスの中にドラックアンドドロップします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_30_29.静止画091-1280x720.jpg)
ハートのアイコンを「閉じるボタン」に変更します。
ハートのアイコンをクリックして、右側の設定タブから「アイコン」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_41_29.静止画092-1280x720.jpg)
すると、左側のエレメンツパネルにアイコンが表示されますので、検索ボックスに「close」と入力して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_49_27.静止画093-1280x720.jpg)
すると、「Navigation」の箇所に「バツボタン」が表示されますので、そちらを選択して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_11_54_07.静止画094-1280x720.jpg)
また、この閉じるボタンの周りに、四角形の枠をつけておきたいので、上部パネルから「ボックス」を選択して、「枠線」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_12_11_22.静止画095-1280x720.jpg)
そして、上下左右に「1」と入力しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_12_16_17.静止画096-1280x720.jpg)
これで閉じるボタンの周りに、四角形の枠がつきました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_12_21_04.静止画097-1280x720.jpg)
さらに、大きさも変更しておきたいので、サイズを「36」に変更しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_12_28_09.静止画098-1280x720.jpg)
これで閉じるボタンが作成できました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_12_32_02.静止画099-1280x720.jpg)
また、「閉じるボタン」を右側に寄せたいので、ボックスを選択した際に上部に表示されているアイコンをクリックして、「右寄せ」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_12_44_06.静止画100-1280x720.jpg)
これで「閉じるボタン」が右側に表示されましたが、かなり右寄りになっておりますので、上部のパネルの「パディング」の設定で、「右側」に「20」を設定して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_01_14.静止画101-1280x720.jpg)
これで「閉じるボタン」のアイコンが適切な位置に表示されるようになりました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_05_07.静止画102-1280x720.jpg)
また、「閉じるボタン」を押した際に、サイトのホームに遷移するようにしたいので、「閉じるボタン」を選択し、右側の設定タブの「リンク」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_19_00.静止画103-1280x720.jpg)
すると、「Home」が表示されておりますので、この「Home」を設定しておくことで、サイトのHomeに戻るようになります。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_23_29.静止画104-1280x720.jpg)
これで、「モーダル」での作業は終了です。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_31_15.静止画105-1280x720.jpg)
一旦、サイトの編集画面に戻りたいので、左側の「Modal1」の上にマウスオーバーして、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_41_01.静止画106-1280x720.jpg)
「Home」をクリックしてください。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_43_14.静止画107-1280x720.jpg)
これでサイトの編集画面に戻ることができました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_13_46_22.静止画108-1280x720.jpg)
⑤ ハンバーガメニューの遷移先等の設定変更
最後に、「ハンバーガーメニューの遷移先等の設定変更」を行います。
まずは、「ハンバーガメニュー」のアイコンの遷移先を先ほど作成したモーダルにしたいので、「ハンバーガメニュー」のアイコンをクリックして、「リンク」に「Modal1」を設定しましょう。
ただ、クリックしてもボックスがかぶっていてアイコンが選択できないので、左側の「レイヤー」を押して、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_09_10.静止画109-1280x720.jpg)
アイコンのレイヤーをクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_11_28.静止画110-1280x720.jpg)
そして、リンクに「Modal1」を設定しておきましょう。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_18_08.静止画111-1280x720.jpg)
大きさも変更しておきたいので、サイズを「36」に変更しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_24_21.静止画112-1280x720.jpg)
また、この「ハンバーガメニュー」は、スマホ画面の時のみ表示させますので、「ハンバーガメニュー」を配置しているボックスを選択した状態で、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_36_25.静止画113-1280x720.jpg)
左上の「表示」から
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_41_00.静止画114-1280x720.jpg)
「基準」と「スモール」、「タブレット」のチェックマークを取っておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_48_04.静止画115-1280x720.jpg)
これで、「ハンバーガメニュー」が作成できました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_51_02.静止画116-1280x720.jpg)
こちら「設定タブ」と
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_54_12.静止画117-1280x720.jpg)
「エレメンツパネル」は閉じておきます。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_14_56_21.静止画118-1280x720.jpg)
⑥ サイトの確認
最後に、見る媒体によってどのようになっているかを確認してみると、PCのサイズやタブレットのサイズにすると、以下のように「グローバルナビゲーション」が表示されておりますが、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_15_05_17.静止画119-1280x720.jpg)
スマホのサイズにすると、「グローバルナビゲーション」は消えて、「ハンバーガメニュー」が表示されるようになりました。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_15_22_08.静止画120-1280x720.jpg)
実際にどのように表示されているかをスマートフォンで確認してみましょう。
右上の「ライフプレビュー」を押して、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_15_33_08.静止画121-1280x720.jpg)
「スタート」を押すと、
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_15_36_09.静止画122-1280x720.jpg)
QRコードが表示されますので、そちらをカメラで読み取って下さい。
![](https://design-yandy.com/wp-content/uploads/2022/05/18.00_15_41_11.静止画123-1280x720.jpg)
すると、以下のような「ハンバーガーメニュー」が作成されているるはずです。
※音が出ますのでご注意ください。
これで、ハンバーガメニューの作成は終了です。
まとめ
今回は、ハンバーガーメニューを作成する方法を5つのSTEPで紹介しました。
① 管理画面にアクセス
② グローバルナビゲーションの作成(PC画面用)
③ ハンバーガメニューの作成(スマホ画面用)
④ モーダルを利用したメニューの作成
⑤ ハンバーガメニューの遷移先等の設定変更
⑥ サイトの確認
スマートフォンでは、「ハンバーガーメニュー」を利用することが多いので、ぜひこの作成方法をマスターしておきましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/アイキャッチ画像(studio)-1-320x180.jpg)