デザインのコツ

【全てを公開】グローバルナビゲーションの役割〜作り方〜参考デザインまで。

投稿日:

グローバルナビゲーション

 

グローバルナビゲーションの役割〜作り方〜参考デザインの、全てを知りたい方向け。

 

「グローバルナビゲーションの役割って、いったい何?」

「グローバルナビゲーションの作り方が知りたい。」

「グローバルナビゲーションの参考デザインが見たい。」

 

こんな疑問を解決していきます。

 

※この記事は、3分くらいで読み終わります。

読み終える頃には、「グローバルナビゲーションの役割〜作り方〜参考デザイン」までが理解できるはず(`・ω・´)ゞ

 

本記事の内容

1:【基本】グローバルナビゲーションの役割を30秒で紹介。

2:【初心者向け】誰でもできる、グローバルナビゲーションの作り方を紹介。

3:【おすすめ】グローバルナビゲーションの参考デザインを紹介。

 

こんにちは!takaです。

グラフィックデザイナー・クリエイティブディレクター歴12年。

毎月25万〜50万の収入を、コツコツ稼ぎつつ生きています。

 

また、今のLINE@のお友だち登録数は、247人くらいで、

毎月のブログ訪問者は1万人くらいです。

 

グラフ

 

今回のお話は「グローバルナビゲーションの役割〜作り方〜参考デザイン」について。

 

webデザイン初心者の方は、作り方で悩んでいる方が多いと思います。

また、これからwebデザイナーになる方は「グローバルナビゲーションって、一体なんのこと?」と思うかもです。

 

今回は、割とだれも教えてくれない「グローバルナビゲーションの役割〜作り方〜参考デザイン」までをレクチャーしていきます。

 

それでは、本日も3分少々お付き合いください(`・ω・´)ゞ

 

 

1:【基本】グローバルナビゲーションの役割を30秒で紹介。

グローバルナビゲーション

 

30秒で解説します。

グローバルナビゲーションとは、下記の部分です。

 

グローバルナビゲーション

 

webサイトの「案内メニュー」が書かれている部分です。

 

ちなみに、グローバルナビゲーションは「グロナビ」と略される場合が多いです。

 

✔【デザイン】グローバルナビゲーションの役割とは?

 

グローバルナビゲーションの役割は、下記のとおりです。

 

・スムーズに、別ページへ移動させること。

 

こんなかんじ。

 

今見ているページから、別のページにスムーズに移動できるようにサポートするのが、グローバルナビゲーションの役割です。

なので、グローバルナビゲーションは、サイトの最上部にあることが多いです。

 

例えば、UNIQLOのサイトもグローバルナビゲーションが最上部にあります。

 

✔グローバルナビゲーションのデザインは、別にもあります。

 

グローバルナビゲーションの位置は、デザインによって「横」にあったり、「下」にあったりまします。

ちなみに「横」のやつは、BRAUNのサイトみたいなやつです。

 

✔【注意】グローバルナビゲーションの位置は、「最上部」に配置してデザインするのがおすすめ。

 

賛否両論あるとおもいますが、グローバルナビゲーションは、「最上部」に配置するのをおすすめします。

 

理由もシンプル。

 

・一番見やすいから

 

こんなかんじ。

見やすい理由もシンプルで、上に配置されているものは、多くのサイトで採用されており、ユーザーに一番なじみがあるからです。

 

特にこだわりがない場合は、最上部に配置して、デザインするのがおすすめです。

 

 

以上が、グローバルナビゲーションの解説です。

次の項では、実際にグローバルナビゲーションの作り方をレクチャーしていきます。

 

 

2:【初心者向け】誰でもできる、グローバルナビゲーションの作り方を紹介。

グローバルナビゲーション

 

グローバルナビゲーションの作り方は、下記の3ステップで作れます。

 

STEP1:「W1440×H100px」の長方形を作る。

STEP2:「W100×H100px」の正方形を、メニューの数だけ作る。

STEP3:正方形の中にメニューを足して、ロゴを左に配置する。

 

以上です。

かなりシンプルです。

 

いろんなデザイン方法があると思いますが、初心者の方は、これがいちばん作りやすいかな。と思います。

 

