鈴木智子のホームページのアクセスアップデザイン講座グローバルナビをデザインする

グローバルナビゲーションをデザインする

次に、グローバルナビゲーションをデザインします。
ロゴでは「シンプル」「ユニーク（独自性）」「特長が明確」を大切にしましたが、グローバルナビゲーションをデザインする上で一番重要なのは「文字の読みやすさ」と「使い勝手の良さ」です。

なぜなら、グローバルナビゲーションの役目は「サイト内の各コンテンツへの案内役」だからです。
案内役が背景に同化して見えづらかったり、サイト内のどこにいるのか分かりにくかったりしては、閲覧者の混乱を引き起こしてしまいます。
グローバルナビゲーションはホームページの全ての要素の中で、もっともユーザビリティを重視しなければなりません。

基本配置は読みやすさを重視

さて、ここでもまずは必要な要素を配置します。
「ワイヤーフレームとして仕上げる」で操作した作業と同じように要素を配置します。
ここでは、メニューの文字と、背景の四角形を配置します。

ついでにフォントも決めてしまいます。
ロゴよりもさらに柔らかい印象を持たせたかったので、「AR P丸ゴシック体E」を使用しました。

グローバルナビゲーションは何よりも「読みやすさ」を重要視する要素ですから、最初に文字のデザインを決めてしまって、文字を邪魔しないようにデザインするとスムーズです。
フォントの調整は、「ロゴ（サイトID）をデザインする」と同じ要領で行います。

デザインをする上で、重要な要素の1つがフォントです。
フォントには、フリーのフォントやシェアウェアフォント、パッケージフォントがあります。
ここでは無料のフォントを使用していますが、パソコンのメーカーや機種によってデフォルトで入っているフォントが違います。
デザイン性の高いフォントは有料のものが多く、パッケージフォントのダイナフォントやNISやモリサワを購入する必要があります。

色の選択と含有量

続いて、肉付けにあたるデザインをします。
「ロゴ（サイトID）をデザインする」で、「鈴木智子のホームページのアクセスアップ講座」は各カテゴリにメインカラーを設定すると書きましたが、ここで登場します。
隣り合うナビゲーションの境目が分かりやすいように罫線を引いてから、メインカラーを配置します。

[新規レイヤー]をクリックしてレイヤーを作成します。

[鉛筆ツール]を選択します。

1pxの線を引きます。
真っすぐな線を引くには、Shiftキーを押しながら、ドラッグします。

横線は、[ラインツール]で引いてみましょう。
[ラインツール]を選択してクリックします。

[ラインツール]で作成しておくと、後から簡単に色を変える事が出来ます。

メニューの背景になっている四角形のレイヤーを右クリックして、[レイヤー効果]をクリックします。

[境界線]の設定を行います。[塗りつぶしタイプ]を[グラデーション]に設定します。

[光彩（内側）]の設定を行います。カラーを白（ffffff）に変更しました。

[グラデーションオーバーレイ]の設定を行います。グラデーションの方向を[逆方向]に変更しました。

メニューとメニューのつなぎ目が不自然なので、グレーの線の下に[新規レイヤー]を作成して、白い線を引きます。
[新規レイヤー]をクリックします。

[鉛筆ツール]を選択して、3pxの白（ffffff）の線をメニューの間に引きます。

レイヤーを右クリックして、[レイヤー効果]をクリックします。さらに[カラーオーバーレイ]で色をffffffとします。

ラインの色を変えます。
ラインのレイヤーのサムネイルをダブルクリックして、色を指定します。

背景色も変えます。
ここでは色を#ffffffとして白くしました。

背景がぼんやりしているので境界線を使ってすっきりさせます。
レイヤーを右クリックして[レイヤー効果]をクリックします。[境界線]を選択してグラデーション内をクリックします。

グラデーションの色を調整します。

カラフルな色使いは、とても華やかで楽しそうな印象を与えます。

しかしデザインする時には、2つの注意点があります。

色の選択

メインカラー+2色程度の色数であれば、よほどの事が無い限り破綻しません。
しかしカラフルな色遣いは、少し判断を誤っただけであっという間に色同士が喧嘩してしまいます。
カラフルデザインで色の選択に迷ったら、このホームページのようにピンク、オレンジ、グリーン、ライトブルー、ブルーの組み合わせをお試しください。この5色の組合せは、安定性が高くポピュラーな組合せです。

色の含有率（比率）

要素全体に対して色が少なすぎると寂しくなりますし、色が多すぎるとうるさくなってしまいます。
残念ながら、適正量はメインカラーやデザインによって異なるためお奨めの比率などを紹介することができません。
また、色の含有量は個人の感覚に寄る部分も大きいと言えます。
含有量のバランス感覚は、すぐれたWEBサイトをたくさん見て培ってゆくしかないでしょう。

「鈴木智子のホームページのアクセスアップ講座」では、グローバルナビゲーション全体に対して15:1の比率になっています。

色の含有量は、グローバルナビゲーションだけでなくWEBページ全体のバランスも必要です。
全体のバランスについては、最終調整でのお話になります。

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

ここまででグローバルナビゲーションの50％が完成しました。
ではあと50％分だけ手を加えるのか？と言えば、そうではありません。
残り50％は、ロールオーバー時のデザインです。

多くのWEBサイトで、マウスカーソルを画像（またはテキスト）の上に乗せると、画像が変形・変化するアクションに出会ったことがあると思います。
これがロールオーバーというアクションです。
このホームページでも、グローバルナビゲーションの上にマウスカーソルを乗せると、画像が変化します。

人は、動きがある部分、他と違う部分に注目します。
ロールオーバーはこの2つを兼ね備えていますから、閲覧者に「ここは重要です。注目してください」と訴えかけるのです。
ユーザビリティとデザイン性のアップのためにも、グローバルメニューにはロールーオーバーの使用をお勧めします。

では、ロールオーバー時のデザインを始めましょう。
ロールオーバー画像作成時のコツは、文字要素を通常時と同じにすることです。
文字を少し大きくしたり、ずらしたりといったやり方もありますが、「文字の読みやすさ」を重視すると、通常時と同じ文字を使う方に軍配が上がります。文字色も同じものを使用すると、背景だけが入れ替わったように見えます。
通常時とロールオーバー時の違いが分かりやすいように、なおかつ通常時のデザインを踏襲しながら、色の含有量を一気に増やします。

グループのフォルダを選択して［レイヤー］をクリック、または、グループのフォルダで右クリックをします。

[グループを複製]をクリックします。

グローバルナビのグループの目玉アイコンをクリックします。
これ以降ロールオーバー時のデザインを進めるので、一旦、非表示にしておきましょう。

[長方形ツール]を選択して、全領域を塗りつぶします。
全領域に色を設定すると増やしすぎのように見えますが、ロールオーバー画像が見えるのは、マウスを乗せている時だけですのでご心配は無用。
むしろ、控え目にしていると通常時との違いが不明瞭になってしまいます。
それではロールオーバーの意味がありせんので、思い切ってデザインしましょう。