スマホから見やすい!LP事例10選

プレスリリース発表元企業:株式会社ヘリオス

配信日時: 2020-12-28 10:00:00




スマートフォンからWEBサイトを見るという方の割合がかなり多くなってきたと言われている昨今、LP(ランディングページ)をつくる際に、スマホからの見え方を気にしない訳にはいきません。また、スマホからの見え方がよくないと、LPの重要な役割であるページビューやクリック率、申込率などが下がってしまうことにつながります。見やすいスマホのLPデザインとは一体どんなものなのでしょうか?スマホからも見やすいと感じたLPを10サイト選んでみました。


画像 : https://newscast.jp/attachments/BC0GQjCnFA18UPM3tl86.jpg


ウンナナクール×クレンマ コラボキャンペーン


画像 : https://newscast.jp/attachments/j12nUkctWEkASGUnFZao.jpg


出典:ウンナナクール×クレンマ
「ワコール」から生まれた下着屋さんである「ウンナナクール」と、ニッポンハムグループの日本ルナ株式会社、ギリシャヨーグルトメーカーの「クレンマ」のコラボレーションが実現。新作デザインのパジャマとお揃いデザインの限定ヨーグルトが登場しました。
このコラボを記念したプレゼントキャンペーンのスマホ版LPでは、プレゼントの内容と、インスタでの応募手順が縦にスッキリとわかりやすく掲載されています。スマホからも見やすい構成になっていて、デザインも最適化されているのでとてもスッキリと見え、応募もしやすいLPです。


ロート製薬 リップザカラー


画像 : https://newscast.jp/attachments/UN0ffx3bXvnNO90akhSM.gif


出典:リップザカラー
「口紅よりもカジュアルで、色付きリップよりも大人っぽい」をコンセプトに誕生したリップザカラー。Amazonリップティントランキング1位を獲得したこともある、人気アイテムのLPです。
冒頭に印象的な赤いリップを付けたタレントさんのお写真を配置、その下に「コンセプト」「特長」「商品情報」「ムービー」と4つのみに絞ったメニューが大きく配置されています。またそのさらに下には、製品のアピールポイントが写真と文字でスマホからも見やすいデザインで紹介されています。
全体デザインが美しく、印象に残るスマホ版LPデザインとなっています。


味の素株式会社 味の素KK中華だしシリーズ


画像 : https://newscast.jp/attachments/AKLy0UR3lWOOLB2iQpNZ.jpg


出典:味の素株式会社 味の素KK中華だしシリーズ
「あんなときにもこんなときにもどんなときにも味の素kk中華だしシリーズ」がキャッチコピー。中華だしシリーズを使ったレシピが紹介されているLPです。
「こんな時はどうやってつくるの?」というシチュエーション別にコミカルな漫画とお料理の写真で、つくる方法が解説されています。ページ上部にあつめられたメニューが、スマホからもタッチしやすい、閲覧しやすい印象を与えています。


エンジニア女子になろう!ヒューマンアカデミー プログラミング講座


画像 : https://newscast.jp/attachments/o7crWaWaPcXIiVvDZZGj.jpg


出典:ヒューマンアカデミー
いまニーズが出てきているエンジニア女子。高収入で手に職が持てる事と、女性ならではのコミュニケーションやきめ細やかな対応が重宝されるという事で、女性志望者も増えているそうです。
ヒューマンアカデミーではJAVAプログラミング講座などを多数用意。女性向けのピンクを基調としたスマホ版LPは、講座の価格、期間、内容が完結にまとめられていて、資料請求や体験も大きなボタンでわかりやすく、スマホからもすぐにアクションがとりやすい構成となっています。


旅茶列島シリーズを買って福岡ソフトバンクホークスを応援しよう


画像 : https://newscast.jp/attachments/802k8LxJjbXO1K7Fsy8l.jpg


出典:ポッカサッポロ
ポッカサッポロの旅茶列島シリーズを3本飲んで応募すると、福岡ソフトバンクホークスのファンイベントのチケットなどが当たるプレゼントキャンペーンのLPです。
このキャンペーンは対象商品を購入しなければ応募できませんが、対象商品のペットボトルが、スマホからでもとてもわかりやすく表示されています。一目見ればプレゼント対象か否かがわかるので、店頭でサッとチェックするときにも便利なスマホ版LPデザインです。


新しい備災の形「備え梅」


画像 : https://newscast.jp/attachments/n3ECrYY5U53OllddeUua.jpg


