WEBサイトについて 共栄美装WEBサイト機能紹介~ナビゲーション編~

弊社のWEBサイトは、一見シンプルですが実はいろんな機能を搭載しています。ページを巡回していると関連性のあるコンテンツが表示されたりデバイスによって見せ方に細かな差をつけています。

あらゆる情報を網羅的に掲載しているだけではなく、かといって理路整然とした小ざっぱりしただけのサイトでもなく、かゆい所に手が届くデザインを目指して開発し続けています。

ナビゲーションについて

弊社ではオーソドックスな3箇所のナビゲーションからユーザーの皆様へ情報をお届けしています。

共栄美装の3種のナビゲーションバーと機能

ヘッダー
1.ナビゲーションバー
2.検索ボックス
サイドバー
3.フレキシブルなサイドバーコンテンツ
フッター
4.パンくずリスト
5.フッターナビゲーション
6.各SNSサイトへのジャンプボタン

ヘッダーナビゲーションについて

クリック率の高い、最も重要なメインのナビゲーション。

ナビゲーションバー

メインメニューのコンテンツを移動するナビゲーションボタンが集まったバーです。

パソコンで閲覧時

  • マウスカーソルが乗ることでサブメニューが出現
  • 画面をスクロールすると1行になってコンパクトになり、追尾

スマホで閲覧時

  • 画面右上のハンバーガーボタンで展開
  • サブメニューは各メニュー右端のトグルスイッチで開閉
  • 常に追尾

検索ボックス

ナビゲーションバーやコンテンツを目で追っているだけでは目的のコンテンツに素早く辿りつけないことがあります。そんな時、サイト内検索を行う検索ボックスが役立ちます。

私たちは、ユーザーの皆様がさらに目的地に素早くたどり着くために標準機能の検索に加えて2種類の仕掛けを検索ボックスに追加しました。

クイックリンク

  • 検索ボックスにフォーカスすると出現
  • テキストを入れなくても人気コンテンツにジャンプ

※現状、クイックリンク機能はパソコン版限定機能となります。

クイックリンク

検索候補(サジェスト機能)

  • テキストを打ち込むと出現
  • リアルタイムで絞り込まれた検索候補がポップアップ
  • 押せば検索結果ページを介さずに直接移動

サイドバーについて

補助的なナビゲーション。WEBサイトによっては使われないこともありますし、逆にサイドバーがメインのナビゲーションとなる場合もあります。この場所はユーザーが操作したことを記憶して様々なメニューをフレキシブルに出現させる機能を搭載しました。

標準メニュー

  • フリーダイヤル
  • カートの中ボタン
  • ご発注の流れ

※PCのみ、スクロールすると追尾します。

閲覧履歴

  • 閲覧履歴があると出現
  • リストには最大5件まで表示される

カートの中身

  • カートに商品が入っていると出現
  • アイテム点数、合計金額が表示される

フッターについて

スクロールの終点にあるナビゲーション。最後に目につく場所ということで、パンくずと全体的なメニューへのアクセスが可能なナビゲーション、またSNSへジャンプするという外部リンクメニューを設置しています。

パンくずリスト

  • 現在いるページの階層を可視化したリスト
  • 各メニューを押せば階層を辿れる

フッターナビゲーション

  • 全体的なナビゲーションが閲覧可能
  • スマホ表示時は折りたたみ式になり開閉可能

SNSボタンと著作権表記

  • 各SNSにジャンプする為のボタン

まとめ

本日は弊社で使用しているヘッダー、サイドバー、フッターにどんな機能を搭載したのかをご紹介しました。これらのナビゲーションは異なるコンテンツ間を移動しつつも、共通して表示される※ものであり、デザイン4大原則のうち「反復」に相当するものです。

ページを切り替えながらも、安心してご利用いただける作りにしております。

※一部、フル幅でコンテンツを出すページもあります。そこはサイドバーが表示されません。

次回はコンテンツ編です。コンテンツにはそれぞれ・・・

  • カテゴリー
  • タグ
  • 検索結果
  • 特集ページ
  • 商品ページ
  • 投稿(ブログ)
  • 固定ページ

があります。

関連記事

この記事のカテゴリー: WEBサイトについて

この記事を書いた人

広報部1号 広報部1号

WEBサイトを使ったプロモーション活動を主に担当するデザイナー。主に人事、人材育成に力を入れています。好物はレモンサワーとホルモン焼き。

相談する

Contact お問い合わせ

メールフォーム(24時間対応) お問い合わせ
フリーダイヤル(平日9:00~18:00)0120-005-732
FAX 注文用紙(PDF) 052-622-1153
E-mailからのお問い合わせ contact@kyoei-bisou.co.jp