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

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

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

【WEBデザイン10選】クオリティの高い「レスポンシブLP」まとめ

  • WEBデザイン

もはやWEB制作手法の定番とも言える「レスポンシブWEBデザイン」。PCサイトもスマホサイトもまとめて制作・管理できるこの手法は、WEB閲覧のスマホシフトと連動して拡がってきました。そして今、この流れはLP(ランニングページ)の世界にも広がり始めています。

LPはグラフィカルで広告的な表現を使う場合が多いことなどもあって、あまりレスポンシブ向きとは言えないかもしれません。それでもレスポンシブ対応のLPの割合は確実に増えています。そこで今回は、今後さらに増えていくであろうレスポンシブLP制作時の参考になるような、クオリティの高いものを集めてご紹介したいと思います。

タニタ プレミアムブレンドコーヒー

img01 http://shop.tanita.co.jp/coffee/?utm_source=ec-top&utm_medium=banner

業種:食料品
サイトの目的:コーヒーの販促
サイトの特長:明確なキャッチコピーとイメージ写真を多く使ったわかりやすい構成

体脂肪計などでおなじみの「タニタ」が運営するタニタ食堂。そこで提供しているブレンドコーヒーを、オンライン販売するためのLPです。スマホでも見やすいモバイルファーストの1カラムデザインで作られており、情報量の多いページでありながら、デバイスを選ばず見やすい構成になっています。製品の特長がしっかりと伝わる内容になっており、コンテンツの編集面でも参考になります。

STYLE FREE チアシード&オオバコ

img02 http://www.itohkampo.co.jp/products/sp/stylefree/

業種:健康食品
サイトの目的:ダイエット食品の販促
サイトの特長:写真とイラストを使用。色使いが鮮やかで楽しそうな雰囲気

ダイエット食品のプロモーション、販売のためのLPです。写真の他、見出しや背景などにも画像が豊富に使われたページですが、PCとスマホで画像を切り替えるなどして上手く見せています。スマホでの閲覧時には、全体のスクロールが長くなりすぎないようにするためレシピ部分をアコーディオンメニューにするなど、デバイスごとのユーザビリティも十分に意識した作りになっています。

六甲バター × 第6回神戸マラソン スペシャルサイト

img03http://kobe-marathon-qbb.com/

業種:食品
サイトの目的:自社商品と神戸マラソンのプロモーション
サイトの特長:自社のキャラクターとイラストを使ったユーモラスな作り

QBBチーズのメーカー、六甲バターによる「神戸マラソン」協賛のプロモーションサイトです。自社キャラクターの「 Qちゃん」がマラソンをしながら、自社商品と神戸マラソンについて紹介していくという企画になっており、随所にアイデアが光ります。PCの大きな画面で見た時にも、スマホの小さな画面で見た時にも、それぞれの楽しさが感じられるページデザインに仕上がっています。

中古車買取り・査定 ビッグウェーブ

img04http://www.073.co.jp/

業種:車買取りディーラー
サイトの目的:車の買取り・査定のプロモーション
サイトの特長:グラフィカルで広告的な要素の強い作り

ほとんどのパーツが画像で作られていて、「まさに、これぞLP!」という雰囲気のページです。通常、このような画像パーツ中心のページはレスポンシブ対応でないことが多いのですが、このページは美しく滑らかにレスポンシブします。基本的には、PCとスマホで表示させる画像を切り替えることでこのような動きを実現しており、その手法面でも参考になります。

Linguage Speak おもてなし英会話

img05https://www.linguage.jp/lss/about_omotenashi/lp.html

業種:英会話
サイトの目的:英会話の会員獲得
サイトの特長:マルチデバイスで美しく見られるリキッドレイアウト

接客業に特化した英語が学べるSkype英会話レッスンのプロモーション用LPです。レスポンシブ対応の中には、決まったデバイスサイズにしか対応しておらず、それ以外のサイズでは少し切れてしまったり余白が多すぎたりするページも案外多いもの。しかし、このページは、リキッドレイアウトでどのサイズのデバイスで見ても美しく閲覧できるようになっています。レスポンシブの基本をきっちり抑えたページとしても、参考になる作りです。

ラクラク勤怠管理「シュキーン」

img06https://www.shukiin.com/lp/

