スマホメニューにメニュー名がひと目でわかる新デザインが追加！

ホームページ制作サービス「BiNDup」はレスポンシブWebに対応しているので、スマホで閲覧する際はメニューが自動的にスマホ用のレイアウトに変わります。
このスマホメニューは、これまでハンバーガーメニューと呼ばれるボタンをタップして引き出すタイプの1種類だけでしたが、メニュー名がひと目でわかる新デザイン「タイル」を2020年1月に追加する予定です。現在開発中のメニューを少しだけ紹介します。

新スマホメニュー「タイル」が登場

メニュー数が少ないサイトや、各ページへの導線を短くしたい時に

スマホメニューがこれまでと同じ「ドロワー」のほかに、「タイル」と「そのまま表示」が加わり、3種類から選択できるので、自身のサイトのコンテンツに合わせて調整しやすくなります。

ドロワー（ハンバーガーメニュー）

今までのように、ボタンをタップして引き出すタイプのメニュー（ハンバーガーメニュー）は「ドロワー」として引き続き使用できます。

＜NEW！＞　タイル

今回新しく追加されるスマホメニューのデザインです。PCでの表示とは別にスマホ用のメニューとして、タイル上にメニュー並べて表示します。
今までの「ドロワー」はメニューを格納するのでメニュー数が多いサイトには向いていましたが、メニューの少ないサイトでは冗長になりがちでした。「タイル」はメニュー数が少ないサイトでも使いやすいデザインです。
また、メニュー項目をすぐに把握して直接コンテンツへ移動できるので、各ページへの導線を短くしたい場合にもおすすめです。「ドロワー」と比べてリンクを開くまでのタップ数を減らすことができます。用途に合わせて使い分けてください。

そのまま表示

スマホ用のメニューを用意しないという選択肢もあります。
PC表示のメニューがそのまま表示されるわけではなく、デフォルトは縦並びになります。レイアウトは、Dressなどの設定に準じます。

「タイル」の並べ方は2種類から選べる

どちらもメニュー名をそのままタップ可能

「タイル」のレイアウトは横に並べる形式か、積み重ねる形式の2種類から選択できます。

横に並べる

全てのメニューを横並びにします。画面からはみ出すメニュー項目はスワイプして表示することができます。

積み重ねる

メニューを折り返して全て画面内に表示します。

表示数

1行あたりに表示するメニュー数は、デフォルトではテキストに合わせた表示になりますが、2〜5個の間で指定することもできます。

スマホサイト設定画面も合わせて進化

開発中の設定画面を紹介

スマホメニューの設定は「スマホサイト設定」で行います。選んだメニュータイプに合わせてオプションの項目が変わるので、必要な項目だけを設定できます。メニュー関連の設定とその他の設定が分類されて分かりやすくなります。

以上、2020年1月に向けて鋭意開発中ですので、お楽しみに。
当記事の画像は全て開発中の画面です。実際の画面とは異なる場合があります。

そのほかのBiNDupの新機能についてはこちらをご覧ください。
BiNDupの新機能を見る

BiNDの制作事例を見る