ブログ一覧ページのデザイン改善

[tsukaman]

Summary

• BlogCardコンポーネントを新規作成し、アイキャッチ画像表示に対応
• すべてのブログ一覧ページ（トップ、ページネーション、タグ別）を統一されたデザインに更新
• デスクトップでは横並び、モバイルでは縦並びのカードレイアウトを実装
• アイキャッチ画像がない場合はグラデーションプレースホルダーを表示
• ホバーエフェクトによる視覚的なフィードバックを追加

Changes

• 新規: src/components/BlogCard.astro - アイキャッチ画像付きブログカードコンポーネント
• 更新: src/pages/posts/index.astro - BlogCard使用に変更
• 更新: src/pages/posts/page/[page].astro - BlogCard使用に変更
• 更新: src/pages/posts/tag/[tag].astro - BlogCard使用に変更
• 更新: src/pages/posts/tag/[tag]/page/[page].astro - BlogCard使用に変更

Test plan

• /posts ページでアイキャッチ画像が表示されることを確認
• 記事カードが明確に区別できることを確認
• ページネーションページも同様に表示されることを確認
• タグ別ページも同様に表示されることを確認
• モバイル表示で適切にスタック表示されることを確認

🤖 Generated with Claude Code

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-426.d1fbfmeuaycsih.amplifyapp.com

[hayama17]

確認事項の確認しました！

[b1gb4by]

LGTM

[b1gb4by]

Claudeのレビューも貼っておきます。

PR Review: fix/blog-list-design

概要

ブログ一覧ページのデザインリニューアルと、マスコットキャラクター（スー・トゲ）の追加を行う PR です。

変更ファイル: 7 ファイル (+194 / -143)

コミット:

• 524c7f7 Redesign blog list pages with BlogCard component
• ae8f771 Add navigation link from blog post page to blog list
• a1ce2ba Add mascots to blog pages

---

評価サマリー

カテゴリ	評価
コード品質	✅ 良好
セキュリティ	✅ 問題なし
パフォーマンス	✅ 問題なし
アーキテクチャ	✅ 良好
アクセシビリティ	🟡 軽微な改善余地あり

---

🟢 low.nits: コードの重複

ファイル: 複数のブログ一覧ページ

マスコットのひょっこり表示部分が複数ファイルで重複しています。

  src/pages/posts/index.astro:62-68:
  <a href="/mascots">
    <MascotPeek character="suu" position="left" />
  </a>
  <a href="/mascots">
    <MascotPeek character="toge" position="right" />
  </a>

これは src/pages/posts/[slug].astro:149-155 にも同様のコードがあります。

推奨: 将来的に BlogMascots.astro のような共通コンポーネントへの抽出を検討。ただし、現時点では 2 箇所のみなので必須ではありません。

---

🟢 low.nits: 未使用変数の削除漏れ

ファイル: src/pages/posts/tag/[tag].astro

currentTag 変数が削除されましたが、タグページで本当に不要か確認してください。元のコードではコメントアウトされていましたが、将来的にタグの色表示を復活させる可能性があります。

---

🔵 info.q: アクセシビリティの改善余地

ファイル: src/components/BlogCard.astro:25-26

  <article class="bg-white rounded-xl ...">
    <a href={postLink} class="block">

カード全体がリンクになっていますが、スクリーンリーダーのユーザビリティ向上のため、以下を検討してください：

1. aria-label の追加
2. カード内の

   にリンクを移動し、CSS で見た目上全体をクリッカブルにする方法

現状でも動作に問題はありませんが、ベストプラクティスとしてメモします。

---

🔵 info.q: 画像の alt 属性

ファイル: src/components/BlogCard.astro:33-36

  <img
    src={image}
    alt={post.Title}
    class="w-full h-full object-cover"
  />

alt 属性に post.Title を使用していますが、アイキャッチ画像の場合、画像の内容を説明するテキストが別途あればそちらを使う方が適切です。現状は問題ありませんが、将来的に Notion 側で FeaturedImage.Caption
などがあれば活用を検討してください。

---

✅ 良い点

1. コンポーネント化: BlogCard.astro の新規作成により、ブログカードのデザインが一元管理されるようになりました
2. レスポンシブ対応: md:flex, lg:w-64 などを使った適切なレスポンシブ設計
3. アニメーション: hover:scale-[1.02] transition-all duration-300 による適度なインタラクション
4. サイドバーの sticky 化: sticky top-24 でスクロール時も見やすい設計
5. マスコット導入: Headline.astro への showMascots prop 追加で、既存コンポーネントを拡張する形で実装されており、後方互換性が保たれています
6. 型安全性: Props インターフェースが適切に定義されています

---

結論

Approve を推奨します。

コード品質、セキュリティ、パフォーマンスいずれも問題ありません。指摘事項はすべて low.nits または info.q レベルの軽微なもので、マージをブロックする理由はありません。

ブログページのデザインが統一され、マスコットの追加によりサイトの個性も向上しています。