BLOG MENU

現役コーダーがAIでバイブコーディングに挑戦！ChatGPTの実力と使い方を徹底レビュー

バイブコーディングとは？
ChatGPTでバイブコーディングに挑戦！
ChatGPTのコード結果
ChatGPTのコードについて分析
まとめ：バイブコーディングでわかったAI活用のポイント

ChatGPTやGeminiなどのAIの技術が発達し、プログラミングの技術も近年でかなり上がってきました。

最近ではAIを使った「バイブコーディング」なるものが流行っており、ノーコードでWebサイトを作りたい非エンジニアの方などが挑戦しているようです。

そこで、AIに強いWeb制作会社クーシーの現役コーダーも流行りに乗っかって、バイブコーディングにチャレンジしてみました！

バイブコーディングとは？

バイブコーディングとは、自然言語（普段の会話で使う言葉）でAIに指示を出してコードを生成させる、新しいソフトウェア開発手法のことです。

「バイブ（vibe）」の「雰囲気」、「空気感」という意味から、厳密な設計書よりも開発者のノリや勢いなどをAIが汲み取ってコーディングを進めていく手法から、バイブコーディングといわれるようになったそうです。

というわけで今回はいつものコーディングからかけ離れ、AI活用のもとノリと勢いで、1ページのWebサイトを作っていきたいと思います。

ChatGPTでバイブコーディングに挑戦！

筆者が選んだAI（LLM）は、ChatGPT（無料版）。こちらを使って、バイブコーディングに挑戦していきます。

今回挑戦する課題

コーディング学習サイト「Codejump」さんが提供する「⑬上級編：ブログサイト／2カラム」の課題に挑みます。

Codejumpは、実際のWebサイトを想定したデザインカンプをもとに、HTML／CSSコーディングを実践的に学べる人気サイトです。この課題では、記事一覧とサイドバーが左右に並ぶ2カラム構成のブログサイトを作ることが目標です。記事ごとのタイトルや画像、日付やカテゴリーなど、ブログに必要な情報を整えて表示する必要があります。

また、レスポンシブ対応（スマホやタブレットでも見やすく自動でレイアウトが変わる仕組み）も考慮しなければいけません。

これをChatGPTにコーディングさせるとどうなるのか？現役コーダーの目線で検証していきます！

コーディングの条件を早速指示してみる

AIに指示する際の条件は以下です。

・レスポンシブ対応（PC・スマホ・タブレット）
・HTML5セマンティックタグを使用（header,main,footerなど）
・SCSSでCSSを管理
・画像・リンクはダミー使用
・最新ブラウザのみ対応

具体的には、次の内容でChatGPTに指示しました。

あなたは、Webページの見た目や構造を作るマークアップエンジニアです。

下記の条件で送った画像のデザインをHTML/cssコーディングしてください。

・PC/SPレスポンシブ
・画面サイズが可変されてもレイアウトが崩れないようにしてください
・対応ブラウザは最新のみでOK
・css、画像の階層は/assets/css/と/assets/img/でお願いします・scssでcssをコンパイルできるようにしたいです（階層は/assets/scss/）
・HTML5のセマンティックタグを適切に使用してください・画像やリンクはダミーまたはプレースホルダーを使用してください

バイブコーディングなのでこちらは一切手出ししません。今回はガチガチに仕様を送るというより、普通の対話形式で指示していきたいと思います。

筆者なりに考えた、AIに指示するときのコツ！

初心者の方でもうまくバイブコーディングを進めるために、次の点を意識すると良いです。筆者の考える、指示のコツを下記にまとめました。

「マークアップエンジニア」と指定すると、生成されるコードの精度が上がります。
一度に詰め込みすぎない
条件を順番に追加するほうが柔軟に対応してくれます。
レスポンシブやダミー画像など、専門用語は( )で補足すると理解しやすくなります。

さて、ChatGPTはどのような感じで作ってくれるのでしょうか。

ChatGPTのコード結果

先程の条件を送ってから5秒も経たずに返事が来ました。

ChatGPTの回答：

了解しました。

