Links
概要
Topページでは、全カテゴリをカード形式で一覧表示しています。
カテゴリは以下の4つです。
- Accessories
- Interior Goods
- Kitchen & Tableware
- Apparel & Fabric
各カテゴリカードをクリックすると、該当カテゴリの商品一覧ページへ遷移します。
商品一覧はカード形式で表示され、商品をクリックするとオーバーレイ表示で詳細ページが開きます。
ヘッダー右端のハンバーガーメニューには、
「全アイテム検索」「お問い合わせ」へのリンクを配置しています。
機能詳細
カテゴリページ
各カテゴリごとに商品一覧をカード形式で表示。
商品詳細表示
商品カードをクリックすると、ページ遷移せずにオーバーレイで詳細情報を表示。
全アイテム検索
デフォルトでは全商品を表示。
チェックボックスでカテゴリを選択し、表示する商品を絞り込むことができます。
お問い合わせページ
「名前」「メールアドレス」「メッセージ」の入力欄を設置。
※送信機能は未実装です。
使用技術
- Next.js（App Router）
- TypeScript
- Tailwind CSS
- Vercel
工夫した点
- データベースは使用せず、簡易的なデータファイルを作成して商品情報を管理しました。
- 画像はすべて WebP形式を使用し、表示速度と容量を意識しています。
- カテゴリページは共通のページとして実装し、
src/app/[slug]/page.tsxで一元管理しました。 - 検索ページではチェックボックスを配置し、ユーザーがカテゴリを選択して商品を絞り込めるようにしています。
スクリーンショット
