トレンドが知りたい！最新LPデザインは今までと何が違う？

LPのデザインに関して

2022.6.17

ファッションのトレンドが毎年のように変わるように、Webデザインのトレンドも毎年のように変わっていきます。

最新の情報を常に取り入れておくことがWeb制作で重要なポイントです。

2019年はどのようなデザインがLPに取り入れられているのか、詳しく解説します。

これまでのトレンド

Web広告が主要な広告媒体として選ばれるようになり、LPはもはや一般的なデザインとなっています。

そのため他の企業とどのようなポイントで差別化を図るかがデザイナーやディレクターの悩みの種でもあり、いち早くトレンドを取り入れたり、オリジナリティを演出することの重要性が求められています。

ここからは、これまでLPのデザインで多く取り入れられてきたデザインの一例をご紹介します。

スプリットスクリーンレイアウト

画面を中央や上下などで分割し、テキストとビジュアルのそれぞれを引き立たせるようにデザインする手法のことです。
「分割レイアウト」とも呼ばれ、LPで商材をアピールする際に効果的なデザインです。

商材やサービスによって対比させたい要素があったり、メインとサブでエリアを分けたいと思ったりしたときなどに利用します。
レスポンシブデザインとの相性が良く、今後導入しても問題のないデザインです。

ただし分割させる必要があるため、作業工程が増えてしまうデメリットもあります。
オリジナリティや商材をよりアピールできるデザインなため、こだわりを持ったデザインにしたいなら取り入れるべき手法の一つです。

タイポグラフィ

画像やビジュアルに注目されるLPの中で、テキスト部分注目を置いたデザイン手法です。
文字を美しく見せられるように、フォントやカラーを替えたり、陰影や動きをつけて目立たせたりすることができます。
LP全体のバランスを考えながらデザインする必要があるため、難易度の高い手法です。
過度に装飾させてしまうと視認性が低下してしまうこともありますが、取り入れることで洗練された印象を与えることができます。

2019年のトレンドデザイン3選

ミニマルデザイン

必要最低限の要素だけを取り入れて、全体をシンプルかつ洗練されたイメージを与えてくれる最新のデザインです。
内容を絞るため、商材の魅力がアピールしやすい特徴があり、ユーザーにとっても視認性の高いページになります。
どんな商材やサービスでも活用でき、流行り廃りに関係なく長く取り入れられるので導入するメリットが多いデザインです。

フラットデザイン2.0

UIに優れたシンプルなデザインです。
従来までシンプルなデザインで目立ちにくかったコンバージョンボタンなどのデザインをドロップシャドウなどで陰影をつけて、視認性を向上させます。

また、自然な流れでコンバージョンへと誘導できるデザインとして注目を集めています。
全体は平面的なデザインで、ボタンや目立たせたい部分に立体感をつけて演出します。
色を豊富に使うことで鮮やかな全体図にし、レスポンシブデザインとも相性の良いデザインです。

モバイルファースト

スマートフォン、iPad、PCなどさまざまなデバイスの登場により、レスポンシブデザインへの対応が急がれています。
アクセス数が増えれば単純にコンバージョンへと繋がる確立も増加するため、各デバイスに対応したデザインを制作する必要があります。
その中でもスマートフォンでの閲覧ユーザーが大幅に増加しているため、スマートフォンを優先としたデザインが注目されています。
また、アクセス解析を行い、もっとも閲覧されているデバイスを調査することが重要です。

zoom_in画像クリックで拡大

制作費用はこちら

スプリットスクリーンとは？

ここまで、これまでのトレンドデザインについて紹介しましたが、その中でもおすすめなのはスプリットスクリーンデザインです。

スプリットスクリーンとは、1つの面を複数に分割したレイアウトのことを指します。
このデザインを活用すると、異なる要素を上下左右に表示させることで、対比を際立たせられます。

近年では多くのサイトがスプリットスクリーンを導入しており、一般的に活用されているのは、メインの画面とサブの画面の2つにデザインを持つ方法です。
アニメーションやスクロール要素などを取り入れると、さらにパーツを引き立たせ、独創的で魅力的なサイトに仕上がります。
では、スプリットスクリーンデザインにはどのようなメリットがあるのでしょうか。

コントラストを際立たせられる

上記でご紹介したように、スプリットスクリーンの魅力は画面を分割して、2つの要素を対比することです。
例えば、左右に画面を分割すると、画面中央が明確な境界線になります。
フォントや背景の色も左右で変えると、1つの画面に2つの異なる世界を演出できます。

レスポンシブデザインにも対応可能

近年はパソコンよりスマートフォンで何かを調べることが多いのではないでしょうか。
SEO対策を取るためにも、ユーザーの利用するデバイスに合わせてレイアウトを最適化するデザイン、つまりレスポンシブデザインが欠かせないものとなってきました。

独創的なサイトを作れる

従来の一画面のウェブサイトでは、コンテンツは上から下へと順番に表示されていました。
つまり、読み進めると上の方に書かれていた情報が見えなくなってしまうというデメリットが発生してしまうのです。

そこでスプリットスクリーンデザインが活用されると、一度にたくさんの情報を確認できます。
例えば、片方の画面にアニメーションを配置したり、片方は固定して、もう片方はスクロールできるようになったりします。
さらに、これまでの発想にはなかったオリジナリティの高いサイトをデザインできます。

スプリットスクリーンの作り方

ここまで、スプリットスクリーンについてご紹介しました。
ここからは、スプリットスクリーンの作り方についてご紹介します。
「人気のあるデザインなのか」、「ターゲッティングやウェブサイトにあっているのか」などを考える必要があります。
では、スプリットスクリーンを作るには、どうすれば良いのでしょうか。

まずは、フォントと色を決めましょう。
スプリットスクリーンデザインは、画面を2つに分割して個性的なフォントと組み合わせたり、伝えたいメッセージを強調できたりします。
そのため、「どうすれば相手に伝わるのか」「どの色が目を惹くのか」などを考慮した上でフォントと色を決めることをおすすめします。
左右異なるフォントや色を用いれば、異なる世界観が1つの画面に集まった様子を表現できます。

次に、CTAボタンに注目してもらえるデザインにしましょう。
スプリットスクリーンデザインでは、左右共通で1つだけ目立つ色を選択したり、適度な余白を配置したりすることでCTAボタンに注目を集めやすくなります。
また、左右共通の1色をブランドカラーに選ぶと、さらに強いメッセージを表現できます。

最後に、アニメーションを取り入れましょう。
「全てのアニメーションが見れるまで見続けよう」とした経験はありませんか。
そのように、ユーザーはアニメーションが1周するまで離脱し続けづらいという特徴があります。

そのため、スプリットスクリーンデザインを用いるのであれば、1つの画面でプロモーションアニメを流し、もう片方の画面で商品説明やCTAボタンを配置することをおすすめします。
そうすることで、ユーザーのアクションを促しやすくなります。