ランディングページ - それは何ですか? 例を含む完全な説明。最適なランディングページ: 専門家の選択

金融雑誌「RichPro.ru」読者の皆さん、こんにちは！今日は着陸について、それが何であるか、どのような利点と欠点があるかなどについて説明します。

ランディングページ (「ランディングページ」または ランディングページ) は、特定の仕様を持つ Web ページを指す、かなりよく知られた用語です。ただし、誰もがそのようなページの本質を知っているわけではありません。

では、ランディングページとは何でしょうか?「ランディングページ」の簡単な定義は次のように言えます。これは、HTML/CSS (またはその他) 形式のドメインまたはサブドメイン上のインターネットページです。

インターネットでさまざまな商品を販売する人は、ランディングページに興味を持っています。

このような「ランディングページ」には次の内容は含まれません。迷惑な広告、無駄なテキスト、点滅するバナー、またはポップアップメニュー。

この記事では次のことを学びます:

ランディングページとは何か、その使用方法。
通常の Web サイトと比較したランディングページの利点は何ですか。
無料でランディングページを自分で作成し、オンラインで宣伝する方法。
どのランディングページデザイナーが最適か、既製のテンプレートはどこからダウンロードできるか。
ランディングページでお金を稼ぐ方法と支払う必要がある税金。

教材の学習が実りあるものになることを願っています。

ランディング (ランディングページ) とは何か、その種類、自分で作成する方法、その他の情報については、記事をご覧ください。

1. ランディングページ (またはランディングページ) とは何ですか - その特徴と利点 📌

ランディングページは、インターネット上の 1 ページの Web サイトであり、いくつかの名前を持つことができます。

ランディングページまたはランディングページ。
「レンドス」;
顧客獲得ページ。

ランディングページの主な役割は、サイト訪問者に何らかの積極的な行動を促すことです。 電話をかける、リクエストを残す、製品を購入する、ニュースレターを購読する等

つまり、ランディングページは、インターネット上のさまざまな商品やサービスの売上を増やすために設計されたインターネットマーケティングツールです。

1.1. ランディングページの開発履歴

ランディングページは、約 10 年前に米国でインターネットマーケティング担当者によって発明されました。

ある時点から、彼らは市場での競争が絶えず激化していることに気づき始めました。ウェブサイトやオンラインストアは改善され続けていますが、訪問者はある企業が別の企業と比較して何が優れているのかを常に理解できるわけではありません。

業界における激しい競争が、ランディングページを作成した主な理由でした。

理想的な販売用ランディングページの例

1.2. ランディングページの目標と目的

ランディングページの目的は、この 1 ページサイトを訪問した購入希望者の連絡先を取得することです。

注記！商品・サービスの販売は、訪問者が目的とするアクション、つまり相談申し込みを行った次の段階で行われます。

インターネットマーケティングの専門家は、高品質のランディングページにより Web サイトのコンバージョンが数倍増加する可能性があると述べています。ランディングページを正しく使用すると、売上コンバージョンを 8 ～ 35% 増加させることができます。

1.3. セールスファネルとコンバージョン

Web サイトの所有者は誰でも、その人気を高め、売上を最大化する方法を常に模索しています。

インターネットリソースの有効性を判断する主な基準は、「セールスファネル」と「サイトコンバージョン」です。これらの概念の本質を理解することで、あなたの売上のレベルを知ることができます。これらの定義を詳しく見てみましょう。

コンバージョンとセールスファネルはランディングページの有効性の主な指標です

1) ウェブサイトの変換

Web サイトのコンバージョンは、インターネットリソースの有効性を示す最も重要な指標とみなされます。

コンバージョン値には、製品/サービスの購入者となったページ訪問者の数が表示されます。

言い換えると、 ウェブサイトのコンバージョンは、要件が満たされていることを示す一種の「マーカー」です、つまり:

商品の購入。
ニュースレターの購読。
特定のファイルをダウンロードする。
登録;
他のアクション。

たとえば、観光業の場合、8〜13％は完全に正常なレベルと考えられます。しかし、高級毛皮コートを販売するウェブサイトのコンバージョン率は最大 10% であり、これは優れた指標とみなされます。（実際、ここの顧客の購買力は高い）。

重要！通常、変換率は 2 ～ 3% から 20 ～ 40% の範囲です。たとえば、コンバージョンが 20% の場合、サイトを訪れた 100 人のターゲット訪問者のうち 20 人がターゲットアクションを完了したことを意味します。

ウェブサイトのコンバージョンは常に改善する必要があります。そのためには、サイトユーザーの信頼を得る必要があります。ウェブサイトは、情報に簡単にアクセスできる、ユーザーフレンドリーなものでなければなりません。

ランディングページのコンバージョン率は通常の Web サイトのコンバージョン率よりも常に高いことは注目に値します。

2) セールスファネル

販売目標到達プロセスでは、必要なアクションを完了しなかったサイト訪問者の数を表示できます。逆ピラミッド型のグラフです。このようなファネルは次のように表現されます。

ユニーク訪問者の数。
必要なアクションを実行したユニーク訪問者の数。
製品またはサービスの代金を支払った顧客の数。

正しく使用すると、 セールスファネルは計画の効果的なアシスタントになることができます最適な量広告素材、販売の各段階での連絡先の数等

販売目標到達プロセスの指標に基づいて、管理の質と販売の特定の段階で作業を調整する必要性に関する結論を導き出すことができます。

この分析ツールは、潜在的な顧客が提供する製品またはサービスの購入をどのように決定するかを理解するのに役立ちます。何が彼をそのような行動に駆り立てるのか。

これらのステップを分析することで、適切に設計されたランディングページを通じて顧客の行動をコントロールできるようになります。

セールスファネルの価値は、膨大な数の購入者を行動や興味によってセグメント化することにあります。

例 - 車を購入したい 2 人がいます。

飛行機か車か、正確に何を買いたいかはまだ決まっていない。反対に、2人目は、車が必要であることをすでにはっきりと知っています。これらの人々はまったく異なります。最初の人は、よく考えた後、自転車を購入するつもりですが、2人目は、明日でも車を買いに行く準備ができています。

一般に、製品への興味から購入の不安な瞬間までの全過程は、次の 4 つの段階に分かれています。

ステージ 1. 認識。
ステージ 2. 関心。
ステージ 3。決定。
ステージ 4. アクション。

これらのステージを各ステージにいる人の数に重ねると、実際には下に向かって先細りになるファネルが作成されます。

1) その頂点にいるのは、特定の製品に興味があることに気づいた人々です。この段階で、人は次のことを見つけようとします。一般情報あなたが好きな製品、おそらくその類似品、最小限の特徴について。

3) 製品の購入を決定すると、クライアントは次の段階に進みます。重要な役割内容の明瞭さと明瞭さに重点を置いています。人に購入の動機を与えたり、そのような決定の障害になったりできるのは彼です。

4) ファネルの最下部には、サイト訪問者のステータスから購入者のステータスに移行した人々がいます。セールスファネルが正しく構成されていれば、クライアントは間違いなく同じサイトで製品を購入します。

高品質のランディングページの目標は、認知から行動に至る販売ファネルのすべての段階を通じて、訪問者を目に見えない形で宣伝することです。最良のツールは教育記事です。ステップバイステップのガイド、インフォグラフィックス。

重要！製品に関する情報は専門的でなければなりません。その目標は、潜在的な顧客の購入動機を高めることです。

オンライン売上は定期的に増加しています。それに伴い、セールスファネルも変化していきます。おそらく時間の経過とともに、それはより複雑になるでしょう。したがって、今それを理解することが非常に重要です。

1.4. ページのパフォーマンスをキャプチャする

ランディングページの最大の効果は、開発に本格的な専門家チームが参加する場合にのみ達成できます。

高品質のランディングページを (インターネット上で公開する前に) 作成するには、次の専門家の助けが必要です。

プロジェクトマネージャー。ランディングページを開発する際の最終目標を示し、技術計画の実装のすべての段階を監視し、広告への投資収益率を計算し、すべての重要な決定を下します。

マーケター。彼の仕事は、一般的な戦略を策定し、効果的な将来のサイトのプロトタイプを作成することです。アフィリエイトプログラム

および USP (独自の販売提案)。また、作成中のコンセプトの見通しを決定し、得られた結果を分析します。

ウェブデザイナー。彼は、承認されたサイトのプロトタイプをベースとしてランディングページのレイアウトを開発し、サイトの特殊効果を担当します。

フロントエンドの開発者。

ランディングページのプログラミングとその後のレイアウト、さまざまなデバイスでのページ表示のテスト、アプリケーションの送信やWebサイトからの呼び出しを目的としたフォームの動作の調整に従事します。コピーライター。「売れる」コンテンツを執筆し、4U メソッドを使用して見出しを作成します。ランディングページのプロトタイピングとそのセマンティックブロックの最適化にも参加します。 SEMコンテキストのスペシャリスト。分析を実施しますセマンティックコア、取る

