初心者（スターター）スキル
初心者や非開発者向けの静的ウェブ開発ガイド。
アクション
| アクション | 説明 | 例 |
|---|---|---|
init | プロジェクトの初期化 | $starter init my-portfolio |
guide | 開発ガイドの表示 | $starter guide |
help | 初心者向けヘルプ | $starter help |
init（プロジェクトの初期化）
- プロジェクトディレクトリ構造を作成（HTML/CSS/JS または Next.js）
- package.json を生成（Next.js 選択時）
- AGENTS.md を作成（レベル：Starter を指定）
- docs/ フォルダ構造を作成（PDCA ドキュメント用）
- .pdca-status.json を初期化
guide（開発ガイド）
- 現在のプロジェクト状態を分析
- Starter レベルに適した次のステップを提案
- フェーズ 1〜3 に焦点を当てたパイプラインガイド（1 -> 2 -> 3 -> 6 -> 9）
help（初心者向けヘルプ）
- HTML/CSS/JS の基本概念を説明
- よくある質問に回答
- コード例を提供
ターゲット層
- 初めてプログラミングを学ぶ人
- シンプルなウェブサイトを作成したい人
- ポートフォリオサイトが必要な人
技術スタック
オプション A：純粋な HTML/CSS/JS（完全初心者向け）
HTML5 -> ウェブページの構造
CSS3 -> スタイリング
JavaScript -> 動的機能（任意）
オプション B：Next.js（フレームワーク利用）
Next.js 14+ -> React ベースのフレームワーク
Tailwind CSS -> ユーティリティ CSS
TypeScript -> 型安全性（任意）
言語階層ガイド
推奨：Tier 1 言語のみ（Python、TypeScript、JavaScript）
| 階層 | 許可 | 理由 |
|---|---|---|
| Tier 1 | はい | 完全な AI サポート、Vibe Coding 最適化 |
| Tier 2 | 制限あり | 代わりに Dynamic レベルの使用を検討 |
| Tier 3-4 | いいえ | Dynamic/Enterprise にアップグレード |
プロジェクト構造
オプション A：HTML/CSS/JS
project/
├── index.html # メインページ
├── about.html # アバウトページ
├── css/
│ └── style.css # スタイル
├── js/
│ └── main.js # JavaScript
├── images/ # 画像ファイル
├── docs/ # PDCA ドキュメント
│ ├── 01-plan/
│ └── 02-design/
└── README.md
オプション B：Next.js
project/
├── src/
│ ├── app/
│ │ ├── layout.tsx # 共通レイアウト
│ │ ├── page.tsx # メインページ
│ │ └── about/
│ │ └── page.tsx # アバウトページ
│ └── components/ # 再利用可能なコンポーネント
├── public/ # 静的ファイル
├── docs/ # PDCA ドキュメント
├── package.json
├── tailwind.config.js
└── README.md
コアコンセプト
HTML（ウェブページの構造）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
</body>
</html>
CSS（スタイリング）
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
@media (max-width: 768px) {
.container { padding: 10px; }
}
Next.js App Router
// app/page.tsx
export default function Home() {
return (
<main className="container mx-auto p-4">
<h1 className="text-3xl font-bold">Welcome!</h1>
</main>
);
}
デプロイ方法
GitHub Pages（無料）
- GitHub リポジトリを作成
- コードをプッシュ
- Settings -> Pages -> Source: main branch
- https://username.github.io/repo-name でアクセス
Vercel（Next.js 推奨）
- vercel.com にサインアップ（GitHub 連携）
- "New Project" -> リポジトリを選択
- "Deploy" をクリック
制限事項
- ログイン/登録機能なし（サーバーが必要）
- データ保存なし（データベースが必要）
- 管理ページなし（バックエンドが必要）
- 決済機能なし（バックエンドが必要）
アップグレードのタイミング
以下の機能が必要な場合は Dynamic レベル（$dynamic）に移行：
- ログイン機能
- データ保存
- 管理ページ
- ユーザー間通信機能
パイプラインフロー（Starter）
フェーズ 1 -> 2 -> 3 -> 6(静的) -> 9
API（フェーズ 4）、デザインシステム（フェーズ 5 は任意）、SEO はフェーズ 7 のみで実施。
よくある間違い
| 間違い | 解決策 |
|---|---|
| 画像が表示されない | パスを確認（./images/photo.jpg） |
| CSS が適用されない | link タグのパスを確認 |
| ページ遷移が機能しない | href パスを確認（./about.html） |
| モバイルで表示が崩れる | <meta name="viewport"> タグを確認 |