HP細部のデザイン修正

[hengin-eer]

概要

テキストの太さや余白などデザインの軽微な修正を行いました

変更点

• src/components/ui/ImportantFrame.tsx:10: 重要なお知らせ欄の見出しを text-button、本文を text-textb、shadow 色を #111D53 に変更
• src/components/ui/NewsItem.tsx:11: 日付とタイトルの間隔を 4px に調整
• src/modules/top/TopPageView.tsx:105: スマホ版のお知らせ枠の y padding を L に変更、スマホ版背景画像を opacity-80 に変更
• src/components/layout/Footer.tsx:75: フッター内の text-text 指定箇所を text-textb に変更

関連Issue

• HP細部のデザイン修正 #114

スクリーンショット（UI変更がある場合）

重要なお知らせ

shadowは確認し辛いのでコードベースで確認して頂くのがいいかもしれないです

Before	After

動作確認手順

1. Figmaと本番環境をベースにレイアウトチェック
2. 検証ツールのcssチェックやレイアウトチェック
3. ページをビルドしてエラーチェック

レビューしてほしいポイント

• 日付-タイトル間の間隔をssから4pxに変更してください。

  • gap-ssでレイアウト組んでいたのをやめてmargin-topによるレイアウトに変更しました
  • お知らせテキストの方はmt-ssとしています
• 背景画像で透明度の変更洩れ等が無いか確認お願いします

セルフチェックリスト

• ローカルでの動作確認を行った
• Lint エラーが出ていない
• テストコードを追加・修正した（必要な場合）

[github-actions]

🩺 React Doctor

react-doctor v0.2.10

✔ Select projects › 45th-homepage
Scanning changes: feat/hengin-eer/hp-detail-design → main

  

  ⚠ react-doctor/nextjs-no-img-element
      Use next/image instead of <img> — provides automatic optimization, lazy loading, and responsive srcset
      → `import Image from 'next/image'` — provides automatic WebP/AVIF, lazy loading, and responsive srcset
      src/modules/top/TopPageView.tsx:49

Agent guidance
  - Treat React Doctor diagnostics as starting hypotheses. Read the relevant code before confirming or suppressing each finding.
  - For each group, decide true positive, false positive, or needs-human-review, then assign high/medium/low confidence.
  - Do not suppress a finding without evidence from the file in question. Confidence requires code context.
  - Understand the root cause before editing. Fix the underlying code instead of changing react-doctor config or suppressing rules unless explicitly asked.
  - Investigate deeply where relevant: race conditions, security-sensitive flows, state propagation, multi-file refactors, and downstream dependency chains.
  - Ignore pure style preferences, theoretical issues without real impact, missing features, and unrelated pre-existing code.
  - Start with high-confidence fixes that preserve behavior. Leave low-confidence or product-dependent changes as notes.
  - Run `npx react-doctor@latest --verbose --diff` before and after changes, plus relevant tests after each focused batch.
  - When available, spawn subagents or isolated worktrees for independent rule families, then review and merge only the best safe fixes.
  - Split unrelated, broad, or behavior-changing work into separate PRs/branches instead of one large cleanup.
  - For confirmed issues that cannot be fixed now, create GitHub issues with the rule, file/line, confidence, impact, and proposed fix.
  - If a fix needs an API, UX, or architecture decision, stop and ask before editing.

  ┌─────┐  99 / 100 Great · 45th-homepage
  │ ◠ ◠ │  ██████████████████████████████████████████████████
  │  ▽  │  React Doctor (https://react.doctor)
  └─────┘

  1 issue
  Full diagnostics written to /tmp/react-doctor-15e09889-fb12-4edd-a95d-8ecf0f239107

[Copilot]

Pull request overview

Issue #114 の指示に合わせて、トップページ/フッター周りのテキストスタイル・余白・背景画像の見え方を微調整するPRです。

Changes:

• text-text → text-textb など、テキストの太さ（font-weight）を中心にタイポグラフィトークンを更新
• お知らせ（NewsItem）の要素間余白を調整（特に日付⇄タイトル間）
• スマホ表示のお知らせ枠のY方向paddingを py-l に変更し、スマホ用背景画像に opacity-80 を付与

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/modules/top/ui/LogoInfo.tsx	ロゴ紹介欄の本文テキストを text-textb に変更
src/modules/top/TopPageView.tsx	お知らせ枠のスマホpadding調整、スマホ背景画像の不透明度を変更
src/components/ui/NewsItem.tsx	日付-タイトル間の余白を含むレイアウト調整
src/components/ui/ImportantFrame.tsx	重要なお知らせの見出し/本文トークン変更、shadow色変更
src/components/layout/Footer.tsx	フッター内の該当テキストを text-textb に変更

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[hengin-eer]

これはハードコートするんじゃなくて、CSS変数を使えってことなんだろうけど...
styleで実装提案されているのは#111D53のCSS変数が定義されていないこと前提？だと思われるので、一旦style.cssをチェックしてみる

[hengin-eer]

@TkymHrt
style.cssに新たにスタイルを追加することで解決しました。
--color-shadow: ...としたので、tailwindでbox-shadowを書くときにshadow-shadowとなってしまうのでレビューして欲しいです。

ちなみにこの#111D53を使っている実装は現時点でここだけでした。
同時にFigmaでVarientに指定してもらえると助かります。

[github-actions]

⚡️ Lighthouse CI Results

URL	Performance	Accessibility	Best Practices	SEO	Report
http://localhost:3000/	🟢 96	🟢 100	🟢 100	🟢 100	View Report
http://localhost:3000/news	🟠 73	🟢 100	🟢 100	🟢 100	View Report
http://localhost:3000/attention	🟢 94	🟢 100	🟢 100	🟢 100	View Report