ターゲットを絞ったクエリ

検索エンジン向けに、コンテキスト広告を設定し、分析し、必要に応じて改良します (広告を収集する方法については、特別な記事で書きました)。

すべての専門家が連携して作業することによってのみ、真に高品質のランディングページを作成することができます。

1.5。 1 ページの Web サイトを作成する理由 - ランディングページの 3 つの主な利点

他のサイトやオンラインストアと比較したランディングページの主な利点を見てみましょう。 (成功する IM を作成して起動するための段階的な手順が記載されている記事もお読みください)。それでは、順番に始めましょう: 1 ページの Web サイトは、購読する訪問者の数を増やすのに役立ちます。

あなたが提供する製品を購入する可能性が 50% 増加します。

サイト訪問者にダウンロードしてインストールするよう説得する新しいプログラムまたはアプリ！

ランディングページ作成のルールとヒント

2. 13 基本的なルール独自のランディングページの作成について 📎

コンバージョン率が40～60％のランディングページもあります。このような指標は、サイトへの訪問者が 2 人おきにデータを残したり、製品を購入するためのアプリケーションに記入したりしたことを意味します。この成功には 2 つの要因が貢献しました。

ページ訪問者の大部分が対象ユーザーです。このサイトには、提供された製品に興味を持った人々が訪問しました。

ランディングページは、サイトの高いパフォーマンスを保証する従来のルールに従って作成されました。

ルールその1。ランディングページには 1 つの商品が含まれている必要があります

訪問者に「購入」ボタンをクリックしてもらうことができませんでしたか?

より多くのクライアントを獲得するには、次の原則に従う必要があります。

ユーザーの注意は 1 つの製品に集中する必要があります。
この特定のプログラムのみの利点についてクライアントに伝えます。
1 つの製品に割引価格を設定します。
1 つのトピックに関するニュースレターで訪問者の興味を引く。

1つの画面に複数の商品が配置されていると、顧客の注意が分散してしまいます。彼はページ全体に目を通します。おそらく彼はいくつかのことに興味を示すでしょう面白い画像または点滅する割引。ただし、最終的にはタブは閉じられたままになります。 訪問者があなたのサイトのことを忘れるまでには、1 分もかかりません。

訪問者が Web サイトにアクセスし、注目できる製品が 1 つあれば、関心のレベルは高まります。そして彼があなたに必要な行動をとってくれる可能性も非常に高くなります。

ルールその2。行動喚起は明確でなければなりません

ページにアクセスしたとき、ユーザーが最初に行うことは、どこにたどり着いたのか、なぜそこにたどり着いたのかを自問することです。

重要！ページに滞在して最初の数秒で答えが見つからない場合、潜在的な顧客は確実に道に迷ってしまいます。訪問者に製品に関する明確でわかりやすい情報を提供する必要があります。

統計によると、潜在的な購入者の約 80% が最初の 15 秒以内にサイトを離れます。この事実の主な理由は次のとおりです。

行動に対するモチベーションの欠如。つまり、訪問者はそのサイトで何をすべきかを見つけられなかった（理解できなかった）のです。その人には、注文、購読、詳細情報などを提供することはできません。高品質のランディングページには、誰かに対する具体的な行動喚起が含まれている必要があります。ページに「購入」という言葉が書かれた「大きな赤いボタン」がなければ、そのようなランディングページでは望ましい結果は得られません。
ページは非常に混雑しているため、訪問者は混乱しています。人は自分に何が提供されているのかを正確に理解することはできません。多くの落書きや不必要なアニメーションなどは、ユーザーをイライラさせるだけです。このような要素はそれぞれ、人の注意を引きつけようとします。その結果、購入または購読を求める主要な呼びかけはその重要性を失います。

これらのヒントは、製品の売上向上に役立ちます。

中央に大きな動詞が配置された赤い長方形のボタンが役立ちます。このボタンは、ランディングページの最初と最後の両方に存在する必要があります。

自分自身を明確かつ明確に表現してください。訪問者が何をしなければならず、それに対して何を受け取るのかについての明確かつ簡潔な説明が必要です。

主要なアイデアから気を散らす可能性のあるすべてのもの、つまり、不明瞭な見出し、グラフ、大きなものなどを削除します。広告バナー投稿された他の人の製品、中立的な写真など。

あなたが提供する製品の独占性をクライアントに納得させます。製品の利点を説明するときは、多くの比較と数字を使用する必要があります。この情報の横に赤いボタンを配置する必要があります。製品の購入を自発的に決定する場合もあります。買い手の欲求を即座に満たすには、この貴重な「購入」ボタンが必要です。

訪問者がオファーを利用することで得られる具体的なメリットの概要を説明します。

ただし、買い手を獲得したいという願望にあまり熱心になるべきではありません。多くの広告ギミックや押し付けがましい製品購入の申し出は、訪問者に否定的な印象を与えるだけです。

ルールその3。売れる、キャッチーな見出しを作る

優れたランディングページには、見出しに簡単に収まるプロモーションオファーが 1 つ含まれています。

販売見出しの例: あなたの製品が次のような場合蛍光灯? これがタイトルです - 「4倍効率的にエネルギーを節約」。太った人をフィットネスセンターに招待する必要がありますか? タイトルに彼らの夢を書きましょう - 「テレビスターのような人物を誰が欲しがるだろうか？」.

ヘッダーを作成するときは、h1 タグと h2 タグを使用する必要があります。可能であれば、見出しに含めてください。キーフレーズ- これらは、顧客が検索エンジンを通じてサイトを見つけるときに使用する単語またはフレーズです。

ルールその4。インテリジェントに書かれたセールステキストを使用する

テキストが最優先です。

重要！ランディングページのデザインは、最終的な高品質のテキストが編集された後にのみ注文してください。

第一級のテキストを書くには、次のものが必要です。

「理想的な購入者」、つまりあなたの商品を必要とする人の像を描きます。

販売心理学とマーケティングに関する本を読む。

訪問者を会話に引き込む方法を学びます。でこの場合モノローグになります。クライアントと仮想対話を開始して、クライアントが抱いている可能性のある質問を特定してください。それらに対する答えを本文に書きます。製品情報は包括的なものでなければなりません。特定の文字数に制限すべきではありません。

現在、インターネットマーケティングの専門家は、大規模なランディングページについて批判的な発言を耳にすることがあります。しかし、この状況を注意深く理解すると、批判の大部分が退屈で有益でない文章に当てられていることが明らかになります。しかし、批判するのが好きな人は、どういうわけか、優れた長いランディングページのことを忘れています。

次の場合は、大きなテキストを恐れる必要はありません。

この製品は未知で複雑です。クライアントはそれぞれの利点を詳細に説明する必要があります。製品の利点を証明する多くの例を挙げてください。

製品は高価です。人に興味を持ってもらうには、ランディングページのあらゆるスーパーパワーを活用する必要があります。 割引、ギフト、保証および保証後のサービス、ケース、レビュー.

ルールその5。テキストを正しく書式設定する

このルールは、サービスや商品の宣伝と販売にとって最も重要なルールの 1 つです。

テキストの書式を設定するときは、次の推奨事項に従う必要があります。

読みやすいフォント - 16 ポイント。 ( オープンサンズ、ガラモンド、ジョージア州、PT Serif、Arial).

1 行に 80 文字を超える文字を含めることはできません。

3 ～ 5 行ごとに段落としてフォーマットする必要があります。

小見出しは 2 ～ 4 段落ごとに必要です。小見出しは、ユーザーが読んだ後、次の段落で説明する内容を簡単に理解できるように構成する必要があります。

表、引用符、リスト (番号付きまたはマーク付き) の必須の存在。

ルールその6。あまり積極的な広告はありません!!!

最後に 3 つの感嘆符が付いているのは、攻撃的な広告の兆候の 1 つです。この他に「CAPS LOCK」もあります。

注記！ほとんどの人は誰とでも言葉やフレーズを持っています大文字でそして感嘆符疑惑を引き起こします。彼らは騙されているという強い信念を抱くようになります。

コピーライター、コンテンツマネージャー、編集者がそのようなものを使用している場合、これは彼らの資格が低いことを示しています。

また、テキストに「最も低価格「地域密着」「柔軟な割引制度」「個別の取り組み」など。事実、数字、比較によって裏付けられていない情報はまったく役に立ちません。したがって、遺憾なく本文から削除しなければなりません。

ルールその7。有能な着陸構造

ユーザーの視線がどのように動くかを理解する必要があります。

ページのすべての要素が所定の位置に配置されていれば、人は情報を容易に認識できるようになります。そして、訪問者があなたが提供する商品を理解すれば、購入する可能性は大幅に高まります。

視覚的なナビゲーションも必要です。これらはテーマ別の画像、アイコン、矢印です。誰かの注目を集めることができます対照的な色— 見出しを強調表示し、ボタンを赤、オレンジ、または黄色にします。

