LPのデザインの参考になるポートフォリオサイト6選といいデザインの見極め方

CXBOTTLE編集部
386

LPの制作 まずは、参考にするデザインを見つけるところから

あなたがこれからはじめてLP制作に取り組むとしたら、おそらく「どんなLPにしたらよいか」というデザインの壁にぶつかることになるでしょう。慣れていない人は毎回のように頭を悩ませているのではないでしょうか。

日常生活で他社のLPをいくつも見ているはずなのに、自分がLPを作る側になるととたんに案が浮かばなくなるというのはよくあるパターンです。

LPはたった1ページとはいえ、コンバージョンさせることに特化した内容であることから、制作の流れをしっかりと押さえておく必要があります。また、商材ごとにLPのデザインは大きく異なるため、普段から「仕事の視点で」LPのデザインをたくさん見ておくことも重要です。

ただし、見映えばかりに傾倒するとコンバージョンのことを忘れやすくなります。LPの目的を見失わないようにしてください。

本記事では、UXデザイナーにとって参考になりそうなページを紹介しながら、どの要素を加えると見た目もよくCVRの高いLPを作れるかを解説します。

【パソコン】LPデザインの参考になるおすすめポートフォリオサイト

WebDesignClip

https://lp.webdesignclip.com/

Web Design Clipは、さまざまなLPのデザインを見ることのできるリンク集です。掲載されているスクリーンショットはパソコンで見やすい大きさになっているので、一つひとつクリックしなくても全体を確認できます。

更新頻度も高く、トレンドを押さえられるというのも大きなポイントでしょう。参考サイトとしては申し分ありません。

なお、LP以外にもスマホサイトや海外のWebサイトも網羅しているので、できるだけ多くのLPを見たい人におすすめです。

LPアーカイブ

https://rdlp.jp/lp-archive

LPアーカイブは、豊富なLPをカラー・カテゴリ・サイトイメージ・PC/スマホとさまざまな条件から絞り込んでチェックできるサイトです。その数なんと19,992サイト(2020年8月27日現在)。

さらに登録の日付やお気に入りされた数の順で並び替えることもでき、トレンドだけでなく人気のデザインもわかります。お気に入り機能は、LPデザインを考える上でとても参考になるのではないでしょうか。業界を指定することができるため、競合のLPを知りたい場合やすでにペルソナが決まっている場合はLPアーカイブをおすすめします。

SANKOU!ランディングページ

https://sankoudesign.com/category/lp/

SANKOU!ランディングページも、LPアーカイブと同様に商材やイメージ、カラーリングで絞り込めるほか、「動きのあるページ」「ストーリー性がある」といったサイト構成でもカテゴリ分けされているという特徴があります。

LPアーカイブよりも曖昧な条件で検索できるので、なんとなくイメージはあるけれどうまくチームに伝えられないというようなときにはこのサイトからピックアップをすると、うまく意思の疎通が図れるでしょう。

イケてるランディングページ集めてみました。

https://zero-s.jp/lp-media/

こちらもイメージや商材からLPを絞り込めるサイトです。大手企業のLPが散見されますね。ただし更新が2017年4月でストップしているようなので、前項で紹介したサイトでは物足りない場合や、あえて少し前のトレンドに遡りたいというときには参考にしてみてもよいかもしれません。

LP幹事

https://lp-kanji.com/

LP幹事は他のサイトと同様、業界や色、イメージで絞り込めるほか、動画のLPにも力を入れている点が特徴のまとめサイトです。

今やPCだけでなくスマホでも使われるようになった動画の埋め込みは、テキストだけでは伝わりにくい魅力を圧倒的な情報量で伝えることができるというメリットがあるため、商材や予算、制作能力に応じてぜひ検討したいところです。

掲載数も2,500件以上と多く、着想を得る際に役立つサイトでしょう。

【スマホ】LPデザインの参考になるおすすめポートフォリオサイト

