文系学生 / 商学系学生プロジェクト
初心者向けの入門プロジェクトです。ビジュアルツールとAI支援を使って、個人作品をすばやく完成させ、AIプログラミングの魅力と効率を体験できます。
プロジェクト1：個人ブログサイト
プロジェクト概要
技術選定分析：なぜこのツールの組み合わせを選ぶのか？
v0：UI生成の革新的なツール
- • 自然言語からUIへ：テキストで説明するだけで React コンポーネントを生成でき、初心者でもすぐに使い始められる
- • 即時プレビュー：生成結果をリアルタイムで確認し、迅速にデザインを反復する
- • Figma統合：Figmaのデザインファイルから直接コードを生成でき、デザイナーに優しい
- • 学習コストが低い：HTML/CSSを学ぶ必要はなく、コンテンツ表現に集中する
Cursor：AI支援による機能強化
- • コード理解：AI は v0 で生成されたコード構造を理解でき、後続の修正がしやすい
- • 機能拡張：検索、分類、コメントなどの機能を追加し、AI の支援でコードを生成する
- • バグ修正：問題に遭遇したら直接AIに聞いて、すばやく解決
- • コード最適化：AIはコードのパフォーマンスを最適化し、ベストプラクティスを追加できます
Vercel：ゼロ設定デプロイ
- • ワンクリックデプロイ：GitHubリポジトリに接続し、自動デプロイ、サーバー設定不要
- • 無料枠：個人プロジェクトは無料で使用でき、学習に適している
- • グローバルCDN：アクセス速度を自動で最適化し、ユーザー体験が良い
- • プレビュー環境：各コミットにプレビューリンクがあり、テストに便利
ツールの相乗効果：v0 は UI を素早く生成し、Cursor は機能の完成度向上と最適化を担当し、Vercel はデプロイとホスティングを担当します。この組み合わせにより、初心者でも数時間で完全な Web プロジェクトを完成させ、アイデアから公開までの一連の流れを体験できます。
詳細な手順
Step 1: v0 を使用してブログのホームページを生成する（30～45分）
1. v0.dev にアクセスし、アカウントを登録/ログインする
2. 入力欄にブログのホームページの要件を記述してください：
- 上部ナビゲーションバー（ホーム、概要、記事）
- ヒーローエリア（大見出し、紹介、CTAボタン）
- 最新記事一覧（カード形式のレイアウト、タイトル、要約、日付を表示）
- フッター（ソーシャルメディアリンク、著作権情報）
ダークテーマを使用し、配色はダークブルー + 白 + ゴールド"
3. v0 は複数のデザイン案を生成するので、気に入ったバージョンを選択する
4. 「Export」をクリックしてコードをローカルにエクスポートする
Step 2: Cursor を使用して機能とスタイルを改善する（2〜3時間）
1. Cursorでエクスポートしたプロジェクトを開く
2. Cursor Agent モードを使用して、AI に要望を伝えます：
- 記事詳細ページ（一覧からクリックして進む）
- 記事カテゴリ機能（技術、生活、思考）
- 検索機能（記事タイトルと本文を検索）
- レスポンシブデザイン（モバイル対応）"
3. Cursor はコードを生成し、あなたはリアルタイムで効果をプレビューできる
4. プレビュー結果に基づいて、引き続き最適化と調整を行う
5. Markdownサポートを追加して、記事コンテンツをより豊かにする
ステップ 3: Vercel デプロイを設定する（15〜30分）
1. GitHub に新しいリポジトリを作成し、コードをプッシュする
2. vercel.com にアクセスし、GitHub アカウントでログインする
3. 「New Project」をクリックし、リポジトリを選択します
4. Vercel はプロジェクトタイプ（Next.js）を自動検出し、「Deploy」をクリック
5. デプロイ完了を待つ（通常1〜2分）
6. あなたのブログURLを取得して、友達と共有しましょう！
ステップ 4: コンテンツ管理機能を追加する（1〜2時間）
1. Cursor を使って記事管理機能を追加する：
- 記事データは JSON ファイルに保存される
- 記事の追加、編集、削除をサポート
- 記事に含まれるもの：タイトル、内容、カテゴリ、日付、カバー画像"
2. または CMS サービス（Contentful、Sanity など）を統合する
3. 画像アップロード機能を追加する（Cloudinary または Vercel Blob を使用）
重要なコード例
記事一覧コンポーネント（v0生成後に最適化）
// app/blog/page.tsx
import { articles } from '@/data/articles'
export default function BlogPage() {
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-8">私のブログ</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{articles.map((article) => (
<article key={article.id} className="border rounded-lg p-6 hover:shadow-lg transition">
<h2 className="text-xl font-semibold mb-2">{article.title}</h2>
<p className="text-muted-foreground mb-4">{article.excerpt}</p>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">{article.date}</span>
<span className="text-sm bg-primary/10 text-primary px-2 py-1 rounded">
{article.category}
</span>
</div>
</article>
))}
</div>
</div>
)
}よくある問題と解決策
問題1：v0で生成されたコードは実行できない
解決策：Node.js のバージョンを確認（18以上が必要）、実行 npm install 依存関係をインストールし、ターミナルのエラー情報を確認して、Cursor AI を使って修正する。
問題2：スタイルが正しく表示されない
解決策: Tailwind CSS の設定が正しいことを確認し、 tailwind.config.js ファイルを使って、Cursor に AI へスタイル問題の修正方法を尋ねる。
問題3：Vercelのデプロイ失敗
解決策：ビルドログを確認してください。よくある原因には、環境変数の未設定、依存関係のバージョン衝突、ビルドコマンドの誤りなどがあります。Cursor で AI に具体的なビルドエラーの解決方法を尋ねてください。
問題 4：記事内容の更新が難しい
Solution: Consider using a Headless CMS (such as Contentful, Sanity), or use GitHub as content storage and update articles through Git commits.
プロジェクトチェックリスト
プロジェクト2：データ分析ダッシュボード
プロジェクト概要
技術選定分析：なぜ Fabric + Cursor を選ぶのか？
Fabric：AI駆動のデータ処理
- • 自然言語処理：テキストでデータ処理要件を説明すると、AIが処理ロジックを自動生成する
- • Patternsシステム：あらかじめ定義されたデータ処理パターンを使用して、一般的なタスクをすばやく完了する
- • 複数形式対応：CSV、JSON、Excel など複数のデータ形式をサポート
- • データクレンジング：欠損値や外れ値を自動的に識別して処理する
- • 統計分析：記述統計、相関分析などを素早く生成する
Cursor：ビジュアルコンポーネント開発
- • コンポーネント生成：AI 支援で図表コンポーネントを生成し、Recharts、Chart.js などのライブラリを統合
- • インタラクションデザイン：フィルタリング、ソート、ドリルダウンなどのインタラクティブ機能を追加
- • レスポンシブレイアウト：異なる画面サイズに自動適応
- • パフォーマンス最適化：AI が大量データの描画性能最適化を支援する
ツールの相乗効果：Fabric はデータのクレンジング、変換、分析を担当し、Cursor は分析結果の可視化を担当します。この組み合わせにより、技術的な背景を持たないユーザーでも、ビジネスの洞察に集中しながら、専門的なデータ分析ダッシュボードをすばやく作成できます。
詳細な手順
ステップ 1: Fabric を使ってデータを整理・分析する（2〜3時間）
1. データファイルを準備する（CSV または Excel 形式）
2. Fabric の Patterns を使用してデータを処理する：
- 月次売上トレンドを計算する
- 商品カテゴリ別に売上を集計する
- 売上が最も高い顧客を特定する
- 販売チャネルの効果を分析する"
3. Fabric は分析結果と可視化の提案を生成します
4. 処理後のデータをエクスポートする（JSON形式）
Step 2: Cursor を使用してビジュアルコンポーネントを作成（3〜4時間）
1. Cursor で Next.js プロジェクトを作成する
2. チャートライブラリをインストールする：npm install recharts
3. Cursor Agentを使用してダッシュボードコンポーネントを生成する：
- 主要KPIカード（総売上高、成長率、注文数）
- 売上トレンド折れ線グラフ（月別）
- 製品カテゴリの円グラフ
- 顧客ランキング棒グラフ
- 販売チャネル比較図
ダークテーマを使用し、日付範囲フィルターをサポートする"
4. Cursor は完全なコンポーネントコードを生成します
5. プレビュー効果に応じてスタイルとレイアウトを調整する
ステップ 3: チャートライブラリを統合して最適化する（1～2時間）
1. Rechartsを使用してさまざまな種類のグラフを作成する
2. インタラクティブ機能を追加：
- • グラフにカーソルを合わせると詳細データを表示
- • チャート要素をクリックしてフィルタリング
- • 日付範囲ピッカー
- • データエクスポート機能
3. 大量データ描画のパフォーマンスを最適化する（仮想スクロールを使用）
4. ローディング状態とエラー処理を追加する
ステップ 4: インタラクティブ機能を追加する（1時間）
1. フィルターコンポーネントを追加する（日付、カテゴリ、チャネル）
2. データ連携を実装する（1つのグラフをフィルタすると、他のグラフも同期して更新される）
3. データドリルダウン機能を追加する（クリックして詳細データを表示）
4. データエクスポート機能を追加する（CSV または PDF にエクスポート）
よくある問題と解決策
問題1：データ形式の非互換
解決策：Fabric のデータ変換 Pattern を使用して、データを標準形式に変換します。あるいは Cursor を使って AI にデータ形式の変換方法を尋ねてください。
問題2：グラフが正しく表示されない
解決策：データ形式がチャートライブラリの要件に適合しているか確認し、Cursor AIを使ってチャート設定のデバッグを支援します。
問題3：パフォーマンスの問題（データ量が大きい）
解決策：データ集約を使ってデータポイントを減らし、仮想スクロールを実現し、Cursor AIでレンダリング性能を最適化する。
プロジェクトチェックリスト
学習成果
この章を終えると、あなたは：
- 1v0、Cursor、Vercel の基本的な使い方を習得し、簡単な Web プロジェクトを独力で完成できる
- 2UI生成ツールのワークフローを理解し、自然言語で要件をどう表現するかを知る
- 3Fabric のデータ処理能力を習得し、AI を活用してデータ分析を行える
- 4ツールの組み合わせによる相乗効果を理解し、適切なツールの組み合わせを選択できる
- 5独立して問題を解決する能力があり、AI ツールを使って問題をすばやく特定し修正できます