【Lv.1】HTMLだけで自己紹介ページを作る ── バイブコーディング最初の一歩

最初のプロジェクト、これなら絶対できる

バイブコーディングの最初の一歩はとにかく小さく始めること。プログラミングの教科書を1ページも読まなくていい。HTMLファイルをたった1つ作って、ブラウザに自分の自己紹介ページを表示する。それだけで「自分でWebページを作った」という体験が手に入る。

この記事では、AIを使って5〜15分で完成する自己紹介ページの作り方を、Bolt版とClaude Code版の両方で徹底的に解説する。完成した後のカスタマイズ方法も10パターン以上紹介するので、「最初の一歩」から「ちょっと自慢できるページ」まで一気に進められる。

完成イメージ

最終的にできあがるのは、こんなページだ。

要素	内容
ヘッダー	名前とキャッチコピー
プロフィール画像	丸くトリミングされた写真
自己紹介文	2〜3行のテキスト
好きなものリスト	アイコン付きで並べたリスト
SNSリンク	Twitter、Instagram等へのリンクボタン
フッター	コピーライト表記

所要時間: 5〜15分（カスタマイズ含めると30分〜1時間）

ℹ️

この記事で得られること

AIに指示を出してHTMLページを作る一連の流れ
BoltとClaude Codeそれぞれのやり方
コピペで使える指示テンプレート
10種類以上のカスタマイズ例
HTMLの基本構造の理解（覚えなくてOK）
完成後の発展パターン（ダークモード、レスポンシブ、公開）

方法A: Boltで作る（最も簡単）

Boltはブラウザだけで完結するAIコーディングツール。インストール不要で、最も手軽に始められる。

Step 1

Boltにアクセス

bolt.new をブラウザで開く。アカウント登録は無料プランでOK。

30秒

Step 2

指示テンプレートをコピペ

下にある完全版テンプレートをそのままチャット欄に貼り付ける。名前や趣味は自分のものに書き換える。

1分

Step 3

AIの生成を待つ

Boltがコードを自動生成する。右側のプレビュー画面にリアルタイムでページが表示されていく。

30秒〜1分

Step 4

プレビューで確認

右側に完成したページが表示される。デザインや内容を確認する。

30秒

Step 5

ファイルをダウンロード

左上のファイル一覧から index.html をクリックし、内容をコピーしてローカルに保存。または「Download」ボタンでZIPダウンロード。

1分

Step 6

ブラウザで開く

ダウンロードした index.html をダブルクリックすると、ブラウザで表示される。これが自分のWebページ！

10秒

Bolt用：完全コピペ指示テンプレート

以下をそのままBoltのチャット欄に貼り付けて使える。【】の中だけ自分の情報に書き換えよう。

シンプルでおしゃれな自己紹介ページをHTML1ファイルで作ってください。
CSSはHTMLファイル内の<style>タグに書いてください。外部ファイルは使いません。

■ 掲載する内容
- 名前: 【山田太郎】
- 肩書き/職業: 【会社員 / コーヒー愛好家】
- 自己紹介文: 【東京在住のコーヒー好き。休日は都内のカフェ巡りをしています。最近はラテアートに挑戦中。旅行と写真撮影も趣味です。】
- 好きなもの（3〜5個）: 【コーヒー、猫、映画、旅行、読書】
- SNSリンク:
  - Twitter: 【https://twitter.com/example】
  - Instagram: 【https://instagram.com/example】
  - GitHub: 【https://github.com/example】

■ デザインの要件
- 全体の背景色: 薄いグレー（#f5f5f5）
- メインカード: 白背景、角丸、薄い影付き
- カードは画面中央に配置、最大幅600px
- プロフィール画像エリア: 丸形（150×150px）、グレーの仮画像で可
- 名前は大きめのフォント、肩書きは小さめでグレー
- 好きなものはタグ風のデザイン（背景色付きの小さな四角）
- SNSリンクはボタン風に横並び
- 全体的にモダンでミニマルな雰囲気
- フォントはsans-serif
- フッターにコピーライト表記

💡

自分の情報に書き換えよう

