サイトストラクチャとナビゲーション

おはようございます🤗
今朝は6時に起床し、無事朝会に参加することができました🙌
今日は午前中から外出する予定があるので、朝会終了後に朝ごはんを食べて、ブログを書きながら洗濯を回していますが、眠くてたまりません笑
きっとベットに横になったらお昼まで寝てしまうと思います😅
なので洗濯が終わったら、身支度をしてブログを書いている途中でも外出したいと思います。

サイトストラクチャのパターンについて書いたので、今日からはナビゲーションについて書いていきたいと思います。
ナビゲーションとUI設計は密接な関係にあるため、ナビゲーションの役目や種類を学んでおきましょう。

それでは、さっそくいってみましょう！！

ーーー

●ナビゲーションの役割

Webサイトを見て自分が探している情報がどこにあるのか迷ったり、色々なところに遷移していたら、今どこにいてトップページに戻る方法がわからなくなったりしたことがあると思います。
ユーザーが求めている情報やページへきちんと誘導できないと、のような問題が発生します。

サイト設計は、ユーザーが迷子にならないように、きちんと目的地にたどり着けるよう設計しないとなりません。
ユーザーが必要な情報にたどり着けない設計ではまったく意味がありません。

これらの問題を解決するために必要なのが「ナビゲーション」です。
ユーザーが迷うことなく目的の情報にたどり着けるように案内をする必要があります。
ユーザーがどのようにしてサイトに訪れたのか、どのようなコンテンツで閲覧するのかを想定・整理していないと、目的が見えないままユーザーを誘導する導線を作ってしまう場合があります。

なので、ユーザーがサイトに訪れた目的や必要な情報を整理することは、ナビゲーション設計をする上でとても大事になってきます。

ナビゲーションにもいくつかの種類があります。
まずその種類を紹介します。

①グローバルナビゲーション
②ローカルナビゲーション
③パンくずリスト
④関連ナビゲーション

です。
他にもダイナミックナビゲーション、エクストラナビゲーション、リニアナビゲーション、コンテンツ内ナビゲーションなどありますが、とりあえず上記の①〜④はおさえておきたいナビゲーションだと思うので、このブログでは上記ナビゲーションの特徴や役割について書いていこうと思います。

●グローバルナビゲーションとは？

グローバルナビゲーションは、ユーザーがWebサイトやアプリを使用する際にもっともよく使われます。
Webサイト全体で共通して表示するメニューです。
コーポレートサイトであれば企業情報や製品・サービス紹介、採用情報などその会社のサイトを見てユーザーが知り得たい主要の情報に導くためのナビゲーションとして採用されます。
一般的なコーポレートサイトの場合、どのページに遷移しても主要の情報が見れるように、サイトの上部に位置することが多く見られます。

グローバルナビゲーションがあることにより、ユーザー自身がサイト内のどの部分を開いているのかを把握することもできるため、迷子にならずにトップページに戻ったり、他のページに遷移したりすることができます。

グローバルナビゲーションのもう1つの役割として、ユーザーがWebサイトの概要を把握して、どのような情報がどこに含まれているかを予測することができます。

●グローバルナビゲーションの設計

グローバルナビゲーションは、どのような項目で構成するかをユーザーの行動や思考・目的を予測して、設計する必要があります。
その際、サイトに訪れるユーザーが利用しやすく、必要としているコンテンツに容易にたどり着けるような項目にします。

ここでWebサイト全体の構造を考えてサイトストラクチャを考える必要があります。
一般的なコーポレートサイトで見られるように、重要なコンテンツを最上位に配置する場合もあれば、ECサイトのように検索ナビゲーションを配置したり、機能別や対象者別などに構成する場合もあります。

グローバルナビゲーションはWebサイトの目的に応じて構成を考え、項目の選別や配置や並び順も考える必要があります。

ここで私が前回のサイト制作で参考にした「さんぽう西村屋」さんのサイトをもとに、サイトストラクチャの最上位階層をもとにした構成例を見てみましょう。

ご覧のように、グローバルナビゲーションがサイトストラクチャの最上位階層をもとに構成されています。
ユーザーに見てもらいたい項目を左から順に配置して、Webサイト全体の概要を汲み取ってもらえるようにしています。

そしてこちらはLOFTさんのサイト。
カテゴリごとに構成されています。
ユーザーの目的が決まっている場合、このようにカテゴリ別に構成することにより、目的にたどり着くのに迷うことなくたどり着くことができます。

このようにユーザーのたどり着きたい目的を想定して構成することが大切になります。
明日は②のローカルナビゲーションについて書いていきたいと思います。

ーーー

今日も最後まで読んでいただき、ありがとうございました🤗
みなさまにとって今日もステキな1日でありますように✨