会計学習サイトのUI刷新

Udemy講座ページを開いたとき、サムネイルが1枚も表示されていなかった。データファイルに画像パスだけ書いてあって、肝心の画像ファイルが public/images/udemy/ に置かれていない。そこから始めて、気づいたらKindleページの新設、トップページの分野別ナビゲーション追加、カードUIの全面刷新まで半日走り続けていた。

Udemyサムネイルの整備

4講座分のサムネイル画像をリサイズして配置した。

元画像はいずれも2048x1152（16:9）のPNGやJPEGで、ImageMagickで800px幅にリサイズしてJPEGに変換した。boki3だけは元が750x423と小さかったのでリサイズせずJPG変換のみ。

新規コースカードの作成

未登録だった会計入門講座のカードコンポーネントを新規作成した。Udemyのページから講座情報を取得し、udemyCourses.ts にデータを追加、詳細ページも既存パターンに合わせて生成した。

リファラルコード付きURLを全講座に設定。受講者数も最新値に更新した。

• 会計入門: 5,096名 → 「5,000名以上」
• 簿記3級: 8,678名 → 「8,600名以上」
• Excelショートカット: 201名 → 「200名以上」

Kindle書籍ページの新設

2冊分のKindleページを一式作った。

• 会計・簿記入門編: 評価4.2（50件）
• 日商簿記3級編: 評価4.3（17件）

作成したもの:

1. app/data/kindleBooks.ts -- 書籍データ定義
2. Kindle一覧ページ
3. 各書籍の詳細ページ
4. トップページのKindleカードへのリンク追加

表紙画像は public/images/kindle/ に配置。Amazonの動的レンダリングページからは情報が取れなかったので、ユーザーから直接データを受け取って反映した。

「分野から探す」セクション

トップページに分野別のコンテンツマトリックスを追加した。

従来は媒体ごと（動画・書籍・問題集）に分かれていて、「簿記3級を学びたい人」がテキスト・動画・書籍を横断して探せなかった。分野を軸にして、各媒体の有無が一覧できるようにした。

実装した3ファイル

• app/data/topics.ts -- 分野データ（簿記3級、会計入門、Excel等）と媒体対応表
• app/pages/courses/[slug].vue -- 分野詳細ページ。利用可能なコンテンツをカード表示、未対応は「準備中」表示
• index.vue への「分野から探す」セクション追加 -- 4カラムのトピックカードを .hero-area の下に配置

Codexでプランレビューを通してから実装に入った。指摘は findCourse() / findBook() が undefined を返すリスクの1点のみで、ガード処理を入れて対応。

コースカードUIの改修

分野詳細ページのカード表示を3段階で改修した。Chrome DevToolsで都度確認しながら進めた。

第1段階: 画像追加と大型化

最初のカードは媒体名とリンクだけのテキストカードだった。Udemy・Kindleの画像を追加し、カード全体を拡大した。

第2段階: 画像の見切れ解消

object-fit: cover だと表紙画像が上下で切れていた。Kindleの縦長表紙が特に顕著で、タイトルが半分隠れていた。contain に変更してアスペクト比を保ったまま全体を表示するようにした。同時に2x2グリッドを廃止し、横長レイアウト（左に画像、右にテキスト）に変更した。

第3段階: 商品一覧としての情報量追加

「Udemy」「Kindle」という媒体名しか表示されていない状態から、商品一覧として機能するよう情報を追加した。

• コンテンツ名（講座名・書籍名）
• 説明文
• 評価・受講者数/レビュー数
• スペック情報（総時間・講義数など）

背景を白に統一し、細い線でカード全体を囲むデザインに落ち着いた。

振り返り

サムネイル画像を1枚置くところから始まった作業が、Kindleページの新設、分野別ナビゲーション、カードUIの全面改修まで膨らんだ。前回のトップページ改修でも同じパターンを踏んでいて、「ちょっとだけ直す」がそのまま終わったことがない。

カードUIは3回書き直した。最初はテキストだけ、次に画像を足して、最後に商品一覧としての情報量を載せた。最初から商品一覧を意識していれば1回で済んだかもしれないが、実際にブラウザで見て「何の講座かわからない」と気づくまで、情報の不足に気づけなかった。画面を眺めて違和感を言語化し、それをコードに反映するサイクルを3周回した一日だった。