上のテンプレートの【】で囲まれた部分を自分の情報に書き換えるだけ。恥ずかしければ架空の情報でもOK。大事なのは「AIに指示を出して、Webページが完成する」という体験をすること。

方法B: Claude Codeで作る

Claude Codeはターミナル（コマンドライン）から使うAIコーディングツール。ファイルが直接ローカルに作られるので、そのまますぐブラウザで確認できる。

Step 1

フォルダを作成

ターミナルを開き、mkdir self-intro && cd self-intro で作業フォルダに移動する。

10秒

Step 2

Claude Codeを起動

claude と入力してEnter。Claude Codeが起動する。

5秒

Step 3

指示テンプレートを入力

下にあるClaude Code用テンプレートを貼り付ける。Boltと同じ内容でOK。

1分

Step 4

ファイル生成を確認

Claude Codeが index.html を自動で作成する。ファイル作成の許可を求められたら「y」で許可。

30秒

Step 5

ブラウザで表示

open index.html（Mac）または start index.html（Windows）でブラウザが開く。

10秒

Claude Code用：ターミナルコマンドの流れ

# 1. 作業フォルダを作って移動
mkdir self-intro
cd self-intro

# 2. Claude Codeを起動
claude

# 3. Claude Codeのプロンプトが表示されたら、指示テンプレートを貼り付ける
# （Bolt用と同じテンプレートがそのまま使える）

# 4. 生成が完了したら、ブラウザで確認
open index.html   # Mac の場合
start index.html  # Windows の場合

Claude Code用：追加の便利な指示

Claude Codeならではの便利な使い方もある。

# 修正を頼む場合
背景色を #1a1a2e に変更して、文字色を白にして

# 確認しながら進める場合
今の index.html の内容を説明して。どこを変えれば色が変わる？

# 複数ファイルに分ける場合（中級者向け）
CSSを style.css という別ファイルに分離して

ℹ️

BoltとClaude Codeの使い分け

どちらを使っても結果は同じ。Boltはブラウザだけで完結するので手軽。Claude Codeはターミナル操作が必要だが、ファイルが直接手元に作られるのでカスタマイズしやすい。最初はBoltで試して、慣れたらClaude Codeに移行するのがおすすめ。

AIが作ったHTMLの中身を理解する

AIが生成したindex.htmlを開いて中身を見てみよう。覚える必要はないが、「こういう構造になっているんだな」と知っておくと、AIへの指示がぐっと的確になる。

HTMLの全体構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>山田太郎のプロフィール</title>
  <style>
    /* ここにデザイン（CSS）が書かれている */
    body {
      background: #f5f5f5;
      font-family: sans-serif;
    }
    .card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      max-width: 600px;
      margin: 40px auto;
      padding: 40px;
    }
  </style>
</head>
<body>
  <!-- ここにページの内容（HTML）が書かれている -->
  <div class="card">
    <h1>山田太郎</h1>
    <p>東京在住。趣味は旅行と写真。</p>
    <ul>
      <li>コーヒー</li>
      <li>猫</li>
      <li>映画</li>
    </ul>
    <a href="https://twitter.com/example">Twitter</a>
  </div>
</body>
</html>

主要なHTMLタグ一覧

以下が最もよく使われるHTMLタグだ。AIに指示を出すとき「h1を大きくして」「ulの間隔を広げて」のように使えると便利。

タグ	意味	使用例
`<html>`	HTML文書全体の入れ物	ページ全体を囲む
`<head>`	ページの設定情報	タイトル、CSS、文字コード等
`<body>`	ページに表示される内容	実際に画面に見える部分
`<title>`	ブラウザのタブに表示される名前	`<title>マイページ</title>`
`<style>`	デザイン（CSS）を書く場所	色、サイズ、配置の指定
`<h1>`〜`<h6>`	見出し（h1が最大、h6が最小）	`<h1>名前</h1>`
`<p>`	段落（本文テキスト）	`<p>自己紹介文です</p>`
`<ul>` / `<li>`	箇条書きリスト	好きなものリスト等
`<ol>` / `<li>`	番号付きリスト	手順の説明等
`<a>`	リンク	`<a href="URL">テキスト</a>`
`<img>`	画像	`<img src="画像URL" alt="説明">`
`<div>`	汎用の入れ物（グループ化）	カード、セクション等
`<span>`	行内の小さな入れ物	テキストの一部を装飾する時

