忙しいデザイナーのための、ランディングページのデザイントレンドと事例集サイトまとめ

Webマーケティングをするなら、流行りのランディングページ（LP）デザインは常にチェックしておきたいものですよね。

今回は、近年のランディングページデザインによく見られるデザインパターンを3つ、実際のWebサイトを事例とともにご紹介します。

新たに制作する場合も、既存のランディングページを改善する場合も、この記事に登場する事例やデザイントレンドを参考にしてみてください。

2017年のLPデザイン3大トレンド

1. 斜めのレイアウト

画像が斜めに配置されているランディングページデザイン。マテリアルデザインの考え方が用いられていて、奥行きや躍動感を感じられるのが特徴です。垢抜けない印象のランディングページを改善する際に、ぜひ応用してほしいデザイントレンドです。

何より強く印象付けられるのが、斜めレイアウトの良いところ。直線のラインは視線を誘導させます。読ませたい文字に向かって線を引くようにするといいですね。

下の事例では、斜めに配置している図形に目がいくよう設計されています。

2. 波打つ曲線のデザイン

背景に波線がデザインされています。柔らかで親しみやすい印象を与えられるのが特徴。Google Homeなどのスマートスピーカーを代表する最新のデバイスのランディングページにも、曲線を取り入れたデザインが取り入れられています。

ページを何らかの線で二分するのは、ブランドのカラーを押し出しながらヘッダーやフッターの項目をわかりやすく表示させられるというメリットがあります。

下の事例では、

3. 境界線のない自由なデザイン

長い1ページの中で段階的に情報を示すタイプのランディングページ。縦長のディスプレイを備えたデバイスが普及し、流動的に閲覧できるデザインが流行。

このタイプのランディングページを作る際に気をつけなければならないのは、コンテンツの数をシンプルにしすぎないことです。CTAボタンまでの距離は、最低でも４スクロールくらい確保すると良いランディングページになるでしょう。

事例を眺めよう！ランディングページのギャラリーサイトまとめ

1. 検索機能の細かさがウリの『LP Adovance』

LP制作・Web広告に参考になるLPデザインまとめリンク集です。2018年3月時点のLP掲載数は637点。日本らしい、情報もりもりのランディングページ作成を検討しているなら、LP Adovanceがおすすめです。

売りたい商材別にタグがついているので、知りたいトレンド情報にも辿り着きやすいのが嬉しいポイント。色やメインビジュアルの指定もできます。

LP Adovanceを見る

2. 事例数の多さがウリの『LPアーカイブ』

2018年3月時点の登録LPデザイン数は9,797点。もうすぐ1万点を突破しますね。とにかくたくさんの事例をみて、ページデザインのヒントを得たい時におすすめ。PC用のデザインとモバイル用のデザインをワンクリックで切り替えられます。「fav」マークがついているので、人気のLPも一目でわかります。

LPアーカイブを見る

3. デモ画面の臨場感がウリの『ランディングページ集めました。』

筆者のイチオシまとめサイトです。掲載数は明示されていませんが、おそらく数千はあるでしょう。ブログ形式なので絞り込みは難しいものの、ランディングページに直接飛べるのがこのサイトの魅力。ワンクリックで、ブラウザいっぱいのLPが見られます。

画像化されたものよりも臨場感があるので、見ていて楽しい！

ランディングページ集めました。を見る

4. ホバーで詳細が見れる『Web Design Clip [L] 』

これまで紹介したサイトに比べ、見た目の美しいLPが多く集まっている印象のまとめサイトです。特徴的なのは、マウスカーソルをサムネイルに当てると詳細が浮かび上がること。タイトルやリンク、カテゴリーが見られます。

Web Design Clip [L]を見る

5. イケてるランディングページデザイン集めました

Web制作会社が運営するギャラリーサイト。色別、イメージ別、などのカテゴリでわかりやすく区別されています。本当に良質なページだけを集めてある印象。トレンドを抑えつつ、良いクリエイティブに触れたい人に、オススメのサイトです。

イケてるランディングページデザイン集めました　を見る

まだまだある！海外のLPデザイン事例集で一歩リードしよう！

斜めレイアウトを生かしたランディングページデザイン事例6選

波線を使ったランディングページデザイン事例6選

縦スクロール重視のランディングページデザイン事例9選

トレンドを知るには、事例を眺めるのが一番！

ランディングページの制作や、デザインを改善するときの参考に役立てて見てください。トレンド把握すると共に、ユーザーにとってどのように響くデザインであるのか、説明できるとクライアントへの説得もスムーズに行くはず！

（翻訳：Yuri Tanaka）