ルールその8。ランディングページは関連性のあるものでなければなりません。これは非常に重要です。

関連性の概念は対応関係を指します。

関連するランディングページとは、訪問者の期待を満たす Web ページです。

ランディングはマーケティング会社ごとに開発されるだけでなく、トラフィックソースごとに開発される必要があります。たとえば、訪問者がソーシャルネットワークからページにアクセスした場合、この情報がサイトに表示される必要があります。

ルールその9。反論に備える必要がある

約 10 人中 9 人の顧客は、購入する前に決定について考えます。人々は詐欺師を恐れ、自分自身の安全を恐れています。

購入したことを他人に見せたくないクライアントはたくさんいます。お金を失うのではないかと心配したり、商品の価格がこれほど安いことに信じられない人もいます。

個人的にコミュニケーションをとってユーザーの不安をすべて払拭する機会はないため、あらゆる種類の反対意見に対して事前に合理的な回答をするよう注意する必要があります。それらはテキストに挿入される必要があります。

たとえば 1 ～ 2 週間以内に投資収益率を保証します。
製品を 2 週間以内に無料で試す機会を提供します。そのような提案は人が決断するのに役立つことを強調します。

これらのマーケティング活動は、ランディングページを開発する際に常に重要であり、今後も重要です。

ルール #10。希少性の原理と緊急性の効果を利用する

誰もがそのようなトリックに引っかかるわけではないため、赤字には細心の注意が必要です。

重要！今では誰もカウントダウンタイマーに注目しません。また、ページがリロードされた後も定期的に更新される場合。

他の方法を使用する必要があります。たとえば、残りの商品の数量に関する情報を表示し、これらの数値を定期的に更新します。訪問者は、商品がすぐに売り切れていることがわかるはずです。

例: 購入者の行動や思考のアルゴリズムが次のとおりであることを確認する必要があります。「昨日は 50% 割引のパン焼き機の在庫が 100 台ありましたが、今朝はすでに 33 台あり、ランチタイムまでには 5 台しかありません」左。まだ在庫があるうちに急いで購入しなければなりません！」

ルール #11。訪問者にあなたの信頼性を納得させます

信頼要素は行動喚起の近くに配置するのが最適です。

ソーシャルネットワークボタンの使用 - グループ (ページ) の作成、VK グループの購読者のリスト、ツイートフィード、Facebook での「いいね！」。 (そして、その推進については前回の号ですでに書きました。)
レビューを企業やレビューを投稿した人へのリンクとともに公開します。
賞状、賞状の展示。必要に応じて、すべての文書をフルサイズで開き、読みやすくする必要があります。

ルール #12。不在複雑な形状ウェブサイトに記入する

原則として、個人データを入力するフォームは、ほとんどの訪問者にとって不快感を引き起こすものではありません。必要に応じて、対象読者はいつでも書く準備ができています 名前、職業、メールアドレス.

通常、登録の次の段階で、訪問者が自分の人生の詳細を尋ねられるときに問題が発生します。このような質問は、ユーザーが登録を確認した後に行うことをお勧めします。

同様によくある問題は、複雑なキャプチャです。

キャプチャは、特定の文字 (数字と文字) のセットを入力するためのポップアップフォームです。キャプチャを入力することで、訪問者は自分がロボットではないことを確認します。

文字を解読して正しい順序で書くには、時間がかかる場合があります。これが、約 30 ～ 40% の人がタブを閉じてあなたのオファーを忘れてしまう理由です。

キャプチャを使用する必要はありません。競合他社にもそれを持たせましょう。

ルールNo.13。認識のシンプルさとアクセシビリティ

このルールは、これまでのすべてのルールの本質を要約したものです。

重要！シンプルなランディングページを注文する必要があります。

彼女は次のような人でなければなりません:

不必要なグラフィックやテキストは含まれません。
1 つのアクション (1 つの製品を購入する、1 つのニュースレターを購読するなど) だけを実行するという提案。
広くて忙しすぎない。

理想的なランディングページは、試験、調整、性能測定を通じて得られるページです。

3. ランディングページは自分で作成する必要がありますか、それとも専門家にランディングページを注文した方が良いですか?

ランディングページを自分で開発することは、それほど難しい作業ではありません。知識と忍耐力があれば、誰でもランディングページを作成できます。ただし、その場合にはプラス（+）の側面とマイナス（-）の側面の両方が存在します。

すべてのメリットとデメリットを考慮してみましょう自己創造ランディングページ：

長所 (+)

自分で作成したランディングページの費用は完全に無料です。

作成する必要はありません技術的なタスク。あなたのアイデアに従って自分でそれを行う機会が得られます。

自分の手でランディングページを作成すると、貴重な経験が得られ、将来インターネットで作業するときに非常に役立ちます。

マイナス (-)

必要な知識がなければ、勉強するのに時間がかかります。

ランディングページの開発には多くの時間がかかり、その間にある程度の量の商品を販売することができます。

最終的に低品質のランディングページが作成される可能性があり、その結果、宣伝された製品の市場潜在力が完全に発揮されない可能性があります。

ランディングページを特別なスタジオに注文するか、自分で作業するかはあなた次第です。

ただし、自分の手でページを作成するのには費用がかからないことを思い出してください。したがって、スタジオでランディングページを同時に注文した場合でも、試してみる価値はあります。

高品質なランディングページを作成すれば、身につけたスキルをさらに伸ばしてランディングページ開発を自分のものにすることができます。これらのサービスに対する需要は年々増加しています。

注記！忍耐力が必要で時間がかかるため、そのような作業が圧倒的に感じる場合は、お金を惜しまず、専門家にランディングページの作成を依頼することをお勧めします。彼らがあなたの注文に取り組んでいる間、あなたはあなたのビジネスの主要なタスクを解決する時間があります。

ランディングページを自分で開発するのは、それが初めてであり、費用を節約したい場合にのみ正当化されます。 結局のところ、このサイトを通じて宣伝される製品やサービスが大きな需要があるかどうかはわかりません。

ただし、販売がすでに開始されており、最初の注文があり、製品の需要が高まると確信している場合は、専門家に頼るべきです。これらはランディングページをより良く、より効果的にするのに役立ち、コンバージョン率も大幅に向上します。

サービスに5〜15,000ルーブルを支払うことで、売上が1日あたり2〜3ユニット増加する可能性があります。 1 年間でかなりの金額が蓄積され、サイトの「アップグレード」に費やした金額を大幅に超えることになります。

重要！コンバージョンがわずか 0.5% 増加するだけで、1 年間で数百万ドルもの利益がもたらされる可能性があります。

もちろん、1 人のフリーランサーが作成するよりも高品質のランディングページを自分で作成することもできます。それについてはリンク先の記事を読んでください。

スタジオへの注文は決して安くはありませんが、時間を節約でき、費やしたお金は後に利益という形で何倍にもなって戻ってきます。

4. 最新のランディングページデザイナー 🛠 - 最高のトップ 3

ランディングページの人気の高さにより、多くのデザイナーが誕生しました。最も人気のあるロシア語デザイナーをいくつか見てみましょう。

ランディングページビルダーNo.1。「LPgenerator」 (lpgenerator.ru)

Lpgenerator は、ランディングページを最初から作成できる優れた Web サイトビルダーです。このサービスは 300 を超えるテンプレートを提供できます。たくさんのツール - リード管理, A/B テスト他にもたくさんのグッズがあります。

価格単純な料金表 — 月額 2156 ルーブル。この料金は、訪問者数の制限（月あたり 9,000 人）を前提としています。

食べる 制限のない関税。料金は月額 4,000 ルーブルです。

価格は少し高価ですが、Lpgenerator にはそれだけの価値があると多くの人が言っています。

ランディングページビルダーその2。フレックスビー (flexbe.com)

Flexbe Web サイトビルダーは、最も信頼性が高く、シンプルなランディングページビルダーの 1 つと考えられています。食べる無料版、有効期限は 14 日間です。この時間は、デザイナーの利便性とビジネスへの適合性を評価するには十分です。

ほとんど手頃な料金 — 月額 750 ルーブル。料金には、ドメイン - 1、ページ - 10、SMS 通知 - 250、テクニカルサポート、独自のメールボックス、無料ドメイン.RUなど。

最も高価な料金表月額 3,000 ルーブルかかります。これには、無制限のドメインとページ、1000 件の SMS 通知などが含まれます。

欠点 (-) には、ランディングページの作成における制限が含まれます。このウェブサイトビルダーのツールセットはそれほど大きくないため、素晴らしいものを入手することはできません。

プラス (+) には、ランディングページの作成速度が含まれます。 10 分もあれば、携帯電話の画面でも見栄えのする、まったくまともな 1 ページの Web サイトが完成します。

ランディングページビルダーその3。「LPトレンド」（lptrend.com）

「LPTrend」は初心者向けの分かりやすいランディングページデザイナーです。このサービスでは、レイアウトに制限のある既製のテンプレートを 61 個提供できます。

