モバイルファーストのデザインが主流となる現代において、ハンバーガーメニューはウェブサイトのナビゲーションをスマートかつスタイリッシュに提供する重要な要素です。この記事では、ノーコードツール「STUDIO」を使用して、効果的なハンバーガーメニューをデザインする方法を紹介します。
ハンバーガーメニューとは？
WEBサイトにおけるハンバーガーメニューとは、主にモバイルデバイスや画面スペースが限られた環境で用いられるウェブサイトのナビゲーションメニューの一種です。このメニューは、通常、3本の平行な横線（上、中、下）で表され、これがハンバーガーのバンズとパティに似ていることから呼ばれています。
【基礎】ハンバーガーメニュー作成方法
まずはSTUDIOを使って、シンプルなハンバーガーメニューを作る基礎的な方法をご紹介します。
①最初に、ハンバーガーメニューを開くためのボタンが押された時に表示されるページを作成します。下記の動画のように、エディタの編集画面から、新しくモーダルページを追加します。
②次にハンバーガーメニューを開きたいページに「ハンバーガーメニューを開く機能を持つボタン」を配置します。大体のWEBサイトではこのボタンは画面上の四隅に固定されていることが多いです。
③実際にライブプレビューで確認してみます。すると、下記のようにシンプルなハンバーガーメニューを作成することができました。
【応用】色々なデザインのハンバーガーメニューのご紹介
ここからは、ハンバーガーメニューの作成方法を少しだけ応用して作成したデザイン例をご紹介します。
僕がココナラでフリーランスとしてSTUDIOを使ったWEBサイト制作をしている中で、作成したものや、個人的にオシャレだと感じたものをSTUDIOで作成してみました。
これらのハンバーガーメニューを実際に触ってみたい人はこちら。
※1.上記のURLのページでは、どのボタンを押しても、別の画面へ遷移しないようにしています。
※2.上記のURLのページでは、レスポンシブを設定はしていないので、スマホの画面で見ると、上の動画とは少し違った見え方になるかもしれません。
【宣伝】ココナラで出品中のサービス紹介
私は現在ココナラで、STUDIOを使ったウェブデザインから実装までを手掛けるフリーランスとして活動しています。今回ご紹介したハンバーガーメニューのデザインだけでなく、WEBサイト全体に関して、ご要望に応じた様々なデザインの提案と作成をさせていただきます！ぜひ私のサービス「STUDIOを使ったWEBサイト制作」をご利用ください。
以前作成したWEBサイトの参考例です。
①https://simple-template1.studio.site
②https://simple-template2.studio.site
あなたの目的やビジネスに合った魅力的なオーダーメイドのWEBサイトを一緒に作りましょう！
まとめ
今回、STUDIOを利用してハンバーガーメニューを作成する方法を一緒に見てきました。このスマートでユーザーフレンドリーなナビゲーションオプションは、あなたのウェブサイトをより使いやすく、見た目にも美しくするはずです。また、もし私がココナラで出品中の「WEBサイト作成サービス」にご興味があれば、是非ご連絡ください！
コメント