Stellarium

セミナーLPの作り方とデザイン|最初の画面・載せる順番・表示速度を治療家セミナーの作り直しで解説

あおい
セミナーLPの作り方とデザイン|最初の画面・載せる順番・表示速度を治療家セミナーの作り直しで解説

「無料セミナーなのに、LPから申し込みが入らない」 「広告のクリックはあるのに、申込フォームまで進んでくれない」

セミナーを主催している方から、よく聞く悩みです。

セミナーLP(ランディングページ。広告から人が最初に着地する申込のためのページ)は、商品のLPより短く済むように見えます。講師がいて、日時があって、無料。載せることは少ない。それでも申込が入らないLPには、だいたい共通する作りがあります。

10月、治療家の先生向けの無料オンライン講義「選ばれる治療家セミナー」のLPを、開催の数日前に急ぎで作り直しました。講師は、日本代表やプレミアリーグの選手と個人契約している治療家の木谷将志さん。元のLPを残したまま何を変えたのかを、画面と数字で並べます。

セミナーLPの最初の画面に入れるのは、講師名・講義名・日時・無料・申込ボタン

元のLPにも、申込ボタンはありました。

大きな画像が1枚あり、そのすぐ下に黄色い「無料セミナー申し込みはこちら」のボタン。見た目だけなら、ファーストビュー(スクロールせずに見える範囲)にボタンがある、よくあるセミナーLPです。

問題は画像の中身のほうでした。講師名も、講義の名前も、10/21という日時も、すべて画像の中の文字。HTMLの文字としてはページに存在しない。画像が出るまでは、何のページなのかがわかりません。しかも「無料」という言葉はボタンの上にしかなかった。画像の中で一番大きかったのは「本気の方のみ募集」「顔出し必須」の2つです。

広告を見て、なんとなく気になって押した先生が最初に目にするのが「本気の方のみ」。少し身構える言葉だと思います。

最初の画面で変えたこと元のUTAGEのLPと、作り直したLP(kitani.lpstage.com)のスマホの最初の画面を比べた
元のLPUTAGEで作られていたページ
講師名と講義名画像の中の文字
日時画像の中の文字。1日分だけ
無料ボタンの上だけ
大きな言葉本気の方のみ募集、顔出し必須
今の形作り直したLP
講師名と講義名HTMLの文字
日時HTMLの文字。ほかの日程も並べる
無料金のバッジと日時の枠の両方
大きな言葉プロの中の、プロになろう

作り直したLPでは、写真とキャッチコピーの下に、参加費無料、オンライン開催、人数限定の3つのバッジを置きました。その下に「木谷将志が教える」と講師名、講義名の「選ばれる治療家セミナー」、日時とZoomでの受講、ほかの日程、申込ボタン。ここまでが最初の画面です。

画像に焼かずHTMLの文字で出す理由

画像の中の文字には、困ることが3つあります。

1つ目は、表示が遅い回線だと画像が出るまで何も読めないこと。2つ目は、スマホの幅に縮むと小さな文字が潰れること。元のLPの日時は大きく書かれていましたが、曜日の「(水)」は小さかった。3つ目は、検索エンジンや読み上げの機能が文字として拾いにくいこと。

日時を変えるたびに画像を作り直す手間もある。

セミナーは回ごとに日程が変わります。文字ならLPの中の1行を書き換えれば済みますが、画像だと毎回デザイナーに頼むことになる。写真やキャッチコピーの装飾は画像のままで構いません。読んで判断する情報だけを文字にしておく、という線の引き方です。

セミナーLPに載せる順番は、「こんな先生へ」から始める

「世界でも通用するプロの治療技術に触れてみたい先生へ」。

最初の画面のすぐ下に置いた、対象者の一覧の見出しです。元のLPでは10項目あった一覧を6項目に絞り、最初の画面の直後に移しています。広告から来た人がまず知りたいのは、講師がどれほどすごいかより、これは自分向けの講義なのかどうか。そこに先に答えておくと、下の講師紹介を自分ごととして読んでもらえます。

10項目を6項目にしたのは、項目が多いと、自分に当てはまる行を探すだけで疲れてしまうと考えたからです。

