WEBサイトデザインとランディングページデザインの違いを考える

 

 

これまでにランディングページの制作についていくつか記事を書いてきましたが、

今回は、WEBサイトデザインとの違いという観点から考えてみたいと思います。

 

まず、WEBサイトとランディングページの違いを考える前に、この記事で指すWEBサイトについて大まかにですが、定義しておきたいと思います。

 

WEBサイトにも種類がたくさんがありますが、この記事では「ページ数が複数にわたるサイト」をWEBサイトとしておきます。

 

※たとえば、企業のオフィシャルサイト、商品サイト、ブランドサイト、採用サイト、キャンペーンサイトなどの「ページもの」のサイトです。

 

では、それぞれのデザインの違いを考えるにあたって、
WEBサイトとランディングページのそもそもの役割について整理したいと思います。

 

 

WEBサイトとランディングページの役割

 

【WEBサイト】→ ページが複数

 

・複数のページに遷移してもらいたい

 

・情報の網羅性が高く、ページごとに分類・整理された「カタログ的」な機能を持つ

 

【ランディングページ】→ 1ページ完結型

 

・縦長の1ページ完結型のため、下までスクロールしてもらいたい

 

・見せたい情報を絞って伝える広告的な機能を持つ

 

※他にもWEBサイトは、自然検索（SEO）で上位表示を目的とするものであることに対して、ランディングページはリスティング広告の受け皿となるページであるといった違いもあります。

 

図解するとこのようなイメージになります。

 

 

WEBサイトは、トップページを起点として、下層となるさまざまなページに遷移させるという特性があります。

 

そのため、ナビやトップページは別ページへと遷移させていくことを目的としてデザインされます。トップページは雑誌でいうところの見出し的な位置づけです。

 

対して、ランディングページは、1ページ完結型で、あえてリンクなどは貼らず、離脱されないようにユーザーのアクションを1ページに留めていく必要があります。

 

その理由としては、WEBサイトは、すでに何かの接点で、その企業なり商品なりを知っているユーザーがより具体的な情報を得るために訪れるものですが、その一方で、ランディングページは興味自体を喚起するための広告物だからだと思います。

 

そのため、別ページへよりアクションを促すというWEBサイトの特性と1ページでスクロールし続けてもらう（離脱させない）という真逆の考え方が必要となります。

 

それぞれの役割が異なれば、自ずとデザインの考え方も変わってきます。

実際に、WEBサイトとランディングページのデザインの考え方の違いを見ていきたいと思います。

 

 

WEBサイトとランディングページのデザインの違い

 

【WEBサイト】

 

・別ページへの誘導を明確にしたUIデザイン

 

・ページの量産を前提とした明確なルール設定

　レイアウト・見出し・カラー・フォントサイズなどの統一

 

【ランディングページ】

 

・スクロールし続けてもらうための飽きないデザイン

　＝ジャンプ率の高いレイアウトやフォントデザイン

 

・コンバージョンを狙ったUIデザイン

 

 

大まかな考え方としてWEBサイトデザインの場合は、一定のフォーマットを作成し、そのルールに従ってページを量産していくという考え方が主体になると思います。

 

ページが複数にわたるというその特性上、ルールを破ったデザインをしてしまうと、全体のバランスが取れないチグハグなものになってしまいます。

 

ランディングページデザインにおいてももちろんルールが必要なところもありますが、WEBサイトデザインに比べると、1ページ完結型のため、そこまで厳密なルールは必要としません。

 

興味を持ってスクロールをし続けてもらいたいのに、同じようなフォーマットのコンテンツが下まで続けば、当然ながら、飽きられてしまいます。

そのため、ランディングページデザインにおいては、意図して「崩したデザイン」が必要になってきます。

 

言い方を変えれば「ダイナミックで動きのあるデザイン」が必要ということになります。

 

なお、ダイナミックで動きのあるデザインとは、jsやアニメーションなどを駆使して、派手に動かすという意味ではありません。統一のルールで、フォーマット的なデザインにするのではなく、フォントの大小やレイアウトなど工夫することで、静的な中でも動きのあるような見た目のランディングページデザインにするという意味です。

 

例えば、次のような方法があります。

 

 

フォントサイズの大小にメリハリをつける

 

 

フォントサイズに差をつけるのは、単に見た目のインパクトを強くすることのみが目的でありません。ランディングページは縦に長いため、どうしても情報量が多くなりがちで、文章を読むことが面倒なユーザーもいるでしょう。そうしたユーザーに対して、「拾い読み」でも内容が分かるように強調箇所を目立たせるという狙いもあります。

 

 

背景写真を大きく配置する

 

 

背景写真の活用は、ランディングページ全体にリズムをもたらします。また、ワイドに写真を活用することで、見た目にも強い印象に残ります。ただし、そのことによって、写真に目がいきすぎてかえって内容が頭に入ってこない、あるいは、写真の上の文字が読みづらいなどの現象が起きないように配慮してデザインすることがポイントです。

 

 

コンテンツをランダムに配置する

 

 

縦に整然と並べることも一つの方法ですが、目線を左右に振るようにコンテンツを配置することで、動きのあるデザインになります。特に、一つのコンテンツの中で、特徴を3つから5つくらい並べたい時などは有効なレイアウトの組み方の一つです。

 

 

コンテンツごとにカラーを変えてメリハリをつける

 

 

背景色をコンテンツごとに変えることで、コンテンツの区切りが明確になります。また、全体として華やかなランディングページに仕上がります。注意点としては、あまりに多色になりすぎると内容を邪魔するデザインになってしまいがちなので、色数はある程度絞ることがポイントです。また、商材やユーザーの特性にも合わせて検討することが大切です。事例のような若い女性向けの商材であればより有効な方法と言えます。

 

意図的に見出しのデザインレベルを変える

 

 

WEBサイトデザインの定石でいけば、縦長に続くページであっても、コンテンツごとの見出しデザインは統一のルール（フォントサイズやカラー等）で行うと思います。ランディングページデザインにおいても、もちろんそのように統一のルールでデザインを行うケースもありますが、ランディングページが想定より長くなるような場合であったり、商材・対象としているユーザーのタイプなどに合わせて、あえて、見出しのデザインレベルを変えることがあります。

 

そのように、見出しのデザインレベルを変化させることで、単調なデザインにならずに、例えば、後半のコンテンツにスクロールした場合でも、見飽きないインパクトのあるデザインにすることができます。

 

 

上記のようにいくつか方法をあげてみましたが、他にも、LP全体を通じて、複数のフォントを使ってメリハリをつけるといった方法や、イラストを活用したり、グラフなどインフォグラフィックを活用して、見せ方に変化をつけるなどといった方法があります。

 

もちろん、メリハリや動きをつけようとして、あまりにルールを持たずにデザインしてしまうと統一感のないバラバラなイメージが伝わるランディングページになってしまいます。ですので、あらかじめ決め事をしておく必要もあります。

 

たとえば、以下のようなルール設定をしておくだけでもやりやすくなります。

 

☝︎使用する色数を決める。

＝メインカラーとサブカラーとコンバージョンカラーをあらかじめ決めておく。
参考：ランディングページのカラー戦略まとめ

 

☝︎メインで使うフォントとサブ的に使うフォントを決めておく。

 

☝︎和文フォントと英文フォントもルールを定める。

 

☝︎メインや見出しコピーの最大使用サイズを設定する。

 

☝︎ボディーコピーの最小使用サイズを設定する。

 

☝︎使用する写真のテイスト感を統一する。

 

これらの決めごとに沿っていくことで、統一感を持たせながら変化のあるランディングページのデザインを行っていくことが可能になります。

ただし、実際には統一感とダイナミックさを両立させるためには、多くの検証作業が必要になってくることも踏まえておきたいところです。

 

このようにランディングページのデザインは、WEBサイトのデザインと考え方が大きく異なってくる点があることがわかると思います。

 

あくまで役割の違いとしてデザインにも違いが出てくるということであり、どちらのデザインが優れているか優れていないかということではありません。
重要なことは、WEBサイトかランディングページによって力を入れるべきデザインのポイントが変わってくるということです。

 

WEBサイトデザインの場合は、トップページを主体としてデザインを行い、一定のルールを決めるまでに時間がかかるという大変さがあります。

 

一方で、ランディングページは、前述したようにある程度のルールを設けながらもそのランディングページや、各コンテンツに合わせた見せ方を都度都度ゼロベースで考えるという大変さがあります。

真っ白なキャンパスに、自由度の高いクリエイティブを作るこんでいくという作業ですので、自由度が高い分、商品やサービスの特性、閲覧するユーザーの特性にあわせて何が最適なのかを考えいく作業の難易度は、それなりに高いとも言えます。

 

WEBサイトとランディングページは、全く別ものという発想です。

それぞれ悩むポイントが異なります。

 

とはいえ、最近では、以前よりもWEBサイトとランディングページの垣根も低くなってきているようにも思います。

 

その背景は、オンライン広告を軸としたマーケティング上の競争も激化しているため、WEBサイトにも以前より広告的な役割がより期待されるようになってきており、従来のような2カラムのデザインも減ってきて、ワンカラムでデザインされたWEBサイトも増えてきています。

その分、目的とするページへとユーザーと誘導するために、コンテンツの見せ方もより工夫が必要になってきます。つまり、ジャンプ率が高いデザインが必要になってくるというところです。

 

ランディングページにおいても、1商品でつくったランディングページを複数商品でも展開したいということで、ランディングページが複合的に展開するランディングサイトといった新たな形態のランディングページも一部では出てきています。

※参考：ランディングページ一体型Webサイトの可能性

 

つまり、これからの広義のWEBデザインを考えるときに、WEBサイトをデザインする発想と、ランディングページをデザインする発想の両方の考え方を織り交ぜていくことも必要になってきているように感じます。

 

WEBサイトもランディングページもWEB上のページという特性上、成果を数値化しやすいもののため、今後もどんどんそういった考え方が必要になってくるかもしれません。

 

以上のように、今回はWEBサイトデザインとランディングページデザインの違いという観点から、考えてみました。

 

基本的な内容をこちらのページにもまとめてみました。

ランディングページとは？LP制作会社がまとめたランディングページの基礎情報まとめ