和-Node 制作例: 架空の講座販売サイト ワイヤーフレーム

ONLINE LEARNING PLATFORM

学びたいことを、迷わず選べる講座サイト。

対象者・学べること・期間・料金・受講方法を比較し、納得して申込みへ進める講座販売サイトの構成例です。

  • 比較しやすい
  • 受講方法が見える
  • 申込み前に相談できる

COURSE LIST / DETAIL / APPLY

USER FLOW

受講者が、次に何を見ればいいか分かる構成。

  1. 01講座を知る対象者と学べること
  2. 02比較する期間・料金・受講方法
  3. 03詳細を読むカリキュラム・講師・FAQ
  4. 04申込むフォーム・外部決済へ
  5. 05受講するメール・学習サービスで案内

COURSE LIST

自分に合う講座を、
比べて選ぶ。

講座名だけでなく、対象者、期間、料金、募集状況を同じ位置で見せる想定です。

マーケティング募集中

はじめてのWeb集客 設計

発信、LP、問い合わせ導線をつなげて、まず何から整えるかを学ぶ入門講座。

期間
4週間
受講料
19,800円
デザイン募集中

伝わるバナー・LP デザイン基礎

見た目だけで終わらせず、読み手が迷わない情報の置き方を身につける講座。

期間
6週間
受講料
29,800円
LINE活用残席わずか

LINE公式アカウント 実務入門

問い合わせ、案内、予約確認に使うための、無理のないLINE運用を考える講座。

期間
3週間
受講料
16,500円
業務改善募集準備中

小さな業務自動化 はじめの一歩

繰り返し作業を洗い出し、ツール導入前に確認したい業務整理を学ぶ講座。

期間
5週間
受講料
24,800円

COURSE DETAIL

マーケティング

はじめてのWeb集客設計

発信、LP、問い合わせ導線をつなげて、まず何から整えるかを学ぶ入門講座。

4週間 19,800円

申込みボタンは、外部決済または既存の申込みフォームへ接続する想定です。

CURRICULUM

この講座で学ぶこと

  1. 01集客の目的を整理する
  2. 02伝わる順番を設計する
  3. 03問い合わせ導線を見直す
よくある質問を見る

WHAT THE ADMIN UPDATES

運営者が更新する情報を、
最初から整理する。

講座の基本情報

講座名、対象者、説明文、画像、カリキュラム

開催・募集情報

開催日、期間、料金、募集状況、申込み先URL

受講後の案内

メール文面、学習サービス、資料、問い合わせ先

HOW TO ENROLL

申込み後まで、
不安を残さない。

購入の前後で「何が起きるか」を短く明示します。受講方法や案内の時期が分かると、申込み前の迷いを減らせます。

  1. 1

    講座を選ぶ

    対象者、内容、料金、日程を確認します。

  2. 2

    申込み・決済

    フォームまたは外部サービスで手続きします。

  3. 3

    受講案内を受け取る

    メールまたは学習サービスから案内が届きます。

FAQ

よくある質問

オンラインだけでも受講できますか?

はい。ライブ配信と録画視聴を組み合わせる想定です。講座ごとの受講方法は詳細ページで確認できます。

途中で参加できなくなった場合はどうなりますか?

録画の有無、資料の閲覧期限、振替対応の可否を講座ごとに明記する設計です。

法人で申し込めますか?

請求書払い、複数名受講、社内研修への切替などは、申込み前に相談できる導線を用意します。

INSTRUCTOR

講師・運営者情報も、判断材料として見せる。

専門分野、実務経験、講座づくりの方針、問い合わせ先を明記する想定です。初めての受講者が「誰から学ぶのか」を確認できます。

運営者への問い合わせ

APPLICATION

必要な情報を確認してから、
申込みへ。

このワイヤーフレームでは、フォーム、外部決済、会員機能などを段階的に接続する想定です。

この構成で制作を相談する

DEMO ACTION

申込み先へ進む前の確認画面

実案件では、この位置から既存フォーム、外部決済、会員登録などへ接続できます。講座名、金額、受講方法、キャンセル規定を確認してから進む設計です。