Webサイトの種類別デザイン設計｜コーポレート・採用・ECで変わる作り方

コーポレートサイト（会社の公式サイト）も、採用サイトも、ECサイト（ネットで商品を売る通販サイト）も、同じ「Webサイト」。でも、開いてみると雰囲気がまるで違いますよね。

違いの正体はセンスではありません。サイトの目的が違うから、デザインの正解が変わるんです。

このレッスンでは、Webサイトの種類を目的で整理して、種類ごとにデザインの何が変わるかを解説します。読み終えると、案件の最初に「どんなサイトですか」と聞く理由が分かるようになりますよ。

Webサイトの種類は「目的」で分ける

Webサイトの種類は、見た目や規模ではなく、訪問者に何をしてほしいかで分けます。実務でよく出てくるのは、この6種類です。

種類	目的	主な訪問者
コーポレートサイト	会社を知って、信頼してもらう	取引先・求職者・株主
採用サイト	「ここで働きたい」と思ってもらう	求職者
ECサイト	商品を買ってもらう	買い物客
メディアサイト	記事を読んで、また来てもらう	情報を探す人
ブランドサイト	商品や企業の世界観を好きになってもらう	見込み客・ファン
LP	申し込み・購入という1つの行動	広告を見た人

この中でLPだけは縦長1ページという特殊な形です。詳しくは前のレッスンLPデザインの実務で解説しています。

実務では「コーポレートサイトのリニューアル」のように、種類の名前で依頼が来ます。名前を聞いた瞬間に目的とデザインの主役を思い浮かべられると、提案が速くなります。

制作依頼を受けたら、最初に確認するのは種類の名前より「訪問者に何をしてほしいか」。目的が決まれば、デザインの方向は自然に決まります。

種類ごとに設計はこう変わる

同じ会社でも、コーポレートサイトと採用サイトではデザインが別物になります。代表的な3種類で、何が変わるかを見ていきましょう。

コーポレートサイト：信頼感と探しやすさ

主役は会社の情報です。会社概要・事業内容・お知らせに、迷わずたどり着けることが第一。配色は色数を絞った落ち着いた組み合わせ、レイアウトは整列を効かせた堅実な組み方が基本です。奇抜さより、初めて来た人が迷わないことを優先します。

ナビゲーション（ページ上部にあるメニュー）の言葉も「事業内容」「会社概要」「採用情報」という定番の呼び方を使います。独自の言い換えは、探している人を迷わせるだけです。

採用サイト：感情に届ける

同じ会社でも、採用サイトは表現の自由度が上がります。働く人の写真を大きく使い、コピーで語りかける。訪問者に「入社後の自分」を想像してもらうのがゴールなので、情報の網羅より先に感情に届ける設計をします。

ECサイト：商品と導線がすべて

主役は商品写真です。デザイナーの仕事は、商品を引き立てる背景に徹すること。カートまでの道のりを短くして、ボタンや商品カードの形をそろえます。ボタンやフォームの細かい設計は、第6章のUIパーツのレッスンで解説しています。

メディアサイト・ブランドサイト

メディアサイトの主役は文字組みです。長い記事を最後まで読める行間・文字サイズと、次の記事へ進む回遊の導線を設計します。文字の整え方はタイポグラフィのレッスンが土台になります。

ブランドサイトは、6種類の中でいちばん表現の自由度が高いサイトです。写真・動き・色をそろえて世界観を作ります。方向を決めるのはトーン&マナーです。

種類が違っても共通すること

種類ごとの違いを見てきましたが、設計の出発点はどれも同じです。

• 目的とペルソナを先に決める（ターゲットとペルソナ）
• ヘッダー・ナビ・フッターという基本構造は共通（Webページの構成要素）
• 近接・整列・反復・対比の4原則はどの種類でも土台

種類が変えるのは配色・写真・トーンの方向です。レイアウトの基本ルールは、どの種類でも同じまま使えます。基礎の章で学んだことは、どの案件でも無駄になりません。

ミニ実践：3つのサイトを表で比べる

目的とデザインのつながりを、自分の目で確かめる練習です。15分あれば終わります。

1. 好きな会社を1社選び、コーポレートサイトを開きます
2. 同じ業界の採用サイトとECサイトも開きます（同じ会社になくても大丈夫です）
3. 「目的」「最初に目に入るもの」「色数」「写真の使い方」の4項目で表にします
4. いちばん違いが出た項目に印をつけます

「目的が違うとここまで変わる」を自分の言葉でメモしておくと、案件のヒアリングでそのまま役に立ちます◎

• そのサイトの目的を一言で言える
• 最初に目に入るものが、目的とつながっている
• 色数と写真の使い方の違いを、言葉で説明できる

よくある質問

Webサイトにはどんな種類がありますか？

目的で分けると、コーポレートサイト・採用サイト・ECサイト・メディアサイト・ブランドサイト・LPが代表的な6種類です。ほかにもポータルサイトや会員向けサービスサイトなどがありますが、まずこの6つを押さえれば実務の会話に困りません。

ホームページとWebサイトは同じ意味ですか？

日常会話では、どちらもWebサイト全体を指します。もともと「ホームページ」はサイトの入口（トップページ）を指す言葉でした。制作の現場ではWebサイトと呼ぶほうが正確に伝わります。

1つのサイトが複数の種類を兼ねてもいいですか？

よくあります。コーポレートサイトの中に採用ページやお知らせ（メディア）を持つ構成が典型です。その場合も、ページ単位で「このページの目的は何か」を1つ決めてからデザインします。

サイトの種類ごとに制作費は違いますか？

違います。ページ数と機能で変わり、ECサイトは決済機能のぶん高くなる傾向です。ただし相場は時期と依頼先で大きく変わるので、実際の金額は複数社の見積もりで確認してください。

次に学ぶこと

整理します。Webサイトの種類は目的で分ける。コーポレートは信頼と探しやすさ、採用は感情、ECは商品と導線。種類が変えるのはトーンで、4原則の土台は共通です。

種類が決まったら、次の工程は設計です。載せるページを一覧にしたサイトマップを作り、各ページの下書きにあたるワイヤーフレームへ進みます。この手順はワイヤーフレームとモックアップのレッスンで解説しています。

次のレッスンは「チラシ・フライヤーの実務」。画面から紙に変わると、レイアウトと入稿の何が変わるかを学びます。

学ぶ順番の全体はデザインの基本コースにまとめています。