ブログBLOG

コーポレートサイト・ECサイト・ランディングページ、デザインの違いをまとめてみた

更新日：2022/05/11

BRISKに入社する以前のお話ですが…
筆者がWeb制作会社に入社して1週間、突きつけられた専門用語。

「人材派遣サイトのLPのワイヤーフレーム作って」

未経験で入社した新人Webデザイナーだった筆者は右も左もわからず
「え・・エルピーってなんですか？」と聞き返しました…。

コーポレート、EC、LP…
当記事では、上記3つのサイトに絞り、
それぞれのデザインの特徴や制作する際の注意点をまとめてみました！

デザイン・ワイヤーフレーム作成の基礎知識として、読んでいただけたらうれしいです。
では、どうぞ！

それぞれのサイトの違いを理解しよう

コーポレートサイト、ECサイト、ランディングページ。
どれもWebサイトの一種ですが、それぞれ目的が異なります。

コーポレートサイトとは

コーポレート（corporate）サイトとは、直訳してそのまま、企業サイトのことです。
企業のプロフィールを紹介するページになります。
主に会社案内、製品・サービス紹介、ニュースリリースや採用情報などを掲載しています。

サービスサイト・ブランドサイト・採用サイト

コーポレートサイトとは別に、
企業のサービス・ブランド紹介に特化した「サービスサイト」「ブランドサイト」、
採用に特化した「採用サイト」を設置する企業もあります。

EC（イーシー）サイトとは

EC（electronic commerce）サイトとは、
直訳すると「電子商取引サイト」です。
インターネット上で商品を販売する目的のWebサイトになります。
インターネットに接続されたスマートフォンやパソコンなどがあれば、
実店舗がなくても世界中のユーザーに商品を販売できるため参入する企業は増え続けています。
サイトそのものがお店であることから、オンラインショップ、ネットショップとも呼ばれています。

LP（ランディングページ）とは

ランディングページ（landing page、略してLP）とは、
直訳すると「着地（Land）するページ」となり、
広義では、Web検索・広告などからサイトを訪問したユーザーが最初に閲覧することになるページです。

狭義では、サービス・商品の売り上げアップのために、「お問い合わせ」や「注文」に特化した縦長のWebページのことを指します。
簡単に言うと、サービス・商品をPRする宣伝ページです。

当記事では狭義の意味である広告・宣伝ページを指します。

コーポレートサイトデザインの特徴

コーポレートサイトは謂わば企業の顔。
どのようなサービス・製品を扱う企業なのかがすぐわかるデザインが要求されます。

1企業の情報をわかりやすく整理してデザインする

コーポレートサイトでは、デザインのコンセプトが重要となります。
ロゴデザインに使用したコーポレートカラーを中心に、
すべてのページでコンセプトにあった配色・デザインのルールで制作しなければなりません。
特に複数人のデザイナーで作業する際には気を付けましょう。

RED SEVEN
キリンホールディングス

2企業の誠実さ、製品・サービスの魅力をアピールするデザイン

誠実・信頼をイメージする配色を意識したり、
代表や社員の顔がわかる写真画像を載せることにより安心感を与えることができます。

アルファテックス株式会社

問い合わせにつなげたい場合はお問い合わせボタンをアクセントカラーに設定したり、
問い合わせフォームも設置し、フォームのデザインも丁寧に、理解しやすく、入力しやすいものにしましょう。

3優れた人材を獲得するために求職者にとって魅力的なデザイン

採用に力を入れたい場合は、求職者のニーズに合ったデザインを取り入れましょう。
企業の製品・サービスの利用者と、採用したい求職者の年齢層が違う場合や、
新卒採用に特化したサイトを設置したい場合などは、採用サイトを別で設けることも必要になってきます。

三井住友トラスト・ローン＆ファイナンス
 三井住友トラスト・ローン＆ファイナンス新卒採用サイト

ECサイトデザインの特徴

