ページ誘導に便利。スマホの閲覧も考慮した新メニュー登場！

今回も、この秋に登場するBiNDupの最新情報を開発者にインタビュー！第3弾はメガメニューです。

ページの回遊やお問い合わせへの誘導など結果に直結する重要な要素でありながら、カスタマイズが難しい・・という声の多かったメニュー周りのデザインがついに強化！

目的のページへ誘導するのに便利なメガメニューを始め、ブロックDressのメニューテンプレートも増え、スマホメニューの表現力もアップします。

前回に引き続き、プロジェクトマネージャーの洪泰和、Webデザイン＆UIデザイナーのニタバル、フロントエンドエンジニアの藤澤篤志に話を聞きました。

迷子のページをなくすナビゲーションを目指す

クリックしたくなるメニューが自分で作れる

ユーザーさんのサイトを見ていると、グローバルメニューの項目がとても多いことがよくあります。
ページの回遊率を上げたりコンバージョンへの誘導など、結果に直結する重要なエリアにもかかわらず、これまでは相当な知識がないとカスタマイズが難しいのが課題でした。

ユーザーさんは普段、どうやって情報設計しているんですかね？

テンプレートのメニューをそのまま使って、ページが増えたらメニュー項目を追加する方が多いのではないかと。ある程度まで増えると当然崩れてしまうので、カテゴリごとにグルーピングするなど情報の再設計が必要になります。

本来は、作り始める前にサイト全体の必要なページ数を把握してサイトマップを起こし、多ければそのタイミングでグルーピングしてメニュー項目が決まっていきます。そこまでの情報設計を最初に行うユーザーさんは少ないのかもしれませんね。

導線を強化して、メニュー周りが3つアップデート

左から、メガメニュー、新作のグローバルナビゲーションのデザインが2種

メニュー項目が多くなりがちなユーザーさんに喜ばれそうなのが新メガメニューです。これは、ドロップダウンで大きなエリアが表示され、サイトマップのような全体の構造がひと目で見えるメニュー。アイコンや画像も自由にレイアウトできるので見やすさも追求できます。

グローバルメニューの役割の一つは、閲覧者が欲しい目的の情報へ辿り着くためと考えると、メガメニューはページ数の多いサイトでも全体を一覧できるので、その点は優れています。

メガメニューのほかにも、これまでのグローバルメニューのデザインも増えますよね。

はい。ブロックDressテーマで変更できるメニューも5つ増えます。もちろんスマホバージョンも用意しています。

ブロックDressテーマのメニューは、サイトのテーマカラーを引き継いでメニュー周りの装飾とマウスオーバー時の動きだけを変更できるので、サイト全体の雰囲気を壊さず見せ方を変えたいという時に便利です。

スマホメニューの動きも、もっとスムーズになるようにブラッシュアップ予定です。たとえば、ハンバーガーメニューが×に切り替わったり、第2階層目を折りたたむギミックなどチャレンジしたいなと。まだこちらは未定ですが・・

メガメニューで解消！3つの課題

1．階層が深いページにもワンクリックでアクセス

メガメニューは、数年前から大手企業のサイトやWebメディアなどでよく見かけますよね。

ページ数の多いサイトはどうしても階層が深いと存在が埋もれてしまい、通常のメニューではなかなかアクセスしづらくなりますが、メガメニューなら深い階層のページにもワンクリックでアクセスできるので救世主だったと思います。

とはいっても、表示するメニューの数が増えるのでコンテンツのグルーピングが重要です。大カテゴリを作って階層表示が分かるようにすると、どこに何があるかわかりやすくサイトの回遊率アップも期待できます。

2．バナーのように一部だけ目立たせた導線が作れる

メニューの項目以外にもコンテンツを入れられますが、どんな使い方が考えられますか？

たとえばメニューエリアに画像をバナーのように表示させて、キャンペーンを告知するといった使い方もできます。それ以外にも注目してほしいニュースなど、フィーチャーさせたいものを目立たせるのに有効ですね。