いただいたデザイン画像「Travel Blog – PC.png」をもとに、以下の条件でHTML/SCSS コーディングを作成します。

では、以下の構成でコーディングを行います。

◾️ファイル構成
index.html
/assets/
  ├── css/
  │ └── style.css ← SCSSコンパイル後
  ├── scss/
  │ └── style.scss ← メインSCSS
  └── img/
       └── （ダミー画像配置

◾️index.html

<!DOCTYPE html>
<html lang=”ja”>
<head>
  <meta charset=”UTF-8″ />
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
  <meta name=”description” content=”旅行に関する記事を紹介するトラベルブログです。” />
  <title>Travel Blog</title>
  <link rel=”stylesheet” href=”/assets/css/style.css” />

  <!– 構造化データ –>
  <script type=”application/ld+json”>
  {
    “@context”: “https://schema.org”,
    “@type”: “WebPage”,
    “name”: “Travel Blog”,
    “description”: “旅行に関する記事を紹介するトラベルブログです。”,
    “publisher”: {
      “@type”: “Organization”,
      “name”: “Travel Blog”
    }
  }
  </script>
</head>
<body>
  <header class=”site-header”>
    <div class=”site-header__inner”>
      <h1 class=”site-logo”>Travel Blog</h1>
      <nav class=”site-nav”>
        <ul>
          <li><a href=”#”>NEW</a></li>
          <li><a href=”#”>COLUMN</a></li>
          <li><a href=”#”>SERIES</a></li>
          <li><a href=”#”>Q&A</a></li>
          <li><a href=”#”>CONTACT</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class=”site-main”>
    <section class=”pickup”>
      <article class=”pickup-item”>
        <img src=”/assets/img/sample1.jpg” alt=”記事サムネイル1″>
        <h2>タイトルテキストテキストテキストテキスト</h2>
        <a href=”#” class=”btn-read”>READ MORE</a>
      </article>
      <article class=”pickup-item”>
        <img src=”/assets/img/sample2.jpg” alt=”記事サムネイル2″>
        <h2>タイトルテキストテキストテキストテキスト</h2>
        <a href=”#” class=”btn-read”>READ MORE</a>
      </article>
      <article class=”pickup-item”>
        <img src=”/assets/img/sample3.jpg” alt=”記事サムネイル3″>
        <h2>タイトルテキストテキストテキストテキスト</h2>
        <a href=”#” class=”btn-read”>READ MORE</a>
      </article>
    </section>

    <div class=”content-wrapper”>
      <div class=”content-main”>
        <!– ブログ記事ループ –>
        <article class=”post” itemscope itemtype=”https://schema.org/BlogPosting”>
          <header class=”post-header”>
            <h2 class=”post-title” itemprop=”headline”>タイトルテキストテキストテキストテキスト</h2>
            <time datetime=”2020-01-01″ itemprop=”datePublished”>2020/01/01</time>
            <span class=”post-category”>カテゴリ1</span>
          </header>
          <figure class=”post-thumb”>
            <img src=”/assets/img/sample4.jpg” alt=”記事サムネイル” itemprop=”image”>
          </figure>
          <div class=”post-body” itemprop=”articleBody”>
            本文テキストテキストテキストテキストテキスト…
          </div>
          <a href=”#” class=”btn-read”>READ MORE</a>
        </article>

        <!– 他の記事（2つ目・3つ目） –>
        <article class=”post” itemscope itemtype=”https://schema.org/BlogPosting”>
          <header class=”post-header”>
            <h2 class=”post-title” itemprop=”headline”>タイトルテキストテキストテキストテキスト</h2>
            <time datetime=”2020-01-01″ itemprop=”datePublished”>2020/01/01</time>
            <span class=”post-category”>カテゴリ1</span>
          </header>
          <figure class=”post-thumb”>
            <img src=”/assets/img/sample5.jpg” alt=”記事サムネイル” itemprop=”image”>
          </figure>
          <div class=”post-body” itemprop=”articleBody”>
            本文テキストテキストテキストテキストテキスト…
          </div>
          <a href=”#” class=”btn-read”>READ MORE</a>
        </article>

        <article class=”post” itemscope itemtype=”https://schema.org/BlogPosting”>
          <header class=”post-header”>
            <h2 class=”post-title” itemprop=”headline”>タイトルテキストテキストテキストテキスト</h2>
            <time datetime=”2020-01-01″ itemprop=”datePublished”>2020/01/01</time>
            <span class=”post-category”>カテゴリ1</span>
          </header>
          <figure class=”post-thumb”>
            <img src=”/assets/img/sample6.jpg” alt=”記事サムネイル” itemprop=”image”>
          </figure>
          <div class=”post-body” itemprop=”articleBody”>
            本文テキストテキストテキストテキストテキスト…
          </div>
          <a href=”#” class=”btn-read”>READ MORE</a>
        </article>
      </div>

      <aside class=”sidebar”>
        <section class=”profile”>
          <img src=”/assets/img/profile.jpg” alt=”プロフィール画像”>
          <h3>Name Name</h3>
          <p>プロフィールテキストテキストテキストテキスト…</p>
        </section>

        <section class=”ranking”>
          <h3>Ranking</h3>
          <ul>
            <li><img src=”/assets/img/sample7.jpg” alt=””></li>
            <li><img src=”/assets/img/sample8.jpg” alt=””></li>
            <li><img src=”/assets/img/sample9.jpg” alt=””></li>
          </ul>
        </section>

        <section class=”archive”>
          <h3>Archive</h3>
          <ul>
            <li><a href=”#”>2024年10月 (XX)</a></li>
            <li><a href=”#”>2024年09月 (XX)</a></li>
            <li><a href=”#”>2024年08月 (XX)</a></li>
            <li><a href=”#”>2024年07月 (XX)</a></li>
          </ul>
        </section>
      </aside>
    </div>
  </main>

  <footer class=”site-footer”>
    <div class=”footer-inner”>
      <section class=”footer-about”>
        <h4>About</h4>
        <p>テキストテキストテキストテキスト…</p>
      </section>
      <section class=”footer-menu”>
        <h4>Menu</h4>
        <ul>
          <li><a href=”#”>NEW</a></li>
          <li><a href=”#”>CATEGORY</a></li>
          <li><a href=”#”>COLUMN</a></li>
          <li><a href=”#”>Q&A</a></li>
        </ul>
      </section>
      <section class=”footer-twitter”>
        <h4>Twitter</h4>
        <div class=”twitter-box”>ツイート埋め込みエリア</div>
      </section>
    </div>
    <p class=”footer-copy”>© Travel Blog</p>
  </footer>
