VibeShop

🤖 AIでこのサイトを作る方法

中級 🕐 推定作成時間: 3-4時間

このサンプルサイト「ECサイト（商品一覧）」をAIと協力して作成する手順を紹介します。以下のステップに従って、効率的に開発を進めましょう。

商品カタログの基本構造

ECサイトの基本となる商品一覧ページの構造を作成します。

💬 プロンプト例：

ECサイトの商品一覧ページを作成したいです。以下の機能を実装してください： - 商品カード（画像、名前、価格、評価） - グリッドレイアウト（レスポンシブ対応） - 商品の基本情報表示 - カートに追加ボタン - お気に入り機能 React、Tailwind CSSを使用して実装してください。

💡 ポイント：

商品データは最初はモックデータで構築し、後でAPIに置き換え可能な設計に
画像の遅延読み込みを実装してパフォーマンスを向上

フィルタリングとソート機能

ユーザーが商品を絞り込んだり並び替えたりできる機能を追加します。

💬 プロンプト例：

商品一覧に以下のフィルタリング・ソート機能を追加してください： - カテゴリーフィルター（チェックボックス） - 価格帯フィルター（スライダー） - 在庫ありのみ表示オプション - ソート機能（価格順、評価順、新着順） - フィルター適用時のアニメーション

💡 ポイント：

URLクエリパラメータと連動させることで、フィルター状態の共有が可能に
フィルター変更時は商品数を表示して、ユーザーにフィードバックを提供

検索機能の実装

商品名や説明文から商品を検索できる機能を追加します。

💬 プロンプト例：

リアルタイム検索機能を実装してください： - 検索バー（オートコンプリート付き） - 検索結果のハイライト表示 - 検索履歴の保存 - 「もしかして」サジェスト機能 - 検索結果が0件の場合の代替提案

💡 ポイント：

デバウンス処理を使って、入力中の過度なAPI呼び出しを防ぐ
検索アルゴリズムは後で機械学習モデルに置き換え可能な設計に

ショッピングカート機能

商品をカートに追加し、管理できる機能を実装します。

💬 プロンプト例：

ショッピングカート機能を実装してください： - カートに追加（アニメーション付き） - カート内商品の表示（ドロップダウン） - 数量の変更 - 商品の削除 - 合計金額の自動計算 - カートデータの永続化（LocalStorage）

💡 ポイント：

状態管理ライブラリ（Context APIやZustand）を使用して、グローバルな状態管理
カート操作時は必ずユーザーにフィードバック（トースト通知など）を提供

UXの最適化

ユーザー体験を向上させる細かな機能を追加します。

💬 プロンプト例：

以下のUX改善を実装してください： - 無限スクロール or ページネーション - スケルトンローディング - 画像の遅延読み込み - エラー状態の処理 - オフライン対応（Service Worker） - パフォーマンス最適化

💡 ポイント：

Core Web Vitalsを意識して、LCP、FID、CLSを最適化
プログレッシブエンハンスメントの考え方で、基本機能は必ず動作するように

AIとの効果的な対話のコツ

• 要件を明確に伝える：どのような機能が必要か、どんなユーザーが使うかを具体的に説明
• 段階的に実装：一度にすべてを作ろうとせず、基本機能から順番に追加
• フィードバックを活用：生成されたコードを確認し、必要に応じて修正を依頼

Web開発用語集で学ぶその他のプロンプト例

VibeShop

ワイヤレスイヤホン

スマートウォッチ

レザーバックパック

コーヒーメーカー

ランニングシューズ

デスクライト

商品が見つかりませんでした

ショッピングカート

🤖 AIでこのサイトを作る方法

商品カタログの基本構造

💬 プロンプト例：

💡 ポイント：

フィルタリングとソート機能

💬 プロンプト例：

💡 ポイント：

検索機能の実装

💬 プロンプト例：

💡 ポイント：

ショッピングカート機能

💬 プロンプト例：

💡 ポイント：

UXの最適化

💬 プロンプト例：

💡 ポイント：

AIとの効果的な対話のコツ