【ニラは見た！】Webデザインレポート~グローバルナビ編~

こんにちは。ニラです。

何か自主制作で、Webデザインをしていこうかな〜って考えています。しかし今のままでは、おそらくいいものは作れないでしょう。

デザインの幅を広げるためには、たくさんのデザインを見ることは重要です。しかし僕の経験上、見るだけではなく、それを使ったデザインを自分でも作成することによって半永久的に記憶に残すことができます。バナー分析のように。

グローバルナビのお勉強

サイトトレースもいいと思いましたが、めんどくさがりな僕は絶対長く続かないでしょう。なので、一記事につき、一つのUIをたくさんのサイトを見ながら分析していこうと思います。

効果があるのかは、自分でもわかりません。でも、サイトトレースよりも継続して勉強することができそうな気がします。

というわけで、今回は、Webサイトの一番上にありがちなグローバルナビケーションについて調査していこうと思います。

スタンダード

まずは、こちらです。僕の中ではこれが基本形で、一番よく使っている気がします。

ただただ見やすいデザインで、位置を固定するときにも特に困らず、使いやすく感じます。

しかし、「NIRATCHI」の位置をただど真ん中にするのではなく、上下の位置を少し調整する必要がありそうです。

背景のないスタンダード

これは、背景のない基本形です。

この場合は、写真がよく映えて見えますね！「NIRATCHI」もど真ん中に配置してあります。

デメリットとしては、文字や画像の色を考えないとコントラスト比が小さくなり、グローバルナビが見えにくくなってしまうことや、Body要素の背景やその他のコンテンツの色によって、見えにくくなる場合があります。

これを使う場合は、位置を固定させないか、JavaSriptで色を変化させて位置を固定させるって感じですね。

一部目立たせる

これは、一部のナビを目立たせるというパターンですね！ECサイトなどでよく見かけます。SNSをグローバルナビに入れるときにもこんな感じですよね。

これは、背景の有無は関係なく使えそうです。しかしこうしていく場合は、ナビの数によって改行するか、そのまま横一列に並べるかを変化させたほうが良さそうです。

仮に改行させた場合は、左のロゴマークの上下の余白を考え直す必要があります。

縦ならべ

これは縦並べですね。

ちょっと左に寄せて位置固定させることで、他の文字や画像とかぶって見にくくなってしまうという事故を防ぐことができそうです。そして少しオシャレな。

ただ、見にくくなる事故は防げても、グローバルメニューはどこだ？ってなりそうです。

ロゴマークの位置も少し考えなければ、綺麗に見せるのはちょっと難しそうです。

ハンバーガーメニューにぶち込む

グローバルナビが多すぎる場合や、メインビジュアルをシンプルに見せたいときには、いっそ全部をハンバーガーメニューにぶち込むっていうてもあります。これもありですね。

しかしこれも、自分がどのページにいるかがわからない人にはわからないっていうのと、ページ移動のためのクリック回数が増えるっていうデメリットもあります。

どんなデザインもデメリットがあるんですね。

ロゴとグローバルナビを並べない

これは、ロゴマークを一番上に置いて、その下にグローバルナビを並べるていう手です。

グローバルナビの余白が贅沢に取れてこれはこれでいいですね。僕のブログもこれの仲間ですかね？

このタイプはあまり見かけないですね。

まとめ

僕が調べてよく出てきたグローバルナビはざっとこんな感じです。

この６つを組み合わせて作るサイトにあったグローバルナビができそうです。

例えば、、

背景あり＋縦並べ
ハンバーガーメニュー＋コンタクトのみ外に出してアイコンとして表示
一部目立たせ＋目立たせ方を変える
スタンダード＋キャッチコピー

などなど！

次は、メインビジュアルについて考えていこうと思います。

よろしくお願いします。

❤︎

2022/09/09

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

fill out コメントをキャンセル

Artist

nira-012.mahora94

よろしくお願いします