優れたiPhoneデザインサイト iPhoneデザインボックス

http://design.web-hon.com/?paged=2

本サイトはタイトルの通りiPhone(Safari)で閲覧したLPのポートフォリオサイトです。iPhoneからのファーストビューを一覧で見られるのでファーストインプレッションの参考になりますね。また、スマホサイトを作成する際の小ネタ集もいくつか掲載されています。

縦長のページデザイン 集めました

https://e-32.net/

こちらはLPだけではないのですが、縦長のLPはCVRが高いとされていることから注目されているまとめサイトです。ページ内でひとつのストーリーが作られている場合は縦長のサイトがマッチするので、高度なデザインの参考にする際はとても向いています。

【海外】LPデザインの参考になるおすすめポートフォリオサイト

Landingfolio

https://www.landingfolio.com

Landingfolioは世界のトレンドを知ることのできるLPまとめサイトです。英語が苦手な方でも絞り込み条件の「CATEGORIES(カテゴリー)」「COLORS(カラー)」「DEVICE(デバイス)」という言葉は日本でも使われるのでおそらく直感的に検索できるでしょう。

デバイスとあるとおりPCとスマホの両方に対応しているのでこのサイトだけでかなり多くのサイトを網羅できるはずです。また会員登録するとLPの保存(お気に入り登録)もでき、更新頻度も高いので、ぜひ定期的にチェックすることをおすすめします。

One Page Love

https://onepagelove.com/

こちらはカテゴリに絵文字を用いておりやはり英語が苦手な方でもわかりやすい海外の1カラムページまとめサイトです。このサイトではかなり尖ったデザインが揃っているので、見た目のトレンドを押さえておきたい方には特に参考になるでしょう。

LPのデザインにこだわりたいあなたがより効果的なLPを作る方法

LPとは、デザインをほんの少し要素を変えるだけでも大きくCVが向上します。

例えば米国のオバマ大統領陣営が運営するLPでは、大統領選挙で使用したLPにてCTAのデザインを変えたところ、6,000万ドルの追加献金に成功したという事例があります。1ページでコンバージョンに特化したLPでは、デザインを最適化することでターゲットにより効率的に訴求できるようになるため、コンバージョンに寄与しやすいのです。

ここからは、デザインに使えそうなサイトを紹介しつつ、LPO(ランディングページ最適化)の視点から効果的なLPデザインや現状のLPを改善する方法をご紹介します。なお、LPOについてはこちらの記事でも解説していますのであわせてご覧ください。

https://cxbottle.com/users/cxeditor01/C19jNGe0LUjxIImL5GKO

CVRの高いLPデザインの特徴とは?

デザインを届けたいペルソナがはっきりしている

LPに限らずマーケティング施策における鉄板でもありますが、高いCVRを叩き出すLPでは年齢や性別、職業や居住地、趣味嗜好などが具体的に定まっている、つまりペルソナがはっきりしていることが多いという特徴があります。

ペルソナの詳しい解説については割愛しますが、例を挙げるとするならば雑誌の「Vivi(10代後半から20代のガーリーな女性がターゲット)」と「anan(20代前半から30代前半のOLがターゲット)」のようなものですね。

つまり、ペルソナによって雑誌のデザインや組まれる記事の内容が大きく異なるように、LPでもペルソナによってデザインやテキストが変わってくるというわけです。購入する人が「どのような属性を持った人か」をしっかりと決めた上でLPのデザインを検討しましょう。

ペルソナと商品のカスタマージャーニーがしっかりしている

ペルソナを設計することで「(商品を)誰に届けるか」がはっきりしますが、次はペルソナを商品へ導くための「カスタマージャーニー」を設計します。カスタマージャーニーもマーケティングでしばしば用いられる概念なので押さえておいてください。

ペルソナが商品を購入するまでのプロセス(カスタマージャーニー)を見える化することでLPのストーリーも絞られていくでしょう。見た目もそうですがコピーにも影響する部分です。

