TOPページ 問題集訴求 ビフォーアフター

2026-08-15。AFTERは本番TOPをその場でDOM編集して撮った実寸モック(コードは未変更・デザイン言語は現行のまま)。UIモックはすべて本番の実画面スクリーンショット(AIテスター垢・PC優先・図解問題を優先)。

提案の骨子(3パーツ)

①FVのサブコピー+チップに「無料問題集」を追加 ②「無料会員でできる、3つ→4つの対策」に問題集カード(実レポートUI入り)を新設 ③「目的から選ぶ」に「毎日積み上げる」カードを追加。コピーは承認済みの「2,000問超/7,000問超」表記。

1. FV(ファーストビュー)

変更はテキスト2箇所のみ: サブコピーに「毎日の問題集」を挿入+チップ「✓ 無料問題集」を追加。

FV before
現行: テスト・AI添削・成績管理の3訴求
FV after
サブコピー+チップに問題集(テキストのみの最小変更)

2. 「無料会員でできる、3つ→4つの公務員試験対策」

①「毎日の問題集」カードを追加(テスト機能と同型・PC横型の本番レポート実画面をブラウザ枠に収め、他カードとサイズを統一)。②マイページ機能カードは残し、モックを現行実UIベースへ刷新(「すきまさん、おかえりなさい」=汎用名の本番マイページ実画面・問題集導線入り)。

3つの対策 before
現行: テスト機能/AI面接・ES対策/マイページ(旧CSSモック)の3枚
4つの対策 after
「4つ」+ 問題集カード(NEW・PC横型レポート)+ マイページカードは実UIモックへ刷新

3. 「目的から選ぶ」

目的から選ぶ before
現行: 力を試す/試験を知る・対策する/地域から求人
目的から選ぶ after
「毎日積み上げる」(問題集導線)を追加

UIモックギャラリー(すべて本番実画面・図解問題優先)

LP・記事CTA・SNSにそのまま使える素材。PC版を優先し、スマホ版も併載。

PC版

展開図問題
解答UI: サイコロの展開図(空間把握)
円周角問題
解答UI: 円周角の図形問題
積み木問題
解答UI: 積み木の個数(立体図)
解説画面
1問ごとの解説(正解表示+段階的な解説)
完了レポートPC
完了レポート(正答率リング・分野別・学習アドバイス)
問題集トップ
問題集トップ(出題範囲・問題数・モードの3ステップ)
マイページ実UI
マイページ実UI(汎用名・カード刷新の素材)

スマホ版

図形問題SP
解答UI(SP): 図形の面積
レポートSP
完了レポート(SP)
実装メモ(着工時)

①②③ともテキスト+カード1枚の追加でTOPの情報設計は崩さない。カード画像はギャラリーの実画面を書き出して使用(撮影済み・再取得不要)。テスト系LP(/komuin-spi/等)への同型ブロック追加は、このカードの流用で1ブロック=小工数。

敏の決裁ポイント

①この3パーツの方向でTOP実装に着工してよいか ②カードのCTA文言(現案「無料で問題集を試す」) ③テスト系LPへの横展開も同時に積むか(同型ブロック流用)