00:00
はい、それでは今回は申込みフォームの最適化の方法というテーマで解説を進めていきます。 この動画を視聴するメイトですね。
まず申込みフォームの仕組み、これがわかります。 あとは申込みフォームの細かい微調整ができるようになります。
初心者、ウェブ素人でもできる範囲のことですね。
プラスアルファでユーザーに安心感を与える フォーム周りの施策がわかる、といった内容を解説していきます。
主に微調整ですね。 こういうのがメインになってきます。
まずはフォームの最低限のHTMLを覚えましょう。
HTMLというのはウェブサイトの骨組みのようなものですね。 深い理解は必要ないんですけど、一応存在というか概念だけでも
ざっくりと覚えておいてください。 前提の話としてですね、
深い理解は必要ないんです。それなりに詳しい方でも 深いところまで乱記しているというわけではないので、こういう
認識でやってください。この解説は フォームの微調整が目的なので
あとはそこまでは使わないです。 あくまでも初心者でもできる
実践可能な範囲で お伝えをしていきます。
こういうのがあるとですね、行動なんですけど 一見とっつきにくいんですが
難しくは考えないでください。 あとそこまで難しくはないです。このHTMLぐらいでしたら
という前提の話。あと最後にオフトウィンページ作成での フォーム最適化で解説を進めていきます。
オフトウィンページというのは リストを取るためのページですよね。メールアドレスを取得するためのページ。
なので商品の申し込みページのランニングページはない というのだけ覚えておいてください。
今回の内容はこれでいきます。 まず知っておいてほしいところなんですが、このフォームの各項目の名前ですね。
一応ですね 完璧でなくてもいいので覚えておいてください。
こういうのを覚えておくとですね 検索するときとか
役立ちますので、ぜひザークだと思って覚えていただければと思います。 まず一つ目ですねテキストフィールドですね。これはテキストを入力する項目ですね。
例えば名前とかメールアドレスですね。 入力欄がこれに当たります。
03:06
あと送信ボタンですね。これはフォームに入力した際に内容を送信するためのボタンですね。
主にこれだけ覚えていただければと思います。 皆さんも
web 上の何か登録をしたとか 無料版に登録するとかそういった経験少なからずあると思います。
無いって方は 積極的にやってみてほしいんですけど、するとこういうのがありますね。
メールアドレスの入力欄があって、あとは送信ボタンがあって
送信ボタンをクリックすると次のアクションに進むっていうものですね。
それぞれにこういう名前ですね。一応ありますよっていうことだけは覚えておいてください。 送信ボタンはそのままなので簡単だと思います。
他にもですね、セレクトボックスですね。
クリックすると選択肢が現れる項目ですね。
ラジオボタン。 複数の選択肢から一つの選ぶ項目ですね。ボタン型になっています。
チェックボックスですね。 これ複数の選択肢から複数のチェックができる項目。
テキストエリアですね。お問い合わせフォームとかに多いですね。
お問い合わせの内容を入力してくださいっていう結構広めのエリア。
一行では書ききれない文章を入力する項目になります。 コメントとか
そういうものですね。 テキストエリアは結構
お問い合わせフォームに多かったりします。 これ完璧に暗記する必要はないので、予備知識としてなんとなくでも把握しておいてください。
といったところですね。ではせっかくなので実物を見ていきたいと思います。 こちらがフォームが設置されたページですね。こういうのをオフトウィンページと言います。
無料派の登録ページになりますね。 ここがメールアドレスのテキストフィードになります。
こちらが送信ボタンですね。 いろいろ紹介したんですけど
このメールアドレスのみですね。また詳しくはお伝えしますが、メールアドレスのみの方が登録率が高いですね。
なぜかというと、いちいち他の項目を入力する必要がないからです。
あとはお問い合わせフォーム。こういうフォームもありますよね。 この場合名前が分からないと不便だったりするので、名前、メールアドレス、お問い合わせ内容ですね。
こういう3つの項目が代表的なものになっています。
目的に合わせて項目は違いますので、どこに目的があるかで最適化してください。
今回こっちをメインにするので、こういうものですね。
06:03
いろいろ他にも紹介したんですが、 こういうのは余談なので
簡単に覚えておいてください。こういうのはありますよっていうところですね。
次の解説に進めていくんですが、こういうものっていうのはHTMLのタグですね。 HTMLで構成されています。
インプットタグって言われるものがあるんですけど、
例えば、先ほどのお問い合わせフォームですね。 この名前、メールアドレスっていうのは、こちらはインプットタグで構成されています。
これWebサービスで作っているので、 こういうものに使われているというわけですね。
この送信するボタンですね。 これもインプットタグになっています。
このインプットタイプ、テキストっていうのが名前。 インプットタイプ、Eメールっていうのがメールアドレス。
インプットタイプ、サブミットっていうのが送信ボタンになっています。
なので、このインプットタグって言われるものに対して、 それでは役割があるっていうイメージですね。
テキスト、Eメール、サブミット、送信ボタン。 これだけでも覚えていただけると思います。
といっても完璧に覚えるというよりかは、 そういうもので作られているんだ程度でOKです。
かなりシンプルにしているコードなので、 厳密に言うともっと複雑だったりします。
他にも、 ホームで使用するタグっていうのはあるんですけど、 そこまで一生懸命覚えなくていいです。
定期のタグ、これを認識できればOKです。 書けなくてもOKということですね。
書けなくてもOK。ただこういうコードの中から、 編集する項目ですね。
そういうのを自分で判断できるようになればOKですね。 あと記述するルールみたいなものを覚えておけばOKです。
また解説しますけど、その記述するルールっていうのは、 反格で入力するっていうところとか、
あとこういうクオテーションですね。 これを消さないとか、そういうものですね。
そんなに多くないです、ルール自体も。 みなさんがそこまで覚える必要はないです。
っていうのが説明しておいてなんですが、 すべてを覚える必要っていうのはないです。
09:00
存在とか、概念とかですね。 そういうものを覚えていただければOKです。
なんでかというと、ウェブサービスですね。 メール配信サービスシステムで埋め込みコードですね。
これを取得できるためですね。 埋め込みコードがあるので、
1から記述する必要はないです。 ただ細かい微調整が
できる程度になるには存在とかですね、 そのルールとかそういうのを覚えておく必要があります。
なので、細かい微調整ができる という知識があればOKですね。
そういう意味で覚える必要はないということですね。 ぼんやりとでいいので、
埋め込みコードを何度でも取得できて、 間違ってもまた取得できますので、
ぼんやりとして理解でOKです。 覚える範囲も限られた一部のみでOKです。
以降でご紹介します。 なので、ここでお伝えしたいのは、
こういうのを知っておいてほしいです、 というのと、HTMLを覚えようとは言いつつもですね、
そんなに身構えないでください、 という話になります。
では次の解説に進めていきます。 先ほど前のコードの話はですね、
図学というか、一応、 参考程度に知っておいてください。
知っておくと何かと便利になったりするので。 ということで次ですね、
ボタンテキストを自由に変更する方法、 これを解説していきます。
先ほど解説した通り、登録法の埋め込みコードがあるので、 ほぼほぼ記述する必要っていうのはないです。
ですが、このボタンテキスト、 これの文言を変更しておけるようになると結構、
マーケティング上ですね、良かったりしますので、 そこをお伝えします。
だいたいその登録フォームってこういう風になっています。 ボタンがですね、送信するとかですね、
送信とか、すごい無機質というか、 質素な感じになっています。
これを例えば、先ほど見せたとおり、 無料でテンプレートを受け取るとかですね、
無料でPDFを受け取るとか、 無料で動画講座を受講するとかですね、
そういう文言になっているとすごくイメージしやすいですし、 安心感があります。
これが送信するだと、あと申し込むとかだと、
若干、不審感とまだ言わないですけど、 寂しいというか、登録しづらいですよね。
12:05
なので、こういう具体的な感じにすると、 マーケティング上良いです、という話になりますね。
こういうところをマイクロコピーなんかと言ったりします。 本があっているので、気になった方はそちらも確認してみてください。
Amazonとかで検索してみると出てきます。 そのためにですね、それを実践するために
こういう知識も覚えておいた方がいいです。 ボタンテキストはですね、インプットタグのタイプ、サブミットの中の
このバリューですね、 この値を変更するとボタンテキストが
変更できます。 自分で自由に変更できるようになります。
すると知らない方よりかは差がつきますね、という話ですね。 なので先ほどはちょっとですね、HTMLについて解説しました。
完璧に理解しなくてもいいですよ、というのはこういうところになります。 出力されたものをちょこっと編集する程度なので。
というのがこれですね。ここまでの解説というのは、 埋め込みコードの中からこの
タイプ、サブミット、バリュー、これをですね、 ピンポイントで見つけられるようにするためですね。
間違っても、間違った箇所を編集したらですね、 反映されないな、もちろんフォームの
機能がしなくなってしまうこともあります。 なので覚えておくといいですよ、というのですが、とはいっても
埋め込みコードというのは何度でも検索可能なので、 知識を得た上で安心して編集してくださいね、
ということをお伝えしたいです。 こういうのを知っておくとですね、例えば今回はメールチームでやっていこうかなと思うんですが、
メールチーム以外でも使えたりします。 例えばASMLとか、
そうですね、オレンジメールとか、 エキスパートメール、他のメール配信サービスでも十分
汎用性がある知識だと思いますので、 登録フォームの埋め込みコードですね。
これにまつわる設定はここからできますよ、 ということを覚えておいてください。
その中でもボタンテキストですね。 ここにピンポイントで解説しています。
ちょっと前置きが長くなりましたが、 ここから実際の操作をお見せしていきたいと思います。
こちらがメールチームの実際の画面です。 今現在の画面になっています。
これもまた変わるかもしれないので、 そのつもりで見てください。
このオーディエンスですね。 オーディエンスの中のマネージュオーディエンスですね。
Sign Up Homes、こちらをクリックします。
15:02
今回メールチームでやってみますけど、 先ほど話した通り他のメール配信サービスでも
登録ホームの機能がありますので、 それを確認してください。
ここだけ抽象的に考えておいたほうがいいです。
操作は具体的に覚えておくっていうのも 必要なんですけど、抽象的に考えないと
コスパ悪い学び方になってしまうので、 そのつもりでいてください。
Embedded Homes、埋め込みコードのホームですね。 これはこちらをクリックします。
こちらで、Disable all JavaScript、 JavaScriptのコードいらないので消します。
メールチームは英語になっていますので、 ここですねボタンテキストがそもそも英語になってしまっている
っていうところがあるので、 これも変更したいところです。
細かい微調整も後でしていきます。 このコードをコピーします。
コピーしたらワードプレスの方に移動ですね。
新規で追加します。とりあえずこれはサンプルでやっていきます。
パーマリンクも変更します。
テキストですね、必ずVisual Textにしていただいて、 こちらに貼り付けます。
貼り付けたら、タイプSubmitを見つけます。 この場合、クロームの検索機能を使ってください。
Macの方はコマンドF、 Windowsの方はコントロールFですね。
ここでSubmitと入力してください。
すると色が付きます。 InputType Submit。
今回ボタンテキストの内容ですね。
それを変更するので、このValueというところですね。 こちらを変更します。
これを例えば無料版によるんですけど、 今回は無料のレポートだとします。
なので無料でレポートを、 PDFレポートを受け取るとします。
ここですね。 するとボタンテキストの内容を変更することができます。
Value、このダブルクローテーションの間ですね。 絶対に消さないでください。
あとは打ち込むだけ。 これで下書き保存ですね。
18:06
はい、こうなりますっていうところですね。
今回この、ちょっとくどいですけど、 念のためもう1回解説しますと、
メールチームで解説しましたが、 本間のメール配信サービスでも同じようにできなくはないと思いますので、
このようにやってください。 探すときは、
ブラウザの検索ですね。 これで探すといいです。
これSubmitと打ち込むわけですね。 すると分かります。その必要な箇所が分かります。
はい、色が付くからですね。
というのが、このメール配信サービスでもできますよっていうところですね。
知識があればできるっていうところですね。 やっぱりどうしても、
ここが無機質な文章になってしまいがちですので、 さすがにそこまではメール配信サービス上で
できなかったりします。編集とか。 ただ一部の、例えばベンチマークEメールでしたら、このように
管理画面上ですね。 視覚的に変更できますので、そういう場合はそれを使ってください。
そうでないサービスもあったりしますので、 一応ですね、どっちでもできるようにしておくといいと思います。
ベンチマークEメールは、 打ち込んで編集ができます。ボタンテキストですね。
そこは柔軟にやっていただくと思います。 ここで覚えといて欲しいのは、もちろんこのボタンテキストの
HTMLですね。 これが編集ができるっていうことと、マイクロコピーっていう、そういうものがありますよっていうところですね。
送信するでは無機質なので、そこを編集できるようにしましょう。 この項目なんですが、このメールアドレスのみにしてください。
特別な理由がある場合、名前も入力してもらっていいんですが、基本的にはメールアドレスのみにしてください。
なんで言っていると、今回の解説はオフトウィンインページを メインとして解説していますので、その場合はですね、やっぱりこのアドレスのみにした方が登録率が上がります。
こういうのは、このように直感的に
一つの項目にできたりします。 メールチームの場合も同様ですね。
直感的にできます。マウスの操作でできるというわけですね。 メールチームの場合は
こちらのセッティングスをクリックします。 これですね。
21:03
オーディエンス、フィードアンド、マージタグ、こちらをクリックですね。 ここでメールアドレスのみにしてください。他のコミックは、もしあった場合、標準だとあるので
チェックですね。この場合、ちょっとチェックが入れられないですが、例えば これで一旦、排除します。
このゴミ箱マークをクリックすれば、出てきます。デリートですね。 大文字でデリートですね。
これで項目をメールアドレスのみにしてください。 基本的にはこの方が登録率が
上がります。 微調整なんですが、ここは見出しですよね。見出しにすると
基本的にこれはビジュアルでできますので、ビジュアルでやってください。 この項目が要らないので消します。
という感じですね。 ビジュアルにすれば簡単に微調整ができます。これ見出しとかですね。
無料オファーの登録はこちらからとか、そういうふうに入力してください。
それともう一点ですね。 ホーム最適化の観点で言うと、スマホ対応をしているのかというのも非常に重要になってきます。
これについては、使用している WordPress テーマによって対応してくれているのかしないのかというのは異なってきますので、
一回先ほどのように読み込みコードを配置してみて、それで確認してみてください。 必ずスマホで確認してください。
その時に画面からはみ出てしまうとかですね、 最適化してくれてないという場合はですね、
古いテーマの可能性がありますので、 最新の新しい
WordPress テーマを使ってください。 WordPress テーマって、
その時の流行のテーマがあったりしますので、それをですね、確認して使ってください。
するとですね、そういうテーマでだいたいスマホ最適化してくれますので、 そのように対応してみてください。まずは一回は
配置してみて確認するということをお勧めします。 これもホーム最適化の観点で言うと非常に重要ですのでお伝えしました。
はい、では次の解説に進めていきます。
ここまでの内容、ボタンテキストを変更できるだけでだいぶ 登録されやすくなったりとかするんですが、
するのでここからは余談ですね。プラスアルファの内容です。 覚えておくとかなり便利なので、これもプラスで覚えておいてください。
というのがプレスホルダーですね。この設定する方法です。 このプレスホルダーっていうのは
薄い文字で表示してくれるというもので、 例えば薄い文字で入力のヒントを与えることができるですね。
24:00
メールアドレスの入力欄にこの demo at sample.com みたいな薄いグレーで表示されていることがあったと思います。
今までいろんな人が実践しているのでこういうのを見たことがあると思います。 実物を見た方が早いと思うのでお見せするとこういうものですね。
薄いグレーで表示されているものです。 実際はこれクリックするとなくなるんですけど、消えるんですが、
こういうふうにあると一目瞭然でわかるですね。 ここにアドレスを入力するということがわかるというものですね。
四角形的にわかりやすくしてくれるものになってきます。
かなり小さいところなんですが、これでめちゃくちゃ登録率が上がるっていう話ではないんですが、
結局はこの内容次第なので、とはいえ一つの工夫として覚えておくと便利です。
というのがこのプレスホルダーになります。 これというのはこの
例えばですけど、Eメールの場合ですね。 input タイプ、Eメール。
この input タグの中に このプレスホルダー
equal double quotation ここに薄くグレーで表裏させたい、何でもいいです。
サンプル用なので。 demo at mark sample.com こういう
サンプルのアドレスを入力してください。 架空のもので全然結構です。
このカッコですね。 このカッコ消さないでください。絶対に消さないでください。
あとこの間ですね。 この間は半額にしてください。
プラスでちょっとズームしますと、 ここは必ず半額。
この文言ですね。この全部半額にしてください。 これ必ずここは消さないというわけですね。
他にも、今回メールアドレスのみで解説しているので あれなんですが
他にもですね 名前を入力する場合ですね、例えば
山田太郎とかですね、というふうに
表裏させることもできます。 ということで実際に設定していきたいと思います。
あとはですね、 このメールアドレスのところに薄くですね
今は表示されてないんですが、プレスフォルダを実際に設定していきたいと思います。 これは検索するとこのように出てきますので、例えばこれは
html、カタカナで検索して、html と検索すれば出てきますので、ここからですね
スペルをコピーしてください。コピーしたら 移動してください。インプットタイプEメールですね。
27:01
なのでここ、Eメールと打ち込みます。 検索をかけると移動がつくので、ここからインプットタイプ
Eメールを探します。 ここですね、タイプEメール。
なので、ここに貼り付けます。
必ずここの間は半額にすると。 ここにですね
demo at sample.comと
このように入力します。 ここに入力したものが
薄くグレーで表示されるというものになります。 このように表示がされます。
クリックすればこれ消えますので、そのようなつもりでいてください。
というものですね。 これも覚えておくと結構便利だったりしますので、実際にやってみてください。
間違ってしまったとしてもですね、また 埋め込みコードを取得できますので、安心して編集はしてください。
これもボタンテキストと合わせてですね、 やってみるとフォームの最適化になりますので
一応覚えておいてください。 では次の解説に進めていきたいと思います。
次はプラスアルファで吹き出しで安心感を出す というところですね。この顔写真とかを配置してですね
運営者の様子がわかるという意味で安心感を出す というところになります。
最近のワードベーステーマには吹き出しのショートコードが使えます。 吹き出しを簡単に編集できるですね。
プログラミングの知識がなくてもできるというものですね。 これっていうのは公式サイトの方を確認してみてください。
簡単に編集できます。もしワードベーステーマにない場合は プラグインを置いてください。
例えばこういうものがあります。 使えなくなる可能性があるので複数のプラグインをしておきましょう。
ちなみにこのリキッドスピーチバルーンですね、 これはブロックエディターでないと使えなかったので
クラシックエディター派の人はこの2択になります。 ということでこっちですね、スピーチバルーンメーカーですね、これを解説していきたいと思います。
すでにワードベーステーマにあるという方は そっちを使ってください。
そっちの方がやりやすいと思います。
30:00
あと機能が重複してしまうのでそういうようにしてください。 もうすでに入っていますので
こちらで検索してですね、導入を進めてください。 今すぐインストール、有効化ですね。有効化するとツールの中に吹き出しメーカー
このコムが追加されます。 左側に表示されるアイコンですね、これ画像のことです。
この画像を選択からですね、 メディアに追加してある画像の中から選択してください。
ない場合はですね、アップしてください。 ここからアップロードできます。
次ですね、左側のアイコンの名前ですね。
このアイコンの名前ですね、会社名とか自分の名前、 肩書き、そういうものを入力してください。
こちらがプレビューになっていますので、一回保存すると このようにプレビューとなって表示されます。
あとはこのショートコードですね。 これをコピーして任意の場所に貼り付けですね。
この場合はビジュアルでも ok ですね。 これはサンプルですの文言を変えるとその吹き出しの中の文言が変わります。
というものですね。一応これも予備知識として覚えておいてください。 もしプラグインが最終的に使えなくなってしまったとかですね。
全然あり得ますので、その場合はですね、 吹き出しのという機能がついている
ワードプレステーマを購入するようにしてください。 もし今後どうなるかわからないので、なくなってしまったらこのようにしてください。
個人的にはこういう多機能なテーマを購入した方が安心感がありますので、 購入することをお勧めします。
ということでこういう吹き出しを使って安心感を出すようにしてください。 それとこれ一応フォームの解説なので
表示させるのはこのフォームの後とかですね。 フォームの後に配置するようにしてください。
登録をお待ちしておりますとかですね。
こういうものを配置しておいてください。 こうなりますね。
安心感があるので、こういうものをフォーム周りに配置しておくようにしてください。
はいでは次の解説に進めていきます。 これが最後になってくるんですが、届きにくいアドレスを入力させない工夫ですね。
これはプラスアルファになっているんですがすごく重要です。 届きにくいアドレスというのは一部なんですけど、
キャリアのアドレスですね。AUとかドコモですね。 あとiCloudのアドレスですね。
33:01
これというのは届きにくくなっています。 なぜかというとセキュリティが強すぎて届きにくい。
という風になっています。
どうしてもその個人間でやり取りするには全然問題ないんですが、 メール配信サービスとかそういうものを通すと届きにくいようになってしまっています。
なのでこういうキャリアのアドレスとか iCloudのアドレスはお控えください。
こういうものをホームの上に記載しておくようにしましょう。 注意喚起ですね。
登録させるものはPCのアドレスですね。 Gmailが一般的ですね。 Gmailアドレスを登録させるようにしましょう。
注意書き程度にするようにします。 あくまでユーザー側に判断してもらうようにしましょう。
とはいえこういうのを書いておくと届かないんですけどとか、 そういう対応する時になった時に書いておきましたよと言えますので
そのようにしてください。 あとこういうのを知識としてしておくと対応できるようになります。
これを知らないと、例えばなんでキャリアのアドレスが届かないんだろうということで
ずっとググったりしてしまうとかですね。
そうすると時間の無駄だったりとか。 これは一般的なものなんだよって知っておくと、すぐにこれっていうのは
Gmailアドレスの方が届きやすいんですよっていうふうに 対応ができるようになりますので
IT居てらしいだと思ってください。 こういうものを配置しておくといいです。
例えばこんな感じですよね。 こういうアドレスは届きにくいです。
一切届きません。 なのでGmailアドレスをご登録ください。
このように配置しておいてください。
ちなみに福田氏はこういうふうな感じですね。 先ほど下に配置したんですが、上でも全然OKです。
そこはお戻しします。 こういうものを配置しましょう。
これが例ですね。 例えばこれも下に配置する形になりますね。
こうなります。 すると比較的届きやすいGmailですね。
そういうことならGmailにしておくかということで 判断してくれますので、これがあるのとないのでは全然違いますので
こういう注意書きをしておいてください。
すると対応が減りますので、それでもやっぱりわからない人は
このまま登録してしまったりするんですが、 これ比較的にはなってくるんですが
36:04
お問い合わせの数とか届かないという問題は減らすことができます。
というのが最後の内容になります。 では最後にまとめですね。
申し込みフォームの最適化ということで解説しました。 細かい微調整を中心に解説しました。
できるだけ安心感が与えるものとか、 あとマイクロコピーということで解説をしましたね。
このフォームの最低限のHTMLというのは本当に 存在だけでも知っておく、なんとなくでも知っておく
そんなイメージで大丈夫です。 ボタンテキスト、これ自由に変更できるようにしてください。
ここが一番重要ですね。 プレソロダー、これもプラスアルファの内容になってくるんですが
ここも編集できるようになってくると かなり登録されやすくなりますのでこれも覚えておいてください。
あと吹き出しですね、安心感を出す。 届きにくいアドレスを入力させない工夫ですね。
これも結構重要です。 ということで今回このフォーム最適化の方法ということで解説しました。
今回の内容はこれで以上になります。
