AI Workflow · Portfolio

Portfolio modalとmobile readabilityをbrowser検証に変えた記録

Screenshot gallery、side-project modal、mobile readabilityの問題を、一回きりの修正ではなくPlaywrightベースのUI検証にした記録。

2026年5月31日

Trigger

Static link checkとcontent reachability checkは通っていたが、移行後のportfolioには実際の使いにくさが残っていた。Modal内のscreenshot galleryが詰まり、side-project detailが見つけにくく、mobile layoutの問題も自動では検出できていなかった。

Fix

  • Built distをlocal serverで配信し、desktop/mobile viewportで開くPlaywright検証scriptを追加。
  • Generated pagesのcontent length、heading structure、broken image、horizontal overflowを検査。
  • Portfolio modal cardを実際にclickし、side projects、HotDealppom、BikeNaviのtext length、marker、image、iframe、mobile gallery widthを確認。
  • Modal gallery CSSを調整し、screenshotが読みやすいspacingとmobile one-column layoutになるよう修正。

Rule

UI migrationではcontentが存在するだけでは不十分。次のagentは、人がdesktop/mobile browserでclickし、読み、画像や動画を確認できることまで検証する。