</body>
</html>

◾️ /assets/scss/style.scss

/* ==============================
  Base
============================== */
html {
  font-size: 62.5%;
}
body {
  font-family: “Helvetica Neue”, Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==============================
  Header
============================== */
.site-header {
  background: #222;
  color: #fff;

  &__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .site-logo {
    font-size: 2rem;
  }

  .site-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;

    a {
      color: #fff;
      text-decoration: none;
      font-size: 1.4rem;

      &:hover {
        opacity: 0.7;
      }
    }
  }
}

/* ==============================
  Pickup Section
============================== */
.pickup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;

  .pickup-item {
    text-align: center;

    h2 {
      font-size: 1.4rem;
      margin: 1rem 0;
    }

    .btn-read {
      font-size: 1.2rem;
      color: #000;
      text-decoration: underline;
    }
  }
}

/* ==============================
  Main content + Sidebar
============================== */
.content-wrapper {
  display: flex;
  gap: 3rem;
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1rem;

  .content-main {
    flex: 1;

    .post {
      margin-bottom: 4rem;
      border-bottom: 1px solid #eee;
      padding-bottom: 2rem;

      .post-title {
        font-size: 2rem;
        margin-bottom: 0.5rem;
      }
      .post-category {
        color: #888;
        font-size: 1.2rem;
        margin-left: 1rem;
      }
      .post-thumb {
        margin: 1.5rem 0;
      }
      .btn-read {
        font-size: 1.2rem;
        color: #000;
        text-decoration: underline;
      }
    }
  }

  .sidebar {
    width: 300px;
    flex-shrink: 0;

    section {
      margin-bottom: 3rem;
    }

    h3 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.5rem;
    }

    .ranking ul,
    .archive ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .ranking li {
      margin-bottom: 1rem;
    }

    .archive a {
      color: #333;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* ==============================
  Footer
============================== */
.site-footer {
  background: #f7f7f7;
  padding: 4rem 1rem;

  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;

    section {
      flex: 1;
      min-width: 280px;
    }

    h4 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }

    ul {
      list-style: none;
      padding: 0;

      a {
        color: #333;
        text-decoration: none;
      }
    }

    .twitter-box {
      background: #eaeaea;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 1.4rem;
    }
  }

  .footer-copy {
    text-align: center;
    font-size: 1.2rem;
    color: #888;
    margin-top: 2rem;
  }
}

