WEBVTT 00:00:01.520 --> 00:00:09.200 はい、それではオプトインページの作成方法ということで、こちらの動画を通して解説を進めていきたいと思います。 00:00:09.200 --> 00:00:18.080 ではまずこちらのスライドをご覧になってください。 そもそもオプトインページとはということで、解説を進めていきます。 00:00:18.160 --> 00:00:29.540 ウェブ集客では2つのページが必要になってきます。 商品サービスを売るためのランディングページと 00:00:29.540 --> 00:00:41.180 見込み客のリストを集めるためのオプトインページ、この2つが必須になってきます。 このオプトインページで取得したリストに対してステップメールで教育をしたりですとか 00:00:41.180 --> 00:00:50.700 その流れの中でランディングページを案内したり、 そとはそのリストに対してメールマガを送って接触することができるといった感じで 00:00:50.700 --> 00:01:01.220 ウェブ集客の入り口となるページとなっています。 実際に作成していくんですが、無料でオプトインページを作れるツールとはということで 00:01:01.220 --> 00:01:08.860 解説をします。 使用するツールなんですが、まず1つ目がペラ1を使用します。 00:01:08.860 --> 00:01:16.020 次にメールチンプ、こちらを使用します。 次に3つ目にワードプレスですね。 00:01:16.020 --> 00:01:25.430 こちらを使用します。 ペラ1、メールチンプ、ワードプレスになります。 それぞれのツールを簡単に解説します。 00:01:25.430 --> 00:01:33.270 ペラ1なんですが、こちらは専門的な知識がない人でもページ作成ができるツールとなっています。 00:01:33.270 --> 00:01:40.510 操作的にはマウスのクリックができれば、どんな人でもページを作成することができます。 00:01:40.510 --> 00:01:47.350 メールチンプですね。 こちらはリストを管理するために使用します。 00:01:47.350 --> 00:01:54.990 ステップメールも設定できるので、こちらも無料で利用できるので、こちらのメールチンプを使って 00:01:54.990 --> 00:02:03.220 リストの管理とステップメール機能を作成していきたいと思います。 00:02:03.220 --> 00:02:09.140 3つ目のワードプレスですね。 今回はブログ記事を 00:02:09.140 --> 00:02:16.420 投稿というよりは固定ページを使用して登録ホームページの作成に集合します。 00:02:16.420 --> 00:02:28.260 といった形で作成を行っていくんですが、問題となるフォームを作成する方法はということで解説をします。 00:02:28.260 --> 00:02:47.560 これはボタンですよ。 ペラ1で配置できるようなメールチンプの方で 00:02:47.560 --> 00:02:55.100 フォームのコードが取得できますので、そちらで連携しフォームを作成していきたいと思います。 00:02:55.100 --> 00:03:03.180 2つ目の方法ということで ペラ1のデフォルトフォーム機能を使うという方法になります。 00:03:03.180 --> 00:03:11.220 こちらは通常プランもしくはプレミアムプランに契約すると使用することができる要素になっています。 00:03:11.220 --> 00:03:18.500 ですがこちらの場合メールチンプと連携はしないため、取得したリストをインポートしていただくと 00:03:18.500 --> 00:03:30.770 といった形になります。 続いてペラ1のHTML埋め込み要素を使用ですね。 00:03:30.770 --> 00:03:37.370 こちらはプレミアムプランに契約すると使用することができる要素になっています。 00:03:37.370 --> 00:03:49.810 メールチンプと連携してフォームを作成。これは1の方法と同じですね。 ただこの場合ペラ1とメールチンプ2つの連携だけでするんですが 00:03:49.850 --> 00:03:57.690 しかしフォームのデザインに対してある程度HTML、CSSの知識が必要になってきます。 00:03:57.690 --> 00:04:08.330 ですがテンプレートを用意しているのでそちらで作成していただければと思うんですが、そちらの解説は少し余談程度に済ましておきまして 00:04:08.330 --> 00:04:14.410 今回は無料で作成する方法ということなので1の方法 00:04:14.410 --> 00:04:21.330 こちらを主に解説します。 ペラ1とメールチンプ 00:04:21.330 --> 00:04:30.690 ワードプレス、この3つを組み合わせてリストを取得する仕組みを実際に作成していこうと思います。 00:04:30.690 --> 00:04:38.210 実際に作るオプトミーページの作成方法ということで全体像を把握したいんですが、こういった形になります。 00:04:38.210 --> 00:04:47.050 ペラ1でオプトミーページ自体を作成し、そこから登録ホームページに移動させるような仕組み 00:04:47.050 --> 00:04:57.410 ボタンで移動させるという形になります。 ホーム自体はメールチンプの方からコードを取得し 00:04:57.410 --> 00:05:07.010 それに該当するリストを作成します。 最後にサンクスページですね。こちらをワードプレスで作成して 00:05:07.010 --> 00:05:15.530 無料オファーのPDFをダウンロードできる仕組みを作成していきたいと思います。 00:05:15.530 --> 00:05:23.320 今回は無料オファーの作成自体を割愛させていただきますのでご了承ください。 00:05:23.320 --> 00:05:37.020 といった形でこちらの全体像を把握しつつ作成を実際にしていきましょう。 まずペラ1の解説なんですが 00:05:37.060 --> 00:05:49.090 実際に作成したページはこちらになります。 こういった形でヘッダー画像ですね。 00:05:49.090 --> 00:05:54.170 ターゲット、ヘッドライン、無料オファーの 00:05:54.170 --> 00:06:03.020 こちらはチェックリストのPDFなので、PDFの イメージが湧くような画像を配置 00:06:03.020 --> 00:06:12.180 完全無料といった感じで作成をしました。 今回このヘッダー画像の作成については割愛させていただくんですが、こういったイメージで 00:06:12.700 --> 00:06:19.220 作成していただくか、外注していただければなと思います。 続いてこの 00:06:19.220 --> 00:06:29.380 ボタンですね。無料でチェックリストをダウンロードするといったボタンを入っています。 こちらをクリックすると 00:06:29.380 --> 00:06:36.030 ワードプレスのフォーム 00:06:36.030 --> 00:06:45.620 設置した固定ページに移動するといった形になります。 00:06:45.620 --> 00:06:51.940 チェックリストで無料オファーで手に入られるものということで 00:06:52.980 --> 00:06:58.900 ワードプレス初心者でも迷わずに設定できる 導入後やることが明確になる 00:06:58.900 --> 00:07:07.850 オススメプラグインも解説といった感じで なりなりできるといったベネフィットを配置します。 00:07:07.850 --> 00:07:11.130 チェックリストの内容 00:07:11.570 --> 00:07:16.810 これを目次形式で配置し、最後にプロフィール 00:07:16.810 --> 00:07:22.770 登録ボタン 登録ホームのページへ移動するボタン 00:07:22.770 --> 00:07:32.560 といったシンプルな作りになっています。 このオフトインページはフェイスブック広告とか 00:07:32.560 --> 00:07:37.040 ブログのcdnに設置するかと思うんですが 00:07:37.160 --> 00:07:43.600 こちらのページに訪れた方は この無料オファーを早くダウンロードしたいという気持ちがありますので 00:07:43.600 --> 00:07:50.590 この内容自体はシンプルで結構です。 シンプルなもので結構です。 00:07:50.590 --> 00:07:56.550 実際にシンプルな方が登録率が高いといった 00:07:56.550 --> 00:08:05.260 方言もありますのでそちらを こちらのもとにこういったシンプルな構成にしています。 00:08:05.260 --> 00:08:20.780 といった形でまずはペラエッジの方でこのページを実際に作成していきたいと思います。 00:08:20.780 --> 00:08:35.020 1から作成していきたいと思うんですがまずは こちらの新しいページを作成するをクリックしてください。 00:08:35.020 --> 00:08:44.620 続いてこのブランクですね。 ブランクを使ってください。 00:08:44.620 --> 00:08:51.850 今すぐ編集を始めるをクリック。 これがペラエッジの編集画面になります。 00:08:51.850 --> 00:08:59.130 まずはこのコピーライトの部分を編集したいと思います。 一度クリックするとこのようにテキストの編集画面に行きます。 00:08:59.130 --> 00:09:11.850 これを会社名を入力して保存です。 00:09:11.850 --> 00:09:20.740 まずはヘッダー画像ですね。こちらを配置します。 00:09:20.740 --> 00:09:36.430 ブロックの挿入からパーツ、画像、横幅フルサイズですね。 こちらを選択してください。 00:09:36.430 --> 00:09:42.670 すでにアップロードしてあるんですが、これです。 00:09:42.670 --> 00:09:49.550 自分のパソコンから画像をアップロードしたい場合はこの画像を選択してアップロード。 こちらをクリックしてください。 00:09:49.550 --> 00:10:00.150 このように自分のパソコン内のフォルダが表示されます。 その中から回答する画像を選択して開くですね。 00:10:00.150 --> 00:10:10.470 これで簡単にアップロードできます。 アップロードの制限がこちらにありますのでそれだけ守っていただいて 00:10:10.470 --> 00:10:21.340 画像をアップロードしてください。 画像はこのように選択し配置をします。 00:10:21.340 --> 00:10:26.420 続いてこのボタンですね。 ボタンはブロックの挿入から 00:10:26.420 --> 00:10:33.540 ボタンフォーム、ボタン括弧台ですね。 こちらを選択してください。 00:10:33.540 --> 00:10:52.290 こちらも一度クリックしますとボタンテキストの返信ができます。 こういった形で無料で 00:10:52.290 --> 00:11:00.210 無料オファーをダウンロードするといった形で入力します。 ここはご自身の無料オファーに合わせて 00:11:00.210 --> 00:11:04.410 その文言を変更してみてください。 00:11:04.410 --> 00:11:10.620 リンクのURLですね。 こちらは後ほど 00:11:10.620 --> 00:11:18.380 ステージを作成しますのでそちらを指定します。 別のウィンドウにチェックを入れておいてください。 00:11:18.380 --> 00:11:28.410 ボタンの色はオレンジで保存ですね。 続きましてこのベネフィットの部分ですね。 00:11:28.410 --> 00:11:35.250 この無料オファーで手に入るもの こちらを作成していきます。 00:11:35.250 --> 00:11:48.060 まずは見出しですのでパーツ、リボン見出し、決定です。 こちらの文言もご自身の無料オファーに合わせて 00:11:48.060 --> 00:12:04.850 文言を変更してください。 こういった形でフォントサイズは22 00:12:04.850 --> 00:12:14.270 テキストの色なんですがこちらは自由に変更してください。 今回は白にしました。 00:12:14.270 --> 00:12:25.460 見出し統一で22ピクセル。 本文に当たる部分は18といった形で設定をしていきます。 00:12:25.460 --> 00:12:38.540 続いてブロックの挿入から パーツ、テキストを選択し決定です。 00:12:38.540 --> 00:12:49.100 こちらは本文に当たるので18ピクセル。 文言をこのように 00:12:49.180 --> 00:12:56.740 入力してください。 このワードプレス初心者のためのテクリストでは 00:12:56.740 --> 00:13:05.340 このようにメラーができるといった続ける感じで文言を配置します。 これは中央揃え 00:13:05.340 --> 00:13:15.460 無料オファーメンを太字にしていただくとか 背景色で強調していただくという形で 00:13:15.500 --> 00:13:28.180 自由に編集してみてください。 続いてこの画像とテキストといった要素を配置していきたいと思います。 00:13:28.180 --> 00:13:37.380 ブロックの挿入から画像プラステキスト 上画像3密ですね。こちらを選択で決定です。 00:13:37.380 --> 00:13:44.520 この見出しがいらないので削除。 こちらの 00:13:44.520 --> 00:13:49.160 テキスト箇所もいらないので削除。 ボタンもいらないので削除。 00:13:49.160 --> 00:13:57.220 同様に決定してください。 最終的にこのような状態で 00:13:57.220 --> 00:14:12.080 まずイメージ画像を配置していきたいと思います。 これもあらかじめアップロードしてありますのでそちらを選択していきます。 00:14:12.080 --> 00:14:16.120 こういった形で 配置をします。 00:14:16.160 --> 00:14:21.080 文言なんですがこのように こにゃらができるといった 00:14:21.080 --> 00:14:32.010 ベネヒットの文章を配置します。 フォントサイズはこちらは22にしていただいて保存です。 00:14:32.010 --> 00:14:47.470 こちらも導入後やることが明確になる。 オフェンサー部員を回避します。 00:14:47.470 --> 00:14:58.830 といった形で特徴ではなく 00:14:58.870 --> 00:15:07.800 何々できるといった文章を配置してください。 最後にといった情報についてまとめました。 00:15:07.800 --> 00:15:27.080 こちら自由に文言を編集してしまってください。 パーツ、テキスト、設定です。 00:15:27.080 --> 00:15:35.720 これでベネヒットの用途が作成できました。 これデモで作成しているものですのでもうちょっと 00:15:35.720 --> 00:15:44.900 色々文言を付け足してもいいかなと思うんですが、 それはご自身に合わせて編集してみてください。 00:15:44.900 --> 00:15:53.690 続いて目次ですね。 このチェックリストの内容ということでまずは見出しを配置します。 00:15:53.690 --> 00:16:01.380 パーツ、リボン見出し、設定です。 こちらも 00:16:01.380 --> 00:16:12.860 ワードプレス、初心者のためのチェックリストの内容といった形で 文言を入力します。 00:16:12.860 --> 00:16:19.020 フォントサイズは見出しですので22。 00:16:19.140 --> 00:16:22.340 といった形で配置します。 00:16:23.260 --> 00:16:40.620 あとは目次ですね。 こちらは実際のpdfがこのチェックリストになるんですが、 00:16:40.620 --> 00:16:45.180 シンプルに こちらの基本設定とか 00:16:45.180 --> 00:16:52.860 基本設定という大見出しに対してこちらが目次になりますので、 これをコピー&ペーストしていきます。 00:16:52.980 --> 00:17:03.160 使う要素なんですがブロックの挿入 パーツのバー見出しですね。こちらを選択します。 00:17:03.160 --> 00:17:07.440 このポイントの箇所がいらないのでバツで消します。 00:17:07.640 --> 00:17:23.220 この文言をコピー。 これ見出しで飛んで22。 00:17:23.220 --> 00:17:36.380 フォント、パッハリン、ペースト。 00:17:36.380 --> 00:17:43.880 これで飛んでいく。 こちらの 00:17:43.880 --> 00:17:53.100 見出し箇所を実際に こちらに当てはめてみたいと思います。 00:17:53.100 --> 00:18:30.490 これはコピーで貼り付けて 選択作業になるかと思うんですが、こういった形で入力を行います。 00:18:30.490 --> 00:18:37.650 こちらについては目次 pdfの内容ということなので、ご自由にこの設定 00:18:37.650 --> 00:18:47.380 見出し箇所を入れていただいて、あとは文言を付け出していただければなと思います。 00:18:47.380 --> 00:18:55.850 これで本文ですので18。 保存です。 00:18:55.850 --> 00:19:37.980 このように同じように作成していきます。 見出しですので22。 00:19:37.980 --> 00:19:56.400 見出しを配置していきます。 本文ですのでフォントサイトを18。 00:19:56.400 --> 00:20:25.230 これで保存。 同じようにまた作業を進めていきます。 00:20:26.470 --> 00:21:10.020 こちらも同じように見出しをコピーして貼り付けていきます。 00:21:10.020 --> 00:21:25.720 伝え忘れてましたが、こちらは箇条書きの機能がありますので、こちらで箇条書きにしてください。 00:21:25.720 --> 00:21:41.920 保存です。 こといった形で簡単に作成しましたけど、こちらに文言を付け出していただくとかして自由に編集してみてください。 00:21:42.120 --> 00:21:52.240 これで目字の箇所が作成完了しました。 最後にプロフィールを作成します。 00:21:52.240 --> 00:22:09.180 これも同理にブロックの挿入からパーツ、リボン見出し、フォントサイズを22。 00:22:09.860 --> 00:22:21.180 これで保存です。 続いてこのプロフィールの文章に画像といった形で配置します。 00:22:21.220 --> 00:22:32.150 ブロックの挿入から画像をプラスっていってと、左画像1列を選択。 00:22:32.150 --> 00:22:41.830 この見出しいらないので消したいんですが、このように重なってしまう場合はクリアで保存で、これで消してください。 00:22:41.830 --> 00:22:50.110 まずは画像を配置します。 あらかじめこのようにアップロードしてますので、そちらを配置します。 00:22:54.280 --> 00:23:10.690 型書きコーナーに入れます。会社名と名前。 そしてプロフィール文を配置します。 00:23:10.690 --> 00:23:19.210 フォントサイズを18で保存です。 このボタンいらないので消してしまいます。 00:23:19.890 --> 00:23:27.450 といった形でプロフィールの配置が完了しました。 最後にまた再び 00:23:30.080 --> 00:23:47.090 ボタンを配置します。 こちらもリンクURLは空白のままで 00:23:47.090 --> 00:23:54.830 別ウィンドウにチェック。 オレンジにチェックで保存です。 00:23:54.830 --> 00:24:06.300 これでオフトウィンインページ自体は作成できました。 これで作成できたわけなんですが、軽く 00:24:06.300 --> 00:24:12.620 プライチンの方の解説をしますと、このテーマカラーの変更で色の変更ができます。 00:24:12.620 --> 00:24:19.900 こういった形で色の変更ができます。 あとページ情報の編集ということで 00:24:19.900 --> 00:24:26.900 基本設定の中でこのURLの設定とページ名 ファビコン 00:24:26.900 --> 00:24:33.660 といった設定ができます。 ページURLは何でもいいんですが 00:24:33.660 --> 00:24:52.800 ページに関連するようなものをローマ字入力でも結構ですので、こちらを入力してください。 00:24:52.800 --> 00:25:01.080 こういった形で入力をしてください。 このURLなんですが 00:25:01.080 --> 00:25:07.800 被ってしまった場合、エラーが出てしまいます。 その場合は数字を入れていただくとか 00:25:07.800 --> 00:25:10.480 他の 00:25:10.920 --> 00:25:17.160 アルファベットをまた入力していただくといった形で対応をお願いします。 00:25:17.160 --> 00:25:47.290 ページ名ですね。こちらは4波の名前で結構です。 これで保存です。 00:25:47.290 --> 00:25:55.770 正常に保存しましたと保存しましたという風に出てきます。 公開する場合はこの公開をするをクリックします。 00:25:55.770 --> 00:25:59.370 これは最終的にしますのでこの状態で 00:25:59.370 --> 00:26:06.870 次のボタンをクリックした先の 00:26:06.870 --> 00:26:19.250 登録フォームの作成を行っていきたいと思います。 この前にまずはメールチームの方でリストの作成を行いましょう。 00:26:19.250 --> 00:26:30.290 これがメールチームのトップページなんですが、もし若干気になった場合はこのロゴをクリックしていただくと同じページに移動します。 00:26:30.290 --> 00:26:37.610 このメールチームは海外のツールですので少し英語が難しく感じるかもしれないんですが 00:26:37.610 --> 00:26:45.880 ブラウザーのGoogle Chromeなんですが、これはこの日本語に翻訳という機能を使うと 00:26:45.880 --> 00:26:52.000 日本語的におかしかったりするんですがリアンスはつかめるかと思います。 といった形で 00:26:52.000 --> 00:27:09.340 ぜひ使う際は日本語翻訳機能も利用してみてください。 まずリストの作成をしていきたいんですが、このリストをこちらをクリックしてください。 00:27:09.340 --> 00:27:17.340 すでに作成してあるものがこのように一覧となって表示されるんですが、今回は一から作ってみたいと思います。 00:27:17.340 --> 00:27:27.490 クリエイトリストをクリック。 もう一度クリエイトリストをクリック。 00:27:27.490 --> 00:27:31.570 リストの名前ですね。 こちらは 00:27:31.570 --> 00:27:42.300 無用派の名前で結構です。 自分が分かりやすいもので何でもいいんですが 00:27:42.300 --> 00:27:47.140 といった形で入力してもいただいて 00:27:47.140 --> 00:28:03.180 メールアドレスですね。これは普段お使いのものを入力してください。 デフォルトフロムネーム。これはこの早いもしくは自分の名前で結構です。 00:28:03.180 --> 00:28:14.130 こちらですね。このテキストボックス欄にはリストを作成する理由、使用する目的とかを入力してください。 00:28:14.130 --> 00:28:33.780 今回はといった形で入力します。 ボット登録用に使用します。簡単にで結構ですので入力してください。 00:28:33.780 --> 00:28:47.710 このセーブをクリック。 これでリストの作成ができました。 00:28:47.710 --> 00:28:53.590 あと簡単にリストの設定をしていきたいんですが、このセッティングスから 00:28:53.590 --> 00:29:03.460 リストフィールド&マージタグをクリックしてください。 これが 00:29:03.460 --> 00:29:12.940 項目になっていくんですが、メールアドレスとか名前とかいった項目ですね。 これがフォームに反映されるわけなんですが、あまり多いと 00:29:12.940 --> 00:29:22.180 登録率も下がってしまうので、最低限に絞りたいと思います。 他の項目を削除します。 00:29:22.180 --> 00:29:27.300 このゴミ箱マークをクリック。 デリートと入力。 00:29:27.300 --> 00:29:33.300 最後にこのデリートボタンをクリックする。 これで削除ができます。 00:29:33.300 --> 00:30:00.360 これを英語に抜きしますので、メールアドレスとカタカナで入力します。 00:30:00.360 --> 00:30:15.950 セーブチェンジをクリック。 続いてこのサインアップフォームドをクリック。 00:30:15.950 --> 00:30:23.530 こちらをクリック。 00:30:23.530 --> 00:30:44.960 こちらを日本語化したいので、トランスベイト1とセットデフォルトランゲージ。 こちらをジャパニーズに変更してください。 00:30:44.960 --> 00:30:58.020 ところどころおかしな日本語になっています。 あまり気にしない方はいいんですが、このコードクスルーを登録するにしてください。 00:30:58.020 --> 00:31:05.060 他にもいろいろ出てくる可能性があるので、カスタマイズしたい場合はこちらから変更お願いします。 00:31:05.060 --> 00:31:25.160 これでセーブボタンをクリック。 こちらの文言の設定などができます。 00:31:25.160 --> 00:31:30.140 ざっと見ていただいて 00:31:32.640 --> 00:31:37.320 例えばこちら。 こちらの 00:31:37.320 --> 00:32:02.970 メールが届いて確認作業を行うので、この文言を変更していきたいとおもいます。 00:32:02.970 --> 00:33:08.650 はい、こういった形で。 迷惑っぽい帽子のための確認ですので、こういった感じで文言を編集してください。 00:33:08.650 --> 00:33:41.480 こういった形で文言を変更します。 他の項目も見ていきましょう。 00:33:41.480 --> 00:33:52.950 3級ページなんですが、ワードプレスの固定ページで変更しますので、こちらは変更します。 00:33:52.950 --> 00:34:01.550 こちらも念のため変更をしていきましょう。 00:34:01.550 --> 00:34:13.330 こちらのプレビューに表示されるものになってしまうので、 こちらのリストフラムネームをコピーして 00:34:13.330 --> 00:34:21.770 貼り付け、 登録を登録 00:34:21.770 --> 00:34:28.770 完了しましたといった感じで変更します。 これで会社名 00:34:28.770 --> 00:34:47.270 登録完了しましたという風にプレビューで表示されます。 あとはこのエディットで変更をお願いします。 00:34:47.270 --> 00:35:06.790 といった形で文言が変更できるということを覚えておいてください。 これでリストの設定は以上になります。 00:35:06.790 --> 00:35:15.110 実際にこれでこのリストに対するフォームを設置していきたいので、ワードプレスの方に移動をお願いします。 00:35:15.110 --> 00:35:22.770 まずはフォームのコードを取得しましょう。 サインアップホームズから 00:35:22.770 --> 00:35:36.490 エンベッドホームズですね。こちらをクリック。 これを一度クリックしますと全部選択されますのでその状態で 00:35:36.490 --> 00:35:41.730 コピーですね。 これでフォームのコードを取得できました。 00:35:41.730 --> 00:36:04.870 あとはワードプレスの管理画面に移動していただいて 固定ページから新規追加こちらをクリックしてください。 00:36:04.870 --> 00:36:14.470 実際に作成したページがこちらになります。 これを作成していきたいんですがまずはこの 00:36:14.470 --> 00:36:19.790 タイトルですね。 無料オファー名 00:36:20.070 --> 00:36:33.720 登録フォームといった分かりやすいものを入力してください。 パーマリングですね。今回は 00:36:33.720 --> 00:36:39.000 このデモを送っていますが、これに関連するものですね。 例えば 00:36:39.000 --> 00:36:50.260 チェックリストを送ってみたいな感じで 関連性のあるものを間隔の 00:36:50.260 --> 00:36:56.780 定数字に入力していただいて こちらを設定してください。 00:36:56.820 --> 00:37:06.410 先ほど取得したフォームのコードを配置します。 このテキストエディターにしていただいて 00:37:06.410 --> 00:37:10.130 こちらに貼り付けを行います。 00:37:13.650 --> 00:37:23.720 少しずつ設定をしていきたいんですが、まずこの マスクに配置されたこのスクリプトですね。 00:37:23.760 --> 00:37:29.960 このスクリプトというコード こちらのコードを 00:37:29.960 --> 00:37:37.040 削除していきます。 このスラッシュスクリプトまで行きます。 00:37:37.040 --> 00:37:46.220 このスクリプトからスラッシュスクリプト これで 00:37:46.220 --> 00:37:50.780 このように削除していきます。 00:37:50.940 --> 00:37:59.500 こちらはちょっとコードを扱うので、真似しながら 作業を進めていってください。 00:37:59.500 --> 00:38:10.740 このビックリマークのコメントアウトと言われる 箇所なんですが、これもいらないので消してしまいます。 00:38:10.740 --> 00:38:21.830 続きましてビジュアルにしていただいて この箇所いらないので消します。 00:38:21.830 --> 00:38:33.660 見出しなんですが、こちらは チェックリストの無料ダウンロードはこちらからといったものを配置します。 00:38:33.660 --> 00:38:42.550 こちらは自由に文言を入力してください。 続いてこのテキストいらないので消します。 00:38:42.550 --> 00:38:48.950 間開いてしまっているのでこれを進めます。 これは 00:38:48.950 --> 00:38:55.550 Deleteキーを押していただくと 進めていただけるかと思います。 00:38:55.550 --> 00:39:07.670 これも進めます。 ここのボタンテキストが英語になってしまっているのでこれを変更します。 00:39:07.670 --> 00:39:14.310 これがボタンのコードになるわけですが、 このインプット 00:39:14.310 --> 00:39:17.310 タイプサブミットですね。 00:39:17.310 --> 00:39:24.630 これがボタンに該当するHTMLなんですが、 その中でこのバリューという 00:39:24.630 --> 00:39:48.870 要素があります。バリューイコールサブスクライブですね。 こちらの文を変更します。 00:39:48.870 --> 00:39:54.670 こういった形で文を修正します。 そうしますと 00:39:54.670 --> 00:40:18.580 このような形で変更されているのを確認できます。 これでフォームの設置完了しましたので、この公開ボタンをクリックしてください。 00:40:18.580 --> 00:40:25.900 続きましてサンクスページの作成ですね。 こちらを行っていきます。 00:40:25.900 --> 00:40:43.410 こちらも同様に 新規追加ですね。固定ページの中から新規追加を行ってください。 00:40:43.410 --> 00:40:54.460 実際に作成したものがこちらになります。 ご登録ありがとうございます。 00:40:54.460 --> 00:41:14.280 チェックリストは以下からダウンロードしてください。 これでリンクを設置しておいてダウンロードできるような作りになっています。 00:41:14.280 --> 00:41:26.340 これは作成していきたいんですが、まずはタイトルということでご登録ありがとうございます。 00:41:26.340 --> 00:41:46.610 続いて親ページを設定できるんですけど、先ほど作成した 00:41:46.610 --> 00:41:57.260 親ページを指定する理由なんですが、このように一覧となって表示されたときに 00:41:57.260 --> 00:42:02.780 いくつかこのオフトウェイページの 仕組みというか登録法も作成した場合、 00:42:02.780 --> 00:42:08.660 半脱になってしまうので、どのサンクスページ、該当するサンクスページなのかわかるように 00:42:08.660 --> 00:42:25.820 親ページを指定するといった形になります。 こちらパーマリンクの方はシンプルに 00:42:25.820 --> 00:42:39.000 サンクスを入力してください。 あとは文をこちらに配置します。 00:42:39.000 --> 00:42:44.480 チェックリストは以下からダウンロードしてくださいといった感じになります。 00:42:44.480 --> 00:42:52.960 中央に寄せて、同時にモードタイトルを少し取り隠します。 00:42:53.920 --> 00:42:57.920 あとはテーマによって合ったりなかったりなんですが、こういったマーカーとか 00:42:57.920 --> 00:43:04.680 ハイライトといった強調できる機能がありましたら、そちらを利用していただいて 00:43:04.680 --> 00:43:09.320 強調をしていただければなと思います。 00:43:09.400 --> 00:43:17.990 こういった形です。 チェックリストをダウンロードするといったリンクを設置します。 00:43:28.540 --> 00:43:35.260 このリンクの指定方法なんですが、これ中央に寄せていただいて、 00:43:35.260 --> 00:43:41.140 リンクの挿入、こちらをクリック。 URLです。 00:43:41.140 --> 00:43:44.580 こちらを貼り付けます。 00:43:44.580 --> 00:43:52.020 これはチェックリストのPDFのURLなんですが、このメディアを追加から 00:43:52.020 --> 00:44:00.380 このようにPDFをアップロードしますと、URLが制定されます。 00:44:00.380 --> 00:44:10.620 これをコピーして、こちらのリンクに指定するといった形になります。 00:44:10.620 --> 00:44:17.220 リンクの設定で、リンクを新しいタブで開くにチェック。 00:44:17.260 --> 00:44:22.620 このメディアにアップロードする際に、このようにチェックリストといった形で 00:44:22.620 --> 00:44:28.340 半角の数字でファイル名を変更していただいてアップしてください。 00:44:28.340 --> 00:44:34.380 日本語にしますと、このように半雑な数字とかアルファベットになってしまうので、 00:44:34.380 --> 00:44:42.100 必ず半角で、半角のファイル名にしていただいてアップしていただくといった形でお願いします。 00:44:42.100 --> 00:44:46.220 このチェックリストをダウンロードするという形なんですが、 00:44:46.220 --> 00:44:50.580 テーマによってはボタンの要素があったりするので、そちらでも結構です。 00:44:50.580 --> 00:45:00.120 今回は簡単にできる方法ということで、このリンクの指定を解説しました。 00:45:00.120 --> 00:45:04.240 最後にメールボックスをご確認くださいといった文言を配信します。 00:45:04.240 --> 00:45:14.400 迷惑メールも確認してくださいといった文言を配信します。 00:45:14.400 --> 00:45:19.240 メールボックスをご確認くださいの見出しにしていただいて、 00:45:19.240 --> 00:45:27.360 あとはこういった形で配信します。 00:45:27.360 --> 00:45:43.280 シンプルな作りですけど、サンクスページが作成できました。 00:45:43.280 --> 00:45:50.470 これが完成した形になります。 00:45:50.470 --> 00:46:00.260 これでサンクスページとあともう一つ、ドロッグホームページですね。これが作成が完了しました。 00:46:00.260 --> 00:46:06.030 こちらです。 00:46:06.030 --> 00:46:15.750 あとこのホームのデザインなんですが、これはCSSで行っています。 00:46:15.750 --> 00:46:19.670 こちらについて少し解説したいんですが、 00:46:19.670 --> 00:46:28.480 外観からカスタマイズですね。こちらをクリックしますと、 00:46:28.480 --> 00:46:34.160 テーマによってなかったりするんですが、この追加CSSという項目があります。 00:46:34.160 --> 00:46:43.140 こちらにこういったCSSを配置しています。 00:46:43.140 --> 00:46:48.780 これを配置しますと、こういった先ほどのデザインになるんですが、 00:46:48.780 --> 00:46:52.020 このコードを差し上げます。 00:46:52.020 --> 00:47:01.580 動画の下あたりに配置しますので、これを追加CSSに貼り付けていただいて、 00:47:01.580 --> 00:47:09.500 先ほどのデザインにしてください。 00:47:09.500 --> 00:47:25.800 これなんですが、こういったデザインですね。 00:47:25.800 --> 00:47:40.180 ボタンの背景色が黒で、このテキストボックスがグレーといった形で作成デザインができます。 00:47:40.180 --> 00:47:53.640 もし色を変更したい場合は、 00:47:53.640 --> 00:48:03.080 もし色を変更したい場合はこちらですね。バックグラウンドという箇所が背景色になっていますので、そちらは自由に変更してみてください。 00:48:03.080 --> 00:48:09.440 こういった空白とか、こういったアルファベット自体は間隔でお願いします。 00:48:09.440 --> 00:48:22.300 間隔でないと正確に反映がされませんので、そちらで設定をお願いします。 00:48:22.300 --> 00:48:35.410 特にこのコードをいじりたくない場合は、このデザインで作成をお願いします。 00:48:35.410 --> 00:48:46.050 おそらく最新の新しいテーマですと、この追加CSSが必ずあるかと思うので、そちらで貼り付けていただいて、 00:48:46.050 --> 00:49:09.740 もしくはプラグインを、CSS系のプラグインが色々ありますので、 00:49:09.740 --> 00:49:21.570 こういったシンプルカスタマーのCSSといったものがありますので、そちらを使用して、 00:49:21.570 --> 00:49:27.210 先ほどのCSSを貼り付けてデザインをしてみてください。 00:49:27.210 --> 00:49:30.970 そちらのコードは立て上げます。 00:49:30.970 --> 00:49:40.600 あとはですね、これでフォームとサンクスページ作成できましたので、 00:49:40.600 --> 00:49:47.080 このURLをコピーします。 00:49:47.080 --> 00:49:54.640 コピーしましたら、編集画面に戻ってきていただいて、このボタンに設定をします。 00:49:54.640 --> 00:49:57.040 保存。 00:49:57.840 --> 00:50:04.560 保存できる。こちらの保存するボタンで保存できます。 00:50:04.560 --> 00:50:22.420 もしくはショートカットキーで、Windowsの方がCtrl-S、Macの方はCmd-Sで保存できます。 00:50:22.420 --> 00:50:26.620 下のボタンも同様に設定します。 00:50:26.620 --> 00:50:45.480 はい、これでオープンインベージの仕組みが一通り完成しました。 00:50:45.480 --> 00:50:54.250 最後にこの公開するボタンを押していただいて、公開をする。 00:50:54.250 --> 00:51:13.460 これでページの公開が完了しました。 00:51:13.740 --> 00:51:18.500 こちらの配慮作業が完了していなかったので、 00:51:18.500 --> 00:51:28.710 こちらを入力し直します。これで保存ですね。 00:51:28.710 --> 00:51:35.510 これでオフトインページの一通りの仕組みが完了しました。 00:51:35.510 --> 00:51:40.430 先ほどの全体像でいうとオフトインページが作成し、 00:51:40.430 --> 00:51:43.670 作成が完了し、登録フォームの作成が完了。 00:51:43.670 --> 00:51:48.710 サンクスページの作成が完了しました。 00:51:48.710 --> 00:51:56.070 登録フォームをメールチームの方から取得し、リストの作成が完了しました。 00:51:56.070 --> 00:52:12.390 あとはこのサンクスページを登録が終わった際に移動できるように設定をしたいと思います。 00:52:12.390 --> 00:52:16.790 こちらのサンクスページのURLをコピー。 00:52:16.790 --> 00:52:21.070 これでメールチームの方に移動。 00:52:21.070 --> 00:52:29.430 該当するリストをクリック。 00:52:29.430 --> 00:52:33.790 サインアップフォームをクリック。 00:52:33.910 --> 00:52:38.560 こちらをクリック。 00:52:38.560 --> 00:52:42.880 こちらの選択項目の中から、 00:52:42.880 --> 00:52:44.800 コンファメーションサンキューページですね。 00:52:44.800 --> 00:52:47.400 こちらを選択してください。 00:52:47.400 --> 00:52:57.360 こちらのURLの指定箇所に先ほどのサンクスページのURLを貼り付けてセーブします。 00:52:57.360 --> 00:53:03.190 これで設定が完了しました。 00:53:03.190 --> 00:53:11.640 実際にメールアドレスを登録してみます。 00:53:11.640 --> 00:53:14.820 登録ボタンをクリック。 00:53:14.820 --> 00:53:20.300 サンキューページにサンクスページに移動といった導線が完了しました。 00:53:20.300 --> 00:53:26.900 これで無料テックリストをダウンロードしてもらうという形です。 00:53:26.900 --> 00:53:33.940 先ほどのメールアドレスの方に確認を促すような内容が届きますので、 00:53:33.940 --> 00:53:42.550 登録の確認をしてもらうといった形になります。 00:53:42.550 --> 00:53:48.820 これで一通り導線が完了したのですが、 00:53:48.820 --> 00:53:55.820 補足としてこのペライチのデフォルトフォーム機能についてと、 00:53:55.820 --> 00:54:06.470 HTMLの埋め込み要素、こちらを少し解説したいと思います。 00:54:06.470 --> 00:54:09.030 デフォルトのフォーム機能なんですが、 00:54:09.030 --> 00:54:13.630 ブロックの挿入から、この有料プランのブロックですね。 00:54:13.630 --> 00:54:15.630 フォームですね。 00:54:15.630 --> 00:54:18.630 このように、これはデマークアウトですので、 00:54:18.630 --> 00:54:21.630 通常プラン、無料プランのままなんですが、 00:54:21.630 --> 00:54:25.630 通常プランまたはプレミアムプランへの申し込みをしていただくと 00:54:25.630 --> 00:54:29.630 使用できる機能、要素となっています。 00:54:29.630 --> 00:54:32.630 設定方法については割愛させていただくのですが、 00:54:32.630 --> 00:54:35.630 こちらはもう簡単に設定できますし、 00:54:35.630 --> 00:54:40.630 これでメールチームとの連携はできないのですが、 00:54:40.630 --> 00:54:43.630 こちらから来た申し込みのメールアドレスを 00:54:43.630 --> 00:54:51.350 インポートしていただくといった形になります。 00:54:51.350 --> 00:54:58.350 自動返信がないかと思うので、通知が来たらそれに対して 00:54:58.350 --> 00:55:01.350 連絡をするという形になります。 00:55:01.350 --> 00:55:05.860 あと、HTMLの埋め込みですね。 00:55:05.860 --> 00:55:08.860 こちらはプレミアムプランなんですが、 00:55:09.860 --> 00:55:17.870 こちらを使用すると、先ほどのワードプレスと同じように 00:55:17.870 --> 00:55:22.890 メールチームとの連携ができます。 00:55:22.890 --> 00:55:28.890 こちらのコードがテンプレートになるわけなんですが、 00:55:28.890 --> 00:55:33.330 こういったコードを差し上げます。 00:55:33.330 --> 00:55:45.040 簡単に編集方法を解説したいと思うんですが、 00:55:45.040 --> 00:55:52.040 先ほどと同じように、メールチームからコードを取得してください。 00:55:52.040 --> 00:55:54.040 該当するリストをクリック。 00:55:54.040 --> 00:56:10.080 サインアップフォームズ、エンベッドフォームズをクリック。 00:56:10.080 --> 00:56:12.080 部分的にコピーすることができるので、 00:56:12.080 --> 00:56:15.080 これは全体をコピーしていただいて、 00:56:15.080 --> 00:56:25.680 ちょっと分かりにくくなってしまうので、別シートに貼り付けます。 00:56:25.680 --> 00:56:41.210 このコピーという方がメールチームから取得したコード。 00:56:41.210 --> 00:56:46.210 こちらが用意したテンプレートのコードです。 00:56:46.210 --> 00:56:50.210 メールチームから取得したコードの中に、 00:56:50.210 --> 00:56:59.050 こういったホームタグというものがあります。 00:56:59.050 --> 00:57:04.050 普段コードを見慣れていない方から難しく感じるかもしれませんが、 00:57:04.050 --> 00:57:10.050 このホームタグをコピーしていただいて、 00:57:10.050 --> 00:57:14.050 このメールチームのホームタグをここに設置というコメントがありますので、 00:57:14.050 --> 00:57:19.050 これを消して、このように貼り付けをお願いします。 00:57:19.050 --> 00:57:25.050 これをコピーして、先ほど紹介したHTMLの要素、 00:57:25.050 --> 00:57:29.050 HTML埋め込みの要素に貼り付けをお願いします。 00:57:29.050 --> 00:57:33.050 これも無料アカウントのままですので、 00:57:33.050 --> 00:57:37.050 実際に解説することはできないのですが、 00:57:37.050 --> 00:57:42.050 こういったテキスト要素みたいなものが出てきます。 00:57:42.050 --> 00:57:45.050 全く同じではないのですが、こういったものが出てきますので、 00:57:45.050 --> 00:57:51.620 そちらに貼り付けていただくと実際に反映されます。 00:57:51.620 --> 00:57:53.620 これで保存です。 00:57:53.620 --> 00:57:56.620 これはテキスト要素ですので反映はされないのですが、 00:57:56.620 --> 00:58:00.620 実際にどういうフォームが表示されるのかと言いますと、 00:58:00.620 --> 00:58:04.620 それを画像で配置したいと思います。 00:58:04.620 --> 00:58:06.620 これですね。 00:58:06.620 --> 00:58:13.310 こういった形で表示がされます。 00:58:14.310 --> 00:58:18.310 編集画面の方ではコードで表示されるのですが、 00:58:18.310 --> 00:58:22.310 実際のページではこのように表示されます。 00:58:22.310 --> 00:58:30.310 見出しの箇所がこちらです。 00:58:30.310 --> 00:58:38.710 ボタンテキストが無料で受け取るのがこちらになります。 00:58:38.710 --> 00:58:46.710 コードですので、この方法は余談として解説しましたが、 00:58:46.710 --> 00:58:50.710 完全に無料でやりたくて簡易的にやりたい場合は 00:58:50.710 --> 00:58:54.710 今回ご紹介したこちらの方法ですね。 00:58:54.710 --> 00:58:57.710 フィライストワークレスメールチーム。 00:58:57.710 --> 00:59:01.710 こちらを連携していただいて作成していただければなと思います。 00:59:01.710 --> 00:59:07.090 あとはステップメールの設定などもありますが、 00:59:07.090 --> 00:59:10.090 今回はオフトウィンページの作成ということなので 00:59:10.090 --> 00:59:14.090 設定方法は割愛させていただきます。 00:59:14.090 --> 00:59:17.090 あとはこのリストに対してステップメールの設定を 00:59:17.090 --> 00:59:24.190 行っていただくといった形になります。 00:59:24.190 --> 00:59:29.190 こういった形でオフトウィンページの作成方法は以上になります。 00:59:29.190 --> 00:59:31.190 ご視聴ありがとうございました。