受講生コース画面のデザイン改善提案
スマホ版
Before（現行デザイン） → 古いシステム感 / テーブル表示 / フラットすぎる
Webマーケティング基礎講座
コース
学習計画
感想履歴
ブックマークリスト
学習の進捗
100%
完了
完了カテゴリ（＝章）数
4 / 4
完了ブロック数 23 / 23
修了証を発行
進捗の詳細を確認
カリキュラム完了予定日進捗状況
1 / 4【第1章】オリエンテーション完了
2 / 4【第2章】用語解説完了
3 / 4【第3章】打撃編完了
4 / 4【第4章】守備編完了
コース画面（学習途中の受講生視点）
あなたのコミュニティ
TECH PLUS 3コース ▼
プログラミング体験
Webマーケティング基礎講座
営業
テックリーダーズ 1 1コース ▼
オンクラス社員研修 2コース ▼
(株) オンラインクラス 1コース ▼
(株) 後楽 1コース ▼
オンクラス
T
ホーム › TECH PLUS › Webマーケティング基礎講座

Webマーケティング基礎講座

65% 15 / 23 ブロック完了
コース
学習計画
感想履歴
ブックマークリスト
学習中 — 第3章 打撃編
▶ 【動画】バッティングフォームの基本
ブロック 5 / 7
📚 カリキュラム
章 = 学習の区切り／ブロック = 動画・PDFなどの1コンテンツ
✔
第1章   オリエンテーション
6 / 6 ブロック完了
完了 ▼
✔
第2章   用語解説
5 / 5 ブロック完了
完了 ▼
3
第3章   打撃編 📍 学習中
4 / 7 ブロック完了
57% ▲
✔
完了したブロック 4件 を見る (利用規約・打撃理論・グリップ・スタンス)
▼
📍 今ここ
▶
【動画】バッティングフォームの基本
このブロックから再開します
学習中
6
実践ドリル: スイング矯正
次のブロック
未着手
7
章末テスト
未着手
4
第4章   守備編
0 / 5 ブロック完了
未着手 ▼
5
第5章   走塁編
未着手
全 8 章中 4 章を表示中
学習計画タブ（スケジュール管理の改善）
あなたのコミュニティ
TECH PLUS 3コース ▼
プログラミング体験
Webマーケティング基礎講座
営業
テックリーダーズ 1 1コース ▼
オンクラス社員研修 2コース ▼
オンクラス
T
ホーム › TECH PLUS › Webマーケティング基礎講座

Webマーケティング基礎講座

65% 15 / 23 ブロック完了
コース
学習計画
感想履歴
ブックマークリスト
📅 あなたの学習計画
完了予定日を設定して、学習ペースを管理しましょう
予定設定済み
2
遅延中
1
未設定
2
すべて
完了予定日未設定
完了予定日設定済み
遅延中
1
第1章   オリエンテーション
✔ 完了 6 / 6 ブロック 目安: 3日
完了予定日
2026/04/10
予定通り
2
第2章   用語解説
✔ 完了 5 / 5 ブロック 目安: 5日
完了予定日
2026/04/18
予定通り
3
第3章   打撃編 学習中
4 / 7 ブロック 目安: 7日
57%
完了予定日
2026/04/28
やや遅れ
4
第4章   守備編
未着手 0 / 5 ブロック 目安: なし
完了予定日
未設定
未設定
💡
オーバーフロー仕様（全画面共通）: 章数が5件以上ある場合は以下パターンで表示。4件目までを表示し、残りは「もっと見る」ボタンで展開（ページネーションではなく、アコーディオン展開）。
5
第5章   走塁編
未着手  ·  0 / 4 ブロック
未着手
第5章 · 第6章 · 第7章 · 第8章
感想履歴タブ（学習の振り返り）
仕様メモ: この画面はスクロール閲覧仕様です。感想は本文が長め（100〜200字）で章ごとにグルーピング表示するため、1画面に圧縮せず縦スクロールで読み進める設計としています。
あなたのコミュニティ
TECH PLUS 3コース ▼
プログラミング体験
Webマーケティング基礎講座
営業
テックリーダーズ 1 1コース ▼
オンクラス社員研修 2コース ▼
オンクラス
T
ホーム › TECH PLUS › Webマーケティング基礎講座

Webマーケティング基礎講座

65% 15 / 23 ブロック完了
コース
学習計画
感想履歴
ブックマークリスト
💬 あなたの感想一覧
学習した内容の振り返りができます
感想投稿数
8
章数
3
1
第1章   オリエンテーション
3件の感想
📹 動画 オンライン学習の心構え
2026/04/06
オンラインでの学習は初めてでしたが、動画がわかりやすくて安心しました。自分のペースで進められるのが良いですね。
📝 記事 学習の進め方ガイド
2026/04/07
学習計画の立て方が参考になりました。まずは毎日30分を目標にやってみます。
📹 動画 目標設定のコツ
2026/04/07
SMARTゴールの考え方は仕事にも使えそうです。具体的な目標を決めてから取り組むと効率が全然違いますね。
2
第2章   用語解説
2件の感想
📝 記事 マーケティング基礎用語50選
2026/04/10
知らない用語が多かったですが、説明がわかりやすかったです。CPA、CPO、LTVの関係が理解できました。
📹 動画 ファネルの考え方
2026/04/11
ファネルを意識することで、お客様がどこで離脱しているか分析できるようになりそうです。
3
第3章   打撃編 学習中
3件の感想
📹 動画 打撃理論
2026/04/13
理論を知ってから実践すると、フォームの改善ポイントがはっきりしました。
📝 記事 グリップの種類と選び方
2026/04/14
自分に合ったグリップがわかって、練習が楽しくなりました。
📝 記事 スタンスの基本
2026/04/15
スタンスの幅が打球に影響するとは知りませんでした。写真付きの解説が助かります。
📹 動画 フォロースルーの重要性
2026/04/15
ブックマークリストタブ（ブックマーク管理）
あなたのコミュニティ
TECH PLUS 3コース ▼
プログラミング体験
Webマーケティング基礎講座
営業
テックリーダーズ 1 1コース ▼
オンクラス社員研修 2コース ▼
オンクラス
T
ホーム › TECH PLUS › Webマーケティング基礎講座

Webマーケティング基礎講座

65% 15 / 23 ブロック完了
コース
学習計画
感想履歴
ブックマークリスト
あなたのブックマークリスト
ブックマークしたブロックに素早くアクセスできます
登録ブロック
5
追加機能: 検索バー（タイトル部分一致）、一括解除、タグ付け。
📹 動画 第1章
オンライン学習の心構え
✔ 完了
📝 記事 第2章
マーケティング基礎用語50選
✔ 完了
📹 動画 第2章
ファネルの考え方
✔ 完了
📹 動画 第3章
打撃理論
✔ 完了
📹 動画 第3章
バッティングフォームの基本
▶ 学習中
📝 記事 第3章
グリップの種類と選び方
全 17 件中 5 件を表示
修了証（コース100%完了時の画面）
あなたのコミュニティ
TECH PLUS 3コース ▼
プログラミング体験
Webマーケティング基礎講座
営業
テックリーダーズ 1 1コース ▼
オンクラス社員研修 2コース ▼
オンクラス
T
ホーム › TECH PLUS › Webマーケティング基礎講座

Webマーケティング基礎講座

100% 23 / 23 ブロック完了 🎉 修了
コース
学習計画
感想履歴
ブックマークリスト
🎉
おめでとうございます!
「Webマーケティング基礎講座」の全カリキュラムを修了しました
完了した章
4 / 4
完了ブロック
23 / 23
学習日数
18日
CERTIFICATE OF COMPLETION
修 了 証
以下の講座の全カリキュラムを修了したことを証明します
Webマーケティング基礎講座
受講者
田中 太郎
修了日
2026年4月15日
発行番号
OC-2026-04150001
TECH PLUS
Before（現行カテゴリ（＝章）一覧画面） → テーブル表示 / 進捗がわかりにくい / ロック状態が目立たない
Ⓢ オンクラス
学習 コミュニティ
❓ お問い合わせ
受講講座: 営業
カテゴリ（＝章）合計数 完了カテゴリ（＝章）数 未完了カテゴリ（＝章）数
4 0 4
未完了 営業準備編
進捗度 0%
完了ブロック数 0 / 9
未完了 営業実践編＆ケーススタディー 次のカテゴリ（＝章）解放まで2日
進捗度 0%
完了ブロック数 0 / 4
未完了 営業後サポート
進捗度 0%
完了ブロック数 0 / 3
未完了 実践編
進捗度 0%
完了ブロック数 0 / 1
章一覧画面（学習進捗の可視化）
あなたのコミュニティ
TECH PLUS 3コース ▼
プログラミング体験
Webマーケティング基礎講座
営業
テックリーダーズ 1 1コース ▼
オンクラス社員研修 2コース ▼
(株) オンラインクラス 1コース ▼
(株) 後楽 1コース ▼
オンクラス
T
ホーム › TECH PLUS › 営業

