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

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

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

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

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

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

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

前回のおさらい

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

• ドロワー：ボタン（※1）
• ドロワー：ボタン：3本線（※2）
• ドロワー：ボタン：before要素
• ドロワー：ボタン：after要素

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

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

BiNDupの場合

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

before要素を指定したい場合は、「詳細設定」のタブをクリック→項目を追加またはプラスボタンをクリック。

「オプションを設定（上級者向け）」をクリック→before要素またはafter要素をクリックして、次へを選択してください。

BiND9の場合

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

基本構造と概念（CSSがわかる人向け）

BiNDupでデフォルトで設定されている3本線は、「ドロワー：ボタン：３本線」で線の色を変更できます。が、それだと線と線の間の余白を調節したり細かい調整ができません。 今回ご提案する方法では、「ドロワー：ボタン：３本線」を非表示にし、これ以外のハンバーガーメニューに割り当てられる要素を使って、３本線を表現しています。 具体的には、「ドロワー：ボタン」と、そこに当てられる疑似要素「before要素」と「after要素」をつけた３箇所のみで実装しています。 ただ、before要素とafter要素だけでは、２本しか線を表現することができませんよね。なので、３本の線の色（黒）は背景色にし、線と線の隙間（白）の方を、隙間ではなく四角い箱に見立て、before要素・after要素を使って配置するという逆転の発想を使ったテクニックになっています！

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

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

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

サンプルサイトをみる

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

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

「ドロワー：ボタン：３本線」 ボーダー：４辺とも同じにチェックを入れ、「なし（none）」

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

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

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

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

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

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

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

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

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

サンプルサイトをみる

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

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

「ドロワー：ボタン：３本線」 ボーダー：４辺とも同じにチェックを入れ、「なし（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要素」の設定

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

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

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

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

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

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

サンプルサイトをみる

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

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

①「スマホメニュー内の3本線」 ボーダー：４辺とも同じにチェックを入れ、「なし（none）」

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

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

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

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

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

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

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