目次
プロジェクトについて
Figmaカンプをもとに、クリエイター紹介メディア「トラデジ ギャラリー」のメディアサイト型LPを実装した自主制作です。作品カードのギャラリーを軸に、カルーセル・カテゴリー絞り込み・モーダルなどの動きを含めて、公開前チェックからサーバー公開まで一貫して担当しました。
実装と品質のポイント
- カルーセル・カテゴリー/タグ絞り込み・詳細モーダルをJavaScriptで実装
- モーダルはフォーカス移動・Escキー・Tab循環まで対応し、アクセシビリティに配慮
- 7セクション×2画面幅の14か所で、カンプとの差分をピクセル単位で計測しながら調整
- 320〜1920pxの12画面幅で、横スクロールや表示崩れがないことを確認
- 画像のWebP化で、大きな画像2点の容量を約5分の1（合計15.5MB→3.2MB）に圧縮しつつ表示品質を維持
- 納品前チェックリストの全項目確認に加え、別AIによる第三者コードレビューの指摘を反映