ペルソナに刺さるフォントを設定している

デザイナー出身でないとひょっとしたらピンとこないかもしれませんね。フォント(書体)は読みやすさやイメージを左右するものです。例えば「明朝体」は「硬質」や「真面目」という印象を与えやすく、「ゴシック体」は「やわらかい」「親しみやすい」という印象を与えやすいとされています。

無料の日本語フォントをまとめているFONT FREEを見てみるとよく実感できるでしょう。LPのフォントも商材やペルソナに合わせて設定すべきですが、フォントは無料と有料、さらに商用可否がそれぞれ決められているため、あわせて確認しながら選んでみてください。

https://fontfree.me/

CTAボタンが適切

https://www.ac-illust.com/

購入や資料請求、会員登録やお問い合わせを促すCTAボタンをリッチにすることも効果的です。ボタンに矢印を加えるだけでも動線がわかりやすくなるためCVRが向上することもあります。こうしたボタンやアイコンは「道路標識」と捉えるとイメージやすいかもしれません。

ペルソナに合った配色をしている

フォントだけでなく配色もイメージを伝えるために重要な要素です。一般に女性向けは薄く淡い配色、男性向けは濃い色彩の配色が好まれるとされています。

また、原色を用いなくても高級感や重厚感は黒、すっきり感や清潔感は白で演出できるほか、ここにワンポイントで赤や青を入れるだけで強調ができたりと、カラーリングは細かな部分までこだわるべき部分です。

適切な配色を行うために、メインカラー、ベースカラー、アクセントカラーをうまく活用してみてください。配色については以下のサイトを参考にするとよいでしょう。

https://colorhunt.co/ 

画像の挿入方法が適切

画像はテキストよりも情報量が多く、一瞬で直感的に内容を理解できるメリットがあります。また長いテキストで説明するより、図解化したほうがわかりやすくなる場合も多々あるでしょう。

なお、人間の画像をLPに挿入するとユーザーはその目線の先を追いやすいとされており、示したい部分を強調させたい場合に有効です。

Webマーケティングの観点から見たLPデザインの注意点

画像や図の文章部分はテキストで書こう

画像の中にテキストを埋め込む(テキストを画像化する)と、SEO対策の観点で不十分です。テキストは画像と別に挿入することで、ユーザーだけでなくGoogleにも評価されるLPとなります(なお画像にはalt属性を加えておきましょう)。

デザインもだけどキャッチコピーも改善してみて

LPのデザインを変更するのはやや手間になりますが、キャッチコピーを変更するのもひとつの手であり、デザインよりも少ない手間で実施できる改善策です。

キャッチコピーはサイトを訪れて最初に目にする情報であり、デザインと同等か場合によってはそれ以上にコンバージョンを左右する要素でもあります。キャッチコピーが設定したペルソナに刺さっているかどうかも検討してみてください。

A/BテストをすることでLPデザインの効果を確かめよう

キャッチコピーを変えたりCTAボタンを変えたりなどLPの要素を部分的に変更した場合は、差分をチェックするためのA/Bテストが有効です。LPOツールにはA/Bテストを簡単に実行できるものがあるので、活用するとよいでしょう。

LPOツールに関してはこちらで紹介しています。無料ツールもあるのですぐに始められますよ。

https://cxbottle.com/users/cxeditor01/CT6Gza9ytIuAS23ay1nD

まとめ

「売れるLP」づくりのためには、よいデザインは必須です。「デザイン」は単なる見映えのよさだけを指しているというわけでありません。

ユーザビリティを高め、ユーザーに刺さる見た目もデザインと呼びます。すなわち、デザインもマーケティング施策の一種ということですね。デザインをHackすることがCVR向上の秘訣です!

記事スコア: 386

