• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2019年6月24日(月曜日)  (村本 友梨)

各コンテンツの役割 「グローバルナビゲーション」

皆さんこんにちは。
アシスタントクリエイターの村本です。

ここ最近、個人的にはJavaScriptを勉強中です。
ですが、動的な部分ばかりに意識がいってデザインの基本をおろそかにしないようにしたいです。

ですので、このブログでは、
「Webサイトに置ける各コンテンツの役割、なぜそれが必要なのか?」
1つ1つ確認していきたいと思います。

今回は「グローバルナビゲーション」についてです。

---------------------------------
■グローバルナビゲーションとは?

「各ページに共通して設置されるサイト内の案内メニューのこと」
ページの一番上に設置されていることが多いです。

最近のスマホサイトでは、右上もしくは左上に設置されている
メニューボタンを押したときに表示される内容がこれにあたります。


■グローバルナビゲーションの役割

サイト全体の構成(コンテンツ)を分かりやすくするための役割があります。
本や、雑誌で言うと目次のような役割をします。

また、Webサイトでは、いろんなリンクをたどって別ページへ移動しますよね?
そのときに「今、自がどのコンテンツページを読んでいるか」伝える役割もあります。


■グローバルナビゲーションがなぜ必要なの?

人は第一印象の数秒でそのサイトを読み進めるかどうか判断します。
そこに求める情報が無いと判断されると、すぐに離脱へと繋がります。

「数秒で判断されるから、第一印象が大切。」というのは、
Webサイトに限ったことではないと思います。
人との関係や、商品販売と同様です。

ですので、トップページの一番最初に目につくグローバルナビゲーションを見て
サイト全体が見渡せるということがとても大事になります。

基本的にユーザーは、何かしらの情報を求めてWebサイトにやってきます。
「どこをクリックすれば求める情報があるのか」サイトを訪れた時に、
すぐに判断できることが重要ということですね。


■デザインをするときのポイント

上記の理由を踏まえ、デザインをするときのポイントいくつか挙げられます。

 ① 項目名を適切にすること・

 →その先にどういう情報があるのか、誰でも想定できる項目名にしておくことが大切です。
  欲しい情報がどこにあるのか、探し回らないといけないよなうな項目名では
  ナビゲーションの役割を果たしません。

 ② ナビゲーションの項目は、余白をとり見やすく5~7項目にすること・

 →物を並べられたときに、人が1度に認識できるのは5~7項目が限度です。
  8つ以上の項目を置いたとしても、見落とされる項目が出るため避けた方が良いです。
  どうしても情報が多い場合は、階層を分けて整理するなどして対応しましょう。

 ③ 位置を固定するなどして、スクロールしても常に見える場所に置いておくこと・

 →グローバルナビ以外にも共通しますが、ユーザーがもっと知りたいと思ったときに
  すぐにその情報が得られる環境が大事です。

  人の目というのは、注視すると視野が狭くなり、そこから視線を大きく動かくすと、
  どうしても一度集中力が切れてしまいます。

  コンバージョンに繋がる思考を切らさないための対応としても大事なポイントです。
  特に、お問い合わせへのリンクなど、コンバージョンに繋がるボタンの配置は
  この点を意識したいです。 

 ④ 項目の色を変えるなどして、今いる位置が分かるようすること・

 →関連記事を読み進めているうちに、意図せず別ページに移動している経験はないでしょうか。
  「さっき見た情報がもう一度見たい」「再び訪れたときに迷わず同じ情報を得けど、
   でもどこから行けば見られるのか分からない、毎回迷う。」

  これでは、せっかく興味をもってくれたユーザーを逃してしまうことになってしまいます。
  せっかくWebサイトを作ったのに、無駄な電話問い合わせが増えてしまうかもしれません。

  そのサイトに関心のあるユーザーは必ず再訪します。
  今見ているページが、目次で言うとどこなのか(どのナビゲーションと紐づいているのか)、
  明確にしておくことで、常にストレスなく情報を与えることに繋がります。

 ⑤ ローカルナビを置く場合は、メインコンテンツの左側に置くこと・
 
 →メインコンテンツの右側は視認性が非常に低くなるため、
  ナビゲーションを置く場所として適しません。
  左から右という視線の動きで必ず目に入る左側に置いた方が良いです。


---------------------------------
■まとめ
言われると当たりまえと感じる点もありますが、
この基本がなければその先のデザインは考えられないと思います。
これらを踏まえて今後もデザインを進めていきたいと思います。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン