はじめに

前編では、Googleのバイブコーディングツール Antigravity のインストールから初めての動作確認まで体験しました。今回はいよいよ実践編！AIと会話しながら、自分のポートフォリオサイトを一から作っていきます。

今回の完成イメージはこのような形になっています。

• 自己紹介セクション（名前・趣味・一言メッセージ）
• スキルセクション（得意なプログラミング言語や技術）
• SNS・リンク集セクション
• 1ページにすべてまとまったスクロール型

プロンプトの基本：AIへの伝え方 3つのコツ

Antigravityを使いこなす上で一番大事なのは、AIへの指示（プロンプト）の書き方です。同じものを作るにも、伝え方次第でAIが出してくるコードのクオリティが全然違います。

まずは3つのコツを覚えてから、実践に進みましょう。

コツ① 最初に「全体像」を伝える

AIは最初の指示で全体の方向性を決めます。いきなり細かい部分から指示すると、後から大きく変更したくなったときに手戻りが増えてしまいます。

伝え方が曖昧な例

Webページを作ってください。

これだと、AIは何を作ればいいかわからず、ごく簡単なサンプルを出してくるだけです。

全体像を伝えた例

HTML・CSS・JavaScriptを1ファイルにまとめた、スクロール型のポートフォリオサイトを作ってください。

以下のセクションを含めてください：
- ヒーローセクション（名前と一言メッセージ）
- 自己紹介セクション（名前・趣味・一言）
- スキルセクション（プログラミング言語をカード形式で表示）
- SNS・リンク集セクション

デザインはAIにお任せしますが、スタイリッシュでモダンな雰囲気にしてください。
スマートフォンでも見やすいレスポンシブデザインにしてください。

「何を」「どんな構成で」「どんなデザインで」の3点をセットで伝えると、AIが迷わず動けます。

コツ② 要素を箇条書きで渡す

自分の名前や趣味など、具体的な情報は箇条書きでまとめて渡すと、AIがそのままコードに埋め込んでくれます。

情報を箇条書きで渡す例

以下の情報を使って、自己紹介セクションとスキルセクションの内容を埋めてください。

【自己紹介】
- 名前：電技研 太郎
- 趣味：電子工作、プログラミング、ゲーム
- 一言：ものづくりが大好きな高校2年生です！

【スキル】
- Python（★★★）
- HTML/CSS（★★★）
- JavaScript（★★）
- Arduino（★★）

【SNS・リンク】
- GitHub：https://github.com/dengiken-taro
- Twitter/X：https://x.com/dengiken_taro

「【見出し】」で情報をグループ分けして渡すと、AIが構造を理解しやすくなります。自分の情報に書き換えて使ってください。

コツ③ 「気に入らない部分」を具体的に修正指示する

AIが生成したコードが完璧とは限りません。気に入らない部分があったら、どこをどう変えたいかを具体的に伝えましょう。

曖昧な修正指示

もっとかっこよくしてください。

AIは「かっこいい」の基準がわからないので、大きく変えすぎたり、逆に何も変えなかったりします。

具体的な修正指示

以下の点を修正してください：
- ヘッダーの背景色を黒ではなく濃い紺色（#1a1a2e）に変更する
- スキルカードにホバーしたとき、少し浮き上がるアニメーションを追加する
- フォントをGoogleフォントの「Noto Sans JP」に変更する

「どのパーツを」「どう変えたいか」を分けて書くと、AIが的確に修正してくれます。色はできれば16進数カラーコードで指定すると確実です。

実践！ポートフォリオサイトを作ろう！

コツを覚えたところで、実際に作っていきましょう！

① 新しいプロジェクトを用意する

まずAntigravityを起動し、空のフォルダを新しいプロジェクトとして開きます（File → Open Folder）。

Step 2：最初のプロンプトで骨格を作る

AIチャットパネルを開いて、コツ①で学んだ全体像を伝えるプロンプトを入力します。