CXBOTTLE編集部の他の記事も読む

  • LPとは?運用のメリットとデメリット・特徴などを細かく解説!

    LPとはLPとは、ランディングページのことを指しています。ランディングページとは、検索結果や広告からの訪問者が最初にアクセスするページのことを言います。ちなみに、着地する(land)という意味からこの名前がついています。LPには、広義の意味合いと狭義の意味合い 続きを読む

  • プロセスマネジメントの意味|導入する利点や結果を出すコツとは?

    プロセスマネジメントの意味「プロセスマネジメント」という言葉をよく耳にすることでしょう。プロセスマネジメントは、結果を最大化させると言われています。このコラムではプロセスマネジメントの基本について解説し、その成功事例を紹介します。プロセスマネジメントが必要な理 続きを読む

  • LPの制作会社おすすめ12選|メリットやデメリット・依頼時の注意点を紹介!

    LP(ランディングページ)とは?LP(ランディングページ)は、もともと検索や広告経由で最初に見るページで、ホームページに着地するイメージからこのように呼ばれるようになりました。しかし、一般的には、縦長の情報量が多いページのことをLPと呼ぶことが多いです。商品の 続きを読む

  • LPの作り方の8つの手順とは?構成の要素や注意したいポイントも解説

    LPとはどのようなものかLP(ランディングページ)とは、集客を目的とした縦長1枚で完結するWebページのことです。Webページと聞くと、「TOPページ」「会社概要」「商品紹介 」「問い合わせ」等、複数のページから成るホームページを連想する方も多いでしょうが、そ 続きを読む

  • デザインの参考になるギャラリーサイト16選│自社にぴったりなLPの作り方も

    自社にぴったりなLPを作成する4つのコツLPとはランディングページのことです。最初にユーザーがアクセスするため、直訳すると着地ページという意味になります。サイトの顔となるLPは自社商品やサービスの特徴や利点が伝わりやすく、ユーザーの心をつかむデザインにするのが 続きを読む

  • 参考にしたいWebデザインのポートフォリオ22選|作成のポイントも詳しく説明

    WebデザインのポートフォリオとはWebデザインのポートフォリオとは、過去の作品を集めたWebサイト・ファイルのことを指します。自分の感性や個性をアピールすることも可能です。具体的には、クラウドソーシングで受注した案件や企業で残した実績を掲載します。ポートフォ 続きを読む

  • おすすめWebデザインのテンプレート41選|無料と有料のものを幅広く紹介

    Webデザインのテンプレートとは?Webデザインのテンプレートとは、Webサイトのデザインやレイアウトの雛形のことです。サイトの用途や予算に合わせた、様々なテーマやパッケージのものが販売されており、未経験者でも簡単に自分のサイトを作成できます。しかし、ひとくち 続きを読む

  • 無料で使えるWebデザインツール11選!選ぶ際のチェックリストも紹介

    Webデザインとは?Webデザインは、Web上に存在するホームページを制作することを意味します。他のデザインの仕事とは違い、Webデザインにはデザインだけではなくホームページとして表示するためのコーディングが必要です。Webをデザインするときは、コーディングを 続きを読む

  • Webデザイン業務が副業におすすめな8つの理由|在宅で副収入を得よう

    副業フリーランスの市場規模企業の副業解禁にも相まって、副業フリーランスの市場規模は、年々増えています。2020年に発生したコロナウイルスの発生も相まって、ここ数年で人々の働き方に対する意識が大幅に変化しました。また、ランサーズによる、フリーランス・副業・複業ワ 続きを読む

  • Webデザインの参考になるサイト37選|流行りのデザインの動向についても解説

    Webデザインの幅を広げる方法とはWebサイトを作る上でWebデザインのスキルは大変重要です。デザインによってWebサイトの見やすさ、企業やサービス内容の伝わりやすさ、ユニークさなど、見る人に与える印象が大きく変わります。多種多様なサイトデザインを研究すること 続きを読む

  • LPデザインの参考おすすめ17サイト!成功に導くポイント・見せ方のコツも紹介

    LPデザイン決定までの5つの流れLPとはランディングページの略で、Webサイトにおいてユーザーのアクションを誘導するためのページです。具体的には商品紹介ページやサービス紹介ページなどがLPになります。LPのクオリティはサイト売り上げに大きく影響するため、LPは 続きを読む

  • Webデザインを独学で学ぶには?6つの勉強方法や学習手順を解説

    独学でもWebデザインを学ぶことはできる優秀なWebデザイナーは引く手あまたで、高収入が得られる場合もあります。そのようなWebデザインを学んでみたいという人も少なくありません。しかし、専門のスクールに通わなければ学べないのではと考えている人も多くいるでしょう 続きを読む

  • BPMを導入するメリットを解説|必要な理由や海外との違いとは?

    BPMとはBPMとは「Business Process Management」を略した言葉で、業務管理手法の1つです。BPMは業務の流れをモデル化することで課題の分析を行い、課題解決のための新しい業務プロセスを作ることで、継続的に業務改善を行うというものです。 続きを読む

  • LPを構成する大切な10個の要素をご紹介|基本を押さえよう!

    LP(ランディングページ)の役割LP(ランディングページ)の役割は、webページ上の広告をクリック・タップして誘導された最初のページに対して効果的に商品やサービスの宣伝をする重要なものとなります。来訪してきたユーザーに対して購入意欲・資料請求・問い合わせといっ 続きを読む

  • 2021年Webデザインのトレンド15選|アニメーションを駆使したものも登場

    2021年のWebデザインのトレンドの傾向2021年はコロナウィルス蔓延による影響で、外出自粛やリモートワークが促進され、より長い時間を家で過ごす人が急増しました。必然的に人々がWebサイトを見る時間も長くなり、Webサイトを工夫することによる効果は大きくなっ 続きを読む

  • Webデザイン初心者におすすめの勉強法4選|おすすめの本15選も紹介

    Webデザインとは?ホームページ作成やデザインに興味がある人は、Webデザインを学んでみたいと思う人も多いでしょう。そもそも、Webデザインとはどんなことをするのでしょうか。Webデザインとは、パソコンやスマホなどのネット上に掲載されるホームページの文字や色の 続きを読む

  • Webデザインの勉強におすすめの本総合18選|独学やスキルアップにおすすめ

    WebデザインとはWebデザインとは、PCやスマートフォンなどの画面に表示されるもののデザインを作成することです。具体的には、企業などのホームページや商品紹介のWebサイトなどに、どのようなコンテンツを掲載するのか、配置や見出し、テキストの文字のフォントをどう 続きを読む

  • Taskworldが持つ特徴8つとメリット4つ!料金プランや使い方も解説

    TaskworldについてTaskworldとはタスク管理ツールです。その特徴は充実した機能と、洗練され使いやすくデザインされたひとつひとつのツールの使い易さです。 機能性と使いやすさの2つを追求した、総合タスク管理、プロジェクト管理ツールとしてTaskwor 続きを読む

  • QuickSolutionの4つの特徴|7つの導入メリット・料金プランを紹介

    QuickSolutionとはQuickSolutionは、日本の産学官連携による共同研究によって開発された純国産の企業内検索ソフトです。QuickSolutionのコア・アルゴリズムは豊橋技術科学大学で開発され、その後、住友電工・住友電工情報システムが評価や 続きを読む

  • AdFlowとは?AdFlowの特徴7つに制作に必要な搭載機能7つを紹介

    AdFlowとは?AdFlowは、創業の2007年からインターネット広告を中心に10万本を超える広告クリエイティブを手掛けてきた株式会社クリエイターズマッチが、自社の業務を効率化するために開発した、制作現場から生まれたプロジェクト管理ツールです。アパレル・化粧 続きを読む