CSSの基本プロパティ

<style>タグの中に書かれているのがCSS（デザイン指定）だ。これもよく出てくるものを知っておこう。

プロパティ	意味	値の例
`color`	文字色	`#333333`, `white`, `red`
`background`	背景色	`#f5f5f5`, `linear-gradient(...)`
`font-size`	文字の大きさ	`16px`, `1.2rem`, `2em`
`font-family`	フォントの種類	`sans-serif`, `serif`
`margin`	要素の外側の余白	`20px`, `40px auto`
`padding`	要素の内側の余白	`20px`, `40px 30px`
`border-radius`	角の丸み	`12px`, `50%`（円形）
`box-shadow`	影	`0 2px 8px rgba(0,0,0,0.1)`
`text-align`	テキストの揃え方	`center`, `left`, `right`
`max-width`	最大幅	`600px`, `800px`
`display: flex`	横並びレイアウト	ボタンを並べる時に使う

💡

バイブコーディングの核心

コードの意味を暗記する必要はまったくない。「h1が見出しで、pが段落で、styleがデザイン」程度の感覚があれば十分。あとはAIに「ここをこう変えて」と言えばいい。知識は「指示の精度を上げる道具」として使おう。

カスタマイズ例 12選

基本のページが完成したら、AIに追加の指示を出してどんどんカスタマイズしていこう。以下はそのままコピペで使える指示テンプレートだ。

1. 配色をダークモードに変える

背景色をダークネイビー（#1a1a2e）にして、カードの背景を#16213e、
文字色を#e0e0e0にしてください。リンクの色は#4fc3f7にして。

2. プロフィール画像を丸く表示する

プロフィール画像を丸形で表示してください。
サイズは150×150px、border-radius: 50%で円形に。
画像URLはこれを使って: https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop
画像の周りに3pxの白い枠線と薄い影もつけて。

3. 好きなものリストをタグ風デザインにする

好きなものリストを箇条書きではなく、タグ風のデザインに変えてください。
各タグは背景色つきの小さな角丸四角で、横並びに折り返すレイアウト。
タグの色はパステルカラーでバラバラにして。

4. SNSリンクをボタン風にする

