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

こんにちは、テンプレートディレクターのオモトです! ユーザーさんから方法が知りたいとよく言われる、BiNDでのスマホメニューのカスタマイズ・テクニック第2弾です。 前回、「見慣れたスマホメニューをカスタマイズするテクニック・基本編」では、Dressを使ったハンバーガーメニューの基本的なデザイン編集方法についてまとめました。 後編の今回は、もうちょっと変わったデザインに挑戦したいときのテクニックとして、応用編を解説したいと思います。一部はBiND10のテンプレートにも入っているデザインで、ちょっと高度なものもありますが、難易度を書いておいたので参考にしてください。 設定できなかった方にはダウンロードデータを用意しているのでご安心を。

418mpxosvnl

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

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

前回のおさらい

Dressでカスタマイズするときの基本設定

ハンバーガーメニュー関係のDressは、Dress編集画面のデバイス切り替えで「スマホ」タブにしないと設定が表示されないので注意。 sc07 ハンバーガーメニューのデザインはDressの
  • スマホメニューのボタン枠
  • スマホメニューボタン内の3本線
を使って表現します。

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

iphone_01-3

デフォルトで設定されている3本線は、「スマホメニューの3本線」で線の色を変更できますが、線と線の間の余白を調節したり細かい調整ができません。なので、これ以外のハンバーガーメニューに割り当てられる要素を使い、まっさらな状態から新しく3本線を作成する必要があるのです。 具体的にいうと、「スマホメニューのボタン枠」は非表示(display:none)にしてしまうので、「スマホメニューのボタン枠」と、そこに当てられる疑似要素「::before」と「::after」をつけた3箇所のみで表現しなければいけないということになります。 なのでここが頭の使いどころ。私は発想を逆転し、3本の線の色は背景色で、線と線の隙間をborder2本を使って表現するという方法を開発しました。

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

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

418mpxosvnl

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

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

418mpxosvnl

418mpxosvnl
①「スマホメニュー内の3本線」 ボーダー:4辺とも同じにチェックを入れ、「なし(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

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

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

418mpxosvnl

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

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

418mpxosvnl

418mpxosvnl
①「スマホメニュー内の3本線」 ボーダー:4辺とも同じにチェックを入れ、「なし(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

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

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

418mpxosvnl

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

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

418mpxosvnl

418mpxosvnl
①「スマホメニュー内の3本線」 ボーダー:4辺とも同じにチェックを入れ、「なし(none)」 ②「スマホメニュー のボタン枠」 背景色:透明 背景画像:この画像→418mpxosvnlを設定 背景繰り返し:no-repeat 背景位置:10px ボーダー:4辺とも同じにチェックを入れ、「1px solid」 角丸(border-radius):設定する・四隅とも同じにチェックを入れ、4px 幅(width):98px 高さ(height):38px ③スマホメニュー のボタン枠: ::after」 文字色:#ffffff 文字サイズ:11px 表示(display):block コンテント(content):‘MENU’ ポジション(position):absolute トップ(top):5px レフト(left):44px
ハンバーガーメニューは、自分のサイトのターゲットに合わせてデザインをカスタマイズしていくと、より効果を発揮しそうですね。

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

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