こんにちは、テンプレートディレクターのオモトです！
ユーザーさんから方法が知りたいとよく言われる、BiNDでのスマホメニューのカスタマイズ・テクニック第2弾です。
前回、「見慣れたスマホメニューをカスタマイズするテクニック・基本編」では、Dressを使ったハンバーガーメニューの基本的なデザイン編集方法についてまとめました。
後編の今回は、もうちょっと変わったデザインに挑戦したいときのテクニックとして、応用編を解説したいと思います。一部はBiND10のテンプレートにも入っているデザインで、ちょっと高度なものもありますが、難易度を書いておいたので参考にしてください。
設定できなかった方にはダウンロードデータを用意しているのでご安心を。
BiNDで文字入りのハンバーガーメニューを実装したアレンジ例
★作業前のご注意★ 必ずお読みください！
※これからご紹介する３つのやり方は、BiND9以降のソフトまたはBiNDクラウドじゃないとできません！BiND8以前のソフトではできません。
※ブログの内容についてはサポート対象外なので要注意！質問いただいてもお答えできません。（ごめんなさい！）
前回のおさらい
Dressでカスタマイズするときの基本設定
ハンバーガーメニュー関係のDressは、Dress編集画面のデバイス切り替えで「スマホ」タブにしないと設定が表示されないので注意。
ハンバーガーメニューのデザインはDressの
- スマホメニューのボタン枠
- スマホメニューボタン内の3本線
を使って表現します。
基本構造と概念（CSSがわかる人向け）
 |
デフォルトで設定されている3本線は、「スマホメニューの3本線」で線の色を変更できますが、線と線の間の余白を調節したり細かい調整ができません。なので、これ以外のハンバーガーメニューに割り当てられる要素を使い、まっさらな状態から新しく３本線を作成する必要があるのです。 具体的にいうと、「スマホメニューのボタン枠」は非表示（display：none）にしてしまうので、「スマホメニューのボタン枠」と、そこに当てられる疑似要素「::before」と「::after」をつけた３箇所のみで表現しなければいけないということになります。 なのでここが頭の使いどころ。私は発想を逆転し、３本の線の色は背景色で、線と線の隙間をborder2本を使って表現するという方法を開発しました。 |
企業サイトでよく見るハンバーガーメニュー
３本の線の下に「MENU」という文字を配置して、アイコンの意味を説明しているパターン。３本線だけだとそれが「メニュー」だと、認識しづらいユーザーが多くいるのも事実です。初回の訪問者にもわかりやすく見せる対策としてよく使用されています。
BiND10のテンプレートでは、CHISATO Plant、追加テンプレートのIKASA Corporationで使用されています。
メニュー文字入りのハンバーガーメニューのBiNDアレンジ例
※スマホで閲覧しないとスマホメニューは表示されません
３本線の下に「MENU」の文字入りハンバーガーメニューの作り方 難易度：★★★
  |
①「スマホメニュー内の3本線」 ボーダー：４辺とも同じにチェックを入れ、「なし（none）」 |
②「スマホメニュー のボタン枠」
背景色：#000000
ボーダー：「設定する」にチェックを入れ、
上 13px 実線（solid） #f1f1f1、下 23px 実線（solid） #f1f1f1、左 15px 実線（solid） #f1f1f1、右 15px 実線（solid） #f1f1f1
表示（display）：block
幅（width）：50px
高さ（height）：50px
③「スマホメニュー のボタン枠： ::before」
ボーダー：「設定する」にチェックを入れ、
下 4px（solid）#f1f1f1
表示（display）：block
コンテント（content）：‘’を追加
ポジション（position）：relative
トップ（top）：2px
④「スマホメニュー のボタン枠： ::after」
文字色：#000000
文字サイズ：11px
ボーダー：「設定する」にチェックを入れ、
上 4px 実線（solid） #f1f1f1
表示（display）：block
幅（width）：30px
コンテント（content）：‘MENU’
ポジション（position）：relative
トップ（top）：4px
レフト（left）：-6px
３本線が華奢で美しいハンバーガーメニュー
ハンバーガーメニューに慣れている層をメインターゲットとし、デザインのプライオリティが高いビジュアル重視のサイトに積極的に取り入れたい美しいデザインのハンバーガーメニューです。
BiND10のテンプレートでは、KATO INTERIORで使用されています。
細い線のハンバーガーメニューのBiNDカスタマイズ例
※スマホで閲覧しないとスマホメニューは表示されません
３本線が華奢で美しいハンバーガーメニューの作り方 難易度：★★★
  |
①「スマホメニュー内の3本線」 ボーダー：４辺とも同じにチェックを入れ、「なし（none）」 |
②「スマホメニュー のボタン枠」
背景色：#000000
ボーダー：「設定する」にチェックを入れ、
上 18px 実線（solid） #fff、下 18px 実線（solid） #fff、左 13px 実線（solid） #fff、右 13px 実線（solid） #fff
外余白（margin）：上下0px 左右10px（※デザイン次第で設定しなくてもOK）
表示（display）：block
幅（width）：45px
高さ（height）：45px
③「スマホメニュー のボタン枠： ::before」
ボーダー：「設定する」にチェックを入れ、
下 3px（solid）#fff
表示（display）：block
コンテント（content）：‘’を追加
ポジション（position）：relative
トップ（top）5px
④「スマホメニュー のボタン枠： ::after」
ボーダー：「設定する」にチェックを入れ、
上 3px 実線（solid） #ffffff
表示（display）：block
コンテント（content）：‘’を追加
ポジション（position）：relative
トップ（top）：-2px
おまけ：横長でメニューの文字が大きいハンバーガーメニュー
これ以上なく大きくメニューという文字が入っているので、メニューがどこにあるのか特に認識しづらいユーザーには最大限の効果を発揮しそうなハンバーガーメニューです。
BiNDで横並びのハンバーガーメニューのアレンジ例
※スマホで閲覧しないとスマホメニューは表示されません
左側にメニューの文字入りハンバーガーメニューの作り方 難易度：★★
  |
①「スマホメニュー内の3本線」 ボーダー：４辺とも同じにチェックを入れ、「なし（none）」 |
②「スマホメニュー のボタン枠」
背景色：透明
背景画像：この画像→
を設定
背景繰り返し：no-repeat
背景位置：10px
ボーダー：４辺とも同じにチェックを入れ、「1px solid」
角丸（border-radius）：設定する・四隅とも同じにチェックを入れ、4px
幅（width）：98px
高さ（height）：38px
③スマホメニュー のボタン枠： ::after」
文字色：#ffffff
文字サイズ：11px
表示（display）：block
コンテント（content）：‘MENU’
ポジション（position）：absolute
トップ（top）：5px
レフト（left）：44px
ハンバーガーメニューは、自分のサイトのターゲットに合わせてデザインをカスタマイズしていくと、より効果を発揮しそうですね。
今回作成したサンプルサイトのダウンロード
自分では設定ができなそう・・と不安な方は
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
（BiND10以降、BiNDクラウド対応）
