ちょっと変わったスマホメニューに挑戦するテクニック・応用編

こんにちは、テンプレートディレクターのオモトです!
ユーザーさんから方法が知りたいとよく言われる、BiNDupでのスマホメニューのカスタマイズ・テクニック第2弾です。

前回、「見慣れたスマホメニューをカスタマイズするテクニック・基本編」では、Dressを使ったハンバーガーメニューの基本的なデザイン編集方法についてまとめました。

後編の今回は、凝ったデザインに挑戦したい時のテクニックとして、応用編を解説します。難しいものもありますが、難易度を書いておいたので参考にしてみてくださいね。
設定できなかった方にはサイトデータを用意しているのでご安心を!

BiNDで文字入りのハンバーガーメニューを実装したアレンジ例

★作業前のご注意★ 必ずお読みください!

※これからご紹介する3つのやり方は、BiND9以降のソフトまたはBiNDupじゃないとできません!BiND8以前のソフトではできません。
※ブログの内容についてはサポート対象外なので要注意!質問いただいてもお答えできません。(ごめんなさい!)

前回のおさらい

ハンバーガーメニューのカスタマイズをしたい場合は、主に以下の4つの指定を使い分けます。

  • ドロワー:ボタン(※1)
  • ドロワー:ボタン:3本線(※2)
  • ドロワー:ボタン:before要素
  • ドロワー:ボタン:after要素

の4つを使って表現します。
※1 BiND9では、「スマホメニューのボタン枠」
※2 BiND9では、「スマホメニューボタン内の3本線」

ハンバーガーメニューをカスタマイズするときのDressの基本設定

BiNDupの場合

BiNDupのドロワーボタンの設定
左から順に、スマホのタブをクリック→プレビュー内のドロワーのボタンをクリック→「ドロワー:ボタン」などをクリックします。

before要素を指定したい場合は、「詳細設定」のタブをクリック→項目を追加またはプラスボタンをクリック。
beforeの位置
「オプションを設定(上級者向け)」をクリック→before要素またはafter要素をクリックして、次へを選択してください。

BiND9の場合

BiND9のDressのハンバーガーメニュー関連の設定箇所
ハンバーガーメニュー関係のDressは、Dress編集画面のデバイス切り替えで「スマホ」タブにしないと設定が表示されないので注意。

基本構造と概念(CSSがわかる人向け)

文字入りのハンバーガーメニューを実装する時の考え方 BiNDupでデフォルトで設定されている3本線は、「ドロワー:ボタン:3本線」で線の色を変更できます。が、それだと線と線の間の余白を調節したり細かい調整ができません。

今回ご提案する方法では、「ドロワー:ボタン:3本線」を非表示にし、これ以外のハンバーガーメニューに割り当てられる要素を使って、3本線を表現しています。
具体的には、「ドロワー:ボタン」と、そこに当てられる疑似要素「before要素」と「after要素」をつけた3箇所のみで実装しています。

ただ、before要素とafter要素だけでは、2本しか線を表現することができませんよね。なので、3本の線の色(黒)は背景色にし、線と線の隙間(白)の方を、隙間ではなく四角い箱に見立て、before要素・after要素を使って配置するという逆転の発想を使ったテクニックになっています!

企業サイトでよく見るハンバーガーメニュー

3本の線の下に「MENU」という文字を配置して、アイコンの意味を説明しているパターン。3本線だけだとそれが「メニュー」だと、認識しづらいユーザーが多くいるのも事実です。初回の訪問者にもわかりやすく見せる対策としてよく使用されています。
BiNDupのテンプレートでは、CHISATO Plant、追加テンプレートのIKASA Corporationで使用されています。

メニュー文字入りのハンバーガーメニューのBiNDupアレンジ例

※スマホで閲覧しないとスマホメニューは表示されません

3本線の下に「MENU」の文字入りハンバーガーメニューの作り方 難易度:★★★

borderを線なしに

BiNDupでMENU文字入のハンバーガーメニューの完成例 「ドロワー:ボタン:3本線」
ボーダー:4辺とも同じにチェックを入れ、「なし(none)」

「ドロワー:ボタン」の設定

ドロワーボタンの設定

①背景色:#000000
②枠線(border):上 13px 実線(solid) #ffffff、下 23px 実線(solid) #ffffff、左 15px 実線(solid) #ffffff、右 15px 実線(solid) #ffffff
③幅(width):50px
④高さ(height):50px
※BiND9では、表示(display):blockも追加

「ドロワー:ボタン:before要素」の設定

before要素の設定

①ボーダー(border):下 実線(solid) 4px #ffffff
②表示(display):ブロック(block)
③内容(content):""を追加
④配置方法(position):相対配置(relative)
⑤位置:上位置(top):2px

「ドロワー:ボタン:after要素」の設定

after要素の設定

①文字色:#000000
②文字サイズ:11px
③ボーダー(border):上 実線(solid)4px #ffffff
④幅(width):30px
⑤表示形式(display):ブロック(block)
⑥内容(content):"MENU"
⑦配置方法(position):相対配置(relative)
⑧位置:上位置(top):4px、左配置(left):-6px

3本線が華奢で美しいハンバーガーメニュー

ハンバーガーメニューに慣れている層をメインターゲットとし、デザインのプライオリティが高いビジュアル重視のサイトに積極的に取り入れたい美しいデザインのハンバーガーメニューです。
BiNDupのテンプレートでは、KATO INTERIORで使用されています。

細い線のハンバーガーメニューのBiNDカスタマイズ例

※スマホで閲覧しないとスマホメニューは表示されません

3本線が華奢で美しいハンバーガーメニューの作り方 難易度:★★★

ボーダーなし

BiNDで細いハンバーガーメニューの完成例 「ドロワー:ボタン:3本線」
ボーダー:4辺とも同じにチェックを入れ、「なし(none)」

「ドロワー:ボタン」の設定

ドロワーボタン設定

①背景色:#000000
②ボーダー(border)上 実線(solid)18px #ffffff、下 実線(solid)18px #ffffff、左 実線(solid)13px #ffffff、右 実線(solid)13px #ffffff
③外余白(margin):上下0px 左右10px(※デザイン次第で設定しなくてもOK)

※BiND9の場合 表示(display):block、幅(width):45px、高さ(height):45pxも追加

「ドロワー:ボタン:before要素」の設定

before要素の設定
①ボーダー(border):下 実線(solid)3px #fffffff
②表示(display):ブロック(block)
③内容(content):""
④配置方法(position):相対配置(relative)
⑤位置:上方向(top)2px
※BiND9の場合、上方向は5pxにする

「ドロワー:ボタン:after要素」の設定

after要素
①ボーダー(border):上 実線(solid)3px #ffffff
②表示(display):ブロック(block)
③内容(content):""
④配置方法(position):相対配置(relative)
⑤位置:上方向(top):4px
※BiND9の場合、上方向-2px

おまけ:横長でメニューの文字が大きいハンバーガーメニュー

これ以上なく大きくメニューという文字が入っているので、メニューがどこにあるのか特に認識しづらいユーザーには最大限の効果を発揮しそうなハンバーガーメニューです。

BiNDupで横並びのハンバーガーメニューのアレンジ例

※スマホで閲覧しないとスマホメニューは表示されません

左側にメニューの文字入りハンバーガーメニューの作り方 難易度:★★

ボーダーなし

BiNDのハンバーガーメニューを横並びにするアレンジ完成例 ①「スマホメニュー内の3本線」
ボーダー:4辺とも同じにチェックを入れ、「なし(none)」

「ドロワー:ボタン」の設定

ドロワーボタンの設定
①背景色:透明
背景画像:icon_menu.png(サンプルファイル内)を設定
繰り返し:一番右のボタン(no-repeat)
位置:10px
②ボーダー(border):実線(solid) 1px #ffffff」
③角丸(border-radius):設定する・四隅とも同じにするにチェックを入れ、4px
④幅(width):98px
⑤高さ(height):38px

「ドロワー:ボタン:after要素」の設定

after要素の設定
①文字色:#ffffff
②文字サイズ:13px
③表示(display):ブロック(block)
④内容(content):"MENU"
⑤配置方法(position):絶対位置(absolute)
⑥位置:上位置(top):5px
左位置(left):44px
※BiND9の場合、文字サイズ:11px

ハンバーガーメニューは、自分のサイトのターゲットに合わせてデザインをカスタマイズしていくと、より効果を発揮しそうですね。

今回作成したサンプルサイトのダウンロード

自分では設定ができなそう・・と不安な方
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
(BiND10以降、BiNDup対応)

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • スマホメニュー基本の設定、Dressの設定場所を覚えよう
  • サイトのターゲットに合わせて、ハンバーガーメニューのデザインをカスタマイズしよう
  • 読んでもわからない方は、実際のサンプルサイトを見てみよう

RECOMMEND ARTICLE