TIPS

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

更新日:

 

アニメーション

 

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

 

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

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

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

 

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

 

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

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

 

本記事の内容

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

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

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

 

こんにちは!takaです。

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

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

 

また、今のLINE@のお友だち登録数は、402人で、

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

 

グラフ

 

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

 

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

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

 

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

 

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

 

 

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

女性

 

30秒で解説します。

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

こんなかんじ。

 

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

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

 

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

 

 

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

 

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

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

 

 

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

 

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

 

理由もシンプル。

 

・一番見やすいから

 

こんなかんじ。

見やすい理由もシンプルで、「1:一番目に行きやすい場所にある」「2:1番目にするデザインでユーザーに馴染みがあるから」の2つです。

 

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

 

 

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

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

 

 

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

草原

 

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

 

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

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

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

 

これだけです。

かなりシンプルです。

 

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

 

詳しく解説します。

 

 

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

 

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

 

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

 

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

 

横幅は「1920px」など、webデザイナーのさじ加減で変わる場合はありますが、もっとも一般的な「1440px」で作ればOKです。

 

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

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

 

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】今回作ったグローバルナビゲーションのデザインは簡単すぎだけど、これで本当にいいの?

 

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

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

 

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

 

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

 

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

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:まとめ

都会

 

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

 

最後に告知ですが、僕のインスタでも今回みたいな情報を随時発信しています。

皆さんの暮らしに、少しでもお役に立てればうれしいです(`・ω・´)ゞ

※下記みたいなことを紹介しています↓

 

 

この投稿をInstagramで見る

 

. . 【web案件の” 受注勝率 ”が、圧倒的にアップした本 📖】 . . 本日のおすすめ良本です🙆‍♂️ 僕はこの「エッセンシャル思考」を持っていたおかげで、web案件の受注勝率が圧倒的にアップしました😌 . . 本の重要な部分を ぎゅっと凝縮すると、下記の3つです。 . . 1:ひと1人がやれる作業量は決まっていて、それ以上のことはできないよ。(#優秀な人ほどなんでも1人でやりたがる) . 2:やるべきことを1つに絞って、それを徹底的にやりなさい。(#チカラを分散させるな一点突破しなさい) . 3:今やるべきことに、全力を注ぎなさい。(#ホリエモンも言っている。#今を生きろ。) . . こんな感じです😌 . . エッセンシャル(本質的)思考とは、「正しいことをやり遂げる技術」という意味です。(#ちょっと意味わかんない) . . 分かりにくいので、僕の例でお話しします。 . . 僕は2年くらい前まで普通のwebデザイナーで、目立って優秀なところはありませんでした。(#デザインスキルも中の中) なので、まわりのwebデザイナーさんたちに埋もれてました。 . . そこで、なんとかせねばと作戦を考えた末、「SEOに強いwebデザイナーになろう!」と決めました。 . . そして立ち上げたのが「デザインのコツ。」というブログです。 はじめたての頃は、ブログのアクセスは3〜4人で、「これは厳しい戦いになるな...」と察しました。 . . そこで、「もうブログしかやらねぇ!デザインの受注は後まわし!」と決めて、ブログに全ての力と時間を集中させました。 . . すると、「ポスター_デザイン」というビッグワードだったり、「デザイン_アイデア」といった有名キーワードで1位表示できるようになり、結果、月に1万人以上の方々に見られるブログになりました。 . ※「ポスター_デザイン」は月に1万回以上検索されていて上位表示させるのはかなり難易度高め。(#世の中のプロブロガーさんリスペクト) . . 今では、ライバルのweb制作会社さんやSEO会社さんが現れたら、「僕は実際にSEOでこれくらい結果を出せてますよ。」と言えるので、webデザイナーとしての信憑性マックスです。 . . 結果、最弱デザイナーから、最強クラスの競合に立ち向かっていける肉食獣になれました。(#弱者なりの戦い方がある) . . 話を戻すと、エッセンシャル思考も持っておくと、自分が本当にすべきことに集中できるようになり、結果、成果が出しやすくなります。 . . 「デザインを独学されている方」や「何かを成し遂げたい方」におすすめの本なので、気になる方はぜひどうぞ😌 . . . . . 【エッセンシャル思考 -最少の時間で成果を最大にする - 】 . . . . . #集客#集客方法#集客アップ#集客力#集客アイデア#プログラミング#プログラミング初心者#プログラミング勉強中#プログラミング学習#集中力アップ#集中力を高める#ビジネススキル#社会人スキル#心理学#クリエイター#マルチクリエイター#クリエイティブ#グラフィティ#ストリートグラフィティ

デザインのコツ。|デザイナー taka(@taka_designtips)がシェアした投稿 -

 

よければフォローいただけるとうれしいです(`・ω・´)ゞ

 

Design is easy!

The following two tabs change content below.
Owner|taka
designer Taka | From Japan I'm Taka from Japan, a graphic and web designer. 月間PV数1万人の「Blog | design tips」を運営しています。専属契約、インハウス、単発案件を受注しつつ、毎月30~50万稼ぎながらcreative workを楽しんでいます。

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