業種:ITサービス
サイトの目的:勤怠管理システムのプロモーション
サイトの特長:スクロール時のアニメーションや、動画によるプロモーションも導入

「シュキーン導入」5つの理由という切り口で、勤怠管理システムの導入を促すLPです。すっきりとしたフラットデザインをベースに、キャッチーなアイコンなどが上手く使われており、見やすい作りになっています。レスポンシブ対応で頭を悩ませる表組みも、スマホ時は表示する項目数を減らすという方法で、ユーザーが見やすく使いやすいように配慮されています。時にはこのような割り切りも効果的だという良い見本にもなります。

GMOおみせアプリ

img07 https://gmo-app.jp/lp/beauty/

業種:ITサービス
サイトの目的:アプリのプロモーション
サイトの特長:課題解決型で訴求する魅力的なキャッチコピーのLP

店舗向け販促アプリの導入を促すLPです。フラットデザインを基調にして、クオリティの高いアイコンやイラストを使ったサイトで、今時のデザインテイストを上手く使っています。情報量が非常に多いため、一見スマホでは見づらい感じもするのですが、店舗が抱えている課題を最初に明確に打ち出し、それをこのアプリでどう解決できるのかを丁寧に説明していく流れになっているため、つい引き込まれてしまいます。編集の上手さでも参考になるLPです。

TUTUリゾートウエディング

img08http://www.resortwedding.net/lp/

業種:ウエディング
サイトの目的:リゾートウエディングのプロモーション
サイトの特長:ファーストビューに動画を使ったLP

PCからアクセスすると、美しい自然に囲まれたチャペルに新郎新婦が登場する動画がスタート。言葉では伝わりにくいリゾートウエディングの魅力がよく伝わってきます。しかしこのLPでは、タブレットやスマホでの閲覧時には動画ではなく静止の写真に切り替えています。この動画は、ある程度の大きさがなければ世界観が伝わりにくい内容でもあり、表示の速さなども考えて、あえて静止画像に置き替えたものと思われます。このような使い分けも、ケースバイケースで考えていくべき重要なポイントになりそうです。

JCS決済代行サービス

img09http://www.jcs-finance.co.jp/

業種:決済サービス
サイトの目的:エステサロン向けクレジットカード決済の導入
サイトの特長:ファーストビューに全面画像を使いインパクトのある仕上がりに

エステサロン向けにクレジットカード決済導入を促すLPです。メリットやサービスの説明、導入事例など、情報量の多い構成ですが、PCでもスマホでも見やすいように上手くデザインされています。問い合わせフォームのレスポンシブの挙動もわかりやすい作りになっているので、LPからの問い合わせを増やしたい場合の参考にしてもいいかもしれません。

タクシー利用に便利な「タプリカード」

img10 http://www.tapuri.co.jp/lp/160104/

業種:プリペイドカード
サイトの目的:プリペイドカードの販売
サイトの特長:キャラクターを使った楽しげな雰囲気と、動画の使用

タクシー用のプリペイドカード「タブリカード」の販促用LPです。怪獣たちのキャラクターがユニークなことや、スクロール時にアニメーション処理がされていることで、個性的なLPとなっています。プリペイドカードの具体的な説明には動画を使っているので、ページ全体がすっきり簡潔にまとまっており、スマホで見ても煩わしくないことも特徴です。

今回のまとめ

今回はさまざまなレスポンシブ対応のLPを見てきました。いかがだったでしょうか?レスポンシブLPは、ランディングページに必要なインパクトとレスポンシブ対応の挙動のスムーズさを同時に実現する必要があり、課題もいろいろあります。今回ご紹介した事例を、その解決のヒントにしていただければと思います。

また、レスポンシブ対応と合わせて、動画を使用したLPが増えているのもひとつの流れ。イメージ訴求や詳しい説明などに動画を上手く取り入れつつ、マルチデバイスに対応したLPが今後は増えて行く気がします。LPのデザインはまだまだ進化していきそうです!

<関連記事>
【WEBデザイン10選】効果的に動画を使ったキャンペーン、プロモーションサイトまとめ
WEBデザイン10選】出そろった2017年度新卒採用サイトから注目デザインを厳選!
【WEBデザイン10選】春間近!ピンク色を効果的に使ったサイトまとめ

seleQt

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

    わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!

  9. 9

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

  10. 10

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

総合

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  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