Webサイトの構造

主な構造5種類

直線型｜スタートからゴールまでステップを追っていく。
例）ランディングページやお問い合わせフォーム
ハブ＆スポーク型｜中心から、目的にあわせて分岐していく。
例）Facebook
Web型｜スタートもゴールもない、永遠と続く構造。
例）Amazon
階層型｜トップページから、より深い階層へと進んでいく。
例）コーポレートサイト
ファセット型（一覧＆詳細型）｜商品一覧ページで条件を次々に追加して絞り込んでいく。
例）ECサイト

Webサイトは必ずしもトップページから順を追ってアクセスしていくものではない。ネットショップであれば、検索エンジンからいきなり商品詳細ページへとたどり着く。そこからカートに進んで必要な情報を入力して購入を済ませる。その一連の動線の中に必要な情報（たとえば信頼感や配送に関する情報など）をシンプルに組み込む必要がある。

やたら情報を詰め込み過ぎてしまうと、そのエリアはまったく読まれなくなる。情報のSN比を考えて常に情報を整理していく必要がある。

何か調べようとするとき、何か買おうとするとき、ほとんどの場合は頭に浮かんだいくつかのフレーズを打ち込んで検索する。そこから目的のページにたどり着く。その際に、ロゴが浮かんでいるだけのトップページには何も用は無い。

スマホに最適化されたWebサイトは絵巻物のようなもの。巻物を少し開いてみて、興味がなければ他の巻物を手に取る。同じく少し開いてみて、興味をもったらさらに巻物を開いてみる。そのまま最後までみてもらえる巻物はどういった構成やデザインが必要だろうかと模索することが重要。

コンテンツ設計

同じ素材でも、情報をどんな視点で束ねるかでまったく違うWebサイトになる。

ネットショップで、商品ライン、商品の色やサイズ、価格帯などの条件を選んで絞り込む機能を追加されることがある。この絞り込み検索は、多くの場合ユーザーに実際使われることは少ない。

スマホが使われる場所と状況

たとえば北海道に住んでいる人が「カフェ」と検索して、都内のカフェの情報ばかりでてくるようではよろしくない。PCサイトではカフェのコンセプトやオーナーの情報がメインだとしても、スマホサイトの場合は地図や店内イメージをメインに表示するなど、サイトが使われる状況を意識することは必要。どうでもいい情報ではないが、「今は」どうでもいい。スマホサイトは、クリエイターが制作する時と、ユーザーが使う時とのテンションが大きく違う。本当に使いやすいUIとはどういうものか。ひとつの例えとして、酔っ払っていても大きなミスをせずに目的を達成できるもの。