ウェブサイトのナビゲーションは、一般的にはウェブサイトの目立つ場所に固定されており、ウェブサイトの訪問者が興味のあるウェブサイトのコンテンツを簡単に見つけて、良い閲覧体験を得るのに役立ちます。一般的なWebナビゲーション設計は、Webページの上部、側面、または下部に表示されます。これらは通常、訪問者が必要な情報やウェブサイトリソースをより迅速に見つけるのを支援するために、垂直ナビゲーションメニューで表示されます。もしウェブサイトにユーザーフレンドリーな垂直ナビゲーションメニューがない場合、ウェブサイトの訪問者は検索オプションがどこにあるか分からないし、そのためにすべてのウェブサイトのコンテンツを閲覧するのに時間がかかる可能性もあります。これは専門的ではないように見えるだけでなく、サイトのジャンプ率にも大きな影響を与えます。したがって、論理構造を使用したわかりやすい垂直ナビゲーションメニューは、ユーザーエクスペリエンスの向上に重要です。この仕事をよりよく進めるのを助けるために、私たちはこのブログ記事を準備しました！
記事の要約：
- 垂直ナビゲーションメニューとは？
- 垂直ナビゲーションメニューのメリット
- 垂直ナビゲーションメニューを構築するための最適な戦略
- Strikinglyによる垂直ナビゲーションメニューの構築
- 記事のまとめ
1、垂直ナビゲーションメニューとは？
垂直ナビゲーションメニューを構築するための戦略と、彼がもたらすメリットを正式に理解する前に、垂直ナビゲーションメニュー（垂直サイドバーまたは垂直ナビゲーションバーとも呼ばれる）の意味を理解する必要があります。ページの片側に沿って延び、使用可能なすべての接続を表示するナビゲーションオプションコンポーネントとして定義されています。これらの接続は、サイトの訪問者をサイトの異なる部分やリソースに向けるために、整然とした方法で表示されます。ウェブサイト訪問者は、興味のないウェブサイトのコンテンツに時間を費やすべきではありません。そのためには、ウェブサイトに専門的で使いやすい垂直ナビゲーションメニューを用意し、ウェブサイトのコンテンツを分類して可視化する必要があります。これにより、ウェブサイトの訪問者の閲覧体験が大幅に向上します。
2、垂直ナビゲーションメニューのメリット
- すべてのスクリーンに適合
垂直ナビゲーションメニューを使用する最も顕著な利点の1つは、すべてのスクリーンに適していることです。デスクトップからもアクションデバイスからもこのオプションバーにアクセスすると、同じ幅と高さで開く傾向があり、理想的で応答性の高いウェブサイトレイアウトを構築できます。
Strikinglyのユーザーのサイトから受けた画像
透がウェブサイトで垂直ナビゲーションメニューを使用するのは、ユーザーエクスペリエンスを改善するための全体的なレイアウトが簡単であることを確認してください。Strikingly上のグランドツアーFlorenceテンプレートの垂直ナビゲーションメニューが良い例です。
- ウェブサイトのシンプル化
「少ないことは多い」という言葉はウェブサイトのナビゲーションシステムにも適用されます。垂直ナビゲーションメニューを使用すると、ウェブサイトのコンテンツをより簡潔に表示することができます。サイトが整然としていればいるほど、訪問者はそれを閲覧するのが好きになります。
Strikinglyのユーザーのサイトから受けた画像
同様に、選択リストで使用するデザイン要素が煩雑ではないことを確認し、各オプションの名前が正確でわかりやすいことを確認してください。
3、垂直ナビゲーションメニューを構築するための最適な戦略
- 配置ウェブサイトの左または右を選択
Strikinglyで見られるかもしれないほとんどのサイトのように、サイト所有者はその垂直ナビゲーションメニューを左側に置く傾向があります。これは、訪問者がサイトを閲覧する際の眼球の動きが左側から右側に移動することが多いことを指摘しているからです。だから、それをすることの重要性を意識すべきです。
Strikinglyのユーザーのサイトから受けた画像
しかし、これは垂直ナビゲーションメニューを右側に置くことができないことを意味しません。特別な場合には、ウェブサイト上の空きスペースが限られており、ナビゲーションバーには興味と目を引く要素が含まれています。この場合、右側に垂直ナビゲーションメニューを設定することができます。これはサイトにも独自性をもたらします。
- テキストを単純に維持
ウェブサイトの所有者としては、ウェブサイトの訪問者に本当に利便性を提供できるように、垂直ナビゲーションメニューの要素を理解しやすいようにしなければなりません。また、ユーザーに接続先を視覚的に知らせるために、選択リストに識別しやすい図を含める必要があります。
選択項目間の階層構造を表示するために、サブカラーとメインカラーを含めることもできます。サスペンションとクリックのインタラクション機能が含まれていることを確認してください。ナビゲーションバーに複数の選択肢がある場合は、類似項目をグループ化して分類することで、ナビゲーションプロセスを高速化してください。
- 水平ナビゲーションとともに使用します。
垂直ナビゲーションメニューは通常、ウェブサイトのページ上の大量のスペースを占有し、ウェブサイトの重要なコンテンツを上書きしてしまうこともあり、負の影響を与えることがあります。そのため、多くのウェブサイト所有者は、ウェブサイトのコンテンツを表示するためにスペースを空けるために、垂直ナビゲーションメニューと水平ナビゲーションオプションを組み合わせることにしました。したがって、プルダウン垂直ナビゲーションバーを展開するには、ブランドロゴまたは指定された選択図（左上）にマウスをクリックして停止する必要があります。
4、Strikinglyによる垂直ナビゲーションメニューの構築
Strikinglyは、水平ナビゲーションオプションを使用しているか垂直ナビゲーションメニューを使用しているかにかかわらず、ウェブサイトのナビゲーションオプションに部分を表示または非表示にすることができます。これを達成するには、次のことだけが必要です。
- 特定の区画またはページを選択します。
- プレート/ページの横にあるギアの図をクリックします。
- 「ナビゲーションに表示」オプションを選択解除して、ナビゲーション・オプションから非表示にします。
垂直ナビゲーションメニューのセクションに加えて、ページをウェブサイトの外部に接続することもできます。これを行う場合は、次の手順に従います。
Strikinglyの商品から受けた画像
- オプションをクリックして「新規接続を追加」
- ウェブサイトの訪問者がクリックしたときに表示される名前を入力します
- 外部サイトを「接続サイト」部分に貼り付ける
5、記事のまとめ
ページ領域を占有していますが、垂直ナビゲーションメニューにより、ウェブサイト接続階層のより自然なリストが提供されます。ナビゲーション・オプションを正しく構築すれば、おめでとうございます。訪問者に人気がありやすくなります。上記の内容から利益を得て、学んだ知識をウェブサイトの構築作業に活用してほしい！すべてがうまくいくように！
