【Lv.1】HTMLだけで自己紹介ページを作る ── バイブコーディング最初の一歩
最初のプロジェクト、これなら絶対できる
バイブコーディングの最初の一歩はとにかく小さく。HTMLファイル1つ、5分で完成するプロジェクトから始めよう。
完成するもの：
- 自分の名前
- 簡単な自己紹介
- 好きなものリスト
- SNSリンク
所要時間: 5〜15分
方法A: Boltで作る（最も簡単）
手順
- bolt.new を開く
- 以下を入力：
シンプルな自己紹介ページをHTMLで作ってください。
内容：
- 名前: 山田太郎
- 職業: 会社員
- 自己紹介: 東京在住。趣味は旅行と写真。
- 好きなもの: コーヒー、猫、映画
- SNS: Twitter(@example), Instagram(@example)
デザイン：
- 背景色は薄いグレー
- 中央寄せ
- カードのような白い枠
- シンプルで見やすく- 30秒待つ → 完成
💡
自分の情報に書き換えよう
上のテンプレートの名前や趣味を自分のものに変えるだけ。恥ずかしければ架空の情報でもOK。
方法B: Claude Codeで作る
手順
mkdir self-intro
cd self-intro
claudeClaude Codeに同じ指示を出す。AIがindex.htmlを生成。
open index.html # Mac
start index.html # Windowsブラウザで表示される。これがあなたが初めて「作った」Webページ。
カスタマイズしてみよう
動いたら、次はAIに修正を頼んでみる：
背景色をダークネイビー（#1a1a2e）にして、文字を白にしてプロフィール画像を丸く表示する枠を追加して。
画像URLはこれを使って: https://images.unsplash.com/photo-xxx好きなものリストにアイコンを追加して変更を頼むたびに、ページがどんどん進化していく。これがバイブコーディングの楽しさ。
何が起きたのか理解する（任意）
AIが作ったindex.htmlの中身を見てみよう。
<!DOCTYPE html>
<html>
<head>
<title>山田太郎のプロフィール</title>
<style>
/* ← ここがデザイン（CSS） */
body { background: #f5f5f5; }
</style>
</head>
<body>
<!-- ← ここが内容（HTML） -->
<h1>山田太郎</h1>
<p>東京在住。趣味は旅行と写真。</p>
</body>
</html><h1>= 見出し<p>= 段落<style>= デザイン
覚えなくていい。 「ああ、こういう構造なんだ」となんとなくわかればOK。
ℹ️
バイブコーディングの核心
コードの意味を覚える必要はない。「こういうものがあるんだな」と知っておくだけで、AIへの指示が的確になる。
次のステップ
自己紹介ページが作れたら、次は少し複雑なToDoアプリに挑戦しよう。ユーザーの操作に反応する「インタラクティブ」なアプリの世界へ。