HTML・CSS・JavaScriptを1ファイル（index.html）にまとめた、
スクロール型のポートフォリオサイトを作ってください。

以下のセクションを含めてください：
- ヒーローセクション（名前と一言メッセージ、背景はグラデーション）
- 自己紹介セクション（名前・趣味・一言）
- スキルセクション（プログラミング言語をカード形式で表示）
- SNS・リンク集セクション（アイコン付きボタン）
- フッター

デザインはスタイリッシュでモダンな雰囲気にしてください。
スマートフォンでも見やすいレスポンシブデザインにしてください。
ナビゲーションバーも上部に固定してください。

送信すると、AIがindex.htmlを自動生成してくれます。

生成中に、下の画像のような”Accept All”というボタンが現れた場合、内容に問題がなければ押してください。

生成が終わったら、index.htmlをブラウザで開いて確認しましょう。

また、この時内容がすべて英語で出力された場合、AIに”日本語で回答・出力してください”と指示を出しましょう。

③ 自分の情報を流し込む

骨格ができたら、コツ②の箇条書き形式で自分の情報を渡します。ここは自分の情報に書き換えて使ってください。

以下の情報を使って、サイトの内容を実際のものに更新してください。

【自己紹介】
- 名前：電技研 太郎
- 趣味：電子工作、プログラミング、ゲーム
- 一言：ものづくりが大好きな高校2年生です！

【スキル】
- Python（★★★）
- HTML/CSS（★★★）
- JavaScript（★★）
- Arduino（★★）

【SNS・リンク】
- GitHub：https://github.com/dengiken-taro
- Twitter/X：https://x.com/dengiken_taro

Step 4：デザインをブラッシュアップする

最後に、コツ③の具体的な修正指示でデザインを細かく整えていきます。たとえばこんな修正を加えてみましょう。

以下の点を修正・追加してください：

- スキルカードにホバーしたとき、少し浮き上がるアニメーションを追加する
- ナビゲーションバーのリンクをクリックしたとき、
  該当セクションへスムーズスクロールするようにする
- ページ全体のフォントをGoogleフォントの「Noto Sans JP」に変更する
- ヒーローセクションに、下にスクロールを促す矢印アニメーションを追加する

▲ アニメーションやフォントが整い、ぐっとクオリティが上がった

気になる部分があれば、さらに追加で指示してみましょう。たとえば：

SNSセクションのボタンの色を、それぞれのサービスのブランドカラーに合わせてください。
- GitHubは黒（#24292e）
- Twitter/Xは青（#1da1f2）

こんなふうに、小さな修正を積み重ねるのがバイブコーディングのコツです。

完成！＆アレンジのヒント

お疲れさまでした！今回作ったのはあくまでベースです。自分でいろいろ変更してみてください！

もっと発展させたい人へ

「Works」セクションを追加して、
制作物をカード形式（画像・タイトル・説明文・GitHubリンク）で
3つ並べて表示できるようにしてください。

ダークモード・ライトモードを切り替えられる
トグルボタンをナビゲーションバーに追加してください。

ページを開いたとき、各セクションが下からふわっと
フェードインして表示されるアニメーションを追加してください。

などのプロンプトを入れてみましょう！

まとめ：プロンプト3つのコツ、覚えてた？

今回学んだポイントをおさらいしておきましょう。

コツ	ポイント
① 全体像を伝える	「何を・どんな構成で・どんなデザインで」をセットで最初に伝える
② 箇条書きで渡す	名前・スキルなどの情報は【見出し】＋箇条書きでまとめる
③ 具体的に修正指示	「どのパーツを・どう変えたいか」を分けて書く

バイブコーディングは「コードを書く力」よりも「やりたいことを言葉で伝える力」が大事です。最初はうまくいかなくても、プロンプトを少しずつ工夫するうちに、AIとの会話のコツがつかめてきます。

ぜひ自分だけのポートフォリオサイトを作ってみましょう！

関連サイト

前編：言葉だけでWebページが完成する？Google Antigravityを使ってみた