/* ==============================
  Responsive
============================== */
@media screen and (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;

    .sidebar {
      width: 100%;
    }
  }
}

この構成であれば、

・PCでは横並び（2カラム）
・SPでは1カラム縦並び
・SCSS→CSSコンパイル対応済み
・構造化データ（BlogPosting + WebPage）対応

もしご希望あれば、
「SCSSファイルを分割構成（_base.scss, _layout.scssなど）」にする形にもできます。

希望されますか？（はい／いいえ）

すごい！やり取りし始めてから5分も経っていません。もうコードが来ました。人間がやったら1日でできるかどうか、というくらいのボリュームを一瞬でやってのけました…爆速です…。

HTML5の構成にしっかりとなっていて、構造化データもちゃんとやってくれていますね。しかもSCSSファイルを分割構成にしてくれる…！？そんな配慮もできるとは…！

SCSSファイルを整理して管理することで、後からの修正や追加もスムーズになります。感動したのでそれもお願いしてみます。

ただ、最初に1つ条件を言い忘れていたので、わがまま言ってもう少し要望を出してみます。

BEM（CSSの見た目を整理して、誰でもわかりやすく、後から修正しやすくするためのルール）をクーシーのルールにしてもらいましょう。これにより、社内の複数人で作業してもコードの書き方が揃い、保守性が高まります。

ChatGPTへの指示：

BEMを以下にしたいです。
・3階層までいったらリセットしてBlockから始まる
・命名規則はblock__element–modifierにしたいです

ChatGPTの回答：

完璧です!
BEMを以下のように統一して実装しますね。

◾️実装例（ルール適用後）
<article class=”post”>
  <h2 class=”post__title”>タイトル</h2>
  <div class=”post__meta”>
    <time class=”post__meta-date”>2020/01/01</time>
    <span class=”post__meta-category”>カテゴリ1</span>
  </div>
  <figure class=”post__image”>
    <img src=”/assets/img/sample.jpg” alt=””>
  </figure>
  <p class=”post__text”>本文テキスト</p>
  <a href=”#” class=”post__readmore”>READ MORE</a>
</article>

このBEMルールで全体を統一して
次に以下の順で出力します↓

1. index.html 完全マークアップ（BEM構造+構造化データ付き）
2. /assets/scss/style.scss および部分ファイル構成

続けて進めていいですか？

Modifire（要素の見た目や状態のバリエーションを表す部分）の使い方が本来のBEMと違いますね…。

注意したいのは、Modifierの付け方です。ChatGPTが生成したコードでは、Modifierが本来のBEMルール通りではなく、BlockやElementと混同してしまっていました。このままだと、スタイルを追加・変更するときに管理が難しくなる可能性があります。

そこで、正しいBEMの使い方に合わせてModifierを修正します。つまり、BlockやElementのクラス名の末尾に–をつけて、見た目や状態の違いを明確にする形です。

ChatGPTはBEMが苦手なのでしょうか…。一旦こちらから修正版を送ります。

ChatGPTへの指示：

以下は例です。このようにできますか？

