メインコンテンツにスキップ

ワークショップ集客ページ

訪問者をワンスクロールで有料参加者へと導くワークショップのランディングページを公開できます。料金プラン、受講者の声、認証機能を備えた洗練されたダーク基調のデザインで、数時間で準備が整います。

Lovable
·0件のリミックス

こんな用途におすすめ

  • 高級感と信頼性を求めるワークショップ主催者
  • 開発者なしで有料プログラムを立ち上げたい方
  • オンラインで信頼を築きたいコンサルタント・コーチ
  • 料金表示と申し込みを一体化したい講座制作者

主なポイント

  • 8ページ構成のベース
  • 認証システム
  • 段階別の料金プラン表示
  • スクロール連動アニメーション
  • 講師の経歴セクション
  • 入力チェック付きお問い合わせフォーム
  • カリキュラム概要グリッド
  • 受講者の声の特集セクション
  • モバイル向けハンバーガーメニュー

技術スタック

ライブラリ

  • React
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • Supabase
  • Recharts
  • Embla Carousel
  • Sonner

デプロイ

  • Lovable
  • GitHub

このテンプレートについて

このテンプレートを使えば、デザイン会社が手がけたようなプロフェッショナルなワークショップ用ランディングページが手に入ります。デザインスキルやコーディングの知識は必要ありません。ブルーのアクセントを効かせた洗練されたダークなデザインが、ページを開いた瞬間から訪問者に信頼感と権威を伝えます。深いダークと鮮やかなブルーの背景がセクションごとに交互に切り替わることで視覚的なリズムが生まれ、訪問者は自然とスクロールを続けたくなります。

技術的な部分はすでに完成しています。スクロールに合わせたアニメーション、ヒーローセクションを横切る大胆なマーキーティッカー、スクロールに応じて表示が切り替わる固定ヘッダー、モバイル対応、入力チェック付きのお問い合わせフォームまで、すべて実装済みです。ウェブサイトビルダーと格闘する代わりに、ワークショップの席を埋めることに集中できます。

すぐに使える8つのページが揃っています。ヒーロー、ミッション、講師紹介、カリキュラム概要、受講者の声、料金、お問い合わせの各セクションを備えた1ページ構成のランディングページに加え、専用のお問い合わせページ、ログインページと参加者用ダッシュボード、プライバシーポリシー・利用規約・返金ポリシーの3つの法務ページが含まれます。カスタム404ページまで用意されています。

単発のイベントページのために開発者へ数千ドルを支払ったり、ほかの講座と見分けがつかない汎用テンプレートで妥協したりする必要はありません。認証機能、アニメーション付きのインタラクション、プロフェッショナルなダークデザインを備えたコンバージョン重視のレイアウトを、数週間ではなく数時間でカスタマイズできます。

おすすめの活用例

有料ワークショップの集客

訪問者を興味から申し込みまで、1回のスクロールで導くランディングページを公開できます。ヒーロー、ミッション、講師の実績、カリキュラム、受講者の声、料金というセクションの流れは、人が学びの体験を購入するときの実際の意思決定プロセスに沿っています。この構成が、閲覧者を有料の参加者へと変えます。

コーチング・コンサルティングプログラム

高単価にふさわしい洗練されたデザインで、メソッドや実績、料金を紹介できます。講師紹介と受講者の声のセクションが、見込み客が相談を予約する前に求める社会的証明と人柄への親近感をもたらします。実績やクライアントの成果はサイドバーに埋もれることなく、ページの目立つ位置に表示されます。

オンライン講座のプレローンチ

講座を作り込む前に需要を検証できます。「一番人気」のプランを強調表示した料金セクションとお問い合わせフォームで関心を集め、支払い意欲を測れるので、誰も求めていないものに何か月も費やさずに済みます。組み込みの認証機能と参加者用ダッシュボードが、早期利用者に今すぐ登録する理由を与えます。

制作会社のクライアント納品

クライアント向けのプロフェッショナルなイベントページやワークショップページを、数日ではなく数時間で制作できます。スクロールで現れるアニメーション、光るCTAボタン、動きのあるヒーローテキストを備えたダークグラデーションのデザインには、クライアントの承認をすぐに得られる視覚的インパクトがあります。コンテンツを差し替えて色を調整するだけで、オーダーメイドのような仕上がりを納品できます。

当てはまるものはありましたか?このテンプレートをリミックスして、制作を始めましょう。

作れるもの

このテンプレートは、次のようなものの土台になります:

  • 訪問者を興味から申し込みまで1回のスクロールで導くワークショップ用ランディングページ。アニメーション付きのセクション、料金プラン、見込み客の獲得に使えるお問い合わせフォームを備えています
  • 実績、カリキュラム、受講者の声、参加者用ログインエリアを備え、初日から実績あるプログラムのように見せられるコーチングプログラムのサイト
  • 段階的な料金プラン、早期アクセス用の保護されたダッシュボード、作成済みの法務ページを備えた講座のプレローンチページ

はじめ方

ステップ1:このテンプレートをリミックスする

「リミックス」をクリックして、自分用のコピーを作成します。すぐにカスタマイズできる完全なワークショップ用ランディングページが手に入ります。ヒーロー、ミッション、講師、カリキュラム、受講者の声、料金の各セクションを含むホームページ、お問い合わせページ、ログインページとダッシュボードページ、3つの法務ページの計8ページです。すべてのページと機能はすでに動作しているので、あとは自分らしく仕上げるだけです。