詳しく解説します。

 

【グローバルナビゲーションのデザインの作り方_1】「W1440×H100px」の長方形を作る。

 

今回は、僕のwebスクールの教材として使用している、下記のグローバルナビゲーションをデザインしていきます。

 

はじめに、イラストレーターのアートボードの横幅を、「1440px」で作ります。

 

webデザイン グローバルナビゲーション

 

横幅は「1920px」など、webデザイナーごとで変わる場合がありますが、今回はポピュラーな「1440px」でOKです。

 

そして、「W1440×H100px」の長方形をつくって、アートボードの最上部に配置します。

※見やすいように、色をグレーにしていますが、実際はホワイトで作ればOKです。

 

webデザイン グローバルナビゲーション

 

これで、STEP1は終了です。

 

かんたんでしたね。

 

【グローバルナビゲーションのデザインの作り方_2】「W100×H100px」の正方形を、メニューの数だけ作る。

 

次は、「W100×H100px」の正方形を、メニューの数だけ作ります。

 

今回作るサイトでは、「HOME/CONCEPT/BLOG/POLICY/CONTACT」の5つをメニューとして作るので、計5個分の正方形を作ります。

※見やすいように、交互に色をグレーの濃度を変えてますが、実際はホワイトで作ればOKです。

 

webデザイン グローバルナビゲーション

 

✔【注意】グローバルナビゲーションのメニューには、かならず「TOPページ」のメニューを加えよう。

 

グローバルナビゲーションのメニューには、かならず「TOPページ」のメニューを加えましょう。

理由もシンプル。

 

・ユーザーが、TOPページに戻りやすくするため。

 

こんなかんじ。

 

たぶん皆さんも経験があると思いますが、サイトを見ていたら、いったんTOPに戻りたい場合がありますよね。

 

なので、グローバルナビゲーションのメニューには、かならず「TOPページ」を加えておきましょう。

 

【グローバルナビゲーションのデザインの作り方_3】正方形の中にメニューを足して、ロゴを左に配置する。

 

最後に、STEP2で作った正方形の中心に、メニュー名を配置しましょう。

こんなかんじです。

※ここでは、実際の見え方の白地色にしています。

 

webデザイン グローバルナビゲーション

 

ここで使用しているフォント名は「Bebas Neue」で、サイズは「16px」です。

また、字送りは「200px」です。

 

最後は、サイトのロゴを左に配置して、TOP画像を持ってくれば終了です。

 

webデザイン グローバルナビゲーション

 

webデザイン グローバルナビゲーション

 

かんたんでしたね。

 

これでグローバルナビゲーションのデザインは完成です。

 

ここで、みなさんが疑問に思ったことに回答します。

 

 

✔【疑問1】今回作ったグローバルナビゲーションのデザインは簡単すぎだけど、本当にいいの?

 

今回紹介した作り方は、かなり簡単でした。

また、見た目もシンプルなので、人によっては「もっと装飾を増やしたほうがいいんじゃない?」と思うかもです。

 

ですが、あくまでグローバルナビゲーションの役割は「別ページへの移動をスムーズにすること」です。

 

なので、シンプルなデザインでもまったく問題ないですし、多くのサイトもシンプルな魅せ方になっています。

 

【グローバルナビゲーションがシンプルな例】

1:Artio

2:OMRON

3:VICO

 

上記のサイトは文字だけを配置したデザインですが、かなりきれいですよね。

 

なので、グローバルナビゲーションのデザインはシンプルでOKです。

 

✔【疑問2】STEP2で作ったグローバルナビゲーションの正方形の高さは、絶対に100pxじゃないとダメなの?

 

100px以上でも、以下でもOKです。

 

ただし、100px以下にすると、徐々に文字の視認性が下がるので、初心者のうちは100pxがいいかな。と思います。

 

✔【疑問3】グローバルナビゲーションのデザインを、もっと良くしたい。

 

もう少し、グローバルナビゲーションを良くしたい方は、「マウスオーバー」を設定すればOKです。

 

マウスオーバーとは、下記のことです。

 

・マウスをボタンとかの上に移動させたら、色が変わる仕様のこと。

 