営業

35% 6 / 17 ブロック完了
コース
学習計画
感想履歴
ブックマークリスト
📚
章の合計
4
✅
完了した章
1
📝
未完了の章
3
📋 章一覧
✔
第1章
営業準備編
完了 ›
9 / 9
📖
● 学習中 — 第2章
営業実践編＆ケーススタディー
2 / 4
次は ブロック3 / 4
🎬 アポイント獲得の実例 (9:20)
›
🔒
第3章
営業後サポート
🕒 解放まであと2日 ›
0 / 3
📘
第4章
実践編
未着手 ›
0 / 1
📘
第5章   応用編
未着手
全 7 章中 4 章を表示中
学習ページ（ワクワクする学習体験デザイン）
オンクラス
T
営業 › 営業準備編 › ブロック2
2 / 9 ブロック
🔥
連続2日目の学習です！この調子で続けましょう 営業準備編 — あと7ブロックで完了です
🔥
2日 連続
⭐
完了 1 ブロック
⏱
今日 12分 学習
1
2
3
4
…
9
2
営業準備編 — ブロック 2 / 9
準備編〜リサーチについて
ブックマーク
▶
動画を見て学習しましょう
⏱ 8分45秒
📖
解説
▼
準備編〜リサーチについて。営業活動を行う前に、顧客企業のリサーチが不可欠です。この動画では、効率的なリサーチ方法と、収集した情報をどのようにヒアリングシナリオに活かすかを学びます。
💬
感想を書いてみましょう
0 / 1000
2 / 9
22%
NEXT ①リサーチをやってみましょう
2 / 9 完了
✅
上のデザインでブロック完了時のイメージ
完了すると、チェックマーク付きのステップドットが緑に変わり、「次のブロックへ」ボタンで自然に次へ誘導されます。
連続学習日数・完了ブロック数が更新され、達成感を演出します。
💡 改善ポイント（現行 → 提案）
❌ 現行の課題
  • 白背景にテキストだけで殺風景
  • 学習の進捗がわかりにくい
  • モチベーションを高める要素がない
  • 前後のブロックへの移動が不便
  • 「今どこにいるか」が不明確
  • 感想欄が地味で書く気が起きない
✅ 提案デザインの工夫
  • ステップドットで全体の位置を一目で把握
  • 連続学習日数・学習時間でモチベUP
  • モチベーションバナーで応援メッセージ
  • カード型UIで解説・感想が明確に分離
  • 前後ナビゲーションでブロック名も表示
  • フローティングバーで常に次へ進める
スマホ版 学習ページ（Mobile Web）
BEFORE — 現行
20:50
📶 📡
🔍 app.the-online-class.com ↑
☰ ✓ ログインしました！ ✕
営業/営業準備編
✓
🔖
はじめに
▶ 動画を見て学習しましょう
▶
解説 ∧
はじめに
❌ 味気ないレイアウト
❌ 進捗が見えない
❌ 次ブロックへの導線なし
❌ モチベ要素ゼロ
AFTER — 改善デザイン
20:50
📶 📡
営業  ·  営業準備編
ブロック 2 / 9  ·  準備編〜リサーチ
65%
✔
ログインしました！
✕
🔥2日連続
⭐完了 1
⏱今日 12分
1
2
3
4
…
9
2
営業準備編 — ブロック 2 / 9
準備編〜リサーチについて
▶ 動画 ⏱ 8分45秒
▶ 動画を見て学習しましょう
⏱ 8:45
📖
解説
営業において準備はもっとも重要なステップです。リサーチの質がそのまま成約率に直結します。本ブロックでは、効率的な情報収集のフレームワークを学びます。
✏
メモ & 感想
ブックマーク登録

📱スマホ改善ポイント

Before:
単なる縮小レイアウト
After:
モバイル特化UI
  • コンパクトヘッダー: 戻る + パンくず + 進捗リング（1行集約）
  • ストリークバー: 連続日数・完了・学習時間を常に可視化
  • ステップドット横スクロール: 9ブロック全体が一目で見える
  • 動画カードのモダン化: グラデ背景 + 半透明再生ボタン
  • アコーディオンカード: 解説・メモ・ブックマーク登録を分離
  • 固定ボトムナビ: 「次のブロックへ」CTAが常に親指届く位置に
  • 成功トースト: フラットグリーン→グラデ+アイコン円で質感UP
  • セーフエリア対応: ホームインジケーター領域を考慮したpadding