【イモっぽいデザインから脱却したい！】グローバルメニューを見直してみる【その４】

イモっぽいデザインから脱却したい！ということで連載を続けております。今回から、実際にデザインを改修していこうと思います。

今回、改修するところはグローバルメニューです。

グローバルメニューとは

Web サイトにおける一般的な「グローバルメニュー」とは、通常、Web ページのヘッダーやサイドバーなどに設置され、サイト全体へのアクセスを提供するメニューの形をしたリンクみたいなものです。

サイトの主要なページや重要なリンクが集約され、ユーザーがサイト内の目的のページにスムーズにアクセスできるよう設計されています。

呼び方は「グローバルナビゲーション」、「ヘッダーメニュー」や「メインメニュー」などとも呼ばれていて、恐らく正確な定義はないものと思われます。また、リンク先の内容もサイトの方針に応じて柔軟に設定されます。

“グローバルメニュー”の設定に悩んでしまったら、まず「ユーザビリティの向上」を意識して、ユーザーがサイトを効果的に閲覧しやすくなるにはどうすれば良いかを考えると、おのずと答えが見えてくるような気がします！

グローバルメニューのデザイン

グローバルメニューのデザイン例を大まかにまとめてみました。

基本系

多くのサイトで見かける横並びのスタンダードなメニューです。

ハンバーガー

よく画面上の端に３本線などで表示されいて、クリック（タップ）すると展開する折りたたまれたメニューです。線が重なっているのがハンバーガーのようにに見えるため、そう呼ばれることが多いです。

スマートフォン表示（レスポンシブデザイン）では必須と言っても過言ではないメニュースタイルですね。

メガドロップダウン

基本形の各メニューから、“ドロップダウン”で細かいメニューが広がるナビゲーションで、単に「ドロップダウンメニュー」、画面内に広く展開するものは特に「“メガ”ドロップダウン」と呼ばれたりもします。テキストだけではなく画像（バナー）なども表示することが可能です。

通常時はコンパクトな状態で、ユーザーの能動的な操作に応じて広がり、画面の限られた表示スペースを機能的に有効活用することができます。ユーザーに対して情報への迅速なアクセスを提供し、サイト全体の複雑な構造を効果的にナビゲートできるメリットがあります。

このメニュースタイルは、充実したコンテンツや多層の構造で構築されているサイト、特に企業サイトなんかには適していると思います！

フッターメニューは、フッターに適した内容にすべき

その考え、ちょっと待ったあああ！

フッターメニューには、フッターの特性に応じたメニューを設置するのが、より良いです。

フッターにグローバルメニューをそのままコピーして設置する場合も多いかと思いますが、闇雲にそうしてしまうのは“フッター”メニューとしての存在意義が薄くなってしまいます。

世の中の Web サイトは、フッターにメインのコンテンツ内容とは別に、重要なページへの導線を設けていることが多く見受けられます。例えば「企業情報」や「プライバシーポリシー」などの信頼性と透明性、安全性をユーザーに示す必要不可欠なページです。

なぜそうなっているのかのエビデンスは私には示すことはできませんが、自然と標準化されているように感じます。「フッターには企業情報やプライバシーポリシーなどの情報がある」と広く知れ渡っているのであれば、それに従うのがユーザビリティの観点において望ましいと考えられます。

また、フッターという場所は、Web ページの一番下です。多くの場合ほとんど見られることはないでしょう。故に、たくさんの細かな情報が載っていてもユーザーの離脱には直接つながらないと考えられます。逆を言えばフッターまで見るというユーザーはそのサイト自体の詳細な情報を深く知りたいということが想像できます。

長々と説明してしまいましたが、、
つまりフッターメニューには、フッターの特性に応じたメニューを設置するのがより良いということです！

あえて言い換えるなら
グローバルメニューとフッターメニューは同じものを設定、設置しなければいけないというわけでは決してないのです！

本ブログのグローバルメニューを見直す

さて、グローバルメニューについて知ったところで、本ブログのグローバルメニューを見直していこうと思います。

改修前のメニュー内容は

改修前の本ブログのグローバルメニューの内容は以下の通りで、常にヘッダーに表示されているスタイルです。

・ホーム
・運営者情報
・問い合わせ
・プライバシーポリシー

現状のブログにあったメニューのスタイルは

メニューの内容を見てみると、当ブログのメインのコンテンツ内容とは直接的な関係はなく、コンテンツ目当てで来るユーザーにとっては不要である可能性すらあります。

ですので、メニューの内容を改めるか、折りたたむのが良いと考えました。

メニュー内容を改める場合は、例えばカテゴリを表示させたり、人気記事を表示させるのが、ユーザビリティの向上につながるのかなと思います。
ただし、本ブログは現時点ではまだコンテンツが揃っていなかったため、その方法は合わないと判断し、今回はハンバーガーメニューで折りたたんでしまうことにしました。

ハンバーガーメニューにしてみた

ハンバーガーメニューにしてみた見た目がこちらです。

かなりすっきりしました！
アニメーションは JQuery とかをいろいろ参考にしながらつけてみましたがなかなか苦戦しました。いつかまとめて記事にしてみたいと思います。今回は割愛します( ;∀;)

フッターメニューも整えてみた

ヘッダーメニュー（グローバルメニュー）ついでに、フッターメニューも整えてみました。

レスポンシブ表示にも対応！
初めはdisplay: flex;で並ばせていたのですが、奇数個の時の左揃えセンタリングがうまくいかなかったので、display: grid;でスタイリングしてみました。

フッターメニューのデザインは、多くのサイトに倣ってひとまずシンプルなものに。今後いろいろとデザインに手を加えていくうちに遊びごころを加えていけたらと思います。

まとめ

グローバルメニューは、サイトの特性や傾向に応じて項目を選んでユーザビリティの向上を意識してスタイルを決めるのが良いですね。本サイトも現状のコンテンツの量と質に合わせたスタイルにしましたが、もっとコンテンツが充実してきたら、また見直していくつもりです。