例えば、サイトのボタンをクリックする時、ボタンの色が変わるときがありますよね。

こちらのサイトの左下にある「白黒のボタン」の上にカーソルを合わせると、ボタンの色が反転すると思います。

※スマホで見ると色は変わりません。

 

そして今回も、下記の感じでマウスオーバーの色をつけてあげれば、わりと意匠性もアップします。

 

webデザイン グローバルナビゲーション

 

STEP2で作った正方形に、色を付けただけでできます。

 

コーダーさん(webサイトをプログラミングする人)に、コーディングを依頼するときに「ここ、マウスオーバーでお願いします」と伝えれば、それだけで設定できます。

 

 

以上が、グローバルナビゲーションの作り方です。

 

一見複雑そうですが、わりと簡単にできます。

 

次の項では、「参考になるグローバルナビゲーションのデザイン」を紹介していきます。

 

 

3:【おすすめ】グローバルナビゲーションの参考デザインを紹介。

グローバルナビゲーション

 

さいごに、グローバルナビゲーションの参考になるデザインを、3つ紹介します。

 

【おすすめ1】白帯でグローバルナビゲーションを作ったデザイン。

 

「MEJINAVI 2020」さんのサイトです。

 

このグローバルナビゲーションの良いところは、地色を付けることで、比較的かんたんな処理で意匠性をアップさせているところです。

 

「MEJINAVI 2020」さんでは、白地の先端が丸になってますが、四角のままでも、わりと見栄えすると思います。

 

【おすすめ2】文字のみ+マウスオーバーの「線」で魅せる、グローバルナビゲーションのデザイン。

 

「PLATFORM」さんのサイトです。

 

グローバルナビゲーションのデザイン自体は「文字だけ」ですが、マウスオーバーで「アンダーライン」を表示させることで、意匠性をアップさせています。

※スマホでは見れません。

 

これも、コーディングの依頼時に、「こんな風にしてください」と、コーダーさんにお願いすれば、そのとおりにやっていただけます。

 

すぐに取り入れることが出来るので、かなりおすすめです。

 

【おすすめ3】文字のみ+マウスオーバーの「動き」で魅せる、グローバルナビゲーションのデザイン。

 

「jose luis」さんのサイトです。

 

これも、2つ目と同じくデザイン自体は「文字だけ」ですが、マウスオーバーで「文字の間隔が広がる」という動きを加えているので、意匠性がアップしています。

※スマホでは見れません。

 

これも、コーディングの依頼時に、「こんな風にしてください」と、コーダーさんにお願いすれば、そのとおりにやっていただけます。

 

すぐに取り入れることが出来るので、かなりおすすめです。

 

 

以上が、おすすめのグローバルナビゲーションです。

 

わりとすぐに取り入れることが出来るものを選んだので、
機会があれば、ぜひお試しを(`・ω・´)ゞ

 

 

4:まとめ

グローバルナビゲーション

 

というわけで、今回は以上です。

 

デザインのコツでは、こんな感じで

「デザインを教えてくれる先輩がいない人」

「デザインを独学で身につけたい人」

「デザイン初心者でスキルアップしたい人」のために、日々お役立ち情報を発信しています。

 

まわりに相談する人がいない方は、LINE@から無料で個別相談のやりとりができます。

必要なときに、ぜひご自由にご活用ください(`・ω・´)ゞ

 

ボタン

 

Design is easy!

 

【4月25日情報更新】マンツーマン型 webデザイナー育成スクールを開始します。【コロナ対策あり】

 

 

 

The following two tabs change content below.
管理人|taka(たか)
【職 業:クリエイティブディレクター/グラフィックデザイナー】 デザイナー歴12年。上場企業のサラリーマンから、独学でデザイナーを学び、デザイン事務所に入社。 現在は「インハウスデザイナー」「企業専属契約 」「単発制作」で毎月25〜40万円を得て生活しています。 月間で1万人くらいの方が訪れるブログ「デザインのコツ。」を運営中です(`・ω・´)ゞ

Copyright© デザインのコツ。 , 2020 All Rights Reserved Powered by AFFINGER5.