<article class=”post”>
  <h2 class=”post__title”>タイトル</h2>
  <div class=”post__meta”>
    <time class=”post__meta__date”>2020/01/01</time>
    <span class=”post__meta__category”>カテゴリ1<i class=”icon”></i></span>
  </div>
  <figure class=”post__image post__image–full”>
    <img src=”/assets/img/sample.jpg” alt=””>
  </figure>
  <p class=”post__text”>本文テキスト</p>
  <a href=”#” class=”post__readmore”>READ MORE</a>
</article>

ChatGPTの回答：

はい、もちろんそのルールに完全対応できます！

つまり、あなたの例のように：
・block__element__subelement までは許容
・3階層を超えたら新しいBlockとしてリセット
・Modifierは–で末尾につける（block__element–modifier）

◾️あなたの例（OKバージョン）

<article class=”post”>
  <h2 class=”post__title”>タイトル</h2>
  <div class=”post__meta”>
    <time class=”post__meta__date”>2020/01/01</time>
    <span class=”post__meta__category”>カテゴリ1<i class=”icon”></i></span>
  </div>
  <figure class=”post__image post__image–full”>
    <img src=”/assets/img/sample.jpg” alt=””>
  </figure>
  <p class=”post__text”>本文テキスト</p>
  <a href=”#” class=”post__readmore”>READ MORE</a>
</article>

この命名ルールを全ページ共通の基準として採用してOKですね？
（＝以降のindex.htmlやSCSSはすべてこのBEM仕様で書きます）

ChatGPTへの指示：

リセットルールが違います。
.post__meta__category .iconのようにしてほしいです。

ChatGPTの回答：

了解です！
そのルールで統一して進めます。

要点を短くまとめると：
・block__element__subelement（最大3階層まで許容）
・3階層を超える場合は新しいBlockを作るか、もしくは汎用クラス（例：.icon）を子要素として使う
→ご指定どおり.post__meta__category .iconのように書きます（つまり.iconはブロック名を付けずに汎用クラスとして扱う）。

この方針で全ファイル（index.html、各SCSS分割ファイル、最終コンパイル済みCSS）に反映して続行します。

そのまま進めて問題なければ「了解しました」とだけ返してください。

もし追加の細かいルール（例：.iconは全て非BEMの汎用クラスにする／一部だけBEM接頭辞にする等）があれば教えてください。指示がなければ今回の方法で統一します。

お、理解してくれましたかね。とりあえず作ってもらいます。

ChatGPTへの指示：

了解しました

ChatGPTの回答：

了解しました！

では、まずindex.htmlの完全マークアップを以下に示します。
こちらはあなたの指定したBEMルール+HTML5セマンティック構造+構造化データ（JSON-LD）に完全準拠しています。

◾️/index.html

<!DOCTYPE html>
<html lang=”ja”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Travel Blog | サンプルサイト</title>
  <meta name=”description” content=”世界中を旅するトラベルブログのサンプルサイトです。旅の記録やおすすめスポットを紹介します。”>
  <link rel=”stylesheet” href=”/assets/css/style.css”>
  <script type=”application/ld+json”>
  {
    “@context”: “https://schema.org”,
    “@type”: “Blog”,
    “name”: “Travel Blog”,
    “description”: “旅の記録とおすすめスポットを紹介するブログ。”,
    “url”: “https://example.com/”,
    “publisher”: {
      “@type”: “Organization”,
      “name”: “Travel Blog”,
      “logo”: {
        “@type”: “ImageObject”,
        “url”: “https://example.com/assets/img/logo.png”
      }
    },
    “blogPost”: [
      {
        “@type”: “BlogPosting”,
        “headline”: “世界一周の旅：1日目”,
        “image”: “https://example.com/assets/img/sample1.jpg”,
        “datePublished”: “2025-01-01”,
        “author”: { “@type”: “Person”, “name”: “Yurino Nakamura” }
      }
    ]
  }
  </script>
