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エリアのボタンのテキストもユーザーが行動に移しやすい文言を考えて入れましょう。

3ページ内フォームを設置

ページ遷移による離脱を防ぐためにページ内に問い合わせ・購入フォームを設置しましょう。
離脱を防ぐため最初のフォーム内容は最低限の項目に絞り、「確認(商品の場合は支払い)」「送信(購入)」のフローチャートもわかりやすくデザインすること。

2共感喚起、不安・疑問を解消させるデザイン

ユーザーに共感してもらえるような悩み、疑問を投げかけ、商品・サービスの購入を促します。
もやもやした背景やエフェクトに、悩んでいるイラストや写真素材が使われます。
「こんなお悩みありませんか?」というランディングページでよく見るコピーを入れ
解決するストーリから申し込みボタンへと誘導しましょう。

4お客様の声

実際に購入・体験したお客様の声を集め掲載することにより、購買意欲を向上させる役割。
法人向けの場合は導入事例、サービスの場合はユーザーの声、施工事例などと表現されます。
顔写真つきで掲載されていると、ユーザーは安心して購入できるでしょう。

掲載するレビューも、実際に利用しているシーンを思い起こすようなリアリティのあるものを採用します。
例えばポジティブな感想一つでも…

『体調がよくなった。また購入したい。』

のような感想より、

『朝起きる時の目覚めが良いのと、1日の終わりに体力が残っているという感覚があります。引き続き飲んでいきたいと思っています。』

のような、具体的にどのように改善したか、
再度購入してユーザーが飲み続けていることがイメージできる内容のほうが
ユーザーの共感を得ることができます。

4Q&A

サービスや商品についての「よくある質問」をQ&A方式で掲載することにより、
より親切で信頼ができるサイトに感じられ、尚且つお問い合わせ対応を最小限に運営することも可能になります。

まとめ

いかがでしたでしょうか。
それぞれ違いがあるデザイン・レイアウト・構成ですが「売れる」デザインが作れなければ、Webデザイナーとしては食べていけません。
ここで言う「売れる」とは

  • コーポレートサイト

    企業のイメージアップ、商品・サービスへの問い合わせ、採用成果・効率のアップ

  • ECサイト

    商品の売り上げアップ

  • ランディングページ

    商品・サービスへの問い合わせ・申し込み・購入数のアップ

と言うことになります。

この春Webデザイナーになった皆さんには、
「きれい・丁寧なデザイン」も大事ですが、「売れる」を作れるデザイナーになってほしいと思っています。

FOLLOW US