作り直したセミナーLPの並び上から順に。申込ボタンは途中に4回と、最後の申込の章に1回置いた
最初の画面講師名、講義名、日時、無料のバッジ、申込ボタン
こんな先生へ対象者の一覧を10項目から6項目に絞った
講師紹介経歴、施術の特徴、メディア、著書
なぜリピート指名されるのか講師紹介の直後に置いて、実績と理由をつなげた
このセミナーで手に入る3つの核心3つそれぞれに写真を付けた
集客より先に技術左右2列で比べる形にした
無料の理由と講師からのメッセージこの基準を治療家に広く知ってほしい、という話
よくある質問と申込参加費、場所、申込後の流れ、時間の4問

講師紹介の位置も動かしました。

「なぜ代表選手は、高単価でも木谷をリピート指名するのか?」という章のすぐ前に講師紹介を置くと、経歴を読んだ直後に、その理由の話が始まる。経歴と理由が離れていると、読む側は頭の中で2つをつなぎ直さなければなりません。

講義で手に入る「3つの核心」には、それぞれ写真を付けています。文字だけの3項目は、スマホでは読み飛ばされやすい。もう1つ、「集客より先に技術」という主張は、集客に頼るやり方と技術で選ばれるやり方を左右2列に並べました。文章で読ませるより、比べたほうが一目で伝わる話だったからです。

よくある質問は4つだけ。参加費はかかるか、どこで開催するか、申し込んだあと何をすればいいか、何時からか。無料のオンラインセミナーで先生方が迷うのは、たいていこの4つに収まります。

申込ボタンは「LINEで無料参加」の文言で、最初の画面のあと、リピート指名の理由のあと、3つの核心のあと、無料の理由のあとの4か所に置きました。どこで読む気になっても、指を伸ばせば押せる位置にある。LP全体の作り方の流れはLP制作の流れにまとめています。

セミナーLPの表示速度は、広告費にも響く

15.1秒。

元のLPを、スマホでPageSpeed Insights(Googleが無料で出している表示速度の計測ツール)にかけたとき、メインの画像が出るまでにかかった時間です。最初の文字が出るまでにも7.1秒かかっていました。

広告から来た人は、1クリックごとにお金を払って連れてきた人です。その人が、何のページかわかる前に戻っていく。セミナーの広告は「ちょっと気になった」程度の気持ちで押されることが多いので、待ってはもらえません。

スマホでの計測元のLP作り直したLP
最初の文字が出るまで7.1秒2.7秒
メインの画像が出るまで15.1秒6.9秒
PageSpeedのモバイルスコア5768
最初の文字が出るまで
元のLP7.1秒
作り直したLP2.7秒
メインの画像が出るまで
元のLP15.1秒
作り直したLP6.9秒
PageSpeedのモバイルスコア
元のLP57
作り直したLP68

作り直したLPは、元のUTAGEのページの中身を引き継いで、Astro(表示の速いページを作るための道具)で組み直しました。講師名や日時をHTMLの文字にしたので、画像を待たずに読める状態になるのも早くなっています。

正直に書くと、6.9秒はまだ合格ラインではありません。Googleの解説では、メインの画像や見出しなど一番大きな要素が出るまで(LCP)は2.5秒以内が良好とされています(web.dev「Largest Contentful Paint (LCP)」)。開催の数日前に急ぎで作り直したので、ここは半分まで縮めたところで止めました。写真を何枚も使うLPほど、画像の重さが残ります。

表示が遅いLPは、Google広告では品質スコアにも響き、1クリックあたりの費用が上がる。仕組みと、自社のLPを12.6秒から4秒台に縮めた話は広告のLPが遅いと広告費が上がるに書きました。

日程が複数あるオンラインセミナーは、直近の回を大きく見せる

10月21日(水)、28日(水)、11月1日(日)。このセミナーは3回開く予定で、平日の2回は21時から22時30分、日曜は20時から21時30分でした。

最初の画面では、直近の10月21日だけを大きな枠に入れ、隣にZoomでの受講と「参加無料・全国から」を並べました。残りの2回は、その下に「ほかの日程も選べます」と小さく添えています。

3回を同じ大きさで並べると、どれに出ればいいかを最初の画面で考えさせることになる。直近の回を主役にしておけば、迷わずボタンまで進めます。迷わせないこと。都合が合わない人だけが下の2回を見ればいい。

申込が開催前日にどう分かれていたかを見ると、10月20日の午後の時点で、10月21日の回が18名、10月28日と11月1日の回が3名ずつでした。直近の回に申込が集まるのは、開催が近いからでもあります。それでも、最初の画面の主役をどの回にするかで、どこに人が集まるかは変わるはずです。

