メニューデザインの「ここにいるよ感」集めました
こんばんわ。インハウスのwebデザイナーやってます。koshiです。
今回は、「ここにいるよ感」のあるメニューデザイン（モバイルのみ）を30種類、集めて分類してみました。
モバイルのメニューデザインをする際の参考にしてみてください。
「ここにいるよ感」とは？
「いま自分が、サイト全体の中でどのページを閲覧しているかわかる」感覚です。現在地ですね。
情報量の多いホームページにおいて、
・自分が今どこにいるか？
・次どこにいけばいいか？
この2点がわかることは必須だと思っています。
一瞬も迷わずに欲しい情報にたどり着ける。そんホームページが作りたいなと。
ヘッダーメニューやボトムメニューだと割と馴染みがありますが、モバイルのハンバーガーメニューで「ここにいるよ感」ってどう表現するのが適切なのかな？と思ったので、集めてみることにしました。
パターン1:シンプルな点で表現
シンプルな点で、今どこにいるかを表現しています。ぱっと見でわかりやすく、デザインの邪魔もせず、使いやすいなと思いました。
縦のメニューデザインでもいいですね。余白もたっぷりあるので点も目立ち、わかりやすいです。
パターン2：点とズレで表現
点とズレで、さらにわかりやすくなっています。選択されている対象の位置がズレることで、より選択されてる感が出てるなーと思いました。
パターン3：下線で表現
点よりもスタイリッシュに見えます。かっこいい系のデザインなら、下線のほうがマッチするかなと。
パターン4：下線の色を変えて表現
全てに下線があり、閲覧中のページの下線の色を変えています。オレンジがしっかり目立っていて、わかりやすいです。
パターン5：文字色を変えて表現
ざっと見たところ、文字の色を変えて表現されているメニューデザインが一番多かったです。ただ、色の変え方はキーカラーにしたり、彩度を落としたり、上げたり。
一度訪れたリンクの色が変わることは共通認識だと思いますので、現在地の色が変わるのは直感的に分かりやすくていいなと思いました。
パターン6：背景色を変えて表現
文字色よりも色の面積が多い分、よく目立ってわかりやすいです。ただ、色の扱い方が難しいなぁと思いました。皆さん上手すぎます。（当たり前）
パターン7：アコーディオンを開いて表現
今いるページのみ、下層ページを表示させることで表現されていました。わかりやすいですし、かつ次のアクションも提示してるので、使いやすいですね。情報量の多いホームページだと扱えそうだなと思いました。
パターン8：縦線で表現
縦線でぶち抜き、今いる場所のみ線を太くしています。単純にめちゃくちゃカッコよくて感動しました。わかりやすくしつつ、個性も出せるんだなぁと。
パターン9：丸囲いで表現
現在地を丸で囲って表現しています。米の形ですかね？ただの囲いだとボタンっぽく見えてしまうので、文字に少しかぶる形で囲ってるのが本当に上手だなと思いました。
パターン10：取り消し線で表現
今いる場所を取り消し線で消してます。これが一番衝撃を受けました。「今ここにいるよ」から「今ここにいるから押さなくていいよ」まで昇華してます。（実際は押せます）
言われてみれば、押さなくていいですよね。この発想はどんなに考えても出てこなかったと思います。すごい。
まとめ
いろいろなサイトを見てまとめることは、自分の引き出しを増やすことに繋がるなぁとしみじみ思いました。
良質なサイトを揃えてくださるmuuuuu.orgさん、S5 Styleさんには本当に感謝です。
今回の「ここにいる感」は、意識してないと気付かない程度のものです。でも、「無意識」でも「認識」はしているはずです。0.1秒〜0.5秒ぐらいは、「今どこにいるの？」を考える時間が削られてるかなと。
0.1秒単位でも、ユーザーの思考を無くせるのなら、実装すべきだと思いました。
以上です。
この記事が気に入ったらサポートをしてみませんか？