VibeCoding

Appearance

Webサイト作成＆公開 ​

このセクションでは、AIに指示を出して自己紹介Webサイトを作り、世界に公開します。

ゴール ​

🎉 自分のWebサイトがURLで世界に公開されている

完成イメージ ​

Webサイトの完成イメージ

1. プロジェクトの作成 ​

作業フォルダを作成 ​

デスクトップに my-profile フォルダを作成し、移動します。

Macの場合：

bash
mkdir ~/Desktop/my-profile
cd ~/Desktop/my-profile

Windowsの場合：

powershell
mkdir $HOME\Desktop\my-profile
cd $HOME\Desktop\my-profile

Claude Codeを起動 ​

bash
claude

プロジェクトを作成する指示 ​

Claude Codeに以下のプロンプトをコピー＆ペーストして、★ の部分だけ自分の情報に書き換えてください：

Next.jsとTailwind CSSで自己紹介ページを作って。

# 技術スタック
- Next.js（App Router）
- TypeScript
- Tailwind CSS

# ページ構成
1ページ完結のシンプルな自己紹介ページ

# デザイン仕様
- 背景色：薄いグレー（#f5f5f5）
- メインカード：白背景、角丸（16px）、シャドウあり
- カードの最大幅：600px、画面中央に配置
- フォント：システムフォント

# レイアウト（上から順に）
1. プロフィール画像エリア
   - 丸いプレースホルダー（グレーの円、120x120px）
   - 画像がない状態でもデザインが成立するように

2. 名前
   - 大きめのフォント（24px）、太字
   - 中央揃え

3. 肩書き・一言
   - 名前の下に小さめのフォント（14px）、グレー文字
   - 中央揃え

4. 自己紹介文
   - 本文サイズ（16px）
   - 左揃え、適度な行間

5. 趣味・興味セクション
   - 「趣味・興味」という見出し（18px、太字）
   - 箇条書きリスト

6. SNSリンクセクション
   - アイコン風のボタンを横並び（GitHub, X(Twitter)）
   - リンクはダミー（#）でOK

# 内容（★を書き換えてください）
- 名前：★山田太郎★
- 肩書き：★Webエンジニア見習い★
- 自己紹介：★はじめまして！プログラミングを勉強中の山田です。AIを使ったアプリ開発に興味があります。★
- 趣味：★読書、映画鑑賞、カフェ巡り★

# その他
- レスポンシブ対応（スマホでも見やすく）
- ホバー時にボタンの色が少し変わるアニメーション

★の部分を書き換える

★山田太郎★ → ★あなたの名前★ のように、★で囲まれた部分を自分の情報に変更してください。

2. 生成されたサイトを確認 ​

Claude Codeがコードを生成したら、ブラウザで確認します。

開発サーバーを起動 ​

Claude Codeに指示：

開発サーバーを起動して

ターミナルに表示されたURL（通常 http://localhost:3000）をブラウザで開きます。

確認ポイント ​

  • [ ] ページが表示される
  • [ ] 名前が正しい
  • [ ] 自己紹介が正しい
  • [ ] 趣味が正しい

3. デザインを調整 ​

気に入らない部分があれば、Claude Codeに修正を依頼します。

修正の例 ​

背景色をダークブルーにして
フォントをもう少し大きくして
プロフィール画像を追加できるようにして
SNSリンクを追加して

小さく試す

一度に大きな変更を依頼するより、小さな変更を少しずつ依頼する方がうまくいきます。

4. GitHubにコードを保存 ​

完成したら、GitHubにコードを保存します。

GitHubへのPush

Claude Codeに指示 ​

ghコマンドを使って、このプロジェクトをGitHubにpushして。
リポジトリ名は my-profile にして。

Claude Codeが以下を自動で行います：

  1. Gitリポジトリの初期化（git init）
  2. GitHubにリポジトリ作成（gh repo create）
  3. コードのpush（git push）

gh コマンドとは

環境構築でインストールしたGitHub CLIです。GitHubとの連携が簡単にできます。

5. Vercelで公開 ​

いよいよ世界に公開します！

Vercelデプロイ手順

Vercelにログイン ​

  1. Vercel にアクセス
  2. 「Continue with GitHub」でログイン

プロジェクトをインポート ​

  1. 「Add New...」→「Project」をクリック
  2. 先ほど作成した my-profile リポジトリを選択
  3. 「Deploy」をクリック

デプロイ完了 ​

1〜2分でデプロイが完了します。

表示されたURL（例：https://my-profile-xxx.vercel.app）にアクセス！

🎉 完成！ ​

完成おめでとう！

あなたのWebサイトが世界に公開されました。このURLは誰でもアクセスできます。

確認してみよう ​

  • スマートフォンでURLを開いてみる
  • 隣の人にURLを教えて見てもらう

トラブルシューティング ​

ページが真っ白 ​

エラーを確認して修正して

デザインが崩れる ​

レイアウトを修正して

Vercelでエラー ​

Vercelのビルドエラーを修正して

10分以上詰まったら

コーチに声をかけてください！

次はToDoアプリの土台作りに進みます！