WD Online

課題解決のためのUI実装講座 Web Designing 2015年10月号

「視線導線」を考慮したメガメニューの構造設計(2/2)

では、実際にサンプルを使って、どのような実装になっているのかを確認していこう。複雑なように見えるかもしれないが、シンプルにわかりやすく作られている。仕組みがわかれば、項目を増やしたり複雑なレイアウトにするなども可能になる。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

【MEGA MENU】jQueryプラグインを使ったメガメニューの実装

メガメニューが有効な多階層のサイトといえば、サイトマップが深い、あるいは複雑になっている状態だろう。したがって、メニューのソースコードも比較的長くなってしまうが、要点について記載していくので、サンプルを見ながら、基本的な構造がどのようなものなのかを理解していこう。

 

使用するjQueryプラグイン

今回は「jQuery-menu-aim.js」というjQueryプラグインを使用して、シンプルな形の「メガメニュー」と「メガドロップダウンメニュー」を実装してみよう。

このプラグインはユーザビリティを意識して作られており、マウスカーソルがサブメニューから移動した際にフォーカスが外れても少しだけ長く表示されるといった工夫がされている。また、シンプルにわかりやすく作られているので、カスタマイズもしやすい。

 

メガメニューの実装

690c446fb1de2bab978099321212d856.jpg
01 サンプル01(メガメニュー) 左に固定されているナビゲーションをマウスオーバーすることで、 各メニューのカテゴリが出てくるようになっている

 

このサンプルでは、ナビゲーションをマウスオーバーしたらサブメニューを表示させる(01)。左から右に視線を動かした時に、サイトの構造が直感的に伝わりやすいレイアウトにしよう。jQuery-menu-aimはユーザー操作によるイベントを補佐しており、アニメーションや表現の部分については実装側で任意に作れるようになっている。

「submenuDirection」は、どの方向にメニューを出すかを指定するオプションで、"right"(右)/"left"(左)/"above"(上)/"below"(下)を指定できる。デザインにあわせた方向にメニューを出すことで、jQuery-menu-aimの利点であるユーザビリティを損なわずにメガメニューを実装できる。

 

<body>
...略...
<ul class="nav-list dropdown-menu clearfix">
  <li data-menu-id="menu-01" class="nav-item">
    <a class="dropdown-toggle" href="#">Coffee</a>
    <ul id="menu-01" class="dropdown-list">
      <li class="dropdown-item clearfix">
...略...
      </li>
      <li class="dropdown-item clearfix">
...略...
      </li>
    </ul>
  </li>
</ul>
...略...
</body>
02 HTMLの抜粋。リスト要素を入れ子にして、メニューの骨格とする

 

<!-- 使用するライブラリを読み込み -->
<script src="lib/jQuery/jquery-1.11.3.min.js"></script>
<script src="lib/jquery.menu-aim.js"></script>
02 使用するライブラリの読み込み

 

<script>
...略...
     var $menu = $('.dropdown-menu');
   $menu.menuAim({
...略...
     rowSelector: "> li",
     submenuSelector: "*",
     submenuDirection: "right"
   });
   function enterMenu(row) {
...略...
   }
   function deactivateMenu(row) {
...略...
   }
</script>
04 rowSelectorオプションで任意のリストを指定すると、メガメニューの対象を選ぶことができる

 

【MEGA DROPDOWN MENU】jQueryプラグインを使ったメガドロップダウンメニューの実装

ドロップダウンメニューを使うと、メニュー内でスペースが多く使えるので、レイアウト、画像、アイコンなどを利用して、エンドユーザーが求めている情報や運営側がお勧めしたい情報などをデザインに組み込むことができる。

 

メガドロップダウンメニューの実装

同じくjQuery-menu-aim.jsを使ってメガドロップダウンメニューも実装してみよう。前述したように、メガドロップダウンメニューの視線導線はZ型であるため、メニュー内に表示するコンテンツ(画像、レイアウト、アイコン)などもZ型を意識して作っておくことが必要になる(05)。

2d77fad5ed192541b1112a2b8052127e.jpg
05 サンプル02(メガドロップダウンメニュー) ナビゲーションをマウスオーバーすると、各カテゴリが表示される。さらに各カテゴリをマウスオーバーすると、画像付きの商品メニューとなっている

 

このサンプルでは、上部固定配置のナビゲーションのリスト要素内に、入れ子の構造でリスト要素を増やしていくことで、土台となるメニュー項目を実装している(06)。

JavaScriptでは、プラグインのオプションを設定している(07)。シンプルでわかりやすい記述なので、特に説明しなくても理解できるだろう。CSSでは、三階層の入れ子になっているリストのスタイルを定義している(08)。各リストのスタイルは共通ではないので、デザインにあわせて変更する必要がある。

  <div class="nav">
    <div class="nav-inner">
      <ul class="nav-list dropdown-menu clearfix">
        <li data-menu-id="menu-01" class="nav-item">
            <!--メニューのタイトルを表示-->
          <a class="dropdown-toggle" href="#">ラインナップ</a>
          <!--サブメニューの表示領域-->
          <ul id="menu-01" class="dropdown-list">
            <li data-submenu-id="submenu-01" class="dropdown-item clearfix">
              <a href="#" class="dropdown-link">ハイブリッド</a>
              <ul id="submenu-01" class="popover-list clearfix">
                  <!--画像を使ったライブラリの表示-->
                <li class="popover-item">
                  <a href="#" class="popover-link">
                    <div class="popover-content">
                      <img src="./images/sample_01.jpg">
                    </div>
                    <span class="popover-title">ハイブリッド01</span>
                  </a>
                </li></ul>
            </li></ul>
        </li></ul>
    </div>
  </div>
