“ハンバーガー”はいらない ナビゲーションメニューを変更

ナビゲーションメニューを変更しました。
右上の「メニュー▼」から飛びます。

ドロップダウンでは開かないと見えないし、「ハンバーガーボタンは良くない」説にしっかり乗っかっています。
いや、ただできないだけかもしれませんが。

  • 「それをクリックすることで何かが得られるとしても、何を得られるかがクリック前に明らかでない」
  • 「クリックしなければ情報が表示されない」
  • ユーザーは何を求めているのかについて明確には理解しておらず、自分の望むものに近い”香り“のようなものを頼りに行動する

なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?
The Hamburger Menu Doesn’t Work

わかる。今でこそ慣れたアプリでも最初はどこに何があるのさっぱりかわからなくて困ったこと数回。「香り」もそう。必ずしも「答え」ではなくその手がかりでいいわけです。

  • ハンバーガーではなく「メニュー」と表記にする
  • ドロップダウンではなく下(右)の方で見えている
  • つくば、研究学園など駅名を表示する

7項目+2項目。スマホでこれが限界という数に留めましたので項目(どの階層にリンクするか)の厳選を行っています。

同時にトップページを変更。
モバイル優先とは言えPCの見た目もあるのでモバイル風メニューボタンだけとはいかず、グリッドデザイン風味にしてごまかしたわけです。
こちらでは利用の多いコンテンツ数点を示して「香り」を出し、全部盛り込まず、他はナビゲーションで対応させました。

これは、レスポンシブデザインなのでスマホで見てトップページが冗長にならないようにするためでもあります。
さらに条件分岐でPCより表示少なめにしていますが、やっかいなことに条件分岐をページ上部で行うとGoogle検索結果の「スマホ対応」表示が消えてしまうので完成後に再変更となりました。

出来は65点。
全体のサイト全体を見直して最良の方法を取れば理想ですが、ごめんなさい。力不足です。なんとかなる最大公約数としてこうなりました。
再々度直すかもしれません。