このテンプレートが合わなければ、別のテンプレートをリミックスすることもできます。作業が無駄になることはありません。

ステップ2:ブランドに合わせてカスタマイズする

ブルーのアクセントカラーをブランドカラーに変更しましょう。フォントも個性に合わせて変更できます。テンプレートでは複数のウェイトのInterを使用していますが、まったく別のフォントに置き換えることも可能です。Lovableのビジュアルエディターを使えば、作業しながらレイアウトを変更し、その結果をすぐに確認できます。ダークグラデーションやセクションの背景、アニメーションを思いどおりに仕上げるのに、コードの知識は必要ありません。

ステップ3:コンテンツを追加する

サンプルの講師紹介を自分の経歴に、カリキュラムのモジュールを実際のワークショップの内容に差し替え、受講者の声を実際の参加者のコメントに更新します。ヒーローでスクロールするマーキーのテキストも、ワークショップのキャッチコピーに合わせて変更しましょう。顔写真やワークショップの写真をアップロードすれば、画像のホバーエフェクトやスクロールで現れるアニメーションが洗練された印象に仕上げてくれます。テンプレート自体は主張しすぎないので、訪問者の目に留まるのはコンテンツそのものです。

ステップ4:ツールを連携する

このテンプレートには、参加者ログイン用の認証機能と保護されたダッシュボードがすでに含まれています。そこから、ワークショップに必要なツールを連携して機能を広げられます。申し込みを管理するメール配信プラットフォーム、訪問者の行動を分析するアナリティクス、料金のCTAに使う決済サービスなどです。Lovableには、ワークショップ主催者が実際に使うツールとの連携機能が組み込まれています。

ステップ5:公開する

ワンクリックでワークショップ用ランディングページを公開できます。ホスティング、セキュリティ、パフォーマンスの最適化はLovableが自動で行います。数分で世界中に公開されるので、URLをオーディエンスと共有したり、次のメールキャンペーンに載せたりできます。

まとめ

このワークショップ用ランディングページのテンプレートは、教える内容の質にふさわしいウェブサイトを求めるクリエイターや事業者に最適です。デザイナーを雇わずにプロフェッショナルなダークデザインを、コードを書かずにスクロールアニメーションやインタラクティブな要素を、別々のツールを寄せ集めずに認証付きの完全な申し込みフローを手に入れられます。

初めての有料ワークショップを宣伝する場合も、専門性を伝えきれていない簡素なページから乗り換える場合も、このテンプレートがコンバージョンを重視した土台になります。セクションの流れが訪問者を認知から行動へと導き、料金レイアウトがおすすめのプランを際立たせ、参加者用ダッシュボードが申し込んだ人に参加を決める理由を与えます。テンプレートは無料で、カスタマイズにかかるのは数時間ほど。今夜にはワークショップのページを共有できるかもしれません。

機能・できること

  • アニメーション付きヒーローセクション

    大胆に流れるマーキーティッカー、ぼかしからくっきりと浮かび上がるテキストアニメーション、光るCTAボタンが、ひと目で注目を集めるインパクトを生み出します。

  • 講師の経歴セクション

    画像を固定表示する2カラムレイアウトでプロフィールと専門性を紹介し、訪問者が料金にたどり着く前から信頼を築けます。

  • カリキュラム概要グリッド

    ずらして配置した画像レイアウトとホバー時のズーム効果で、ワークショップの各モジュールを視覚的に魅力ある形で紹介します。

  • 段階別の料金プラン表示

    「一番人気」プランを強調した3段階の料金レイアウトで、訪問者をおすすめのプランへ自然に導きます。

  • 受講者の声の特集セクション

    装飾要素と発言者名を添えた全幅の引用ブロックで、社会的証明となる受講者の声を目立つ位置に配置します。

  • 入力チェック付きお問い合わせフォーム

    ドロップダウン選択とトースト通知を備えた5項目のフォームで、見込み客の情報を集めながら即座にフィードバックを返します。

  • 固定ヘッダーナビゲーション

    スクロールに合わせて透明から不透明に切り替わるヘッダーで、コンテンツの邪魔をせずにいつでもナビゲーションを使えます。

  • 保護された参加者ダッシュボード

    認証が必要なダッシュボードページで、登録した参加者に専用スペースを提供し、早めに申し込む理由を生み出します。

  • 法的ページ付き

    プライバシーポリシー、利用規約、返金ポリシーのページがすぐにカスタマイズできる状態で用意されており、一から作る必要はありません。

  • スクロール表示アニメーション

    Intersection Observerを使ったアニメーションが訪問者のスクロールに合わせて動作し、パフォーマンスを損なわずに洗練された体験を生み出します。

  • モバイル向けハンバーガーメニュー

    レスポンシブなナビゲーションがすっきりしたモバイルメニューに折りたたまれるため、どのデバイスでも快適に表示されます。

  • 交互に切り替わるセクション背景

    ダークグラデーションと青一色の背景が交互に現れて視覚的なリズムを生み、訪問者がスクロールし続けたくなる流れを作ります。

関連テンプレート

AIムードボードキャンバス画像とテキストメモをドラッグ&ドロップで配置
Lovableスライドコードで動くプレゼンビルダー
Lovable InsightsGoverned metrics, self-serve dashboards