覚えておいてください！

ここでは、ランディングページを最初から作成する方法については説明しません。他のサービスとの統合はありません。 機能性から A/B テストがあります。「」タブ» 便利なサービス

、さまざまなツールへのリンクがあります。

試用期間は 15 日間です。サービスの機能をテストするのに十分な時間。最安料金

— 月額 500 ルーブル。ランディングページは1つ作成可能です。 後ろに最も高価な料金

毎月2000ルーブルを支払わなければなりません。 申し込む割増料金作成することを可能にします数量無制限

ランディングページ。

他のオンラインランディングページビルダー

注目に値するウェブサイトビルダーが他にもいくつかあります。 Basium は非常に優れた Web サイトビルダーです。このサービスでは、53 ブロックと 27 ブロック、約 400 のデザインバリエーションが提供されます。異なる設定

、すべてのニーズを完全に満たすことができます。肯定的な側面の中でも、サービスを使用するたびに料金を支払う可能性が特に強調できます。このサービスには 1 日あたり 35 ルーブルを支払う必要があります。

「Tilda」 - モジュール式システムを提供します。最も安い料金は 500 ルーブルで、年間支払いが条件となります。毎月支払いの場合、料金は750ルーブルになります。

5. 無料でランディングページを作成する方法 💸

無料でランディングページを作成できる人気のサービスを見てみましょう。
ランディ.ru;
www.setup.ru;
lpgenerator.ru;
ru.wix.com;

フリーランスサイトで少額（1000ルーブル以上）で注文できるランディングページ（1ページのWebサイト）の作成。

6. ベストセラーのランディングページの例 📰

販売用ランディングページの例をいくつか見てみましょう。ランディングページの関連性は常に変化していることに注意してください。「今日」特定のテンプレートのコンバージョンが高かったとしても、これらのテンプレートが「明日」も同じコンバージョンで機能するというわけではありません。したがって、コピーするのではなく、例として独自のランディングページを作成することをお勧めします。ユニークな写真

およびテキスト（他の人が持っていないコンテンツ）を作成するか、ランディングページの関連性を理解している専門家に注文します。段階的な指導取り付け用📝

ランディングページの構造はいくつかの要素で構成されます。

ロゴ、電話番号、データ取得フォーム、つまりコールバック。
関連する見出しとして表示される提案またはオファー。
メリットを列挙してください。
行動喚起 (赤いボタンを配置)。
写真、図面、その他の高品質のグラフィック。
製品に対する信頼性を高めるのに役立つ情報 - 証明書、レビューなど。
連絡先。

WordPress、Joomla などのよく知られたプラットフォームにはそれぞれ独自のランディングページテンプレートがあります。ただし、WordPress 用の高品質で無料のランディングページを見つけることは不可能です。比較的優れたランディングページは 15 ～ 25 ドルから始まります。

プラットフォームに依存しないテンプレートもあります。その数は数十万にも及びます。既製のファイルをダウンロードできるサイトはたくさんあります。無料のテンプレートランディングページ。

ただし、通常の無料のランディングページについて話すことはできません。これらの提案のほとんどは単なるゴミです。まともな選択肢はほとんどありません。品質ランディングテンプレート一般的なランディングプラットフォーム (lpgenerator、wix など) でページを見つけてみることができます。

販売サイト。それは何ですか？ 2 人に 1 人は、「もちろん、これはランディングページです!」と言うでしょう。概要資料、ランディングページ、販売ページです。

この言葉には多くの真実が含まれているので、そうでないと私はあなたを説得しません。したがって、この記事では、どのランディングページが最高と言えるのか、そしてその理由を分析します。

そこで私はベストセラーのサイトを探し始めました。例、評価、およびそれらを原則的に評価する方法を参照できる場所。結局のところ、1 ページの Web サイトはもともと会社の売上を増やすために発明されました。

最近、多くのことが変わりました。以前の関連性の高いウェブサイトは去り、ウェブサイトはより高品質で、より美しく、多額のアニメーション、写真、さまざまな魅力的な機能。

評価基準に疑問がある

どのような原理で評価するのか？どれを基準にすればよいでしょうか？トップ 10 サイトをランク付けするにはどうすればよいですか?

コンテストのウェブサイトはどこで入手できますか? これらすべてが、最高のサイトの真実かつ正直なランキングを作成することを困難にしています。

また、そのようなサイトを通じてどれだけの販売会社が儲かっているのかも分かりません。電話して「あなたのものは何ですか？」と尋ねることはできません。または「何件の応募がありますか?」

誰もこれが機密情報であるとは信じないか、あるいは言わないだろうから、そのような質問には誰も答えないだろう。

そう、私たちは空想を見ているのです！

そこで、よりシンプルにしました。私は、最良のランディングページの検索と評価と選択を開始しました。そして、何だと思いますか？

サイトの読み込みに時間がかかるため、直帰率に大きな影響を与える可能性があります。つまり、人々はオファーを見るよりも早くそのサイトから離れてしまうのです。

2. ワークショップ「ディネロ」

これはウェブサイトではなく、木製の財布という 1 つの「キャラクター」についての映画全体です。もし1,000～2,000ルーブルかかったとしたら、このサイトは失敗していたでしょう。

6.プロジェクト「大乾燥」

ほとんどの女性（ターゲット層）は、「Mad Drying」プロジェクトについて聞いたことがあるでしょう。彼らのローンチ広告がインターネットに溢れています。そして、トラフィックに数百万ドルが投資されていることを考えると、これは驚くべきことではありません。

しかし、優れたウェブサイトがなければ数千万の収益を得ることができないため、彼らのウェブサイトもTOPに含まれています。

プロジェクト「大乾燥」

テキストだけでも価値があるので、創作に徹底的にアプローチしたことがわかります。しかし、彼らはただ 1 つ大きな間違いを犯しました。最後の最後に通話ボタンを作成しなかったことです。

そして、これは、訪問者がストーリー全体の論理的な終結を理解していないという事実により、訪問者の流出に影響を与えます。

私たち自身も Bitrix24 顧客関係システムを使用しています。しかし、私たちのテーマは「」ではないため、メガプランシステムの Web サイトはすべての期待を上回りました。

それを通じて彼らはシステムの主要なポイントをすべて伝え、その後、これがビジネスにとって最善であることを理解しました。

CRM「メガプラン」

私たちの改善要望は、直接の競合他社はすべてシステムのビデオレビューを持っているため、ビデオレビューを追加することです。また、より明確な呼びかけも行います。つまり、見出し (ボタンではなく) を「無料で使い始めます」などに置き換えます。

ところで！ CRM システムとして使用したい場合は、プロモーションコード「Megastart」を忘れないようにお勧めします。この方法では、初回購入時に 10% 割引が適用され、14 日間は無料で使用できます。

8. 起業家向け銀行「トーチカ」

銀行からの別のランディングページ。彼はその独創性で賞を受賞した。このページは紹介リンクとして友達に送信されます。

効果を高めるために、ロジックに圧力をかけるブロックをさらにいくつか追加します。それ以来、このサイトは感情に重点を置いています。場合によっては、これは可能性があります正しい決断, でも、銀行を選ぶこともできるので、感情だけではどうにもなりません。

起業家向け銀行「Tochka」 9. ジム用機器「Goodfit」

サイトの黒から白と青への興味深い変化。しかし、興味深いデザインソリューションに加えて、このランディングページでは優れたタイトルゲームが使用されています。

このデザインでは、それらはブロックへの接続ではなく、独立した要素であり、読んだ後はすでに完全な画像を作成できます。

パッケージを完成させるには、CEO を代表するビデオプレゼンテーションだけでは十分ではありません。確かに彼は素晴らしい身体能力を持っています。

また、ケースに数字を追加するのも良いでしょう。つまり、クライアントが受け取ったホールの費用はいくらですか？しかし、これは重要なことではなく、望ましいことです。

ジム向け設備「Goodfit」 10. ショッピングセンター「METROPOLIS」

これは私が今まで見た中で最高のショッピングセンターのランディングページです。色が美しく選択されており、主な意味が伝わり、使いやすさも優れています。このランディングページにアクセスすると、これらすべてがすぐにわかります。クリックして探索してください。

5セント入れるけど。もちろん、このセンターに詳しい人がこのサイトにアクセスする必要があることは理解しています。しかし、初めて見る人も魅了するでしょう。

これは、訪問者が自分がどこにいるのか、そこで何が待っているのかをすぐに理解できるように、短い説明 (会社についてのいくつかの単語) を作成するのが論理的であることを意味します。

ショッピングセンター「メトロポリス」ロシアだけ!?

はい、私のレビューでは主に RuNet 上の最高の 1 ページサイトに焦点を当てましたが、世界には価値のある優れたサイトがたくさんあります。

さらに、最も重要なこと (そして最も驚くべきこと) は、burzhunet のランディングページが中小企業だけでなく大企業でも使用されていることです。

