AI時代こそ基礎が武器になる――Web制作のブラックボックスを解消すべき3つの理由

比較サンプルコード:AIと人間の違いを可視化する

ここでは、実際のコード例で「AI生成コード」と「基礎知識をもった人間が最適化したコード」の違いを見ていきましょう。

ケーススタディ:ブログ記事一覧ページ

<div class="container-wrapper">
  <div class="section-header-container">
    <div class="title-box">
      <h2 class="section-title-text">最新記事</h2>
    </div>
  </div>
  <div class="articles-container-wrapper">
    <div class="article-card-box">
      <div class="article-image-container">
        <img src="image1.jpg" 
             class="article-thumbnail-image">
      </div>
      <div class="article-content-wrapper">
        <div class="article-title-box">
          <h3 class="article-title-text">
            記事タイトル1
          </h3>
        </div>
        <div class="article-description-container">
          <p class="article-excerpt-text">
            記事の概要が入ります...
          </p>
        </div>
      </div>
    </div>
    <!-- 以下、article-card-boxが繰り返される -->
  </div>
</div>

.container-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section-header-container {
  margin-bottom: 30px;
}

.title-box {
  text-align: center;
}

.section-title-text {
  font-size: 32px;
  color: #333333;
  font-weight: bold;
}

.articles-container-wrapper {
  display: flex;
  gap: 20px;
}

.article-card-box {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
}

/* ...以下、延々と続く */

問題点:

<section class="latest-articles" 
         aria-labelledby="latest-heading">
  <h2 id="latest-heading">最新記事</h2>
  
  <div class="article-grid">
    <article class="article-card">
      <img src="image1.jpg" 
           alt="記事タイトル1のサムネイル画像" 
           class="article-thumbnail">
      <div class="article-body">
        <h3>記事タイトル1</h3>
        <p>記事の概要が入ります...</p>
        <a href="/article1" class="read-more">
          続きを読む
        </a>
      </div>
    </article>
    <!-- 以下、articleが繰り返される -->
  </div>
</section>

:root {
  --color-primary: #333;
  --color-bg: #fff;
  --spacing-unit: 1.25rem;
  --shadow-default: 0 2px 8px rgba(0,0,0,0.1);
}

.latest-articles {
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--spacing-unit);
}

.latest-articles h2 {
  font-size: 2rem;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-unit);
}

.article-card {
  background: var(--color-bg);
  border-radius: 8px;
  box-shadow: var(--shadow-default);
  overflow: hidden;
}

.article-thumbnail {
  width: 100%;
  height: auto;
  display: block;
}

.article-body {
  padding: var(--spacing-unit);
}

.article-body h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.read-more {
  color: var(--color-primary);
  text-decoration: underline;
}