日程の選択はLPではなく、その先の申込ページで行います。LPのボタンは1種類だけ。日程ごとにボタンを分けると、ボタンの数が3倍になり、どれを押すかでまた迷わせてしまう。

余談ですが、このセミナーは名前が2つありました。LPと広告では「選ばれる治療家セミナー」、申込を受けるUTAGE(セミナーや講座の申込とメール・LINE配信をまとめて扱うサービス)の上では「世界基準の治療技術 特別講義」。開催当日の朝に送る予定だったリマインドの文面に、旧名のほうが残っていたので、その1通は下書きのまま止めています。LPの名前を変えたら、申込ページ、完了の案内、リマインドまで同じ名前になっているかを一度通して見ておくと安心です。

申込ボタンの先は、フォームかLINEか

元のLPのボタンの先は、メールアドレスと電話番号を入れるフォームでした。カメラONとドタキャン厳禁への同意のチェックがあり、一部の広告ではSMS認証もかかっていた。申し込んだあとにLINE登録をお願いする流れで、LINEまでつながったのは申込者の約14%です。

作り直したLPでは、ボタンの先をLINEの友だち追加にしました。順番を逆にした形です。

友だち追加の直後に申込の案内が届き、タップすると申込ページが開く。LINEでログインした状態なので、入れるのは名前だけで済みます。友だち追加した人のうち、申込まで進んだのは日によって50〜60%。申し込まなかった人もLINEには残るので、次の回の案内を送れます。

LINEにも落とし穴はありました。無料プランは月200通までで、あいさつや申込完了、リマインドもその200通から引かれる。フォームとLINEの比べ方、届かない事故の防ぎ方、申込を広告の成果として数える仕組みは、姉妹記事のセミナーの申込フォームの作り方で詳しく書いています。

CONTACT

セミナーLPの作り直し、開催に間に合わせます

最初の画面の情報を文字で出す、載せる順番を組み替える、表示速度を測って縮める、申込の先をフォームかLINEかで決める。今のLPを土台に、開催日から逆算して作り直します。

ご相談は無料です。そのまま依頼しなくても大丈夫です。

作り直す前と後のセミナーLPの画面

「本気の方のみ募集」。元のLPで一番大きかった文字です。

写真と日時の入った画像と、黄色いボタン。それだけを見ると、悪いLPには見えません。ところが画像が出るまでの間、画面に読める文字はほとんどない。それがスマホで15.1秒です。

作り直したLPのスマホの最初の画面です。

写真と講師の雰囲気は元のLPから引き継ぎました。紺と金の色づかいも同じ。変えたのは、読む情報を画像から外へ出したことと、「本気の方のみ」の代わりに「プロの中の、プロになろう」を一番大きな言葉にしたことです。

PCで開くと、こう見えます。

PCでもスマホと同じ1列を中央に置いただけ。広告の画像も縦長で、スマホで見る人に合わせて作っているので、LPもそちらに寄せました。

作り直したあとの3日間(10月18日〜20日)で、LINEの友だち追加は34件、広告費は140,686円でした。10月21日の回は前日の時点で、目標の12〜15名を超える18名。ただ、この3日間は広告のほうも新しくしていて、ボタンの先もフォームからLINEに変えています。LPだけの効果として切り出すことはできません。申込1件あたりの広告費は7,000円前後で、フォームの頃の平均6,239円とほぼ同じ水準です。変わったのは、開催の数日前から目標を超える数が集まったことと、申し込んだ人が全員LINEで連絡を受け取れる状態になったこと。依頼主の担当者からは「僕から見たら100点」と言ってもらえました。

広告をどう作り直したか、セミナーの集客全体をどの順番で整えたかは、セミナー集客の方法にまとめています。当日の参加人数は、開催後に追記します。

セミナーLPを公開する前のチェックリスト

