gnav

ワイヤーフレーム

  •  > 
  •  > 
  •  > 
  • ワイヤーフレーム
  • ページの情報を整理する

    サイトの構造設計がサイト全体の構成を決める工程だったのに対し、ワイヤーフレームは各ページの構成を決める工程になります。そして次のビジュアルデザインを決める前に、ページの概略図を作る作業になります。ワイヤーフレームには、情報を整理することとナビゲーションを考えることの2つの役割があります。

    情報を整理する

    各ページ内に配置されている情報には、重要な情報とそうでないものとの優劣があります。ページ内に記載するコンテンツをグループ分けし、その中から優先順位を決め、配置を考える。そして各情報をどのように表現するかを決めるまでの一連の流れが必要になってきます。ユーザーにどのように情報を見せるのか、を考える作業がこのステップになります。

    ナビゲーションを考える

    サイトの構造段階で考えたナビゲーションを、さらに詳細に落とし込んでいきます。ナビゲーションの役割は「次にどこに行けるのか」「今どこにいるのか」をユーザーにわかりやすく伝えることです。それらを実現するために、複数のナビゲーションを設置します。代表的な「グローバルナビゲーション」「ローカルナビゲーション」「パンくずリスト」について説明します。

    1.グローバルナビゲーション

    通常サイトの上部にある、メインとなるナビゲーションです。ユーザーはこのグローバルナビゲーションを見て、サイトの全体像をイメージします。サイト内にあるコンテンツは、このグローバルナビゲーションからアクセスできるような構造にします。

    2.ローカルナビゲーション

    この「ローカル」という意味は、「今いるカテゴリー内」という意味です。今いるカテゴリーの中を案内するナビゲーションになります。コンテンツを整理する時に、カテゴリー単位で分類をしました。そのため、あるニーズを持って訪れたユーザーはそのカテゴリー内のコンテンツには関心を持っているはずでず。ユーザーが興味のあるコンテンツを見つけやすいように、ローカルナビゲーションを作ります。

    3.パンくずリスト

    ユーザーが今サイト内のどこにいるのか、現在地を示すためのナビゲーションです。トップページから現在のページまで、たどってきた経路を階層的に表します。また検索結果からは、トップページだけにアクセスしてくるわけでなく、直接個別ページにアクセスしてくるケースも多いです。そのような場合でも、このパンくずリストを見ることで、サイト内のどの位置にいるのかがわかります。

    トップに戻る