皆さんはサイトストラクチャという言葉をご存知でしょうか？サイトストラクチャとはwebサイトの構造のことを指す言葉です。どんな形のwebサイトを作る際にも非常に重要になるキーワードです。
今回は、サイトストラクチャを作るにあたって重要なことやパターンについて解説していきます。
サイトストラクチャ？？なんだか難しそう...
実はそれほど難しくないよ！ブログを書いたりする上で覚えておいて損はないよ！
サイトストラクチャを考える上で重要なこと
Webサイトを作る上でサイトストラクチャはとても重要な項目ですが、いきなり考えようと思ってもうまく情報を整理できません。
サイトストラクチャを考える上では、ユーザーの導線をしっかりと把握することが非常に重要になります。
ユーザーの導線を明確にする
上記で説明したように、ユーザーの導線がわからなければいいサイトストラクチャは作れません。
そこで重要なのが、ユーザーの目的に沿ったメイン導線を明確することです。
例えばECサイトであれば、ユーザーがトップページをみて、気に入る商品を見つけて購入できるまでの導線がメインとなります。ここまでの導線を強く意識してサイトストラクチャを作っていきます。
メインの導線に無駄な情報が入っていたりすると、ユーザーにとってはストレスとなり離脱の可能性が上がります。
商品ページに入ってから購入までの導線をスムーズにする必要もありますね。
このようにユーザーの導線を明確にしておくことでスムーズにサイトストラクチャを見出すことができます。
レスポンシブ（スマホサイズ）を前提として考える
PCに比べてスマホでの表示は領域が小さくなり、伝えられる情報も少なくなります。また昨今ではスマホでwebサイトを見る人の方が圧倒的に多いため、スマホサイズを前提としたサイトストラクチャを考えましょう。
ワイヤーフレームなどを組む際にPCサイズを前提に組んでいて、後からスマホサイズを考える時に情報を入れられずに困ってしまうといったことが多いです。
このようなことから、サイトストラクチャを組む際にはレスポンシブ（スマホサイズ）を前提に考えましょう。
サイトストラクチャの５つのパターン
実は、サイトストラクチャは大きく分けて５つのパターンに分類され、それらの組み合わせによってできています。自分が作りたいサービスやwebサイトの類似サービスを見て参考にすると良いでしょう。
1.階層型構造
Webサイトで最も一般的なパターンです。トップページが起点となり、親子関係で情報を整理します。
ユーザーの目的が明確な場合に多く用いられます。シンプルな導線のため、ユーザーの目的達成までが非常に早いです。
シンプルがゆえに、縦関係にあるページの関係性は一貫性を持たせることが重要になります。
一般的に階層が深くなればなるほど具体的で詳細な内容になります。
三菱UFJ銀行のwebサイトでは、「個人のお客様」「法人のお客様」「企業情報」など大枠で複数のカテゴリに分けています。早い段階で目的に沿ってカテゴリ分けできることで、ユーザーはより早く目的を達成することができます。
2.ファセット分類型構造
ファセットは「切り口」という意味を示しています。特定の情報を様々な切り口で探すことができるパターンです。
特にECサイトはこのパターンが非常に多いです。アパレルサイトであれば、「種類」「色」「値段」など様々な切り口からそれらを組み合わせて探すことができるようになっています。
商品をどれか一つのカテゴリに属すわけではなく、属しているカテゴリ全てに属することでユーザーは商品を見つけやすくなります。
ファッションサイトのファッション通販 ファッションウォーカーでは、「価格タイプ」や「カテゴリ」「ブランド」など様々な角度からの切り口で洋服を探すことができるようになっています。どんなニーズを持ったユーザーに対しても探しやすい設計です。
様々な切り口から探せる反面、情報がシンプルなサイトなどでこのパターンを使ってしまうとかえって複雑になることもあるのでその点は注意してください。
3.ウェブ型構造
コンテンツ同士が網状に結びつき、行き止まりがないのが特徴です。
かなり大規模なwebサイトでよく見られる形で、wikipediaや楽天市場などもこのパターンです。
皆さんがよく知るAmazonもその一つです。見つけた商品からさらに類似商品に飛ぶこともできれば、ショップに飛ぶこともできますよね。
ウェブ型構造はこのように終わりがなく、各ページが網のように構成されています。
4.直線型構造
お問い合わせや会員登録などでよく見られるパターンです。特定の目的に対して直線的に遷移します。
目的がとても明確なため、それを邪魔しない導線が必要になります。
Webサイトの中でも、ユーザーの意思決定などの重要な項目に使われることが多いです。
LP（例：noireflet）でもよく見られる形です。商品の魅了を強くアピールし、お問い合わせや購買につなげる形です。それ以外のリンクなどはほとんどありません。このように目的がとてもはっきりしている時によく使われます。
5.ハブスポーク型構造
ハブ（１つのメインページ）を中心として、放射状にページが広がっていくパターンです。
メインページから別のページに行って、すぐにまたメインページに戻ってきてまた別のページに行って…とメインページを経由しながら各ページに飛んでいくのがこのパターンの想定導線です。
Facebookはユーザーのトップページがハブになり、フォロワーのページや各投稿のコメントなど様々なページに遷移することができます。どのページに行ってもハブに一旦戻ることでそこからの導線がわかりやすくなります。
まとめ
説明してきたように、サイトストラクチャには５つのパターンがあり、それぞれに特徴があります。自分が作りたいサイトやサービスがの類似サービスがどのパターンなのかを見極めることがとても重要です。
ただ、これらのパターンの型に単純にはめれば良いかというと必ずしもそうではなく、ユーザー目線で設計することが非常に重要になります。
パターン同士を組み合わせることも非常に多いです。基本の方は階層型で、会員登録やお問い合わせは直線型にするなどです。型に囚われすぎず、ユーザーの目的をしっかりと汲み取ってサイトストラクチャを考えてみてください。
Twitterにてお問い合わせなども募集しております！ぜひどうぞ！