管理ダッシュボード

管

管理者

総ユーザー数

1,247

+12% 前月比

月間売上

¥892,000

+8% 前月比

アクティブセッション

342

-3% 前時比

コンバージョン率

3.2%

+0.5% 前月比

	ユーザー	メール	ステータス	登録日	アクション
	田田中太郎 @tanaka	tanaka@example.com	アクティブ	2025-01-01
	佐佐藤花子 @sato	sato@example.com	保留中	2025-01-02

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

上級 🕐 推定作成時間: 2-3時間

このサンプルサイト「管理ダッシュボード」をAIと協力して作成する手順を紹介します。以下のステップに従って、効率的に開発を進めましょう。

要件定義とプロジェクトセットアップ

まず、管理ダッシュボードの要件を明確にし、プロジェクトの基本構造を作成します。

💬 プロンプト例：

管理ダッシュボードを作成したいです。以下の要件があります： - ユーザー管理機能（一覧表示、検索、フィルタリング、削除） - サイドバーナビゲーション - 統計情報の表示（カード形式） - レスポンシブデザイン - ダークモード対応 - アクセシビリティ対応 Astro、React、Tailwind CSSを使用して、プロジェクトの基本構造を作成してください。

💡 ポイント：

要件は具体的に伝えることで、より正確な実装が得られます
使用する技術スタックを明確に指定しましょう

レイアウトとナビゲーション

サイドバーナビゲーションとヘッダーを含む基本レイアウトを実装します。

💬 プロンプト例：

管理ダッシュボードのレイアウトを作成してください： - 左側に固定サイドバー（ナビゲーションメニュー付き） - 上部にヘッダー（ユーザー情報、通知アイコン） - メインコンテンツエリア - モバイル対応（ハンバーガーメニュー）

💡 ポイント：

レスポンシブデザインを最初から考慮することで、後の修正が減ります
アクセシビリティ要素（ARIA属性、キーボードナビゲーション）も同時に実装

データテーブルの実装

ユーザー一覧を表示するデータテーブルコンポーネントを作成します。

💬 プロンプト例：

ユーザー管理用のデータテーブルを実装してください： - ソート機能（各カラムでソート可能） - 検索機能（リアルタイム検索） - フィルタリング（ステータス、役割） - ページネーション - 一括選択とアクション - 各行にアクションボタン（編集、削除）

💡 ポイント：

パフォーマンスを考慮して、仮想スクロールやページネーションを実装
アクセシビリティのため、適切なARIA属性とキーボード操作を追加

インタラクティブ機能の追加

通知システム、モーダル、トースト通知などの動的な機能を追加します。

💬 プロンプト例：

以下のインタラクティブ機能を追加してください： - 削除確認モーダル - トースト通知（成功、エラー、情報） - リアルタイム通知システム - ローディング状態の表示 - エラーハンドリング

💡 ポイント：

ユーザー体験を向上させるため、適切なフィードバックを提供
エラー状態も含めて、すべての状態を考慮した実装

最終調整とテスト

デザインの微調整、パフォーマンス最適化、アクセシビリティテストを行います。

💬 プロンプト例：

管理ダッシュボードの最終調整を行ってください： - デザインの統一性確認 - ダークモードでの表示確認 - キーボードナビゲーションのテスト - スクリーンリーダー対応の確認 - パフォーマンス最適化（遅延読み込み、コード分割）

💡 ポイント：

実際のユーザーシナリオを想定してテストを実施
アクセシビリティツール（axe DevTools等）でチェック

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

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

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

最近のユーザー

ユーザーを削除

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

要件定義とプロジェクトセットアップ

💬 プロンプト例：

💡 ポイント：

レイアウトとナビゲーション

💬 プロンプト例：

💡 ポイント：

データテーブルの実装

💬 プロンプト例：

💡 ポイント：

インタラクティブ機能の追加

💬 プロンプト例：

💡 ポイント：

最終調整とテスト

💬 プロンプト例：

💡 ポイント：

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