出典:備え梅
「次の震災に備える」をテーマに掲げた新しい備災の形としての提案、「備え梅」。災害が起こると、救援物資が分配されるまでに72時間かかると言われていますが、その間の備えとしての梅を販売しています。
備え梅は無添加にもかかわらず賞味期限が3年間。個別包装で持ち歩きもでき、備蓄にも適しているという優れものです。夏の暑い時期であれば熱中症対策にもなるでしょう。
パソコン向けデザインと大きく印象が変わることはないスマホ版でも、備え梅がどんなものであるかということと、購入方法が美しい写真とともに見やすく配置されています。


行こう!JCBと世界へキャンペーン


画像 : https://newscast.jp/attachments/qOFjM2Pe1gfEkJn2cyUT.jpg


出典:JCB
JCBカードユーザーが海外旅行の際に利用できるサービスなどがまとめられたLP。ブラックとイエローのはっきりとしたコントラストで屋外でも見やすいデザインになっています。
JCBプラザやコールセンター、Wifi、優待ガイドなどの便利なサービスが項目ごとにボックスボタンでまとまっているので、旅先でも困ることなく目的のサービスに行きつきやすい、ユーザビリティが考慮されたスマホ版LPデザインです。


美容液ヘアケアブランドLustique(ラスティーク)


画像 : https://newscast.jp/attachments/hyJGfDeZWEVqEx8TaUWG.jpg


出典:ラスティーク
インスタで話題の美容液ヘアケアブランドのページ。「美容液で髪を浸す」「洗い流さないヘアケア」をコンセプトに、何度も触りたくなる美髪へ導く製品を販売中。
こちらは写真や文言要素がスマホ版にしては多く入っていますが、ゴチャゴチャした印象はなく、美しいデザインが施されているため気になりません。高級感あふれるLPデザインとなっているのは製品の特性ともマッチしています。
使い方や成分内容もスマホ版でもしっかり説明されているので、LPの最後まで目を通すと納得の上の購入につながりやすいでしょう。


福岡のパワースポットをめぐる1泊2日のモデルコース


画像 : https://newscast.jp/attachments/ACt8DcqiaontJRC4W36i.jpg


出典:西日本旅客鉄道株式会社
西日本旅客鉄道株式会社が送る、1泊2日で行く福岡・宗像と福津の旅の紹介LP。「福をもらいにでかけませんか?」がキャッチフレーズです。
新大阪から福岡までのモデルプランがイラスト付きで紹介されており、所要時間もイラストとともにわかりやすく表記されています。旅の楽しみ方やお土産、マップなどもスマホ版にもきちんと表示がされていて、どれも見やすいです。
LP最後には新幹線とレンタカーの予約がWEBからお得にできるページへ誘導されています。ちょっとした旅行ガイドページですが、イラストもキュートで写真も素晴らしく、見ているだけでほっこりするようなLPです。


明治 アーモンド&マカダミアを買ってプレゼントを当てよう


画像 : https://newscast.jp/attachments/w6UtfhGZNPrqoM2wLcd3.jpg


出典:明治
明治の「アーモンドチョコレート」「マカダミアチョコレート」シリーズの購入者を対象に、Chocomoo(チョコムー)オシャレデザインラグタオルなどが総計1,000名様に当たるキャンペーンを実施中。
このLPで特筆すべきは、中央に動画を配置していることです。もちろんスマホからでも閲覧可能です。Chocomooさんがイラストを描いていく様がわかって、プレゼントがよりほしくなること間違いありません!
全体的に、コラボパッケージにも使われているChocomooさんのイラストが多く使われているのでとてもポップな印象。応募はがきのダウンロードなども簡単にできるようになっています。


終わりに
スマホから見やすいと感じたサイトを10サイトご紹介しました。共通するのはスッキリとし、ごちゃごちゃしすぎていないデザインという点です。
スマホは大画面化の傾向にはありますが、パソコンと比べれば画面の大きさは小さく、画面に入る文字や要素に限界があります。なるべくLPの要点をまとめ、情報を整理し、少なくした上で掲載することが重要となるでしょう。
またスマホ版LPにも動画を使用するページが増えてきています。画面のサイズ、情報量が限られるスマホ版LPでは、今後、動画使用も重要なLP差別化のポイントとなっていくかもしれません。
スマホ・タブレットにも対応したLPはbananawebにおまかせ!


今人気のランディングページでホームページ制作【banana web】 : https://www.bananaweb.jp/




詳細はこちら
プレスリリース提供元:@Press