メガメニューは、オウンドメディアでも使われていることが多いです。たとえば検索から初めてサイトに来た閲覧者に、記事以外に興味を持ってもらいたい製品情報など広告要素を入れることもできます。

3．ビジュアル重視の押したくなるメニューが作れる

画像を入れられるので、文字ではなくビジュアルで惹きつけてクリックしてもらうことが可能です。料理などのコンテンツは画像に向いていますし、制作事例などサムネイル写真を見せつつ文字で捕捉する使い方もよいかもしれません。

テキストだけでは伝わりにくいこともあるので、画像部分としてインフォグラフィックを加えるのも一つです。ユーザビリティの観点でメニューを工夫するといいでしょう。

BiNDupのメガメニューで表現できること

ブロックテンプレートに複数のレイアウトを用意

レイアウトに関しては、ブロックテンプレートに複数のパターンを用意しているので、いろいろなレイアウトのメガメニューを簡単にサイトに組み込めます。

1ページに複数のメガメニューを設定できるので、PCとスマホで、それぞれメガメニューの見せ方を変えることもできます。

新作テンプレートには、あらかじめメガメニューを搭載したものもありますよ。

画像やリンクだけでなく地図や動画も設置可能

メガメニューは、テンプレートから選ぶ以外にも自作が可能です。
タブやアコーディオンと同じように、ブロックディタの「設定」から「メガメニュー」を選び、分割パーツで区切って、画像やテキストを配置すればレイアウトも自在です。

設置できるパーツもBiNDでできることはほとんど対応しています。メニューの中に、店舗ならお問い合わせの隣に小さく地図を入れる、ショップならおすすめの商品のカートボタンを置く、フォームエリアを追加する・・など工夫次第でさまざまな使い方ができます。

BiND Pressのブログ記事のインデックスを表示するといった使い方も可能ですね。

目を惹きたいコンテンツがあれば、YouTubeにアップした動画を表示しても面白いかもしれませんね。

余白などデザインのカスタマイズは基本Dressで行う

ブロックエディタで作れる範囲でたいていは十分かと思いますが、メニューの文字色や各カラムの余白などをアレンジしたい場合はDressを使います。

実は大変だったのは、一番上のメニューがメガメニューだった場合の、スマホメニューの表現です。今までのDressでは設定できなかったところも変更できるようにする必要があったからです。

スマホで見た時のメニューデザインも考慮

スマホではアコーディオンメニューになる

メガメニューは、縦長のスマホで表示するとき、標準では自動的にタップでコンテンツを開閉できるアコーディオンになります。

スマホメニューは今までメニュー項目がすべて表示されてしまう仕様だったので、これはうれしいですね。

デザインがアコーディオンになるだけで、基本はPCとスマホは全く同じように配置されるので2つ作る必要はありませんが、それぞれ最適化したものを用意してもいいですね。

とくにスマホは表示エリアが小さいので、メニュー項目は精査して掲載してくださいね。

今後メニューはどう進化するか

サイト設計を手助けするジェネレーターを搭載予定

結局、ページでもメニューでも大事なのは情報設計なんですよね。

メニュー自体、あればいいとおざなりになりがちです。本来は、メニューをどう分類して、どんな順番で配置すれば一番コンバージョンに繋がるかはコンテンツ次第なので、これがベストというのは試行錯誤していくしかないんです。

従来のメニュー機能は、情報設計ができる人向きですよね。そこをもっと親切にしていきたいですね。
将来的には、まだ先のこととなりますが、ナビゲーション作りをサポートする「ナビゲーションジェネレーター」なるものを搭載したいなと考えています。

ジェネレーターはメニュー構造を意識してもらい、自分のコンテンツにはどんなメニューが必要かを考えるきっかけにもなると思います。

ナビゲーションジェネレーターの搭載は来春以降なので、まずは今秋登場のメガメニューをお楽しみに。

この秋、登場！新BiNDupの記事を読む
次回は、テンプレートの選び方が変わる、新サイトシアターの開発秘話をお届けします！

※新BiNDupは開発中のため、内容は変更となる可能性があります。