初心者のためにWebサイト設計入門

Webサイトの構築や構造、設計について学んでいきましょう。Webサイトの構造のことをサイトマップやサイトストラクチャと呼んだりもします。ではどのように設計を行っていけばよいのでしょうか。

• 導線設計
• スマートフォン対応
• サイトストラクチャ
• まとめ

Webサイト設計について

Webサイトの構築や構造、設計について学んでいきましょう。Webサイトの構造のことをサイトマップやサイトストラクチャと呼んだりもします。ではどのように設計を行っていけばよいのでしょうか。下記イメージ図を見てみましょう。

これは美容室のサイトストラクチャの簡単な例です。このような設計を行う際の注意点の１つとして、サイトに訪れたユーザーが簡単に目的のページまでたどり着けるかという点があります。

つまりユーザーにとって分かりやすい設計であるかということですね。では、この点について次の項で詳しく学んでいきましょう。

Webサイトの導線設計

サイトに訪れるユーザーは何を求めているかを考えることが重要となります。例えば美容室であれば料金や営業時間となるかと思います。その場合、ユーザーが簡単にそのページにたどり着けるか、そしてそこから予約ページへと繋がる構造になっていた方がよいでしょう。

美容室「TAYA」のサイトを見てみるとメニュー・料金を確認するためには「メニュー」をクリックすればよいと一目で分かります。そして、料金を確認したらページ遷移などの手間なく簡単に予約ページにたどり着けるようになっています。

http://tayanet.jp/salon/28/

この料金や予約ページがサイト内で深い階層にあると確認できるまでに手間がかかり、ユーザーは不便さを感じてしまいますね。このようにユーザー目線で使い勝手の良いサイトとなるように設計していくことが大切です。

Webサイト設計のためのスマートフォン対応

スマートフォンの普及によりネットの利用もスマホからという方が多くなっています。また、PCから見た場合のデザイン・設計を先に行ってしまうと、スマホはPCよりも画面が小さいのでコンテンツが入りきらなくなってしまったりすることもあるかもしれません。

Skillhubでも割り合いを見るとスマートフォンとPCの割り合いはほぼ半々です。 このようなWebサイト制作を勉強するようなサイトでもスマートフォンで行う方は多いようです。

ですので、最初からスマホ対応にすることを考え設計していくようにした方がよいでしょう。

 

Webサイト設計をより良くするためにサイトストラクチャを知る

サイトストラクチャはいくつかの種類に分けることが出来ます。

• 階層型
• ファセット分類型
• ポータル型
• ハブスポーク型
• 直線型

では１つずつ見ていきましょう。

階層型

冒頭でも取り上げたのイメージ図のような構造は階層型になります。企業サイトなどがよくこの構造を採用しています。

階層が深く下がっていくほど詳細な情報のページになっていく構造ですね。上記例の様な構造のサイトが以下です。

http://belle-omotesando.jp/

美容室「Belle」のサイトは階層型になっていますね。この階層型構造を採用しているwebサイトには他にも「トヨタ自動車株式会社 公式企業サイト」のサイトなどがあります。

http://www.toyota.co.jp/

階層型構造では階層を下がっていったときに目的と違うページにたどり着いてしまったというようなことがないように、カテゴリ分けをきっちりする必要があります。明確にカテゴリでコンテンツを分けることによってユーザーが簡単に目的のページを見つけることが出来ます。

ファセット型の設計

ファセットとは何かの一面、切り口という意味があります。例えば通販サイト等など「ブランド・アイテム種・カラー」というように様々な入口から目的のページに訪れることが出来ます。

このファセット型構造を採用しているwebサイトには「不動産・住宅情報サイトライフルホームズ」などがあります。

https://www.homes.co.jp/

住所からや駅・路線からなど様々なカテゴリから住まいを検索できるようになっています。他にも美容室「LIPPS」のヘアカタログページはファセット型になっています。ショート・ロングなどのカテゴリや、ランキングからもヘアスタイルを探すことが出来ます。コンテンツが複数のカテゴリを持つものの場合はファセット型にするとよいでしょう。

http://lipps.co.jp/

ポータル型の設計

ポータル型構造とは、複数のサイトがお互いにリンクしているような構造のことです。

「YAHOO!JAPAN」はポータル型構造になっているかと思います。yahoo!japanのトップページからメールやオークションなどのサービスのトップページに行くことができ、また逆も然りです。

https://www.yahoo.co.jp/

また、他にも「mod's hair 50周年記念オフィシャルサイト」もポータル型です。トップページにグループのサイトに飛ぶことが出来ます。

http://modshair.co.jp/

ハブスポーク型の設計

ハブスポーク型は、拠点となるページから様々なページに分散し、また拠点に戻るという形で使われるであろうサイトで採用される構造です。

SNSはこのは部スポーク型になります。たとえば「Twitter」もその代表です。自分のアカウントページが拠点となり他の人のツイートのページなどに分散していき拠点に戻るという形で使われる事が多いでしょう。

https://twitter.com/?lang=ja

直線型の設計

直線型は、目的地が決まっていてそこに向かい直線的に遷移するというような構造です。これはサイト全体とは限りません。

例えばお問い合わせのフォームや支払いページ、またランディングページなど、サイト内の一部分で使用されることが多いです。これらは直線型構造になっていることが多いです。

「ASSORT TOKYO」では予約ページが直線型になっています。この直線型を使う理由は「ユーザーを逃さないこと」になるでしょう。

https://b-merit.jp/web/?

また「Yahoo！ショッピング」の購入ページも直線型です。このように目的地が明確な場合は直線型にするとよいでしょう。

https://shopping.yahoo.co.jp/

Webサイト設計のまとめ

webサイトの構造の事をサイトマップやサイトストラクチャといいます。そして設計は、ユーザーにとって分かりやすい設計であることが重要です。

サイトの内容にあった構造を選びましょう。次のレッスンでは、サイトレイアウトについて学んでいきます。