凡例
➕
新規追加✏️
内容・見せ方を変更🗑️
削除・廃止↕️
位置・構成を移動⬜
変更なし（引き継ぎ）①
トップページ
現行: https://gyo-gaku.com/ → 新: wireframe_top.html
リニューアルの主旨：現行トップは情報量が多いが「サービスの全体像（プラン・料金）」がわかりにくく、初回訪問者が何をすべきか迷いやすい。リニューアルでは「サービス概要の即時把握」と「会員登録への導線強化」を最優先とし、料金プランをトップに移設。「ライブ講義」「実務アーカイブ」「経営支援」の3コンテンツタイプをそれぞれ独立したセクションとして見せる。
BEFORE
現行サイト
グローバルナビ
ロゴ / ショップ / ブログ / お知らせ / サービス料金 / ライブ講義 / 講師紹介 / サポート。右上にログイン・カートボタン
ヒーロー（画像スライダー）
スライダー画像のみ。CTA（行動喚起ボタン）なし
お知らせ
お知らせテキストリスト
「行政書士の学校とは？」紹介文
短いテキスト + 画像でサービス概要を説明
ライブ講義（近日開催 3件）
画像・日時・タイトル・講師名のカード形式
期間限定配信講座
現在配信中のコンテンツ一覧
新着実務講座（WooCommerceショップ）
商品グリッド（画像・タイトル・価格）。/shop/ へのリンク
カテゴリから探す（4カテゴリ）
建設業 / 入管 / 相続 / その他
FAQ バナー
よくある質問へのリンクバナー
ブログ（新着記事）
ブログ記事カード一覧
料金プラン：トップに存在しない
料金・プラン比較は /concept/ に分離。初回訪問者には見えない位置
経営支援アーカイブ：トップに存在しない
/concept/management-support/ に分離
AFTER
リニューアル後
グローバルナビ（刷新）
ロゴ / 講座一覧 / ライブ講義 / サービス・料金 / 講師紹介。右: 「無料登録」ボタン + ログイン。ログイン時はプラン種別バッジ + マイページドロップダウンを表示
ヒーロー（改善）
キャッチコピー + サービス概要 + CTA（「無料で登録する」「講座を探す」）を配置。スライダーは縮小または廃止
【新設】プラン料金比較（3列）
ゲスト（¥0）/ レギュラー（¥5,500/月）/ コンプリート（¥128,000/年）の特典・料金を横並びで即提示。登録ボタン付き。トップページに移設
ライブ講義（近日開催）
カード形式は維持。「会員なら無料」バッジを強調。スケジュール一覧へのリンクを追加
実務アーカイブ講座（新着）
WooCommerceショップではなく「講座一覧ページ」への導線に変更。プランバッジ（「コンプリート見放題」等）を表示
【新設】経営支援アーカイブ講座
経営支援コンテンツをトップに独立セクションとして新設。「レギュラー/コンプリート見放題」を明示
カテゴリから探す
講座一覧ページのフィルターへの導線に変更。カテゴリ数増の可能性あり
【新設】講師紹介スライド
主要講師の顔写真・名前・専門分野を横スクロールで表示。講師一覧ページへのリンク
お知らせ / ブログ（引き継ぎ）
内容は引き継ぎ。ページ下部に配置
🔑 主な変更点
②
講座一覧ページ
現行: https://gyo-gaku.com/course/（ライブ講義専用）→ 新: wireframe_courses.html（全コンテンツ統合）
リニューアルの主旨：現行の /course/ は「ライブ講義専用ページ」。実務アーカイブは /shop/（WooCommerce）、経営支援は /concept/management-support/ に分散。リニューアルでは全コンテンツを1つの講座一覧ページに統合し、フィルターで絞り込める設計にする。
BEFORE
現行サイト（/course/）
⚠️ 前提：現行は「ライブ講義専用ページ」。実務アーカイブは /shop/ に、経営支援は /concept/management-support/ に分離して存在している。
ページタイトル「ライブ講義」
内容はライブ講義のみ
フィルター機能：なし
絞り込みUIなし。全件縦並び表示
近日開催ライブ講義（カード）
画像・開催日時・タイトル・講師名のカード
期間限定配信講座
現在配信中コンテンツのカード
過去ライブ一覧（テーブル形式）
開催日 / タイトル / 講師名 / 所属の4列テーブル。縦に長く視認性が低い
講師一覧（写真グリッド）
講師の写真・名前・専門分野
ブログ（新着）
実務アーカイブ：/shop/ に分離
WooCommerceショップページに存在。一覧ページには含まれない
経営支援アーカイブ：/concept/ に分離
concept/management-support/ に存在。一覧ページには含まれない
AFTER
リニューアル後（統合講座一覧）
ページタイトル「講座一覧」に改称
全コンテンツタイプを横断する統合ページとして再定義
【新設】フィルターバー
カテゴリ絞り込み（建設業 / 入管 / 相続 / 経営 / 全て）
コンテンツタイプ（ライブ / 実務アーカイブ / 経営支援 / 相談会）
プランフィルター（ゲスト向け / レギュラー / コンプリート）
バージョンフィルター（最新版のみ / 旧版含む）
コンテンツタイプ（ライブ / 実務アーカイブ / 経営支援 / 相談会）
プランフィルター（ゲスト向け / レギュラー / コンプリート）
バージョンフィルター（最新版のみ / 旧版含む）
【新設】統合講座カードグリッド
全タイプの講座を統一カードでグリッド表示。カードに：サムネイル / タイプバッジ / カテゴリ / タイトル / 講師名 / 価格orプラン情報。旧版講座には「旧版」バッジを表示
ライブ講義（フィルターで表示）
専用セクションは廃止。グリッドにタイプ別で統合
実務アーカイブ講座（/shop/ から移設）
WooCommerceショップではなく、このページのグリッドから閲覧・購入導線を統一
経営支援アーカイブ（concept/ から移設）
フィルターで切り替え表示
テーブル形式の過去ライブ一覧：廃止
カードグリッドに統一
🔑 主な変更点
③
講座詳細ページ（PC）
現行: https://gyo-gaku.com/course/course-42039/ → 新: wireframe_course.html
リニューアルの主旨：現行の個別ページは「ライブ講義申込ページ」として設計（動画なし・サイドバーなし・1カラム）。実務アーカイブはWooCommerce商品ページとして別レイアウト。リニューアルでは「ライブ講義」「実務アーカイブ」「経営支援アーカイブ」「相談会」の4タイプを1テンプレートで統合し、動画プレイヤー・サイドバー・会員状態別表示を実装。
BEFORE
現行（ライブ講義詳細 / 1カラム）
⚠️ 注記：/course/course-42039/ はライブ講義専用。実務アーカイブの個別ページはWooCommerce（/shop/product/）として全く異なるレイアウトで存在。
ヘッダー・ナビ
現行グローバルナビ
パンくずリスト
トップ › ライブ講義 › 講座名
講座タイトル・日時・会場
H1 + 開催情報（日時・場所・形式）
動画プレイヤー：なし
ライブ講義申込ページのため動画なし
サイドバー：なし（1カラム）
購入ボタンはページ下部のみ
こんな方におすすめ
テキストリスト
講師紹介
顔写真・名前・専門・経歴
カリキュラム（目次）
番号付きリスト
概要テーブル
日時 / 料金 / 会場 / アクセス / 備考
参加の流れ（4ステップ）
申し込み→入金→リンク送付→当日参加
有料会員なら無料セクション
会員特典の告知テキスト
受講申し込みCTAボタン（ページ下部）
参加者の声：なし
口コミ・レビューセクションなし
旧バージョン管理：なし
バージョン概念なし
AFTER
リニューアル後（4タイプ対応 / 2カラム）
ヘッダー・ナビ（刷新）
ログイン状態・プラン種別を反映。スクロール追従
パンくずリスト
トップ › 講座一覧 › カテゴリ › 講座名
【新設】旧バージョンバナー（条件表示）
旧版URLアクセス時のみ：「新バージョンがリリースされています」+ 最新版リンク
【新設】配信期間バー
配信中 / 配信終了 / 開催予定 をビジュアルで表示
【新設】ヒーロー（2カラム：動画 + サイドバー）
左・動画プレイヤー（会員状態別表示）：
ゲスト → ロック画面 + 購入CTA
無料会員 → サンプル動画 + 購入CTA
購入済み / コンプリート → 全編再生
ライブ中 → Zoom参加情報
右・サイドバー：価格 / 購入ボタン / プラン登録CTA
ゲスト → ロック画面 + 購入CTA
無料会員 → サンプル動画 + 購入CTA
購入済み / コンプリート → 全編再生
ライブ中 → Zoom参加情報
右・サイドバー：価格 / 購入ボタン / プラン登録CTA
【新設】スティッキーバー（画面下固定）
スクロール中も購入・登録ボタンを常に表示
こんな方におすすめ / 概要 / カリキュラム / 講師紹介（引き継ぎ）
内容は引き継ぎ。デザイン改善
【新設】参加者の声（レビュー）
受講者4件の口コミカード（星評価・名前・属性）。アーカイブ実務・経営支援タイプに表示
【新設】旧版ロック画面（条件表示）
旧版URL かつ 未購入の場合：コンテンツ非表示 + ロック画面。「購入済み or コンプリート会員のみ視聴可」
【新設】4コンテンツタイプ対応
1テンプレートで：実務アーカイブ / 経営支援アーカイブ / ライブ講義 / 相談会 を切り替え
🔑 主な変更点
④
講座詳細ページ（スマートフォン）
現行: レスポンシブ縮小 → 新: wireframe_course_sp.html（SP専用設計）
リニューアルの主旨：現行のスマホ表示はPC版のレスポンシブ縮小版。リニューアルではスマートフォン専用ワイヤーフレームを別途制作し、縦長レイアウトに最適化した動画・CTA・コンテンツ表示を設計する。
BEFORE
現行（レスポンシブ縮小）
ハンバーガーメニュー
PC版ナビをハンバーガー化
動画プレイヤー：なし
サイドバー：なし（1カラム）
各セクション縦並び
こんな方に / 講師紹介 / 目次 / 概要 / 参加の流れ
固定CTAバー：なし
スクロール中に購入ボタンが見えなくなる
参加者の声：なし
会員状態別の表示切り替え：なし
AFTER
リニューアル後（SP専用設計）
スマホ専用ヘッダー（スクロール固定）
ロゴ + ハンバーガーメニュー。スクロール追従
【新設】動画プレイヤー（全幅 16:9）
画面幅いっぱいの動画エリア。会員状態別：ロック / サンプル / 全編 / Zoom情報
【新設】CTAブロック（動画直下）
購入ボタン / プラン登録ボタン（会員状態別）を動画直下に配置
【新設】スティッキーCTAバー（画面下固定）
スクロール中も常に購入・登録ボタンを表示
各セクション縦並び（引き継ぎ）
こんな方に / 概要 / カリキュラム / 講師紹介
【新設】参加者の声（縦並びカード）
3件のレビューカード。星評価・名前・属性。アーカイブ実務・経営支援に表示
【新設】旧バージョン対応（SP版）
PC版と同じロック画面・バナーをSP向けに最適化
【新設】4コンテンツタイプ対応（SP版）
PC版と同等の会員状態別・タイプ別表示をSPで実装
🔑 主な変更点
⑤
サービス紹介ページ
現行: https://gyo-gaku.com/concept/ → 新: トップページ統合 + concept/ 再整理
リニューアルの主旨：現行の /concept/ は「サービス概要 + 講師紹介 + 料金プラン」をまとめた独立ページ。リニューアルでは料金プランをトップページに移設し、concept/はより詳細なサービス説明・FAQ・ガイド誘導に特化させる。
BEFORE
現行（/concept/）
ページタイトル「行政書士の学校とは」
4つの特徴カード
① 講師に質問できるライブ講義
② 一本から購入できる実務講座
③ 経営者としてのスキルを磨く
④ 実務上の疑問が相談できる
② 一本から購入できる実務講座
③ 経営者としてのスキルを磨く
④ 実務上の疑問が相談できる
ご利用ガイドへのリンク
guide.gyo-gaku.com へ誘導
講師一覧（50名以上のグリッド）
全講師の顔写真・名前・専門分野を全件表示
有料プラン比較（3列）
ゲスト(¥0) / レギュラー(¥5,500/月) / コンプリート(¥128,000/年)。特典一覧・登録ボタン
実務講座ショップ / ライブ講義への2バナー
FAQ：ページ内に存在しない
ご利用ガイド（外部）への誘導のみ
AFTER
リニューアル後（FAQ・説明特化）
プラン料金比較 → トップページに移設
初回訪問者が最初に見るトップに移動。concept/ での重複を解消
サービスの4つの特徴（引き継ぎ）
内容は引き継ぎ。デザイン改善
【新設】コンテンツタイプ別の詳細説明
「ライブ講義とは」「実務アーカイブとは」「経営支援とは」の説明セクション。初回訪問者のサービス理解を促進
講師一覧（絞り込み検討）
全件グリッドは維持。専門分野フィルタリングの追加を検討
【新設】よくある質問（FAQ）セクション
主要FAQをページ内に掲載。ご利用ガイドへの誘導と併用
ご利用ガイドへのリンク（引き継ぎ）
🔑 主な変更点
⑥
マイページ
現行: https://gyo-gaku.com/mypage/ → 新: wireframe_mypage.html
リニューアルの主旨：現行マイページは「講座を見る（アーカイブ）」「購入済み動画」「ライブ録画」「会員情報」が縦に並ぶシンプルな構成。リニューアルでは「講座を見る」機能を講座一覧ページに移管し、マイページは「購入済みコンテンツの管理」「様式ダウンロード（新設）」「会員情報管理」に特化する。また会員状態（無料/レギュラー/コンプリート）ごとに表示を最適化する。
BEFORE
現行サイト（/mypage/）
ページ内ナビ（アンカーリンク）
実務講座 / 経営支援講座 / 購入済み動画 / ライブ講義 / チャット相談 / 会員情報
お知らせ（新着3件）
講座を見る（アーカイブ動画）
カテゴリ絞り込み付き。実務講座（許認可/企業支援/市民法務）・経営支援講座（年別）の動画一覧。プランによってコンテンツが変わる
購入済み動画（収録日順）
ショップで個別購入した講座が表示される
ライブ講義の録画
2024/1/1以降に申込したライブ録画が表示される。視聴期限の表示なし
チャット相談（外部リンク）
会員情報
注文履歴 / 定期購入 / 決済方法 / 登録情報（WooCommerce標準）
よくあるご質問バナー
guide.gyo-gaku.com へ誘導
プラン状態の表示：なし
現在のプラン・更新日・特典をページ上部で確認できない
様式・ひな形のダウンロード：なし
ライブ録画の視聴期限表示：なし
AFTER
リニューアル後
【新設】プランバー（ページ上部固定）
現在のプラン名・月額/年額・次回更新日・主な特典を常時表示。プラン変更へのリンク付き
セクションナビ（スクロールスパイ付き）
タブ切り替えではなく、クリックで該当セクションへスムーススクロール。スクロール位置に応じてナビのハイライトが自動追従
お知らせ（引き継ぎ）
講座を見る：講座一覧ページに移管
アーカイブ動画の閲覧は講座一覧ページのフィルターで対応。マイページからは削除
購入済み動画（カードグリッド表示）
サムネイル・タイトル・講師名・カテゴリのカード形式に改善。未購入時は空状態UIで講座一覧へ誘導
ライブ講義録画（視聴期限バッジ付き）
参加日から1年間の視聴期限を各カードに表示。残日数に応じて色分け（余裕あり🟢 / もうすぐ🟡 / 期限切れ🔴）
【新設】様式公開セクション
業務で使える契約書・NDA・同意書・委任状等のひな形をWord/PDFで提供
カテゴリフィルター（契約書 / NDA・秘密保持 / 同意書・委任状 / その他）
プラン別アクセス制御：
・無料会員〜：業務委託契約書・NDA基本型・個人情報取扱同意書
・レギュラー〜：顧問契約書・詳細NDA・委任状 等
・コンプリートのみ：特化型契約書・事務所利用規約 等
カテゴリフィルター（契約書 / NDA・秘密保持 / 同意書・委任状 / その他）
プラン別アクセス制御：
・無料会員〜：業務委託契約書・NDA基本型・個人情報取扱同意書
・レギュラー〜：顧問契約書・詳細NDA・委任状 等
・コンプリートのみ：特化型契約書・事務所利用規約 等
会員情報（グリッドリンク形式に改善）
注文履歴 / 定期購入 / 決済方法 / 登録情報変更 / サポートガイド / ログアウトをカードグリッドで見やすく整理
【新設】ゲスト用ロック画面
未ログイン時はログイン促進画面を表示。ログイン / 無料登録ボタンを中央配置
【新設】ヘッダー マイページドロップダウンメニュー
全ページのヘッダーナビにマイページボタンを配置。ホバーでドロップダウン表示（マイページ / 購入済み動画 / ライブ録画 / 様式公開 / 注文履歴 / 定期購入 / ログアウト）
🔑 主な変更点
📊 変更点まとめ
13
新規追加セクション
9
内容・デザイン変更
4
移設・再配置
8
廃止・削除
※ ワイヤーフレームHTML（wireframe_top.html / wireframe_courses.html / wireframe_course.html / wireframe_course_sp.html）を別途ご参照ください。
※ 会員管理・動画再生・決済機能はWooCommerce + 既存会員システムを引き継ぐ想定です。
※ 数字はワイヤーフレームに基づく概算です。実装フェーズでの調整が生じる場合があります。
※ 会員管理・動画再生・決済機能はWooCommerce + 既存会員システムを引き継ぐ想定です。
※ 数字はワイヤーフレームに基づく概算です。実装フェーズでの調整が生じる場合があります。