ホームページを閲覧していると、会員登録や物品販売などユーザーに対して何らかのアクションを促すために作成された「ランディングページ(LP)」を見ることがあります。
例えば、健康食品を販売している会社が、ダイエットのサプリメント購入を促すランディングページを作ったとしましょう。
基本的には、アクセスしたランディングページの上から下に向かってページを作成していき、
そのサプリメントの効能や値段、利用者のパーセンテージを表したグラフに実際に利用している人の感想などの
詳細を隅々までページに記載していくことになります。
ランディングページの訪問者に、”ほぉー、へぇー”とページの下に向かって読ませて行き、
”なんかちょっと買ってみたい気がするな・・”
と思わせたその絶妙なタイミングで、購入するための”名前”や”支払い方法”を入力する入力枠を表示させる・・・
そんなページがランディングページとなります。
訪問者の購買意欲や興味を掻き立てるために、
ページの作成には一手間も二手間も必要なのですが、
簡単に入力フォームを作成できる「formrun」であれば、ランディングページも簡単に作成することができます。
ここでは、「formrun」の「フォームクリエイター機能」を使って、
自社で発行するメールマガジンを購読してもらうためのランディングページを作成してみたいと思います。
目次
formrunの新規フォーム作成
まずは、formrunにアクセスしてみましょう。
ちなみに、formrunの登録や使い方は、以下のページを参考にしてください。
管理ページで新規フォームを作成します。
「新規フォームを作成」をクリックします。
「フォームクリエイターで作成する」をクリックします。
公開するフォームのURLを任意で入力します。
ここでは、「https://form.run/@LPsample」となるようにしています。
テンプレートの一覧から、「メールマガジンの購読」の下にある
「このテンプレートを使用」をクリックします。
タイトルの編集
タイトル部分にマウスを合わせると、「クリックして編集」と表示されます。
実際にクリックして編集します。
「項目設定」でタイトルとその説明文を記述します。
「タイトルカラー」でタイトルのカラーを設定します。
カラーコードの数値(#000000など)を直接入力すると、一覧にはないカラーを指定することができます。
タイトルに色をつけて、テキストを変更してみました。
ファーストインパクト！画像を最初に挿入する
タイトルが決まったら、最初にページを見てくれた訪問者に画像で訴えかけるようにします。
左サイドバーの「フォーム」から「ブロック」カテゴリまで下りて、「画像」をクリックします。
「画像をアップロード」をクリックして目的の画像を選択して挿入します。
タイトルの下に、画像が挿入されました。
※もしメールアドレスなどの入力項目より下に入ってしまった場合は、
画像にマウスを合わせて表示される上矢印をクリックして、タイトルの下まで持っていってください
挿入した画像を編集します。
画像の見出しを設定できますが、ここでは見出しはなくてもいいと思いますので、空にして「完了」をクリックします。
セカンドインパクト！グラフで利用者数を表現する
ページ構成は自由なのですが、ここではファーストインパクトの次にも画像を挿入するようにしてみます。
中でも、グラフデータを画像にして、現在よく利用されているExcelのバージョンを簡単な数値として表現してみたいと思います。
画像の挿入方法は、先程と同様になります。
挿入した画像は、任意の場所へ移動させることができます。
上矢印、もしくは下矢印をクリックして挿入した画像を目的の位置へと移動させます。
とりあえず、第一段階、第二段階は完了です。
テキストベースで少し補足説明をする
画像による視覚的な訴えを行ってきたので、ここからは少しテキストベースの補足説明を入れていきたいと思います。
まずは「セクション」を入れて、テキストベースの説明タイトルを入れてみます。
左サイドバーの「ブロック」から「セクション」をクリックします。
見出しとなるタイトル文とその簡単な説明を入力します。
セクションとして表示されるこれらの文をどの位置に表示させるかを「左・中・右」から選択します。
細かい説明は「説明テキスト」を使って表現してみます。
左サイドバーの「ブロック」から「説明テキスト」をクリックします。
ここは、キーボードから文字を入力するだけです。
言葉で伝えたいことを細かく記載していきます。
もう一段階画像と文字説明から入力フォームへ
さて、実際の会社の現場の声を箇条書きで見せておいて、
ではこのメールマガジンを読むとどうなるの？
というところをもう一段階、画像と文字で説明しようと思います。
操作方法はこれまでと同じです。
画像1枚とセクションやテキストを混ぜ合わせて作成してみました。
入力フォーム前に運営サイトのホームページへ誘導もできる
訪問者に情報を入力してもらう前に、詳細なホームページが別にあるときは、
URLを記載してホームページへと誘導することも可能です。
その場合も、「説明テキスト」を使います。
URLは、そのまま入力すれば実際はリンクテキストとして表示されるようになります。
リンク先へは、新しいウィンドウ(新しいタブ)で開くようになります。
総括
完成したランディングページは以下からアクセスできます。
実際に名前やメールアドレスを送信しても、メールマガジンが送られてくることはないので安心してください(笑)
さて、いかがでしたでしょうか。
ページの幅いっぱいに大きい文字で訴えかけるような形ではありませんが、
入力フォームを提供しているサービスですから、フォーム周りについては何も心配することはありません。
今回は、フォームクリエイターで作成してみましたが、
HTMLの記述に困らない人は、一からコードを組んでいくのも手ですね。
そうすれば、任意のページにフォームを埋め込んで使うこともできますし、
フォームクリエイターよりも柔軟なページ作成が可能になると思います。
何と言っても、入力フォームに入力されたユーザーデータを簡単に管理できる機能がformrunの売りですから、
ランディングページのような訴求ページからの統計データの収集にはとても向いているわけです。
とりあえず、フリープランでも3つまでフォームを作成することができます。
いざ本格的に入力フォームからユーザーを集めることになる前に、
formrunでランディングページ風に改造した入力フォームを1つでも作成して研究しておく、
という使い方もできることになります。