開催日が迫っていても、1時間あれば全部見られる量に絞りました。作り直すときに実際に確かめた項目です。

  • 最初の画面で、講師名、講義名、日時、無料、申込ボタンがすべて見えるか
  • 講師名、講義名、日時が画像の中ではなくHTMLの文字になっているか
  • 「無料」がボタン以外の場所にも書いてあるか
  • 最初の画面で一番大きな言葉が、読む人を身構えさせないものか
  • 最初の画面のすぐ下で、誰向けの講義かがわかるか
  • 講師紹介の直後に、講師が選ばれている理由の話が続いているか
  • 日程が複数あるとき、直近の回が主役になっているか
  • 申込ボタンが途中に何度か出てきて、文言がそろっているか
  • スマホでPageSpeed Insightsにかけ、メインの画像が出るまでの秒数を控えたか
  • 自分のスマホでボタンから申込完了まで通して操作したか。入力中に画面が勝手に動かないか
  • LP、申込ページ、完了の案内、リマインドで、セミナーの名前がそろっているか

入力中に画面が動く、というのは今回実際に起きたことです。ページ内をなめらかに動かす設定のせいで、フォームに文字を打つたびに画面がずれていた。その設定をやめて直しました。自分の指で最後まで申し込んでみると、こういう不具合が見つかります。

公開したあとは、Microsoft Clarity(無料のヒートマップ)で、どこまで読まれ、どのボタンが押されているかを見ていきます。直す場所の選び方はLPOの進め方に、外に頼むときの費用の目安はフリーランスのLP制作費用に書きました。

FAQ

セミナーLPの最初の画面には何を入れればいいですか?
誰が話すのか(講師名)、何の講義か(講義名)、いつか(日時)、無料かどうか、申込ボタンの5つです。治療家向けセミナーのLPでは、この5つを画像の中ではなくHTMLの文字で出すように作り直しました。画像に焼くと、表示が遅いときに何も読めず、スマホでは文字が縮みます。
セミナーLPはどんな順番で載せればいいですか?
最初の画面のすぐ下に「こんな先生へ」のような対象者の一覧を置き、自分向けの講義だとわかってもらってから、講師の実績、講義で得られること、無料で受けられる理由、よくある質問、申込の順に並べます。講師紹介は、講師がなぜ選ばれているのかを語る章の直前に置くと、話がつながります。
セミナーの日程が複数あるときは、LPでどう見せますか?
直近の回を大きく出し、そのすぐ下に「ほかの日程も選べます」として残りの回を小さく並べます。日程の選択は申込ページで行い、LPのボタンは1種類にそろえました。実例では、開催前日の時点で申込の大半が直近の回に集まっていました。
セミナーの申込は、フォームとLINEのどちらがいいですか?
開催前に連絡を確実に届けたいならLINEが向いています。実例では申込ボタンの先をLINEの友だち追加に変え、申し込んだ人が全員LINEにいる状態にしました。ただしLINE公式アカウントの無料プランは月200通までなので、リマインドの通数を先に数えておく必要があります。

関連記事

セミナー申込フォームとリマインドの作り方|LINEで受けて申込者全員に連絡が届く形にした実例LP制作

セミナー申込フォームとリマインドの作り方|LINEで受けて申込者全員に連絡が届く形にした実例

セミナーの申込フォームを、メール・電話番号・SMS認証の入力からLINEの友だち追加に変えた実例です。フォームとLINEの向き不向き、友だち追加した人の54%が申込に進んだ数字、リマインドを送る3回のタイミング、月200通の上限やUTAGEとLINEで人数が合わない落とし穴、参加率の測り方までまとめました。

セミナー集客の方法|開催直前の3日間で申込を目標以上に集めた広告の作り方と数え方広告運用

セミナー集客の方法|開催直前の3日間で申込を目標以上に集めた広告の作り方と数え方

開催日が近いのに申込が足りないときの、セミナー集客の方法とコツ。申込と当日の参加を分けて数える考え方、広告・SNS・告知サイト・名簿の選び方、治療家向け無料講義で3日のうちに目標を超えた広告の実例、成果の数え方、開催日が決まった集客での予算の動かし方まで。

整骨院・整体院のSEO対策|広告の決まりを守って地域の検索で見つけてもらう方法SEO対策

整骨院・整体院のSEO対策|広告の決まりを守って地域の検索で見つけてもらう方法

整骨院・整体院のSEO対策を、柔道整復師法の広告制限と2025年2月に厚生労働省が出したあはき・柔整広告ガイドライン、キーワードの検索数(2026年9月時点)、Googleビジネスプロフィールの決まり、地域ページの作り方の順に整理しました。整骨院と整体院で守る決まりが違う点も、公式資料を出典にして説明します。