横並び表示で見やすい！新スマホメニュー「タイル」のカスタマイズ

ホームページ作成サービス「BiNDup」最新バージョン（2020年1月）では、スマホメニューに「タイル」という新しい形式が追加され、スマホサイトでもメニューを横並び表示できるようになりました。他のメニューと比較しつつ、タイルメニューの使い方などを紹介します。

サンプルサイト

スマホメニューの種類とそれぞれの特長

BiNDupのスマホメニューは、新しく追加された「タイル」の他に、今まで通り開閉式の「ドロワー」も引き続き使用できます。それぞれの特長を生かして使い分けるとよいでしょう。

スマホメニューの設定手順は以下のページをご確認ください。
スマホメニューのレイアウトを編集する

タイル

タイルはメニューをその場に表示するので、どんなコンテンツがあるかひと目で把握しやすくなります。閲覧者が見たいコンテンツへすぐアクセスできるのが特長です。

ドロワー

ドロワーとは引き出しという意味。名前通り、格納されたメニューを引き出して使います。メニューを使わない時はボタンになり、必要な時だけ表示できるのでコンパクトにまとまめることができます。

また、オプションでページ上部に固定表示することもできるので、ページをスクロールしながら閲覧している途中でもメニューにアクセスすることができます。

Webサイトは構造的に縦長になることも多く、このタイプのメニューはよく使用されています。

そのまま表示

タイルやドロワーなどスマホ専用のメニュー表示を使いたくない場合は「そのまま表示」を選択することもできます。この場合、デフォルトでは縦並びになります（Dressなどでカスタマイズされている場合はそちらの設定に準じます）
この場合、メニュー項目が出っ放しになるので、メニューとして表示するのではなく、コンテンツの一部として表示したい時などに利用するとよいでしょう。

タイルメニューのオプション

今回新たに追加されたタイルメニューのバリエーションや、デザインのカスタマイズ方法を紹介していきます。
タイルメニューには2つのオプションがあります。

横に並べる/積み重ねるの2つのレイアウト

タイルメニューのレイアウトは2種類。
・「横に並べる」を選択した場合、全てのメニューが横一列に並びます。画面からはみ出す項目は、スワイプするか左右に表示されるボタンをタップすることで表示できます。

・横に並べるを選択した場合、横に収まりきらないメニューは折り返して表示されます。全てのメニューを一度に表示することができます。

表示数

表示数も調整できます。
「テキストに合わせる」を選択した場合、各メニューの幅はテキストに合わせて調整されます。メニューの文字数にばらつきがある場合はこちらを選択しておくとよいでしょう。

メニューを等間隔に表示したい場合は「数値」を選択します。選択した数値に合わせて分劃されます。

タイルメニューのカスタマイズ：通常メニューの場合

タイルメニューのデザインをカスタマイズする方法です。
通常メニュー^※を使用している場合は、以下の手順で設定します。
※ 通常メニューとは、メガメニューを除いたメニュー全般（メニューA,B,C,D,E、ドロップダウン・バルーン、ラバランプ、ラインチェイサー、サイド・シズル、サイド・ボタン）を使用している場合です

「デザイン編集」ボタンからDressを開いたら、上部にあるスマホアイコンをクリックし、スマホサイト表示に切り替えてから「スマホメニュー（通常メニュー）：タイル」を選択してください。

メニュー全体の背景色などを変更したい時は、以下の項目から設定するとよいでしょう。

• スマホメニュー（通常メニュー）：タイル › メニュー

個々のメニューの余白や文字を調整したい時は、以下の項目から編集します。

• スマホメニュー（通常メニュー）：タイル › メニュー › リスト項目 › リンク

リンクをタップした時のスタイルは、PCサイト表示時のマウスオーバーの設定を引き継ぐ場合があるので、調整が必要な時は下記の項目から編集します。

• スマホメニュー（通常メニュー）：タイル › メニュー › リスト項目 › リンク：マウスオーバー

タイルのレイアウトを「横に並べる」にしている場合、メニューの送りボタンが表示されます。この部分の色をカスタマイズする時は以下の項目から編集します。

• スマホメニュー（通常メニュー）：タイル › タイル：メニュー送り

ドロップダウン・バルーンなどを使用している時に表示される下層メニューは以下の項目から編集します。

• スマホメニュー（通常メニュー）：タイル › メニュー（2階層目）
• スマホメニュー（通常メニュー）：タイル › メニュー（2階層目） › リスト項目
• スマホメニュー（通常メニュー）：タイル › メニュー（2階層目） › リスト項目 › リンク
• スマホメニュー（通常メニュー）：タイル › メニュー（2階層目） › リスト項目 › リンク：マウスオーバー

メニュー送りや下層メニューの設定箇所

タイルメニューのカスタマイズ：メガメニューの場合

通常メニューの代わりにメガメニューブロックを使用している場合です。

「デザイン編集」ボタンからDressを開いたら、上部にあるスマホアイコンをクリックし、スマホサイト表示に切り替えてから「スマホメニュー（メガメニュー）：タイル」を選択します。
右側に表示されている各項目からデザインを編集します。

サイトデータ

今回紹介したサンプルのサイトデータを以下より配布します。データを開いて直接、設定箇所を確認してみてください。