情報整理術の数々! PICK UP!

formrunのフォームクリエイターでメールマガジンの購読フォームをランディングページ風に作成してみる

ホームページを閲覧していると、会員登録や物品販売などユーザーに対して何らかのアクションを促すために作成された「ランディングページ(LP)」を見ることがあります。

例えば、健康食品を販売している会社が、ダイエットのサプリメント購入を促すランディングページを作ったとしましょう。

基本的には、アクセスしたランディングページの上から下に向かってページを作成していき、
そのサプリメントの効能や値段、利用者のパーセンテージを表したグラフに実際に利用している人の感想などの
詳細を隅々までページに記載していくことになります。

ランディングページの訪問者に、”ほぉー、へぇー”とページの下に向かって読ませて行き、
”なんかちょっと買ってみたい気がするな・・”
と思わせたその絶妙なタイミングで、購入するための”名前”や”支払い方法”を入力する入力枠を表示させる・・・

そんなページがランディングページとなります。

訪問者の購買意欲や興味を掻き立てるために、
ページの作成には一手間も二手間も必要なのですが、
簡単に入力フォームを作成できる「formrun」であれば、ランディングページも簡単に作成することができます。

ここでは、「formrun」の「フォームクリエイター機能」を使って、
自社で発行するメールマガジンを購読してもらうためのランディングページを作成してみたいと思います。

formrunの新規フォーム作成

まずは、formrunにアクセスしてみましょう。

ちなみに、formrunの登録や使い方は、以下のページを参考にしてください。

管理ページで新規フォームを作成します。

「新規フォームを作成」をクリックします。

「フォームクリエイターで作成する」をクリックします。

公開するフォームのURLを任意で入力します。
ここでは、「https://form.run/@LPsample」となるようにしています。

テンプレートの一覧から、「メールマガジンの購読」の下にある
「このテンプレートを使用」をクリックします。

タイトルの編集

タイトル部分にマウスを合わせると、「クリックして編集」と表示されます。
実際にクリックして編集します。