SNSリンクをアイコン風のボタンに変えてください。
各ボタンは丸形で、ホバーすると少し大きくなるアニメーション付き。
色はTwitterは青(#1DA1F2)、Instagramはグラデーション(#E1306C→#F77737)、
GitHubは黒(#333)にしてください。

5. スキルバーを追加する

自己紹介の下に「スキル」セクションを追加してください。
以下のスキルをプログレスバーで表示して：
- Excel: 80%
- PowerPoint: 70%
- 写真撮影: 60%
- コーヒー知識: 90%
バーの色はグラデーションで、アニメーションで伸びるようにして。

6. グラデーション背景にする

ページの背景を単色ではなく、グラデーションに変えてください。
左上が #667eea、右下が #764ba2 のグラデーション。
カードは半透明の白（rgba(255,255,255,0.95)）にして、背景が少し透けるように。

7. アニメーションを追加する

ページ読み込み時にカードがふわっと表示されるアニメーションを追加して。
CSSの @keyframes で fadeInUp を作って、下から上に20pxスライドしながら
opacity 0→1 になる感じ。duration は 0.6s、ease-out で。

8. タイムラインで経歴を表示する

自己紹介の下に「経歴」セクションを追加してください。
左側に年、右側に内容を表示する縦のタイムラインスタイルで：
- 2020年: 大学卒業
- 2020年: 〇〇株式会社入社
- 2023年: 部署異動でマーケティング担当に
- 2025年: バイブコーディングを始める
タイムラインの線と丸いドットも付けて。

9. フォントをGoogleフォントに変える

フォントを Google Fonts の「Noto Sans JP」に変えてください。
<head>タグ内に以下のリンクを追加して：
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
body の font-family を 'Noto Sans JP', sans-serif に変更して。

10. ギャラリーセクションを追加する

ページの下部に「ギャラリー」セクションを追加してください。
3列のグリッドで画像を6枚表示。各画像は角丸で、ホバーすると少し拡大する。
画像URLは以下のUnsplash画像を使って：
- https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=400&h=300&fit=crop
- https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=400&h=300&fit=crop
- https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&fit=crop
（残り3枚は適当な風景画像で）

11. お問い合わせフォーム風のセクションを追加する

ページの一番下に「お問い合わせ」セクションを追加してください。
名前、メールアドレス、メッセージの3つの入力欄と送信ボタン。
実際に送信する機能は不要（見た目だけでOK）。
入力欄はフォーカス時に枠線の色が変わるようにして。

12. フッターをおしゃれにする

フッターを充実させてください。
- 背景色はダークグレー(#2d2d2d)、文字は白
- 左にコピーライト、右にSNSアイコンリンク
- 上部に波型のSVGデコレーション（カード背景色→フッター背景色のグラデーション）
- 「Made with Vibe Coding」のテキストも小さく入れて

⚠️

一度に全部やらないこと

カスタマイズは1つずつ試して確認しよう。一度に5個も6個も頼むと、意図しない結果になった時にどこが問題か分からなくなる。「1つ頼む → 確認する → 次の1つを頼む」のサイクルがバイブコーディングの基本。

完成後の発展パターン

自己紹介ページを一通り作り込んだら、次のステップに進んでみよう。

ダークモード切り替え機能を追加する

ページの右上に、ダークモードとライトモードを切り替えるトグルボタンを
追加してください。
- ボタンはクリックするたびにモードが切り替わる
- ダークモード: 背景#1a1a2e、カード#16213e、文字#e0e0e0
- ライトモード: 背景#f5f5f5、カード#ffffff、文字#333333
- 切り替え時にスムーズなトランジション（0.3秒）をつけて
- ボタンのアイコンは太陽☀と月🌙で切り替え
- JavaScriptを使ってOK（同じHTMLファイル内の<script>タグで）

ℹ️

JavaScriptが登場

ダークモード切り替えにはJavaScriptという言語が必要になる。でも心配しない。AIがコードを全部書いてくれる。「JavaScriptを使ってOK」と指示に入れるだけ。

レスポンシブ対応（スマホでもきれいに見える）

このページをスマートフォンでも見やすくしてください。
- 画面幅768px以下の時、カードのpaddingを20pxに減らす
- 画面幅480px以下の時、フォントサイズを少し小さくする
- 好きなものタグは2列に自動折り返し
- SNSボタンは縦並びに変更
- 画像ギャラリーは2列→1列に切り替え
- meta viewportタグが入っていることを確認して

GitHub Pagesで世界に公開する

完成したページをインターネット上に公開したい場合は、GitHub Pagesが最も簡単だ。

ステップ	やること	所要時間
1	GitHubアカウントを作成	5分
2	新しいリポジトリを作成（名前は `username.github.io`）	2分
3	`index.html` をアップロード	1分
4	Settings → Pages → Branch を `main` に設定	1分
5	`https://username.github.io` でアクセス	1分後に反映

# Claude Codeを使う場合のコマンド
git init
git add index.html
git commit -m "自己紹介ページを公開"
git remote add origin https://github.com/あなたのユーザー名/あなたのユーザー名.github.io.git
git push -u origin main

💡

無料で公開できる

GitHub Pagesは完全無料。独自ドメインの設定も可能。自分だけのURLを持てるので、名刺やSNSプロフィールにリンクを載せることもできる。

よくあるトラブルと対処法

初めてのHTML作成では、意外なところでつまずくことがある。以下がよくある問題とその解決法だ。

トラブル1: ブラウザで開いたら文字化けする

原因: HTMLファイルの文字コード指定がない、またはファイルがUTF-8で保存されていない。

対処法: AIに以下を伝える。

index.htmlの<head>タグ内に <meta charset="UTF-8"> が入っているか確認して。
なければ追加して。

トラブル2: 画像が表示されない

原因: 画像URLが間違っている、またはリンク切れ。

対処法:

プロフィール画像が表示されません。
画像URLを以下に変更してください: 【正しいURL】
また、画像が読み込めない場合に代わりに表示する
背景色つきのイニシャル表示（フォールバック）も追加して。

トラブル3: スマホで見ると崩れる

原因: レスポンシブ対応ができていない。

対処法:

スマホ（画面幅480px以下）で見た時にレイアウトが崩れます。
meta viewportタグの追加と、メディアクエリで小画面用の
スタイルを追加してください。

トラブル4: Boltのプレビューとダウンロードしたファイルでデザインが違う

原因: Boltのプレビュー環境とローカルブラウザの差異。

対処法: ほとんどの場合はフォントの違い。Googleフォントを指定すれば揃う。

Google Fontsの「Noto Sans JP」を読み込んで、
全体のフォントを統一してください。

トラブル5: Claude Codeがファイルを作ってくれない

原因: 権限の問題か、指示が曖昧。

対処法: 具体的にファイル名を指定する。

index.html というファイルを新規作成して、自己紹介ページの
HTMLコードを書いてください。

トラブル6: 色の指定が反映されない

原因: CSSの記述ミスか、優先度の問題。

対処法:

背景色の変更が反映されていません。
CSSで !important を使って強制的に適用するか、
セレクタの優先度を確認して修正してください。

FAQ（よくある質問）

Q1: HTMLの知識がゼロでも本当にできますか？

A: はい、できます。この記事のテンプレートをそのままコピペしてAIに渡せば、コードは全部AIが書いてくれます。あなたがやるのは「何を作りたいか」を日本語で伝えることだけ。HTMLの知識は「あると指示が的確になる」程度のボーナスであり、必須ではありません。

Q2: Boltは無料で使えますか？

A: 無料プランがあります。1日あたりの利用回数に制限がありますが、自己紹介ページ1つ作る程度なら十分です。もし制限に引っかかったら、翌日に続きをやるか、Claude Code（Claude Proプランで利用可能）に切り替えましょう。

Q3: 作ったページを友達に見せるにはどうすればいい？

A: 3つの方法があります。

方法	難易度	説明
HTMLファイルを直接送る	簡単	メールやLINEでファイルを送付。相手がダウンロードして開く
GitHub Pages	やや簡単	GitHubに上げて公開URL(`https://username.github.io`)を共有
Cloudflare Pages	やや簡単	GitHubと連携して自動デプロイ。独自ドメインも設定しやすい

最初はGitHub Pagesがおすすめ。無料でURLが手に入る。

Q4: 自己紹介ページの後は何を作ればいい？

A: この順番で進めるのがおすすめです。

ToDoアプリ（Lv.2） - ユーザー操作に反応する「動的なアプリ」の入門
ポートフォリオサイト（Lv.3） - 複数ページ構成のWebサイト
ブログ（Lv.4） - フレームワーク（Astro等）を使ったサイト構築
APIダッシュボード（Lv.5） - 外部データを取得して表示する本格アプリ

各レベルの詳細は実践カテゴリの記事を参照してください。

Q5: AIが生成したコードを理解する必要はありますか？

A: 「理解」のレベルによります。暗記や一から書ける必要はありません。しかし「h1は見出し」「styleタグの中がデザイン」「divは入れ物」くらいの大まかな構造がわかると、AIへの指示が格段にうまくなります。この記事の「HTMLの全体構造」セクションをざっと眺めるだけで十分です。

Q6: 生成されたHTMLのコードが長くて読めません。問題ないですか？

A: まったく問題ありません。AIが生成するコードが100行でも500行でも、あなたが中身を全部読む必要はないです。気になるところだけ見て、「ここの色を変えて」「この部分を消して」とAIに指示すればOK。バイブコーディングは「コードを読む」のではなく「結果を見て指示を出す」アプローチです。

Q7: Bolt と Claude Code 以外のツールでも同じことができますか？

A: はい。Cursor、GitHub Copilot、Replit Agent など、AIコーディングツールであれば基本的に同じテンプレートが使えます。ツールごとの詳しい使い方はツール比較の記事を参考にしてください。指示テンプレートの内容は共通で使い回せるのがバイブコーディングの強みです。

まとめ：最初の一歩を踏み出そう

この記事で学んだことを振り返ろう。

やったこと	身についたこと
AIに指示テンプレートを渡した	「日本語で伝えればコードが生まれる」体験
ブラウザでHTMLを表示した	Webページの仕組みの基本
カスタマイズの指示を出した	「1つずつ修正を頼む」サイクル
HTMLの構造をざっと見た	タグの役割（h1, p, div, style等）の感覚
トラブルへの対処法を知った	問題が起きても慌てない心構え

バイブコーディングは「完璧な指示」を出す必要はない。まず大まかな指示を出して、結果を見て、気に入らないところを修正していく。この繰り返しで、あっという間にWebページができあがる。

大事なのは今すぐやってみること。この記事のテンプレートをコピーして、BoltかClaude Codeに貼り付けてみよう。5分後には、あなたの自己紹介ページが画面に表示されているはずだ。

次のステップ

自己紹介ページが完成したら、次は少し複雑なToDoアプリに挑戦しよう。ユーザーのクリックやキーボード入力に反応する「インタラクティブ」なアプリの世界へ。HTMLだけでは実現できない、JavaScriptの力を体感できる。

【Lv.1】HTMLだけで自己紹介ページを作る ── バイブコーディング最初の一歩

最初のプロジェクト、これなら絶対できる

完成イメージ

方法A: Boltで作る（最も簡単）

Boltにアクセス

指示テンプレートをコピペ

AIの生成を待つ

プレビューで確認

ファイルをダウンロード

ブラウザで開く

Bolt用：完全コピペ指示テンプレート

方法B: Claude Codeで作る

フォルダを作成

Claude Codeを起動

指示テンプレートを入力

ファイル生成を確認

ブラウザで表示

Claude Code用：ターミナルコマンドの流れ

Claude Code用：追加の便利な指示

AIが作ったHTMLの中身を理解する

HTMLの全体構造

主要なHTMLタグ一覧

CSSの基本プロパティ

カスタマイズ例 12選

1. 配色をダークモードに変える

2. プロフィール画像を丸く表示する

3. 好きなものリストをタグ風デザインにする

4. SNSリンクをボタン風にする

5. スキルバーを追加する

6. グラデーション背景にする

7. アニメーションを追加する

8. タイムラインで経歴を表示する

9. フォントをGoogleフォントに変える

10. ギャラリーセクションを追加する

11. お問い合わせフォーム風のセクションを追加する

12. フッターをおしゃれにする

完成後の発展パターン

ダークモード切り替え機能を追加する

レスポンシブ対応（スマホでもきれいに見える）

GitHub Pagesで世界に公開する

よくあるトラブルと対処法

トラブル1: ブラウザで開いたら文字化けする

トラブル2: 画像が表示されない

トラブル3: スマホで見ると崩れる

トラブル4: Boltのプレビューとダウンロードしたファイルでデザインが違う

トラブル5: Claude Codeがファイルを作ってくれない

トラブル6: 色の指定が反映されない

FAQ（よくある質問）

Q1: HTMLの知識がゼロでも本当にできますか？

Q2: Boltは無料で使えますか？

Q3: 作ったページを友達に見せるにはどうすればいい？

Q4: 自己紹介ページの後は何を作ればいい？

Q5: AIが生成したコードを理解する必要はありますか？

Q6: 生成されたHTMLのコードが長くて読めません。問題ないですか？

Q7: Bolt と Claude Code 以外のツールでも同じことができますか？

まとめ：最初の一歩を踏み出そう

次のステップ

他のカテゴリの記事

Vibe Coding（バイブコーディング）とは？やり方・無料で始める手順・おすすめツール完全ガイド【2026】

バイブコーディングで何が作れる？── 実例15選と作れないものの境界線

AIへの指示の出し方 ── 「いい感じにして」では伝わらない理由と、成果が10倍変わるプロンプト術