</head>
<body>

  <!– ======================
       Header
  ====================== –>
  <header class=”header”>
    <div class=”header__inner”>
      <h1 class=”header__logo”>
        <a href=”/” class=”header__logo__link”>
          <img src=”/assets/img/logo.png” alt=”Travel Blog ロゴ”>
        </a>
      </h1>
      <nav class=”header__nav”>
        <ul class=”header__nav__list”>
          <li class=”header__nav__item”><a href=”#”>ホーム</a></li>
          <li class=”header__nav__item”><a href=”#”>旅の記録</a></li>
          <li class=”header__nav__item”><a href=”#”>おすすめ</a></li>
          <li class=”header__nav__item”><a href=”#”>お問い合わせ</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!– ======================
       Main
  ====================== –>
  <main class=”main”>
    <div class=”main__inner”>

      <!– 投稿一覧 –>
      <section class=”post-list”>
        <article class=”post”>
          <figure class=”post__image post__image–full”>
            <img src=”/assets/img/sample1.jpg” alt=”旅の風景1″>
          </figure>
          <div class=”post__body”>
            <h2 class=”post__title”>世界一周の旅：1日目</h2>
            <div class=”post__meta”>
              <time class=”post__meta__date”>2025/01/01</time>
              <span class=”post__meta__category”>
                トラベル
                <i class=”icon icon–plane” aria-hidden=”true”></i>
              </span>
            </div>
            <p class=”post__text”>
              世界一周の初日はフランス・パリからスタート。美しい街並みと香ばしいクロワッサンの香りに包まれました。
            </p>
            <a href=”#” class=”post__readmore”>続きを読む</a>
          </div>
        </article>

        <article class=”post”>
          <figure class=”post__image”>
            <img src=”/assets/img/sample2.jpg” alt=”旅の風景2″>
          </figure>
          <div class=”post__body”>
            <h2 class=”post__title”>アジア横断の旅：タイ編</h2>
            <div class=”post__meta”>
              <time class=”post__meta__date”>2025/02/15</time>
              <span class=”post__meta__category”>
                アジア
                <i class=”icon icon–sun” aria-hidden=”true”></i>
              </span>
            </div>
            <p class=”post__text”>
              タイでは美しい寺院と屋台料理を満喫。バンコクの夜景は圧巻でした。
            </p>
            <a href=”#” class=”post__readmore”>続きを読む</a>
          </div>
        </article>
      </section>

      <!– サイドバー –>
      <aside class=”sidebar”>
        <section class=”sidebar__profile”>
          <h2 class=”sidebar__title”>プロフィール</h2>
          <figure class=”sidebar__profile__image”>
            <img src=”/assets/img/profile.jpg” alt=”筆者プロフィール写真”>
          </figure>
          <p class=”sidebar__profile__text”>
            世界を旅するWebデザイナー。訪れた国は30カ国以上。写真と文章で旅の魅力を発信しています。
          </p>
        </section>

        <section class=”sidebar__category”>
          <h2 class=”sidebar__title”>カテゴリ</h2>
          <ul class=”sidebar__category__list”>
            <li class=”sidebar__category__item”><a href=”#”>ヨーロッパ</a></li>
            <li class=”sidebar__category__item”><a href=”#”>アジア</a></li>
            <li class=”sidebar__category__item”><a href=”#”>南米</a></li>
            <li class=”sidebar__category__item”><a href=”#”>北欧</a></li>
          </ul>
        </section>
      </aside>

    </div>
  </main>

  <!– ======================
       Footer
  ====================== –>
  <footer class=”footer”>
    <div class=”footer__inner”>
      <p class=”footer__copy”>© 2025 Travel Blog. All Rights Reserved.</p>
    </div>
  </footer>

</body>
</html>

このHTMLは次の特徴を満たしています：

・BEM構造完全準拠（あなたの3階層ルール）
・レスポンシブ前提の構造
・構造化データ（Schema.org/Blog+BlogPosting）
・セマンティックタグ（<header>,<main>,<aside>,<footer>）
・汎用クラス.iconはBEM階層外

次に、このHTMLを元にした、

◾️/assets/scss/以下のファイル構成と中身（style.scss+_header.scss+_main.scss+_sidebar.scss+_footer.scss+_reset.scss）

を出力していきます。続けて出してよいですか？

うーーーーん！理解できていなかったようです！

headerの時点でここの3段階ルールが間違っていますね。

