【無料で配布】スマホメニュー展開時のデザインを変更する小ワザ

こんにちは！デザイナーのオモトです。
今回は、スマホメニューを展開した時のデザインをカスタマイズする方法をお伝えします！
ホームページ制作サービスBiNDupでは、デザイン管理機能「Dress」を使います。少し上級者向けですが、指定箇所を覚えてしまえば割と簡単にできますので、よかったら参考にしてください。
サンプルサイトのサイトデータもダウンロード可能ですので、最後まで読んでみて下さいね。

スマホメニュー展開時のデザインはどこで変更する？

BiNDupのスマホメニューは、特に何も設定していない場合は全面を覆うようにスマホメニューが展開されます。

スマホメニューを展開した時のデザインは、Dressを開きモバイルのタブをクリック、詳細設定から新規追加後、「スマホメニューエリア：通常メニュー」でカスタマイズできます。

余白が効果的なスライド風のデザインに挑戦

今回は、こちらの左側に余白のあるデザインに挑戦しましょう。
先ほどの「スマホメニューエリア：通常メニュー」の余白・横幅に対して指定をしていきます。

サンプルを見る

左側に余白を入れたデザイン

「スマホメニューエリア：通常メニュー」を選択します。
次に「余白」の「外側の余白」の左側に20%。「横幅」を80%に指定しましょう。
これで完成です。簡単ですよね！

なお、３本線のスマホメニューを押すと横からメニューがにゅっとスライドで出てきて余白で止まるように見せたかったので、スマホメニューのアニメーションは「右から」を選びました。アニメーションは、デザインに合わせて組み合わせを考えると面白いと思います。

右側に余白を入れたデザイン

右側に余白を入れたいときは、「外側の余白」の右側に20%を指定しましょう。

サンプルのダウンロードデータを用意

いかがでしたでしょうか。余白の入れ方を工夫するだけでも見た目の印象が変わることを知っていただけたかと思います。簡単なので覚えておくと便利ですよ！
以下にて、今回紹介したサンプルサイトのサイトデータを配布します。そのまま使うのはもちろん、設定内容の確認などにお役立てくださいね。

サイトデータは2019年10月1日にアップデートした最新のBiNDup環境でお使い頂けます。
※サイトデータのダウンロードにはログインが必要です。