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

BiNDでスマホのメニューをカスタマイズする方法の第2弾・応用編です。文字入りのメニューや華奢なデザインにするための方法をDressを使って解説します。

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

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

後編の今回は、もうちょっと変わったデザインに挑戦したいときのテクニックとして、応用編を解説したいと思います。一部はBiND10のテンプレートにも入っているデザインで、ちょっと高度なものもありますが、難易度を書いておいたので参考にしてください。
設定できなかった方にはダウンロードデータを用意しているのでご安心を。

418mpxosvnl

文字入りのメニューや、3本線が華奢なデザインに挑戦!

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

※これからご紹介する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クラウド対応)

続きを読む

関連記事