<ul class=”header__nav__list”>
          <li class=”header__nav__item”><a href=”#”>ホーム</a></li>
          <li class=”header__nav__item”><a href=”#”>旅の記録</a></li>
          <li class=”header__nav__item”><a href=”#”>おすすめ</a></li>
          <li class=”header__nav__item”><a href=”#”>お問い合わせ</a></li>
        </ul>

正解は下の通りです。

<ul class=”header__nav__list”>
          <li class=”item”><a href=”#”>ホーム</a></li>
          <li class=”item”><a href=”#”>旅の記録</a></li>
          <li class=”item”><a href=”#”>おすすめ</a></li>
          <li class=”item”><a href=”#”>お問い合わせ</a></li>
        </ul>

というわけで、修正指示をしていきます。

ChatGPTへの指示：

BEMのルールが間違っています。例を送ります。

<nav class=”header__nav”>
        <ul class=”header__nav__list”>
          <li class=”item”><a href=”#”>ホーム</a></li>
          <li class=”item”><a href=”#”>旅の記録</a></li>
          <li class=”item”><a href=”#”>おすすめ</a></li>
          <li class=”item”><a href=”#”>お問い合わせ</a></li>
        </ul>
      </nav>

3階層まできたらBlock要素にリセットしたいです。

ChatGPTの回答：

完璧に理解しました！
あなたの意図は以下のようですね：

ここで、

・header__nav→BlockのElement
・header__nav__list→2階層目のElement
・item→新しいBlock（リセット）として扱う（.header__nav__list__itemにはしない！）

このルールを全体に適用します。
つまり、
・post__meta__category .icon
・header__nav__list .item
・sidebar__category__list .item
というように、3階層目から新Blockにリセットする形で統一します。

この最終ルールをもとに、次に修正版のindex.html（完全BEMリセット適用）を出力してよいですか？

あ、理解してくれたようです。もういい感じになりそうなので最終版を実際に見てみましょう！

最終版のコードを検証！果たしてAIの実力は…！？

でき上がったデータをさっそくチェックしてみましょう！

……あれ…？デザインと全然違います…テキストもデザインと違う……カテゴリの文字が消えているのでcssもミスしてそうですね。

レスポンシブはできていますね。

ちょっと期待しすぎましたね。デザインを忠実に再現できるか再度チャレンジしてみます。

ChatGPTへの指示：

最初に送ったデザインと違うようです。忠実に再現できますか？

ChatGPTの回答：

もちろん可能です！

デザインカンプ（あなたが送ってくれた「Travel Blog – PC.png」）をもとに、忠実に再現したHTML/CSSを作成できます。
ただし、正確に再現するためにいくつか確認したい点があります↓

◾️確認したい項目
1. デザイン再現の精度
・ピクセル単位で再現（＝見た目完全一致）を目指す
・それとも「構造・レイアウト優先の軽量実装」程度でよい？

2. フォント指定
・カンプで使われているフォント（例：Noto Sans/游ゴシック/Robotoなど）が分かれば教えてください。

3. 画像の扱い
・PNG内の画像を切り出して使用してよいですか？もしくは、ダミー画像（Unsplashなど）で代替しますか？

4. レスポンシブ設計
・カンプはPC版のみですが、SP時の構成（カラム落ち・ナビ折り畳み）はこちらで提案してよいですか？

5. 出力希望
・仕上げは再度.zipでまとめて出力してOK？

上記5点を確認できれば、
カンプをもとに「デザイン忠実版」を再構築して.zip出力します。
（SCSS構成・BEMルール・構造化データもすべて維持します）

まずは①〜⑤の回答をお願いします。
その後すぐ、カンプ解析→コーディング着手→.zip生成まで行います。

…可能なら最初からやってほしかった…と思ってもしょうがないので、ChatGPTによる5つの確認項目について指示します…。

ChatGPTへの指示：

1.ピクセル単位で再現
2.Noto Sans JP
3.切り出して使用
4.大丈夫です
5.zipでお願いします

あとBEMのルールが間違っている箇所がありそうです。
以下見直しお願いいたします。