たとえば、世界で最も有名なタクシーサービスの 1 つである Uber は、メイン Web サイトとして、多機能ランディングページ、またはマルチページランディングページというオプションを採用しました。

このサイトは多数のランディングページで構成されています。ほぼ複数ページのサイト。しかし、まだランディングページです。

https://youtu.be/ClF-txTHGnc

ただし、ランディングページは異なるため、ここでは特に掲載しません。私たちは西洋の後をすべて繰り返していると言わせてください。しかし、この場合、私は違った考えを持っています。

私たちロシア人は違います。私たちは異なる国に住んでいるので、異なるタイプの考え方を持っています。

たとえば、あるアメリカ人は、会社がお金を取り上げて解散するのではないかという心配を頭の中にほとんど持っていません。 10 行分のすべてが保護されているため、PayPal の費用は 1 回だけです。

ここロシアでは、この恐怖が最前線にある。だからこそ、彼らのウェブサイトには人々に会社を信頼させるブロックがほとんどないのに、私たちはそれを大量に持っています。

より優れた異なるランディングページが作成されることについては、さらに数十の議論を行うことができます。したがって、申し訳ありませんが、彼らの選択肢はここにはありません。

私たちのロシアのソリューションをもっと楽しんでください。テキストとブロックをモデル化します。そして海外のサイトではただ取るだけです良いアイデアデザイン用。

主なものについて簡単に説明すると

すべての応募者に目を通したので、盲目的に応募者に注目することはお勧めしませんが、よく見てください。最高の着陸例のページは間違いなく価値があります。

少なくとも、面白いアニメーションを作るために誰かからアイデアを得ることができます。あるいは、たとえば、クリエイターの 1 人が自分のコンテンツを完全に理解しており、ランディングページ全体でそれを使用しているとします。一般に、研究し、結論を導き出し、採用する価値があります。

ちなみに、最初のランディングページのアイデアを探している場合は、自分で作成してみるのもいいでしょう。したがって、何が必要であるか、そしてそれが一見したほど単純ではないことが理解できるでしょう。

これには、LP プラットフォームなどを使用します。そして、共同開発のためにあなたの訪問を待っています。

この分野での競争の激化 eコマース消費者行動の新しい基準を生み出します。ユーザーは、ある企業と他の企業の違いに注意を払わず、製品やサービスのプロバイダーの検索にできるだけ時間を費やさない傾向があります。この観点から見ると、従来のオンラインストアや代表的なサイトは、不必要な情報が大量に存在し、その結果、特定の商品を見つけるのが困難になったため、市場シェアを大幅に失いつつあります。ランディングページと呼ばれる 1 ページの Web サイトは、この問題を解決し、特定の製品に購入者の注意を引くように設計されています。

技術的には、ランディングページは、会社のメイン Web サイトの別のドメインまたはサブドメインにオンラインで配置される Web ページです。さまざまな形式 (html、CSS) に基づいて作成でき、カスタムデザインを使用できます。その主な目標は見込み顧客の発掘です。後者は、商用オファーに対するユーザー登録 (注文) を表します。この場合、まず連絡先情報が送信される。ユーザーがどの対象視聴者グループに属しているかを判断するために、追加のデータが要求される場合もあります。

ランディングページは、会社のサービスの範囲やリストに関する一般的な情報ではなく、特定の目的のために作成されるため、ランディングページとも呼ばれます。後者には次のものが含まれる場合があります。

特定の製品またはサービスの販売。
データ収集、潜在顧客のデータベースの形成 (リードキャプチャ)。
リソースへの登録。
サブスクリプションの登録。
場所を予約する。
試用サンプルとデモ版の受け取り。
ブランドのプロモーションや製品の普及（バイラルランディングページ）。

ランディングページの機能と構造

ランディングページと通常の Web サイトを区別するのは非常に簡単です。他のセクションにリダイレクトするメニューはなく、情報の簡潔さ、そして最も重要な点として、単一の製品を紹介していることが特徴です。同時に、ページ上のコンテンツは、訪問者にアクションの実行を促すような方法で表示されるため、一種の広告指示に似ていることがよくあります。ランディングページは、その構造に応じて通常次のタイプに分類されます。

長いページ – 長いランディングページ。この形式では、ユーザーがページをスクロールする必要があるため、情報が段階的に表示され、潜在的なクライアントをその結果のアクションに導くことができます。このようなページはテクニックの応用に似ています積極的な販売、購入者の興味を徐々に温めるためです。
短いページ - 短いランディングページ。すべての情報が一度に提示されるため、ラッシュ効果が生まれます。短くて的確な、的を射た文章。

クライアントとの対話のタイプに基づいて、ランディングページは次のようになります。

ワンステップ: 関心の生成からユーザー登録までのすべての段階が 1 つのページに表示されます。
2 ステップ: 最初のページで製品への関心が形成され、追加の 2 ページ目で行動喚起が実行されます。

ランディングページのコンテンツは通常、個別のブロックに分割され、訪問者が理解しやすい特定の順序で配置されます。構造の基本要素は次のとおりです。

見出しは顧客の興味を引く主要な文です。提案に関する情報だけでなく、下された決定の有用性も伝える必要があります。見出しには最大限の注意が払われ、サイト訪問者がサイトに留まるか離れるかを決定します。
連絡先情報 - 会社との利用可能な通信チャネル (電話番号、電子メール、Skype、Viber)。多すぎてはいけません。原則として、連絡先は右上隅にあります。
企業ロゴは、ブランド商品やサービスを宣伝する場合にのみ使用されるオプションの要素です。
製品のデモンストレーション - 特定の製品の場合は、その写真または 3D gif を使用できます。サービスには連想画像またはプロモーションビデオが選択されます。画像は中央に配置されているため、訪問者がページにアクセスしたときに、何が提供されているかをすぐに理解できます。
商業提案とは、取引条件や製品のメリットを簡潔に（多くの場合は抽象的に）説明したものです。形式で提供されます既製のケース、ターゲットアクションを完了することで訪問者が何をどれくらい受け取るかについての詳細情報が含まれます。
リードフォーム (フィードバック、登録または注文フォーム、キャプチャフォーム) は、データを入力して会社に送信するためのフィールドを備えた対話型の領域です。強調表示する必要があります。
行動喚起ボタン - 特別なボタン「試す」、「注文する」、「購入する」、「ダウンロードする」というアクションを実行します。
カウンター - プロモーションを実施するとき、または顧客の興味をかき立てるときに使用されます。プロモーションや商品の在庫が終了するまでの残り時間を表示できます。
顧客のレビューと質問への回答はオプションの要素であり、サービスを販売する場合によく使用されます。意見は真実であることが望ましい。
賞と記章は、企業または製品の間接的なメリットを示すオプションのブロックです。

ランディングページにテキスト情報を入力する際の主な要件は、販売テキストを使用することです。これは、製品の利点のリスト、製品を使用してユーザーの問題を解決する例、および必須の行動喚起を含める必要があることを意味します。

ランディングページのプロモーションの詳細

主なプロモーション戦略がコンテンツの SEO 最適化である従来のサイトとは異なり、シングルページサイトはテキストコンテンツが限られているため、検索エンジンからの認識が非常に低くなります。ただし、問題に賢く対処すれば、特に頻度の低いクエリの場合、比較的良好な結果を達成できます。

当初、検索エンジンはサイトを評価するために BM25 ランキングアルゴリズムを使用していましたが、現在では、タイトル、キーワード、説明メタタグなどの要素を考慮する、より現代的な改良版 BM25F がその代わりを務めています。したがって、ランディングページを作成するときに、情報をブロックに分割し、その見出しに対応するキーが有機的に含まれるようにすることができます。メタタグはそれに応じて設計されています。顧客レビューや質問回答ブロックを最適化することもできます。ランディングページのランクを上げるの検索結果 alt 属性が正しく指定された固有の画像も役に立ちます。

長期的な使用を目標とする場合、ランディングページを最適化することは理にかなっています。この場合、料金所で停車する場合広告キャンペーン、たとえボリュームが少なくても、訪問者を引き付けるでしょう。

ランディングページを宣伝するための主なツールはページ広告です。これは次の方法で実装されます。

Google AdWords と Yandex Direct のコンテキスト広告。これメインメソッドターゲティング原則を使用してトラフィックを引き付ける。
の広告および公開リンクソーシャルネットワークで。この方向性は、プロモーション専用のランディングページやバイラルランディングページを宣伝する場合に非常に効果的です。
でのプロモーション人気のブログ。非効率な方法であり、追加として実装されています。
電子メールによるニュースレター。多くの場合、特定の製品や進行中のプロモーションに注目を集めるために、会社の常連顧客に対して行われます。
ティーザー広告。

