ウェブサイトは幾つかのパターンに分けられます。
ウェブサイト制作をする際にも、それらの区分けをきちんとおこない整理していくことが大切になります。
下記の分類は、一例ですが、まとめてみました。
【種別・タイプ】
ECサイト
いわゆるショッピングサイト。インターネットを使い、商品（モノやサービス）を販売するサイト。
http://www.uniqlo.com/jp/
Webマガジン
雑誌風のウェブメディア。ライフスタイル、カルチャー、ファッションなどにわけられる。
http://www.campjo.com/mamechishiki/
コーポレートサイト
会社概要やプレスリリースなど、企業の案内が掲載されたサイト。ウェブサイトの中でも一番数が多い。
https://www.seiban.co.jp/
ブランディングサイト
自社のブランド構築、認知度アップのために造られる場合が多い。他の広告とも連動する。
http://orangina.jp/
ポータルサイト
ウェブ上にある、様々なサービスや情報を集約するコンテンツの集合サイト。玄関サイト。
http://cp.okinawastory.jp/
ポートフォリオサイト
自分の作品を集めたサイト。経験を示すものなので、デザインの優れたサイトが多い。
http://taikoukuniyoshi.com/
採用サイト
就職希望者のために作られたサイト。コーポレートサイトとセットになっている場合もある。
http://urawa-tsukushi.com/recruit/
Webサービス
Webを使い、問題を解決するためのサービスサイト。ウェブアプリ、ネイティブアプリにわかれる。
http://www.sonr.jp/
プロモーションサイト
商品やサービスを広く知ってもらい、販促に繋げるためのサイト。期間限定での公開が多い。
http://www.asahi.com/special/ichiro/4257/
ブログサイト
法人がビジネス目的で運営する場合や、個人が情報発信のために更新することもある。
http://nado.2-d.jp/
店舗サイト
コーポレートサイトと違い、お店の良さを伝え、来店客を増やすことを目的としたサイト。
http://www.jins.com/jp/
ランディングページ
一つの商品やサービスを売るための、Webページ。
リスティング広告などのリンクをクリックした際に表示される。
https://www.shiseido.co.jp/anessa/
【レイアウト】
シングルカラム型
ワンカラムとも言われ、サイドコンテンツを設けず、１つのカラムをまっすぐに配置するレイアウト。
レスポンシブWebデザインにも対応しやすいレイアウトともいえる。
http://www.trip.kyoto.jp/
マルチカラム型
Webサイトで最もよく見られるレイアウトパターン。
2カラム3カラムと増えるごとに情報量を増やせるが、ナビゲーションの設定などが大切になる
http://shaddy.jp/
カード型
Pinterestに代表される、カード型デザイン。情報に優先度をつけず、たくさんのデザインを一度に見てもらえる。
レスポンシブWebデザインとも相性が良いと言われている。
http://wonder-wall.com/
１ページアプリケーション型
ページ遷移せずに画面を切り替え、表示・操作を単一のページ上で可能にするアプリケーション。
airbnbなどが取り入れており、読込み無しでスムーズにサイトを閲覧できる。
https://www.airbnb.jp/
フルスクリーン型
イメージ写真や動画をブラウザの幅いっぱいに映し出したデザイン。
ファーストインパクトは非常に大きいが、それだけ写真や動画の選定が大切になる。
http://www.seirokufarm.com/
グリッドレイアウト型
グリッドをベースとして、ブロックごとにコンテンツを配置していくレイアウト。
CSSフレームワークのグリッドシステムである、Bootstrapが代表される。
http://www.cementdesign.com/
レスポンシブレイアウト型
スマートフォンやタブレット、PCなどあらゆるデバイスに対応するデザイン。
ワンソース管理が可能なので、修正も行いやすいことが特徴。
http://to1985.net/
シングルページ型
1ページで完結しているWebページ。ランディングページとは異なり、様々な用途で使われる。
パララックスなどの視覚効果を使い、ページを魅せることも多い。
http://difott.com/case/
【デザイン】
フラットデザイン
ウェブページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないデザイン。
Windows8やiOS7のリリースから、人気が出たと言われています。
http://ueno-bunka.jp/
マテリアルデザイン
googleが2014年に「Google Material Design」として発表したデザインガイドラインのこと。
影を用いることで、物体が存在してる可能にデザインを表現しています。
https://www.android.com/
Webデザインがまとめられたサイトさんは、わかりやすいカテゴリごとにわけられています。
今回の記事でも参考にさせていただきました。
こうしたサイトを見ながら、設計の参考にすることも良いかもしれません。
http://muuuuu.org/
http://art-noc.com/