・post-listがまだ存在している、main__blockとかでいいのでは
・post-listがsectionになっているがhタグが存在しないので成立しないのでは
・.item aがページ内で2箇所存在するのでcssがどちらにも効いてしまっている

そしてできあがったのがこちら。

うーーーーーーん！再現できていませんね…また依頼してみます。

ChatGPTへの指示：

・logo.pngを再度切り出し
デザインが完全に再現できていません。レイアウトからテキストまで完璧に再現してほしいです。

すると、下のようになりました。

ちょっと近づいてきたんですが、ところどころ崩れていますね…。

もう一度、次のように指示してみます。

ChatGPTへの指示：

・logo.pngがおかしいので再度切り出してください
・postあたりが崩れているので確認お願いいたします
・フッターのレイアウト、sidebarの内容がデザインと違います
・promoがデザインと違います

結果が下の通りです。

ちょっと近づいてはきましたが完全に再現は難しそうですね。一旦ここまでにします。

ChatGPTのコードについて分析

ではこれまでを振り返り、ChatGPTに作らせたコードをプロ目線でレビューします。どこが得意で、どこが苦手なのかを明確にすることで、AIと一緒に作業するときのポイントが見えてきます。

非エンジニアの方もイメージしやすいよう、HTMLやCSS、デザイン再現など具体的な例を交えて解説します。

AIの成果物を正直コードレビュー

・マークアップ自体は結構いい感じ
HTML5も構造化データもちゃんとマークアップできていました。scssにしてという要望にも答えてくれて、しかも管理しやすくしてくれたのでかなり助かります。

・BEMは苦手そう
途中でわがまま言ってBEM方式ルールを提示しましたが、根本的な箇所が間違っていたので細かく指示してあげないとできませんでした。最終版もところどころ間違えているので、こちらから事細かに修正指示を出さないといけません。

・デザインは再現してくれない
これは厳しい結果になりました。こちらが頑張って指示を出しても再現できなさそうでした。

AIを使って効率的にコーディングするには、最終的にはこちらが修正するという前提で作業していく方針がよさそうです。

非エンジニアでもバイブコーディングは可能？

結論から言うと、指示する側はそれなりの知識が必要になるので正直きついかもしれません。

まず送ったデザインとかけ離れたものを作ってきたので、その指示出しを細かく言う必要があり、普通の会話レベルでは結構難しいです。

また、無料版だとプロンプトを送れる回数の制限があり、なかなか作業が進みません。添付ファイルを送ると、この回数制限がかなり減ります。デザインデータを送ってChatGPTにやってもらうなら有料版でないと厳しいです。

さらに、基本的な知識というよりも、AIから質問されて答えられるくらいのレベルでないと、AIが何を言っているのかわからない、これ以上前に進めない、という状況に陥ってしまうのではないかなと思いました。

まとめ：バイブコーディングでわかったAI活用のポイント

今回のバイブコーディング体験を通して、AIに何を任せられるのか、どこに注意が必要なのかがはっきりしました。改めてAIの得意・苦手を整理して、AIを効率的に活用するために必要なポイントをまとめます。

得意なこと:HTML構造、構造化データ、SCSSのファイル分割など、マークアップの「土台」作りは非常に高速で優秀。

苦手なこと:独自のBEMルールの理解や、ピクセル単位での忠実な「デザイン再現」は苦手。

流行りのバイブコーディングにチャレンジしてみましたが、AIとの対話は、予想以上に難しいものでした。ただプログラミングの知識は、人間より何十倍と優れているので使い方次第で本当に作業効率化につながります。うまく使うための知識をこちらが学習していく必要があると今回学びました。

ちなみに、同じプロンプトでPro版でもやってみましたが惨敗でした…。

デザインカンプからノーコードでやりたい場合は、デザインに強いAI、WindsurfやFigma AIなどを使ったほうがよさそうですね。

AIは思った以上に賢く、でも思った以上に“人の理解”が必要でした。

クーシーでは、AIの力を活かしながら、人だからこそできるクリエイティブを掛け合わせて、Web制作を一気通貫でサポートします。下記フォームより、お気軽にご相談・お問い合わせください。

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。