...略...
06 一つのナビゲーション内にリストを入れ子にする方法でメガメニューが実装できる

 

<script>
...略...
  var $menu = $('.dropdown-menu');
  $menu.menuAim({
    deactivate: deactivateMenu,
    enter: enterMenu,
    exit: exitMenu,
    rowSelector: "> li",
    submenuSelector: "*",
    submenuDirection: "right"
  });
  function exitMenu(row) {
...略...
  }
  function enterMenu(row) {
...略...
</script>
07 JavaScriptの抜粋

 

.nav-list {
  text-align: center;
  position: relative; 
}
.nav-item {
  float: left; 
}
...略...
.dropdown-list {
  display: none;
  position: absolute;
  top: 50px;
  left: 0; 
}
.dropdown-item {
  height: 40px;
  line-height: 40px;
  text-align: center; 
}
...略...
.popover-list {
  display: block;
  float: left;
  width: 680px;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 150px;
  background-color: white; 
}
.popover-item {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center; 
}
08 入れ子になっている各リストのCSS

 

デザインする際の注意点

メガドロップダウンメニューは、情報の優先順位が明確となるようにデザインする必要がある。スペースを大きく使えることから、見せたいコンテンツを入れ過ぎてしまいがちだ。はっきりと優先順位をつけて、詰め込み過ぎないようにしよう。そのためには、「どのコンテンツを見せたいのか」「ユーザーが何を求めてサイトを訪れているのか」を明確にしておこう。

F型、Z型ともに視線の導線にあわせたレイアウト・デザインが必要になる。視線が止まる場所に、見てもらいたい重要なコンテンツのテキストや写真を配置し、的確な情報をユーザーに伝え、最短距離をナビゲートしよう。

 

c55e474731231f79b10d049adbe9697e.jpg
Text:長岡宏
(株)LIGで、事業部マネージャー、アートディレクターおよびデザイナーとして、クリエイターの育成、アートディレクション、チームマネジメントなどを行ないつつ、2014年10月より、データ分析、グロースハックなども担当している。 http://liginc.co.jp/

 

123996b3ffe368f09ef47ba5222e1f83.jpg
Text:後藤寛一
デジタルハリウッドにてグラフィックデザイン、Webデザインを学ぶ。デバイス連動のインスタレーション作品を在学中から制作する。2014年からフロントエンドエンジニアとして(株)LIGに参画。

掲載号

Web Designing 2015年10月号

Web Designing 2015年10月号

2015年9月18日発売 本誌:1,530円(税込) / PDF版:1,200円(税込)

ビジネスをスマホに最適化する/インスタグラム マーケティング

サンプルデータはこちらから

■ 特集:マーケティングから考える「スマホ最適化」
 ネットはスマートフォンを中心に回りはじめた!

■ 集中企画:Instagramをビジネスに活用する
 フィード広告開始で本格化するビジュアル・マーケティングの現在

■ WD SELECTION
 □WDが選ぶ注目のデジタルコンテンツ
  NHKスペシャル「70 年目の戦争と平和」/Rock'n Roll Panty/Dream Car Collection | Toyota Dream Car Art Contest/Leap Second/恋愛のスペシャリスト“ はあちゅう” が断言する 「2015年下半期に絶対モテる」人とは……!?/ITOEN × INGRESS/The Art of Hearing/水と土の芸術祭2015/大阪経済法科大学「Hello,World! 21カ国・地域53大学がキミのキャンパスになる」/FANTASTIC ANIME MACHINE/静岡県観光奉行募集

 □ナビゲーターが選ぶ注目のデジタルコンテンツ
  眞鍋海里  [バズ施策]大義なくして破茶滅茶すべからず:#MayhemSale
  築地 Roy 良  [デジタルプロモーション]「ゴロ寝」ウェアラブル:JOE BOXER INACTIVITY TRACKER
  仲暁子  [Webサービス]「家庭」を制するのは誰?:Amazon Bash Button
  神谷憲司  [IoT]妖怪とIoT:mononome

■マーケティング・プロモーション
 □ サイト改善基礎講座
  Webサイトを改善するための4つのステップ

 □ ハギハラ総研
  アジアでのネットビジネスに必要なこと

 □ デジタルプロモーションの舞台裏
  時流にあわせてデジタルを活用し、新ブランドの確立に成功

 □ 行動デザイン塾
  人の動きを左右する「情報コスト」と「行動ブレーキ」

 □ 課題解決のためのU実装講座
  「視線導線」を踏まえたメガメニューの構造設計

 □ 解析ツールの読み方・活かし方
  メールからIoT まで、非JavaScript環境のデータを解析する手法

■ビジネス・EC
 □ ECサイト業界研究
  モバイルコマース:モバイルEC対応の最大の敵「カゴ落ち」を防ぐには

 □ 月刊店舗設計 NEW
  ファン5,000人以上を獲得するInstagramの写真演出&接客術

 □ 知的財産権にまつわるエトセトラ
  「盗作」を疑われた‥‥その時どうする?

 □ Bay Area Startup News
  クチコミサービスYelp:米国で生活の一部にまで浸透した「最上級の使いやすさ」

■クリエイティブ
 □ モノを生むカイシャ
  eredie2:リア充プロモーションの達人たち

 □ 清水幹太の「Question the World」
  John Maeda:実はアンパンマンだった伝説の「先輩」

 □ ツクルヒト
  流麻二果(美術家):「他人のいろいろ」から始まる色彩空間

 □ 最果タヒの「詩句ハック」
  第16回 カ詩ラモジ

 □ デザインにできることMonologue
  Vol.141 社会デザイン

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています