yup

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

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

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

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

1. 斜めのレイアウト

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

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

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

Baianat

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

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

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

下の事例では、

Search that scales with your SaaS business | Algolia | Algolia

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

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

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

Intercom on Customer Support book

 

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

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

LP adovanceの事例

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

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

LP Adovanceを見る

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

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選

Perspective

Scaphold | GraphQL Backend as a Service

Webflow Interactions 2.0

Scale

stripe

 

 

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

Freelance Management Platform — Bonsai

Recruitz.io | Next-gen job advertising

Jelly — Google Home

Mimo — Learn how to code on your phone

Scale — API For Human Labor

Gasket — Connect your Sheets

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

WWDC — Apple Developer

Mirror Conf 2017: a design and front-end development conference

Enterprise Grid

Glyph — Super simple resumes

 

Intercom | Message Your Customers

WeDo: Make life easy

Dropbox

Pocket Penguins

Seedlip

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

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

(翻訳:Yuri Tanaka)


新しい働き方にチャレンジしたいあなたへ

「フリーランスとして働いているけど、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」

新しい働き方が加速する今こそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workshipをのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 公開中の募集のうち56%がリモートOKのお仕事
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