「項目設定」でタイトルとその説明文を記述します。
「タイトルカラー」でタイトルのカラーを設定します。
カラーコードの数値(#000000など)を直接入力すると、一覧にはないカラーを指定することができます。

タイトルに色をつけて、テキストを変更してみました。

ファーストインパクト!画像を最初に挿入する

タイトルが決まったら、最初にページを見てくれた訪問者に画像で訴えかけるようにします。

左サイドバーの「フォーム」から「ブロック」カテゴリまで下りて、「画像」をクリックします。

「画像をアップロード」をクリックして目的の画像を選択して挿入します。

タイトルの下に、画像が挿入されました。
※もしメールアドレスなどの入力項目より下に入ってしまった場合は、
画像にマウスを合わせて表示される上矢印をクリックして、タイトルの下まで持っていってください

挿入した画像を編集します。
画像の見出しを設定できますが、ここでは見出しはなくてもいいと思いますので、空にして「完了」をクリックします。

セカンドインパクト!グラフで利用者数を表現する

ページ構成は自由なのですが、ここではファーストインパクトの次にも画像を挿入するようにしてみます。
中でも、グラフデータを画像にして、現在よく利用されているExcelのバージョンを簡単な数値として表現してみたいと思います。

画像の挿入方法は、先程と同様になります。

挿入した画像は、任意の場所へ移動させることができます。
上矢印、もしくは下矢印をクリックして挿入した画像を目的の位置へと移動させます。

とりあえず、第一段階、第二段階は完了です。

テキストベースで少し補足説明をする

画像による視覚的な訴えを行ってきたので、ここからは少しテキストベースの補足説明を入れていきたいと思います。

まずは「セクション」を入れて、テキストベースの説明タイトルを入れてみます。

左サイドバーの「ブロック」から「セクション」をクリックします。

見出しとなるタイトル文とその簡単な説明を入力します。
セクションとして表示されるこれらの文をどの位置に表示させるかを「左・中・右」から選択します。

細かい説明は「説明テキスト」を使って表現してみます。

左サイドバーの「ブロック」から「説明テキスト」をクリックします。

ここは、キーボードから文字を入力するだけです。
言葉で伝えたいことを細かく記載していきます。

もう一段階画像と文字説明から入力フォームへ

さて、実際の会社の現場の声を箇条書きで見せておいて、
ではこのメールマガジンを読むとどうなるの?
というところをもう一段階、画像と文字で説明しようと思います。

操作方法はこれまでと同じです。

画像1枚とセクションやテキストを混ぜ合わせて作成してみました。

入力フォーム前に運営サイトのホームページへ誘導もできる

訪問者に情報を入力してもらう前に、詳細なホームページが別にあるときは、
URLを記載してホームページへと誘導することも可能です。

その場合も、「説明テキスト」を使います。

URLは、そのまま入力すれば実際はリンクテキストとして表示されるようになります。
リンク先へは、新しいウィンドウ(新しいタブ)で開くようになります。

総括

完成したランディングページは以下からアクセスできます。

一日一術エクセル時短作業

実際に名前やメールアドレスを送信しても、メールマガジンが送られてくることはないので安心してください(笑)

さて、いかがでしたでしょうか。

ページの幅いっぱいに大きい文字で訴えかけるような形ではありませんが、
入力フォームを提供しているサービスですから、フォーム周りについては何も心配することはありません。

今回は、フォームクリエイターで作成してみましたが、
HTMLの記述に困らない人は、一からコードを組んでいくのも手ですね。

そうすれば、任意のページにフォームを埋め込んで使うこともできますし、
フォームクリエイターよりも柔軟なページ作成が可能になると思います。

何と言っても、入力フォームに入力されたユーザーデータを簡単に管理できる機能がformrunの売りですから、
ランディングページのような訴求ページからの統計データの収集にはとても向いているわけです。

とりあえず、フリープランでも3つまでフォームを作成することができます。
いざ本格的に入力フォームからユーザーを集めることになる前に、
formrunでランディングページ風に改造した入力フォームを1つでも作成して研究しておく、
という使い方もできることになります。



関連記事

  1. ドコモ会員必見!!買い物や登録で賢くキャッシュを貯めるには?!

  2. シンプルにシェアするならこれっ!最強のオンラインホワイトボードシステムが登場!

  3. 楽天銀行の法人ビジネス口座を持っているなら無料で使えるクラウドアプリを使ってみよう!

  4. GoogleクラウドプリントでAndroidスマホから直接プリンタへ印刷する方法とは

  5. パワーポイントが使いづらい環境の方はこちら―「ebook5」を使って電子カタログを作成する

  6. 自社のサイトにオリジナリティ溢れる入力フォームを作るには?!作成も管理も手軽な【formrun】を使…

  7. 契約書の作成から管理までをクラウドで完結できる!【Holmes】で契約のすべてを簡単に

  8. 【formrun】で作った会員登録フォームに登録があったら「slack」のチャンネルに通知してみる

  9. [IFTTTを活用して効率UP]IFTTTに登録して使えるようにしてみよう

特集記事!

  1. 【連載】Lucidchartの図をワードやエクセルに挿入する―マイクロソフトイン…
  2. 【連載序章】よい図面作成アプリが見つからない現場担当者必見!Lucidchart…
  3. 簡単設定と分かりやすい料金プランで国内・国外”どんなときも”Wi-Fiが繋がるな…
  4. マイクロソフト発StickyNotesで覚えておきたい設定・使い方8選
  5. 【OneNote for Windows10】StickyNotesが使用可能に…
  6. iPadで手書きのメモを取る!ApplePencilが使える無料のメモアプリ5選…
  7. 楽天銀行の法人ビジネス口座を持っているなら無料で使えるクラウドアプリを使ってみよ…
  8. 外出先からの転送もOK!使い勝手のいいファイル転送アプリを3つ選んでみた
  9. 【シリーズ:人より一歩先行くエクセル技を身につける】ピボットテーブル編[番外]
  10. QR決済に新たな刺客!ソフトバンクとヤフーが開始したPayPay(ペイペイ)を設…

人気記事 PickUp!

ー文字だけで語る(あつもじ)ー

おすすめ記事

ピックアップ!

  1. ドコモ会員必見!!買い物や登録で賢くキャッシュを貯めるには?!
  2. スマホで画像をスキャンーOffice Lensは画像の文字も読み取る優れもの①
  3. スマホで画像をスキャンーOffice Lensは画像の文字も読み取る優れもの②
  4. 【OneNoteへGo】YouTubeの動画をノートに埋め込む
  5. 【OneNoteへGo】Office製品のOutlook連絡帳をOneNoteの…
  6. 【ちょっと休憩】検索したいわけじゃないけどつい弾きたくなる「弾いちゃお検索」とは…
  7. 【マイクロソフト To-Do】パソコンとスマホで”やること”をシンプルに管理する…
  8. 【Google ToDo リスト】Gmailからも起動OK!Googleの予定管…
  9. ワールドカップには嘘のような法則が存在する?!
  10. 【リメンバーザミルク】海外製アプリながら使いやすいインターフェースで人気のタスク…

↓OneDriveの便利な機能が満載!↓

icon-cogマイクロソフトのクラウドストレージである「OneDrive」の便利な使い方をご紹介しています。個人契約でしか利用できない機能もあります。

PAGE TOP