サイト構造を見直す５つのステップ。構造パターンと情報分類・設計の最適化【WebUX改善実践シリーズ】

読了時間4分

 

こんにちは、ソシャマノートのこのみです。今日はサイトの構造をどう改善していくかを、川崎ちゃんと一緒に考えていきたいと思います！

 

こんにちは、川崎です。今日は自分の勉強した事や作業を振り返りながらサイト構造を見直す手順をまとめてみました。

 

情報設計の重要性

ユーザーにサイトの有用性や利便性をすぐに理解してもらう事は、サイトの運営者にとっても集客や目的達成のために重要な事です。
全体構造が直感的・論理的に把握できるよう工夫すれば、それはサイトのUXを底上げする事にもなると思います。
しかしサイトの適切な情報分類・設計とはどのようにしてプランを立て実行していけばよいのでしょうか？？

 

サイト構造を見直す際にふんだ５つのステップ

サイト構造を見直すという事は、サイト内に存在するコンテンツ・機能を１つ１つ分解し再設計するという事です。
私の場合は以下のようなステップで実行しています。

 

Step１：コンテンツを書き出す

まずはサイト内にあるコンテンツを書き出していきます。
量を書きだしたり整理したりする作業の場合、私は後で並べ替えたり書き換えたりが楽なのでホワイトボードと付箋紙を良く使います。

Step２：グルーピング

全て書き出したら、近しいもので塊をつくります。グルーピングの際は、なるべく被らず漏れのない・わかりやすいよう納得のいくまで行います。それぞれのグループの関係性も考え、区分けしていきます。（このカテゴリーを見る人はこっちもみるだろう、このカテゴリーを何回も読む人はそのカテゴリーにも触れてもらいたいなど）

Step３：ラベリング

うまく分類することができたら、それぞれのグループ名前をつけます。「誰に」「何を」を「どうやって」伝えるのかを思い出し、ターゲットに受け入れられやすい単語を選びます。これにはサイトの専門領域・ベクトルを示す役割もあります。

 

Step４：ひな型となるサイト構造のモデルを選ぶ

Webでの情報設計には3種類の代表的なモデルがあります。階層型分類構造・Web型構造・直線型構造です。これらのモデルはいろんな呼ばれ方をしています。またこのほかにも新しいモデルがいくつか出てきていますが、ここではオーソドックスな3タイプの特徴を見ていきたいと思います。

1.階層型分類構造

もっとも基本的で親しみのある型です。ディレクトリをイメージすると分かりやすいです。

• 【メリット】：サイト内で現在地を把握しやすい事
• 【デメリット】：「１つの情報は１つのカテゴリーに属する必要」があるため、複数のカテゴリーに属する情報がでてきたときに困る。
• 【留意点】：階層はあまり深くすると、クリック数も必然的に増えてしまうため注意が必要。

2.Web型構造

階層型分類構造や直線型構造の持つ制約を取り払い、どのページにも行けるというリンク機能を存分に発揮できる網目状の構造。

• 【メリット】：ページ間の移動が自由なのでリンクを設置しやすい。
• 【デメリット】：どのページと度のページをリンクするべきか、明確なルールがない分設計の難易度が上がる。
• 【留意点】：ユーザーが自由に移動できる半面、ルールが見えない無秩序なサイトに映ってしまう

3.直線型構造

直線型は「進む」「戻る」によって成り立つシンプルな直線的な構造です。
例えばネットショッピングをする際の購入画面などが例としてあげられます。

• 【メリット】：ユーザーに順を追ってページを進んでほしい場合にとても有効
• 【デメリット】：「リンクをたどることで好きな情報を見ることができる」という自由を制限してしまい、ユーザーにストレスを与える事がある。
• 【留意点】：ユーザーに段階を追う事を強いるので、本当に必要な場合にのみ使う事

 

最適な構造を選び組み合わせる

それぞれのサイト構造には良いところもあれば、欠点もあります。なので併用されて使われる事もあります。
雛型として適切なタイプを選び、そこから足りない機能を他の構造モデルを取り入れることで補完できるというわけです。

 

Step５：サイト構造を作成

今回は階層型分類構造というパターンをひな型に作成しました。
実際はページ内リンクがそれぞれのページに貼りめぐらされていたり、ツリー構造に属していない情報もあります。
サイト構造ができたら、サイトの中でも特に重要なコンテンツに印をつけます。

またそれぞれのコンテンツグループには関係性があります。重要コンテンツの経路導線も考えながら、互いを結び付けていきます。見てすぐにわかるように関係性には線で強弱をつけてみました。

 

構造だけでなく関係性も把握することで他ページへの移動や各ページに置きたい機能・必要のない機能がわかってきます。（少しWeb型の要素も入ってきました）

 

サイト構造には文脈がある

ここまでサイト構造について考えてきました。進めていく中で大事だなと思ったのは「文脈を導き出すこと」です。１つ１つの素材（コンテンツ・機能）を分解し、グルーピングする段階ではいろんなパターンを作ることが出来ます。ユーザーにとってどういったくくりが一番わかりやすく使いやすいのか・使いにくいのか、論理的なくくりにするのか・思考的なくくりにするのか。構造の文脈を浮かび上がらせ明確にする作業が肝になると感じました。
 

なるほど。サイト構造を考えるにはコンテンツを整理するだけでなく、サイトの文脈を考える作業でもあるんだね。考えるのはとても大変そう…でもちゃんとできれば[ユーザーにとって使いやすい・便利]＝[サイトの利益にもつながる]→みんなハッピー！　川崎ちゃんどうもありがとう、引き続きがんばってください！（>o<）

みなさんも最後まで読んで頂きありがとうございました!次回もお楽しみにっ(*’u'*)ﾉｼ