一言でECサイトといっても種類はさまざまで、
自社ECサイト、ショッピングモール型ECサイト、単品販売ECサイト、BtoB型ECサイトなどが一例です。
当記事では一般的な自社ECサイトを例に挙げております。

1商品が「売れる」デザイン

おしゃれなデザインだとしても、
情報が整理されておらず商品が選び辛かったり、
実際に使用する際のイメージがわかなかったり、
様々な問題でユーザーはサイトを見るのを途中でやめてしまいます。

ECサイトに限ったことではないですが、
ファーストビュー（ユーザーがサイトを訪問して最初に見る画面）が退屈なサイトではすぐユーザーに飽きられてしまいます。
セールのバナーや、魅力的な情報など、訪れたユーザーを立ち止まらせ、スクロールやページ遷移を促し商品購入まで導きます。

遷移した先でも、情報は簡潔にわかりやすく、
使用するイメージがしやすい商品画像を配置することが重要です。

2購入までの導線を意識したデザイン

ユーザーが購入を決めてからの流れも重要になってきます。

カートボタンのデザイン一つで、売り上げが左右されるとも言われています。
目立つカラーにするのも良いですが、サイトイメージを崩さない程度に。
デザインする上で以下のことを気にかけるようにしましょう。

「購入する」「カートに入れる」「商品をかごに入れる」など、テキストによっても
ユーザーの心理は左右されます。
商品、サービスに合った表現にして、クリックされやすくすることも大切です。

3商品に合ったトレンドをデザインに取り入れる

扱う商品に合わせてデザインの構成やトレンドをうまく取り入れる必要があります。
たとえば…

ファッション

BEAMS（ビームス）公式サイト

季節に合った商品を集めた特設ページが作られ、誘導バナーをスライドで配置。
着用モデルの写真が多く、シンプルでファッション誌のようなデザイン。

食品

松尾ジンギスカン　公式オンラインストア

新鮮で美味しそうに見える「シズル感」のある商品画像を多用。
調理中の様子や美味しそうに食べている人の写真を使用するのも◎。
食の安全という観点からスッキリとシンプルで清潔感のある色合いが多い。

家電

ヨドバシ.com
アイリスプラザ

商品点数の多さから、商品検索をしやすく、見つけやすいデザインが必須。
商品画像を細かく配置して、キャンペーンのバナーもチラシ風にデザインされている。
FVに検索ボックスは必須。カテゴリから探せるメニューがあるとなお良い。

ランディングページデザインの特徴

広告・宣伝を目的とした、1ページ完結型サイトです。
1つの商品・サービスを徹底的にPRします。

1縦長1ページで完結するデザイン

MDフラクションプラス(雪国まいたけ)
ClipLine サーベイ

1ページで完結するため、他のページへのリンクを置かないのでユーザーの離脱を防ぐことができます。
ECサイトと同様、FVからのCTAエリア（コンバージョンエリア）への誘導が重要。
売りたい商品・サービスの情報を1ページに詰め込むので縦長になるのが特徴です。

途中にCTAエリアをいくつか配置し（ページの長さにより変動）、
商品購入・問い合わせ内容の送信といった「行動喚起」（ユーザーに行動してもらうこと）を促します。

CTAエリアとは…？

CTAとは、「Call To Action」の略。
ユーザーがサイトを訪れた最終目的、まさに「ボタンを押す」エリアになります。
「コンバージョンエリア」とも呼ばれ、このボタンを押して購入、申し込み、またはお問い合わせフォームまで導くことがランディングページ最大のミッションなのです。

multibook（マルチブック） | 海外拠点管理に最適なクラウド型会計・ERPサービス

上記のランディングページでは、
「デモのリクエスト」「サービス資料ダウンロード」「見積もり依頼・問い合わせ」
をユーザーに促すことが目的であり、縦長のページの数か所にCTAエリアが設置されています。
ECサイトのカートボタンの説明でも触れましたが、
CTAエリアのボタンのテキストもユーザーが行動に移しやすい文言を考えて入れましょう。