ランディングページとは何か、ランディングページが優れている理由、そしてランディングページがどのような基本原則に基づいているかについてはすでに説明しました。しかし、Web サイトの成功を確実にするためのルールやテクニックが数多くあるという事実にもかかわらず、ランディングページの開発がテンプレートの仕事であり、適切に機能するページは 5 分で作成できると考えるのは間違いです。画像を挿入したり、テキストを変更したりするだけです。もちろん、これは創造的なプロセスであり、対象となる視聴者の行動の理解に支えられた想像力が奨励されるだけです。以下に、重要なランディングページと、高いコンバージョンを保証するページの例を 10 個紹介します。

1.ネストサーモスタット

室内用サーモスタットの販売に特化した、非常に興味深いデザインのランディングページ。あらゆる種類の技術データや便利な機能の説明が存在するにもかかわらず、ランディングページは視覚的な要素に焦点を当てています。インテリアの写真が数枚、ページ中央にある見事に考案され実行されたアニメーションが、次のような感覚を呼び起こします。このデバイスを購入した後、あなたの家はインターネット上の写真よりも悪くありません。したがって、Land はサーモスタットではなく、クライアントの究極のニーズである家の快適さを販売しています。

2.ボーイコイ

デザインスタジオのウェブサイト。その後、競合他社からのオファーを探したくもならないでしょう。 4 画面のランディングページを見れば、たとえレビューやスタジオが協力している企業のリストを読んでいなくても、この人たちに連絡するよう説得できます。おそらく、パララックス効果を眺めながらスクロールするだけで、気づけば素敵なフィードバックフォームにデータを入力し始めるでしょう。
http://boy-coy.com

3. ウォッカ「ヴァレンキ」

視差効果を備えた美しいランディングページの別の例。すぐに購入を強制するものではなく、ターゲット層にポジティブなイメージを与える、純粋なイメージのページ。製品の品質に関する情報は十分なボリュームで表示されますが、氷の浮き上がりの美しさを見ていると見逃してしまう可能性があることに注意してください。ただし、望ましい効果はすでに達成されています。このサイトは美しすぎて、品質の悪いものを提供することはできません。これは、センスの良いサイトを訪れるすべての訪問者が抱く潜在意識の結論です。
http://www.valenkivodka.com

4. テディベアのオンラインストア

本当に興味深いランディングページは、ターゲットユーザーから遠く離れた人々の注目を集めることができます。巨大なテディベアを販売する店の例を見てください。このサイトは文字通り興味深いアイデアに満ちており、訪問者と対話しているようであり、最終的には高い確率で購入につながります。
http://medvedy.com

5. スマートな進歩

目標を設定して達成するための人気サービスの美しいランディングページ。まず、中に入ってそれがどのように機能するかを確認し、次に、目標に向かう動きを表すデザインを鑑賞します。非常に有能なブロックの充填と組み合わせると、計画していたが後回しにしていたすべてのことを実行する意欲が高まります。
https://smartprogress.do

コンバージョン率の高いランディングページ販売例 1. 木製窓の製作・設置

ご存知のとおり、ランディングページは訪問者に負担をかけすぎないようにする必要がありますが、訪問者がすぐに掴んで申し込みを記入できるものを提供する必要があります。議論はしませんが、製品によっては慎重に選択する必要があり、1 つや 2 つのブロックだけでは解決できません。この窓メーカーのランディングページはプログラムを最大限に踏襲しており、私たちが窓を選ぶ際には考えもしない細部まで触れられていました。いくつかのブロックに情報過多があったように見えますが、このページはまだ良い例え大きなランディングページ。
http://goodwin-nnov.ru/

2. キャスコ保険

コンバージョン率の高い別のランディングページ。ここでは、訪問者をリードに変換する原理が、前の例と同様に、計算機として使用されます。私たちは、ポリシーを選択するために入力できるパラメータの数と、これがどれほど精力的に行われるかを評価することを提案します。ランディングページの残りのコンテンツについても同じことが言えます。非常にシンプルかつ明確で、車の所有者が自分の車に保険をかけることで得たいメリットがすべて説明されています。

http://prostokasko.rf

3. アミューズメントアクアリウム機器のフランチャイズ化

潜在的な顧客にメリットを明確に説明しているだけでなく、不労所得を約束するビジネスプランの詳細を知りたいという好奇心や欲求も残すという事実により、高いコンバージョンを保証する販売用ランディングページの好例です。私たちはデザイナーに特別な賞賛を送ります。
http://morewishes.ru

4. ノートパソコンの修理

ランディングページの良い例。比較的大量のテキスト (メイン画面上で占めるスペースを含む) が訪問者にとって何の困難も生じませんが、それどころか、有機的に見え、すべての利点をうまく説明しています。修理組織。ノートパソコンの修理サービスは緊急なのでご遠慮ください潜在的な顧客計り知れない情報を提供します。数ブロックで十分ですが、できる限り美しく有益な情報が提供され、信頼が高まります。

親愛なる読者の皆さん、こんにちは。今日は次のことについて話します技術的なポイント、これを利用して、商品やサービスの売上のコンバージョンを増やすことができます。重要なポイントの 1 つは、商品を掲載した適切にデザインされたランディングページです。いわゆるランディングページの作成については、さらに詳しく説明していきます。準備ができたコードページ。

ランディングページとは何ですか? これは、ユーザーが広告をクリックした後に通常アクセスするページです。 1 つのオファー (製品、サービス、またはサブスクリプション) に対して作成されます。効果的なランディングページ - 礎石インターネットマーケティングの成功。製品が市場で最高であり、広告が完璧であっても、優れたランディングページがなければ、努力しても 100% の結果は得られません。訪問者に何が提供されているのか、なぜそれが欲しいのかを説明します。緊迫感は迅速な意思決定と、ユーザーをクライアントのカテゴリーに移行するのに役立ちます。

ランディングページを作成するにはどうすればよいですか? 答えが植字の能力にあると信じるのは間違いです。優れたランディングページは、目標、テキスト、デザイン、コードに関する調整された作業の結果です。以下に例を示すランディングページは、初心者がレイアウトの操作の基本を学ぶのに役立ちますが、コンバージョンテキストや対象読者の理解に代わるものではありません。さまざまなランディングページデザイナーを使用して作成することもできます。

したがって、ランディングページを作成する前に、次のことを自問してください。

ランディングページに到達した後、人は何をするでしょうか? 彼は何か買ってくれるでしょうか？フォームにご記入いただけますか? ニュースレターを購読しますか? コンバージョン率を追跡する前に、明確な目標を設定します。
私の競争相手は誰ですか? 実際には、これらは 3 つの質問です。誰が、どの程度成功しているのか、そしてその成果をどのように応用できるのかです。模倣は心からのお世辞です。競合他社が効果的なことを行っている場合は、それをあなたのサイトでも再現してください。
私の聴衆は誰ですか? 自分のニッチ分野と対象ユーザーを理解すればするほど、努力が報われる可能性が高くなります。

すべてを提供する必要がある必要な情報, しかし、潜在的な顧客を抑圧して追い払うほどではありません。

ランディングページの作成例 + ダミー用のコーディング

始める前に、HTML と CSS について簡単に見てみましょう。それらがどのように機能するかを理解すると、着陸を作成するのに役立ちます。

HTML は、Web サイトを視覚化するためのブラウザーマークアップ言語です。内容を定義する山括弧で囲まれたタグを使用して記述されます。

タグは塗りつぶしの周囲で開き () と閉じます () を行います。

コンテンツ

微調整のために、名前の後に属性が追加されます。

コンテンツ

CSS - 配置方法を定義します HTML要素。セレクター、プロパティ、値で構成されます。

#selector (プロパティ: 値;)

セレクターは、HTML 内の特定のタグの名前と一致します。値の変更とプロパティの追加により、外観。同じ HTML に異なる CSS スタイルを適用することで、互いに異なる外観のページを作成できます。

5 つの最初のステップ

素早くレイアウトするために、ブートストラップに基づいた最小限のデザインのテンプレートを使用します。これは独自のセレクターを備えたシステムで、レイアウトを高速化するために世界中で使用されています。

控えめに見えます。

この魚から、あらゆる好みに合わせたウェブサイトがいくつかの段階で作成されます。

フォルダー内のディレクトリ構造:

Index.html: これが編集するメインのファイルです。
/assets: 補助ファイルは次の場所にあります。
/css: ディレクトリにはブートストラップスタイルとアイコンスタイルが含まれます。編集するファイルは main.css です。
/img: サイト画像のフォルダー。
/fonts: アイコンフォント。
/js: JavaScript ファイルをブートストラップします。

ステップ 1: ヘッダーの使用

見出しと小見出しは、オファーの価値を明確に伝えるのに役立つ重要な場所です。

サイトのタイトルと名前を変更しましょう。ここではタイピングのスキルは必要ありません。画面上で黄色で強調表示されている場所に独自のテキストを書きます。

ステップ 2. 簡潔さは変換の姉妹です。特典と料金の追加

4 つのセクションが必要になります。

利点;
料金;
レビュー;
アクションの呼び出し。

メインコンテンツ「main」のセクションを作成し、そこに必要なセクションを挿入します。

…..
…..
…..
…..

ドットの代わりに塗りつぶしで塗りつぶします。

特典セクションには、次のコードが必要です。

利点
速い

信頼性のある

セド・ディアム・ノナミー

儲かる

エリート、セドディアムノナミー

技術的には

Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam noummmy

信頼性のある

Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam noummmy

儲かる

Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam noummmy

技術的には

Lorem ipsum dolor sit amet、consectetuer adipiscing

信頼性のある

Lorem ipsum dolor sit amet、consectetuer adipiscing

儲かる

Lorem ipsum dolor sit amet、consectetuer adipiscing

わかりやすくするための内容:

まだ雑に見えますが、パニックになる必要はありません。続行しましょう。

価格を書いていきます。最初のステップと同様に内容が変化します。概要クラス「関税」と 3 つの関税。

料金プラン

ローレム・イプサム・ドール・シット・アメット、コンセクテトゥアー・アディピシング・エリート、セド・ディアム・ノヌミー・ニブ・ユーイズムモッド・ティンシダント・ラオリート・ドロレ・マグナ・アリクアム・エラット・ヴォルトパット。あなたの行動を最小限に抑えて、ロボルティスの疑いのあるウラムコーパーの行動を監視し、戦闘結果を確認してください。

料金表第1号
$10

1ヶ月あたり/1人あたり

Lorem ipsum dolor sit amet、consectetuer adipiscing elit

ロレム・イプサム・ドール

10 ローレム・イプサム

注文
関税第2号
$20

1ヶ月あたり/1人あたり

Lorem ipsum dolor sit amet、consectetuer adipiscing elit

ロレム・イプサム・ドール

10 ローレム・イプサム

注文
関税第3号
$30

1ヶ月あたり/1人あたり

Lorem ipsum dolor sit amet、consectetuer adipiscing elit

ロレム・イプサム・ドール

10 ローレム・イプサム

注文

そのようです。

今のところ、将来のランディングページの外観には興味がありません。以下でスタイル変更の例を見ていきます。

ステップ 3: 信頼シグナルと行動喚起

ターゲットを絞ったシグナルを使用することで、訪問者にブランドが信頼できることを示します。信号を受信できる異なる種類、しかし古典的なのはカスタマーレビューです。

カスタマーレビュー

ロレム・イプサム・ドルー・シット・アメット、コンセクテトゥール・アディピシング・エリート、セド・ド・エイウスモッド・テンポル・インシディダント・ユー・レイバーとドローレ・マグナ・アリクア。必要最小限の費用をかけて、必要な作業をすべて実行してください:

「ローレム・イプサム・ドルー・シット・アメット、コンセクト・アディピシング・エリート、セド・ド・エイウスモッド・テンポラ・インシディダント・アウト・レイバー・アンド・ドローレ・マグナ・アリクア。「私は最低限の努力をし、任務を遂行するために必要な努力をしてください。」
「ローレム・イプサム・ドルー・シット・アメット、コンセクト・アディピシング・エリート、セド・ド・エイウスモッド・テンポラ・インシディダント・アウト・レイバー・アンド・ドローレ・マグナ・アリクア。「私は最低限の努力をし、任務を遂行するために必要な努力をしてください。」

行動喚起を設定しましょう。

今すぐ注文すると特典が受けられます

ローレム・イプサム・ドール・シット・アメット、コンセクテトゥアー・アディピシング・エリート、セド・ディアム・ノヌミー・ニブ・ユーイズムモッド・ティンシダント・ラオリート・ドロレ・マグナ・アリクアム・エラット・ヴォルトパット。あなたの行動を最小限に抑え、ロボルティス・ニスを疑うウラムコーパーの行動を監視し、戦闘結果からのアリクイプを取得してください:

今すぐ注文！

レビューは、潜在的な顧客が製品の購入を決定するのに役立ちます。わかりやすくするために、アバターが必要なので、各引用符の下にすぐに配置します。

クライアント名。

ステップ 4: グリッドとの統合およびモバイルフレンドリー

グリッドを実装するには、Bootstrap コンテナーが必要です。覚えておくべき重要なこと合計有効な列セグメントは 12 個あり、このクラスによってコンテンツ表示の幅が決まります。この事前に作成されたグリッドの良い点は、コンテナーが応答性を念頭に置いて設計されており、モバイルデバイスですぐに使用できることです。詳しい説明は公式サイトにあります。グリッドはこんな感じです。

「メイン」の中身は容器に包まれます。これを行うには、上部に次のように記述します。

… .

ブロックを画面の幅全体に合わせる必要がある場合は、コンテナが内部に挿入されます。ここではジャンボトロンと行動喚起になります。

上下に配置する必要があるすべての要素を行区切り文字で囲みます。

ブートストラップグリッドに焦点を当てて、列の幅を調整できるようになりました。ラッピング後、スクリーンの端にフィリングがくっつかなくなり、きれいなくぼみが現れました。

列クラスcol-lg-4を使用して、行内の価格を設定します。行行内では、ラップするために個別の div を記述する必要がなくなり、スペースで区切られた既存の div と組み合わせることができます。

同様に、レビューと利点のセクションに列を設定します。要素を横に移動する必要がある場合は、オフセット列クラスのcol-lg-offset-2を使用します。末尾の数値によって、シフトが発生するベース列の数が決まります。

ステップ5. フォントとアイコン

Google Fontの見出しフォントを実装しています。選択したら、インポートタブを開き、そこからデータを main.css ファイルにコピーします。また、新しいフォントが使用されるファイルにタイトルセレクターを追加します。

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* 見出しのフォントをインポートします */
.navbar ブランド、
h1、
h2、
h3、
h4、
h5、
h6 (
フォントファミリー：「Roboto Condensed」、サンセリフ; /* Googlefont の出力 */
}

わかりやすくするために、利点は、テキストセンターという一目瞭然の名前を持つクラスと、ブートストラップセットの FontAwesome アイコンによって説明されます。

ここまでで準備は完全に完了です。

ランディングページ: オファー、パララックス、カウンターを含むコードの例

最も一般的な 3 つのタイプ、つまり文、フォーム、カウントダウンカウンターを使用します。レイアウトが進むにつれて、テンプレートにエフェクトが追加されます。

例 1: 文付き

メイン部分の背景とパディングを最初の画面を覆うように設定しましょう。

ジャンボトロン (
背景: #f5f5f5 url(../img/fon.jpg) 上部中央、繰り返しなし。
最大幅: 100%;
パディングトップ: 250px;
パディングボトム: 200px;
テキスト整列: 中央;
}

ジャンボトロンヘッダーのサイズを h2 から h1 に変更してみましょう。次に、変更する必要がある要素のスタイルを記述します。

まずはアイコンから始めましょう。

メリット i(
色: #cac4c4;
}

ハッシュ記号の後に色を指定します。 HTML カラーテーブルまたは画像エディタを使用して独自のオプションを選択できます。

セクション見出しのインデント

セクション h2 (
パディングトップ: 30px;
マージン-ボトム: 25px;
}

関税の体裁を整えております。便宜上、特に強調表示したい要素に対して独自のクラスを作成します。

料金表第1号
$10

1ヶ月あたり/1人あたり

Lorem ipsum dolor sit amet、consectetuer adipiscing elit

ロレム・イプサム・ドール

10 ローレム・イプサム

注文

そしてたくさんのCSS。セクションがどのような場所を担当するかはコメントに記載されています - /* アスタリスクのあるスラッシュの間 */

/* =========タリフスタイル======== */
/* 料金表の概要 */
.pricing_item(
背景: #f2f2f2;
位置: 相対的;
表示: -webkit-flex;
ディスプレイ: フレックス;

フレックス方向: 列;

align-items: ストレッチ;
テキスト整列: 中央;
-webkit-flex: 0 1 330px;
フレックス: 0 1 330ピクセル;
パディング: 2em 3em;
マージン: 1em;
色: #262b38;
カーソル: デフォルト;
オーバーフロー: 非表示;

}
/* クリックすると背景を変更します */
.pricing_item:ホバー (
カラー: #444;
背景: #daebef;
}
/* 各料金表の個別の値札の背景 */
.pricing_item:first-child .price (
背景: #9ba9b5;
}
.pricing_item:nth-child(2).price (
背景: #1f6098;
}
/* ワイド画面では、中央の料金表の列がインデントされ、強調表示されます */
@media 画面と (min-width: 66.250em) (
.pricing_item(
マージン: 1.5em 0;
}
。特徴（
z インデックス: 10;
マージン: 0;
フォントサイズ: 1.15em;
}
}
/* タイトル */
.pricing_item h3 (
フォントサイズ: 2em;
マージン: 0.5em 0 0;
色: #1d211f;
}
/* 値札の背景 */
。価格（
フォントサイズ: 2em;
フォントの太さ: 太字;
色: #fff;
位置: 相対的;
z インデックス: 100;
行の高さ: 95px;
幅: 100ピクセル;
高さ: 100ピクセル;
マージン: 1.15em 自動 1em;
境界半径: 50%;
背景: #77a5cc;
-webkit-transition: カラー 0.3 秒、背景 0.3 秒;
トランジション: カラー 0.3 秒、背景 0.3 秒。
}
/* 通貨 */
。通貨（
フォントサイズ: 0.5em;
垂直整列: スーパー;
}
/* 提案の明確化 */
。文（
フォントの太さ: 太字;
マージン: 0 0 1em 0;
パディング: 0 0 0.5em;
色: #2a6496;
}
/* リスト */
.pricing_item ul (
フォントサイズ: 0.95em;
マージン: 0;
パディング: 1.5em 0.5em 2.5em;
テキスト整列: 左;
}
/* 項目をリストします */
.pricing_item li (
パディング: 0.15em 0;
}
/* レート注文ボタン */
.pricing_itemボタン(
フォントの太さ: 太字;
マージントップ: 自動;
パディング: 1em 2em;
色: #fff;
境界半径: 5px;
背景: #428bca;
-webkit-transition: 背景色 0.3 秒;
遷移: 背景色 0.3 秒。
}
/* ボタンを押すと色が変わります */
.pricing_item ボタン:ホバー、
.pricing_item ボタン:フォーカス (
背景色: #285e8e;
}
/* 料金の背景*/
.bg-2 (
背景: #dddddd;
}

結果

カスタマーレビュー。きちんと見た目を整えて、その位置を示しましょう。

/* =========お客様の声のスタイル======== */
体験談 (
パディング: 4em 0;
テキスト整列: 中央;
}
.testimonials .avatar img (
境界半径: 50%;
フロート: 左;
表示: インライン;
マージン右: 1em;
幅: 65ピクセル;
高さ: 65ピクセル;
マージン-ボトム: 30px;
}
.testimonials .avatar p (
テキスト整列: 左;
パディングトップ: 1em;
色: #5d5d5d;
フォントの太さ: 900;
}

残っているのは、最後の行動喚起とフッターを装飾することだけです。

/* アクション */
。アクション（
背景: #476177;
最小高さ: 180px;
幅: 100%;
パディング: 4em 0;
テキスト整列: 中央;
}
.action h2 (
色: #fff;
フォントの太さ: 300;

}
.アクションp(
色: #fff;
テキストシャドウ: 0 1px 2px rgba(0, 0, 0, .2);
フォントサイズ: 1.2em;
}
.アクション .コンテナ (
マージントップ: 3em;
}
/* フッター */
フッター(
背景: #333333;
パディング: 1em 0;
テキスト整列: 右;
}
フッターp(
色: #fff;
行の高さ: 1;
テキスト変換: 大文字;
フォントサイズ: 0.7em;
マージントップ: 0.5em;
}

フッターボタンには、組み込みブートストラップクラス btn-default が割り当てられます。

テンプレートに命を吹き込みます。実装してみましょうスムーズなスクロールセクションのボタンと、最初の画面のテキストアニメーション。

動作への移行のために、特典と料金のためにセクションクラスの一部を ID に置き換えます。そして、ボタンに ID へのリンクを追加します。スクリーンショット - 何が何に接続されているか、黄色のマーカーで強調表示されます。

ボタンのインデントを設定します - jbutton。押したときのスクロールは機能しますが、非常に突然です。

スムーズなトランジションは次の場合に作成されます。 JavaScriptのヘルプまたはjQuery。後者はデフォルトでブートストラップテンプレートに接続されます。

スクロールがスムーズになりました。

Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) を使用してテキストにアニメーションを追加します。これは既製のオープンソースコードであり、どの Web サイトでも使用できます。 Github からファイルを css フォルダーに配置し、パスを指定します。

ここでエフェクトを選択します: https://daneden.github.io/animate.css/。 fadeInDown が選択されています。コードでは次のように書かれます。

ページがロードまたは更新されると、テキストがアニメーション化されます。準備ができて。

例 2: 形状と視差効果あり

訪問者に表示されるフォームフィールドが増えるほど、訪問者がフォームフィールドに記入する可能性は低くなります。必要最小限の情報のみを尋ねてください。

類推によって組み立てられます。背景や色を変更していきます。そしてもちろん、シェイプを追加します。

視差から始めましょう。

ジャンボトロンの背景を透明に変更しましょう。

背景: 透明;

head 内にスクリプトを挿入します。

$(ウィンドウ).scroll(関数(e)(
視差（）;
});
関数視差())(
var スクロール = $(ウィンドウ).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

本体の最初の行は視差のコンテナです。

CSS では、その動作は次のようになります。

視差 (
背景: url(/../img/fon.jpg) 繰り返し;
位置: 固定;
幅: 100%;
高さ: 300%;
トップ:0;
左:0;
z インデックス: -1;
}

視差の準備ができました。ただし、コードを変更して新しい背景を作成するには、カラースキームを再割り当てする必要があります。

メニューを暗くする:

ナビゲーションバーのデフォルト (
背景色: #333;
境界線の色: #444;
色: ダークグレー;
境界半径: 0;
}

Navbar-default .navbar-nav > .active > a、.navbar-default .navbar-nav > .active > a:hover、.navbar-default .navbar-nav > .active > a:focus (
色: ダークグレー;
背景色: rgba(0, 0, 0, 0.5);
}

jumbotron の文を、フォームコードを使用して新しい文に置き換えます。

ランディングページが訪問者を顧客に変える
8 月の一時停止の危険性は、車両の安全性を確保するために重要です。

Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam noummmy。

そして私たちは外見を規定します

/* 形状 */
.headform-list(
リストスタイルタイプ: なし;
行の高さ: 26px;
フォントの太さ: 400;
パディング: 0px;
マージン-ボトム: 40px;
}
.headform(
オーバーフロー: 非表示;
位置: 相対的;
背景色: rgba(0,0,0,.4);
パディング: 35 ピクセル 40 ピクセル;
境界半径: 8px;
}
入力、ボタン、選択、テキストエリア (
幅: 100%;
マージン-ボトム: 10px;
}
.headform-list li .fa (
位置: 絶対;
上: 0px;
左: 0px;
幅: 42ピクセル;
フォントサイズ: 24px;
テキスト整列: 中央;
}
.headform-list li (
位置: 相対的;
最小高さ: 38px;
パディング左: 62px;
マージン-ボトム: 20px;
}
.ジャンボトロン p (
色: #fff;
フォントサイズ: 16px;
フォントスタイル: イタリック体。
}

ジャンボトロンの本文も変更を要求したため、ここに行き着きました。

料金を変更させていただいております。

/* 料金表の概要 */
.pricing_item(
背景色: rgba(0,0,0,.4); /* 行が変更されました */
境界半径: 4px; /* 行が変更されました */
位置: 相対的;
表示: -webkit-flex;
ディスプレイ: フレックス;
-webkit-flex-direction: 列;
フレックス方向: 列;
-webkit-align-items: ストレッチ;
align-items: ストレッチ;
テキスト整列: 中央;
-webkit-flex: 0 1 330px;
フレックス: 0 1 330ピクセル;
パディング: 2em 3em;
マージン: 1em;
色: #f2f2f2; /* 行が変更されました */
カーソル: デフォルト;
オーバーフロー: 非表示;
ボックスシャドウ: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* クリックすると背景を変更します */
.pricing_item:ホバー (
カラー: #444;
背景: #ddd; /* 行が変更されました */
}

今はこんな感じです - 透明な背景そして丸い角。

テンプレートの準備ができました。

例 3: カウントダウンカウンターを使用する場合

ジャンボトロンの塗りつぶしを再度変更し、前のテンプレートと同様に、新しい背景に合わせてテンプレートの色を変更します。カウンタースクリプトを接続します。

HTML

時間は待ってくれない
ローレム・イプサム・ドール・シット・アメット、コンセクテトゥアー・アディピシング・エリート、セド・ディアム・ノヌミー・ニブ・ユーイズムモッド・ティンシダント・ラオリート・ドロレ・マグナ・アリクアム・エラット・ヴォルトパット。あなたの行動を最小限に抑えて、ロボルティスの疑いのあるウラムコーパーの行動を監視し、戦闘結果を確認してください。ヴァルプテートのヘンドレリットの中で、最も危険な行為の結果、ベロエロスとアキュムサンとイストでの恐ろしい無罪の恐怖を、あなたは、最高の犯罪者、最高の犯罪者であると信じています。

Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam noummmy。

Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diam noummmy。

var myCountdown1 = 新しいカウントダウン((
time: 86400 * 3, // 86400 秒 = 1 日
幅: 300
、身長: 60
、rangeHi: 「日」
、スタイル: "反転" //

ランディング ページ - それは何ですか? 例を含む完全な説明。 最適なランディング ページ: 専門家の選択

ランディングページ - それは何ですか? 例を含む完全な説明。最適なランディングページ: 専門家の選択