トップページ改修とUdemy講座ページ新設

トップページを開いたとき、ヒーローセクションだけが画面を占領していて、コンテンツカードが画面外に押し出されていた。スクロールしないと何があるかわからない。そこからレイアウトの組み直しが始まり、気づいたらUdemy講座の一覧ページと詳細ページ3本まで一気に作り上げていた一日の記録。

トップページのレイアウト改修

コンテンツカードをヒーローセクションの前に

ファーストビューでコンテンツの存在が伝わるよう、カード群をヒーローセクションの上に移動した。PC表示では左にコンセプト文、右にコンテンツカードを横並びにし、flexレイアウトで上下中央揃えにした。

home.vueレイアウトの新設

default.vueを直接いじると他のページに影響が波及するため、トップページ専用の home.vue レイアウトを新規作成した。これでトップ固有のスタイル変更がdefaultレイアウトに漏れ出さなくなった。

講座数の修正

コンテンツカードに表示していた「8講座」を実態に合わせて「3講座」に修正。古い数字が残っていたのを放置していた。

クリック可能要素の視覚的識別

黒背景から白背景へ

カードの背景色を黒から白に統一した。黒背景だとテキストの視認性が落ちていた。

左ボーダーと矢印でクリック誘導

クリック可能なカードに左ボーダー（3px黒）を付与し、右端に矢印「→」を追加した。ユーザーが「これは押せる」と判断できる視覚的な手がかりを2つ入れた形。

<!-- クリック可能カードのスタイル要点 -->
<div class="border-l-[3px] border-black bg-white p-4">
  <span>カード内容</span>
  <span class="ml-auto">→</span>
</div>

Udemy講座一覧ページ（/udemy）の新設

3講座（簿記3級、財務3表、Excelショートカット）を並べる一覧ページを作成した。

リスト型レイアウト

各講座カードは左にサムネイル画像枠（160x160px）、右に講座情報を配置するリスト型のエディトリアルなデザインにした。カード型のグリッドレイアウトではなく、情報量を詰め込めるリスト型を選択。

各講座の詳細ページ（3本）

簿記3級、財務3表、Excelショートカットの3講座それぞれに詳細ページを作成した。

ページ構成

各ページ共通の構成は以下の通り。

メタ情報: 総時間 / 講義数 / 受講者数 / 評価を並べて表示
特長セクション: この講座で何が身につくかを箇条書き
対象者セクション: 誰に向けた講座かを明示
カリキュラム: セクションごとの講義数・時間を一覧表示

CTAボタンの配置

Udemyへの遷移ボタンをヘッダー直下と最下部の2箇所に配置した。ページを開いた瞬間にも、最後まで読んだ後にも、次のアクションに迷わない導線になっている。

データのリッチ化

実際のUdemy講座ページからデータ（受講者数、評価、カリキュラム構成）を取得し、詳細ページに反映した。手入力ではなく実データを転記したので、受講者数や評価の数字が実態と一致している。

Chrome DevToolsでのブラウザ検証

デスクトップとモバイルの両方でレイアウト崩れがないかをChrome DevToolsで確認した。

確認項目:

トップページのflex横並びがPC幅で正しく表示されるか
モバイル幅でカードが縦積みに切り替わるか
Udemy一覧ページの160x160pxサムネイル枠がモバイルで潰れないか
CTAボタンのタップ領域がモバイルで十分な大きさか

振り返り

トップページを触り始めた段階では、カードの位置を変えるだけの軽い修正のつもりだった。ところがhome.vueレイアウトの分離、クリック要素の識別改善、Udemy講座ページの新設と、芋づる式に作業が膨らんだ。1ページの位置調整から始まって、最終的に5ページ分の新規作成まで走り切った。「ちょっとだけ直す」が一番危ない。