ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  • WEBデザイン

動きのあるWEBページを制作する手法として、すっかり定番となったパララックス。「WEBサイト運営者必見!2015年のWEBデザイン、5つの大胆予測!」という以前の記事で、「パララックスがより洗練されて進化する」という予測をしましたが、実際に、使われ始めの頃のような派手なパララックスは少なくなり、より自然で高度な使い方のサイトが増えてきました。

そして今、パララックスの利用が特に目立つようになってきたのがLP(ランディングページ)です。そこで今回のWEBデザイン10選では、パララックスを使ったクオリティの高いLPをまとめてみました。

パララックスを効果的に使った、ハイクオリティのランディングページ

The COCA-COLA + RIEDEL GLASS

01 のコピー

http://cocacola.riedel.co.jp/

業種:食品

サイトの特徴:レスポンシブWebデザイン

コカ・コーラとワイングラスブランドのレーデルがコラボレーションして開発した、コカ・コーラ専用グラスのLPです。さりげないパララックス効果ですが、スクロールしていくとテンポよくコンテンツや画像が表示されるので、とても見やすくなっています。しかもレスポンシブWEBデザインになっており、スマホ画面でもしっかりとパララックスの効果が生きているクオリティの高いサイトです。

Machigaisha Select Shop カラマンシーポン酢

02 のコピー

http://theponz.asia/calamansi/

業種:食品

サイトの特徴:特徴的なイラスト

和歌山県橋本市の地域振興プロジェクト“まち会社DREAM HASHIMOTO 株式会社”が運営するセレクトショップ「Machigaisha Select Shop」で販売されている、フィリピンの柑橘系の実「カラマンシー」を使用したポン酢のLPです。イラストのキャラクターが可愛く特徴的。その雰囲気にあった動きがパララックスで表現されているため、とても印象に残りやすいLPになっています。最後の購入ボタンまでのストーリー全体の流れも、シンプルでわかりやすく編集されていて、食品のLPとして参考になります。

iichi ウェディング×ハンドメイド特集企画

03 のコピー

http://www.iichi.com/special/handmade-weddings

業種:ウェディング

サイトの特徴:イラスト

ハンドメイド作品のECサイト「iichi」のウェディング企画のLPです。結婚指輪やブーケなどのイメージ写真がパララックスでふわっと表示される作りになっており、サイト全体の柔らかな雰囲気に優しいニュアンスを添えています。手書き風のイラストにもパララックスが使われており、ハンドメイドらしい温もりを表現しています。

スカイガーデンヒル古田台

04 のコピー

http://www.soken-home.jp/hiroshima/info2/

業種:不動産販売

サイトの特徴:グリッドデザイン

眺望を売りにする高級戸建て住宅のモデルハウスを紹介するLPです。ページ全体を通して漂う、品の良さとクラス感。無駄のないグリッドデザインに、スクロールに合わせて物件写真や関連情報が浮かび上がるように表示される処理がとてもよくマッチしています。このようなちょっとした一工夫があるだけで、不動産のLPもクオリティが上がるという良い事例です。

iPhone 6(Plus)用完全防水ケーススリムダイバー

05 のコピー

http://www.mssjapan.jp/slimdiver/lp01/#1

業種:ガジェット販売

サイトの特徴:背景にフルスクリーンで画像を使用

スマホやタブレット関連のアクセサリを販売するECサイトのiPhoneケース販売用LPです。背景写真が表示された後、パララックスのアニメーションを使って、ケースを装着したiPhoneが時間差で登場。最初からiPhoneが表示されているのと、このようにスライドで後から表示されるのとでは大きく印象が違ってきます。背景にフルスクリーンで表示される写真も、ケースの特徴を伝えるのにぴったりと合っています。

メナード フェアルーセント

06 のコピー

http://www.menard.co.jp/fairlucent/lp/index.html

業種:美容

サイトの特徴:ワンカラムデザイン

美白ケアクリームのLPです。ワンカラムのとてもシンプルな作りのLPですが、各パートでアイキャッチの役割を果たすコピーや商品画像がパララックスで動きをつけて表示されるようになっているだけで、リズム良くページを読み進めていくことができます。ほんの少しの簡単なアニメーションがあるだけでも、WEBページでは非常に大きな効果があるということがわかります。

ダイビングショップ 大阪アズール

07 のコピー

https://www.azu-l.com/campaign/

業種:スポーツ

サイトの特徴:レスポンシブWebデザイン

ダイビングスクールの女性の受講促進キャンペーンのLPです。パララックスの使い方としては、ポイントだけに適用したかなりシンプルなもの。しかし、スクロールするとメインビジュアルの女性2人がコンテンツの中に消えていくような作りでページが始まっていて、それがちょうどダイビングで海に潜っていくように見え、インパクトのあるファーストビューとなっています。かなり情報量の多いLPですが、レスポンシブWEBデザインになっていることにも注目です。

ENGAGE(エンゲージ)

08 のコピー

http://engage-marketing.jp/

業種:WEBマーケティング

サイトの特徴:フラットデザイン

マーケティング関連サービスのLPは数多くありますが、サービス内容を伝えるためにはどうしてもある程度のテキスト量が必要になり、他社との差別化を行うのが難しい分野です。そんな中にあってこのLPは、コンテンツごとのタイトルやチャートなどにアニメーションを付けることで、内容が理解しやすい構成になっています。印象的なファーストビューとダイナミックな動きのパララックスが、スピード感溢れる躍動的なビジネスを連想させ、お問い合わせまで一気に読み進めさせるパワーを持っています。

jQuery最高の教科書

09のコピー

http://jquery.shiftbrain.co.jp/

業種:書籍

サイトの特徴:レスポンシブWebデザイン

SHIFTBRAINが出版するjQueryのHow to本「jQuery最高の教科書」のLPです。背景画像とコンテンツがレイヤー状に重なって浮いているように見える、まさにパララックスの基本のような作りのページですが、細部まで丁寧に考えられており、非常に効果的な仕上がりになっています。シンプルでベーシックなページ構成でも、パララックスを上手く使えばここまで印象に残るページをつくることができる…そんな良い見本とも言えるLPです。

社長の志見える化プロジェクト

10 のコピー

http://www.web-consultants.jp/lp/kokorozashi/

業種:コンサルティング

サイトの特徴:ワンカラムデザイン

ベンチャー起業の採用を支援するコンサルティングサービスの営業用LPです。「社長の志見える化プロジェクト」というインパクトあるタイトル。そして、スクロールに合わせてパララックスで次々と表示されるメッセージ。これらを通して、ページ全体から熱さが伝わってくるようなLPです。多くの文字情報をうまく整理してビジュアル的に表現することで、メッセージのポイントをわかりやすくしているところも参考になります。

今回のまとめ

いかがでしたか?今回ご紹介したようなLPを見た後で、パララックスではないページを見ると、きっと物足りなく感じてしまうはず。業種や目的などによってある程度かたちが決まってしまうLPですが、このようにさりげなくパララックスを取り入れるだけでグッと差別化が図れます。もちろん、最後まで読み進めてもらい、コンバージョンを高めるためにも効果抜群。次のLP制作の時には、ぜひ参考にしてみてください!

<関連記事>

【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  8. 8

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  7. 7

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND