変換率の高いHTMLランディングページを作成する方法

公開: 2016-05-20

世界のすべての情報にアクセスするよりも簡単なことはほとんどありません。必要なのは、ブラウザで広告やリンクをクリックするか、Webアドレスをコピーすることだけで、探していたものすべてが見つかる可能性があります。

しかし、これほど簡単なことではありませんでした。

その年は1989年でした。ティムバーナーズリーはスイスのジュネーブにあるCERNで働いていました。そこで彼は、グローバルハイパーテキストプロジェクトを提案しました。このプロジェクトは、ワールドワイドウェブとして知られるようになりました。

ティムは2年間、HTML、URI、およびHTTPの仕様を含む設計に取り組みました。 1990年10月までに、ワールドワイドウェブプログラムがCERNで利用可能になり、1991年の夏に、世界中のすべての人が利用できるようになりました。

世界初のウェブサイトは1991年8月6日に公開され、その目的は、ユーザーがウェブサーバーをセットアップして独自のウェブページを作成する方法に関する情報を提供することでした。

そのウェブサイトはまだ公開されており、次のようになります。

現代の基準では、ページは派手でも魅力的でもないし、ナビゲーションリンクも、マルチメディアも、実際の構造もありません。さらに、完了するまでに多くの時間とHTMLコーディングが必要でした。

そのため、世界は必然的に変化しました。変更されていないのは、Webページの作成にはまだかなりの時間がかかることです。これには、クリック後のランディングページが含まれます。

これは、コードの言語を話さないマーケターにとっては少し問題があります。

はい、それは言語です—複数形。

クリック後のランディングページを自分で最初から作成するには、HTMLとCSSを知っている必要があります。

HTMLとCSSとは何か、クリック後のランディングページを作成する際にそれらが果たす役割について詳しく見ていきましょう。

HTMLランディングページとは何ですか？

HTML（Hyper Text Markup Language）は、コピー、画像、その他の要素をWebページに配置するために使用され、ページレイアウトの定義に役立ちます。

HTMLはマークアップタグで構成されており、これらのタグは山かっこで囲まれたキーワードです。

以下の図は、HTMLタグがページの外観を決定する非常に基本的な例です。

見出し、ブランドロゴ、画像、箇条書き、番号付きリストなどのレイアウトを決定するためのさまざまなHTMLタグがあります。HTMLランディングページを作成するときは、次のコードを渡す必要があります。

あなたの見出しはどこにありますか
コピーの場所
あなたのサービスの利点をリストする方法
CTAボタンのコピーの内容とボタンの配置場所

ページ要素の一般的なhtmlタグは次のとおりです。

クリック後のランディングページ要素はすべて、それぞれのHTMLタグで記述する必要があります。

終了すると、HTMLの手仕事は次のようになります。

線、単語、文字の束のように見えますね。実際、このWebページを生成するのはすべて大きなパズルの一部です。

公開されたクリック後のランディングページは、すべてのHTMLタグが適切な場所に正しく配置されている場合にのみ見栄えがします。 HTMLは現在5番目のバージョンで使用されており、HTML5として知られています。最後に番号が付けられたバージョンであり、バージョン6はありません。

HTML5には、次のような新しい要素が含まれています。

ヘッダー、フッター、セクションなどのセマンティック要素
日付と時刻などのフォーム制御属性
グラフィック要素、 svg、キャンバス
マルチメディア要素、オーディオとビデオ

詳細については、CodeacademyコースとTreehouseコースを試してみてください。簡単な、クリック後の簡単なHTMLランディングページの作成方法を学ぶことに興味があります。

CSSとは何ですか？

CSS（Cascading Style Sheets）は、HTML要素がWebページにどのように表示されるかを説明するシートです。

CSSの「カスケード」部分により、トップレベルのスタイルシートで行われた変更をWebページ全体にカスケードできます。これにより時間を節約でき、すべてのスタイルシートに目を通すことなく、ページの外観に大きな変更を加えることができます。

HTMLは、ページのコンテンツを説明するために作成されました。一方、CSSは、クリック後のランディングページのコピーのフォントや色など、ページのスタイルを定義するためにWorld WideWebコンソーシアムによって作成されました。

フォントと色のCSSの例は次のようになります。

「コード化された日曜大工」のクリック後のランディングページオプションの場合、HTMLとCSSを組み合わせて、リードを生成する価値のあるページを作成する必要があります。

それがどのように行われるか見てみましょう。

簡単なHTMLのクリック後のランディングページを自分で作成する方法

テキストエディタを開くことから始めます–Windowsの場合はメモ帳を使用しMacの場合はテキストエディットを使用します。 MS OfficeやOpenOfficeなどのワードプロセッサは、Webブラウザが読み取れないファイルを生成するため、使用しないでください。

HTMLおよびCSSコーディングの場合、プレーンテキストファイルから始める必要があります。

次のようなHTMLコードをテキストエディタに入力します。

次に、CSSを使用して、このテキストにいくつかの色を追加しましょう。 HTMLファイルに移動し、ファイルの「頭」の部分に赤いコードを追加します。

このスタイルシートは、本文の色（紫）と背景色（緑がかった黄色）を決定します。スタイルシートに正しいカラーコードを入力することを忘れないでください。そうしないと、最終ページが意図したとおりに表示されません。

これはあなたのページがどのように見えるかです：

次に、フォントを追加する必要があります。このために、HTMLファイルに次の行を追加します。

コードのこれらのセクションを追加した後のページは次のようになります。

さて、上記の例は非常に基本的で非常に短いことを覚えておいてください。最適化されたクリック後のランディングページは、画像、動画、CTA、フォームなど、より詳細になり、さらに長くなります。これらすべての要素を従来の方法でコーディングするのにどれくらいの時間がかかるか想像してみてください…

ページのコードをカスタマイズする準備はできましたか？

クリック後のランディングページを作成する別の（はるかに簡単な）方法があると言ったらどうでしょうか。それはまだDIYですが、テキストエディタでコードの多数の行にストレスをかける必要はなく、「すべてのタグを閉じましたか？」と思わせることができます。

Instapageでページを作成する

Instapageは、開発者やデザイナーの必要性を排除します。これにより、コーダーではないマーケターは、わずか数分で手間をかけずに専用ページを作成できます。

HTMLとCSSを使用してページを作成する方法を示しました。次に、Instapageを使用してHTMLのクリック後のランディングページを作成する方法を見てみましょう。コーディングは必要ありません。

ステップ1：

Instapageでアカウントを設定します。

ステップ2：

「新しいページの作成」をクリックします。

ステップ3：

ページの作成方法を選択します。事前に最適化されたテンプレートを選択するか、既存のページをスキャンするか、.instapageファイルをアップロードするかどうか。

テンプレートオプションから始めましょう：

ステップ4：

テンプレートギャラリーに到着し、オファーに最適な最も適切なテンプレートを選択できます。作業を簡単にするために、テンプレートは上部にあるクリック後のランディングページのタイプによって分類されています。

ステップ5：

選択したテンプレートをプレビューし、[編集]をクリックして、ページに名前を付けます。

ステップ6：

要素を選択し、[編集]をクリックして、ページを好きなようにカスタマイズします。

ステップ7：

クリックするだけでモバイルビューとデスクトップビューを切り替えます。

ステップ8：

必要な変更を加えたら、[プレビュー]をクリックして、すべてが正しく表示されることを確認します。

ステップ9：

ページに満足したら、[公開]をクリックして、公開ドメインを選択します。

ほんの数ステップで、最適化されたクリック後のランディングページをウェブ上で公開し、コードを1つも書かずに変換する準備を整えることができます。 Instapageは、コードなしですべてを処理します。

ただし、それでも個人的なタッチを追加したい場合は、カスタムHTML、Javascript、CSSを使用するオプションを提供しているため、たとえば、Facebook広告の追跡コードやGoogle広告をページに追加できます。あなたがする必要があるのは、適切なセクションに必要なコードを貼り付けて、あなたのページのライブバージョンにあなたの変更を公開することです。

「設定」メニューにHTMLコードを追加することで、ページにHTMLウィジェット（YouTubeビデオ、ソーシャルメディアウィジェット、終了インテントフォームなど）を埋め込むこともできます。

コードフリーの美しいポストクリックランディングページを作成する

Instapageは、クリック後のランディングページの作成プロセスの手間を省きます。コードの行を見つめたり、カラーコードを正しく取得することを強調したり、HTMLタグの角かっこを見逃したりする必要はありません。むしろ、すべてのページ要素に注意を向け、それらを完成させてコンバージョン率を最大化することができます。

クリック後のランディングページの作成は、これまでになく簡単になりました。だから、今日InstapageEnterpriseデモにサインアップしてください。