資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

【効率3倍！】Cursor AIエディタでWeb制作を劇的に効率化｜実践テクニックと活用法を徹底解説

AI

この記事でわかること

  • Cursor AIエディタの主要5機能と具体的な使い方
  • HTML・CSS・JavaScriptの生成など、Web制作での7つの活用シーン
  • VS Code + GitHub Copilotとの機能・料金比較
  • 無料プランから始める手順（5ステップ）
  • AIコーディングで失敗しないための注意点とベストプラクティス
生徒

最近AIコーディングツールが話題ですが、Cursor AIエディタって実際どうなんですか？Web制作で使えますか？

ペン博士

よーく聞くんだぞ。Cursor AIは、コーディング効率を3倍以上にできる革命的なツールじゃ。今日は実践的な活用法を詳しく解説するぞい！

結論から言うと、Cursor AIはWeb制作の生産性を2〜3倍に高められるAI統合エディタです。HTML構造の生成、CSS自動作成、JavaScriptのデバッグ支援まで、自然言語の指示一つで対応します。VS Codeユーザーなら既存設定をそのまま引き継げるため、移行コストもほぼゼロです。

目次

Cursor AIエディタとは？

Cursorの特徴

Cursor AIは、VS Code（Visual Studio Code）をベースに開発された、AI機能が深く統合された次世代コードエディタです。GPT-4などの大規模言語モデルを活用し、開発者のコーディング作業を強力にサポートします。

Cursor AIの3つの特徴

1. VS Codeとの完全な互換性

Cursor AIは、VS Codeのフォークとして開発されているため、以下が可能です。

  • 既存のVS Code設定をそのまま引き継ぎ
  • 拡張機能（Extensions）の継続利用
  • キーボードショートカットの互換性
  • テーマとカラースキームの移行

これにより、VS Codeユーザーは学習コストをほぼゼロで移行できます。

2. 深く統合されたAI機能

GitHub Copilotなどの拡張機能とは異なり、Cursor AIは以下のAI機能がエディタに深く統合されています。

  • コード補完：リアルタイムでのインテリジェントな補完
  • コード生成：自然言語からのコード自動生成
  • コード編集：既存コードの自動リファクタリング
  • バグ修正：エラー検出と修正提案
  • ドキュメント生成：コメントとドキュメントの自動作成

3. コードベース全体を理解するコンテキスト対応

Cursor AIは、単一のファイルだけでなく、プロジェクト全体のコンテキストを理解します。これにより、以下が可能になります。

  • 他のファイルとの整合性を保ったコード生成
  • プロジェクト全体の命名規則に従った提案
  • 既存のコンポーネントやスタイルの再利用提案

Cursor AIの5つの主要機能

5つの主要機能

機能1：AI Chat（Ctrl + L）

エディタ内でAIとチャット形式で対話しながら開発を進められます。

活用例

【質問例】
User: このReactコンポーネントにダークモード切り替え機能を追加したい

AI: Context-Providerパターンでダークモードを実装します。
以下のコードを追加してください：

// ThemeContext.js
import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  return (
    <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

機能2：AI Edit（⌘ + K / Ctrl + K）

選択したコードに対して、自然言語で編集指示を出せます。

実践例

【編集前のコード】
<div class="container">
  <h1>Welcome</h1>
  <p>This is a paragraph</p>
</div>

【指示】
⌘ + K → "Flexboxを使って中央配置にして、レスポンシブ対応も追加"

【編集後のコード】
<div class="container">
  <h1>Welcome</h1>
  <p>This is a paragraph</p>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0.5rem;
  }

  .container h1 {
    font-size: 1.5rem;
  }
}
</style>

機能3：Tab補完（インテリジェント コード補完）

コンテキストを理解した高精度なコード補完機能です。GitHub Copilotよりも精度が高いと評価されています。

補完例

【入力】
// ハンバーガーメニューのトグル関数を作成

【Tab補完の結果】
// ハンバーガーメニューのトグル関数を作成
const toggleHamburgerMenu = () => {
  const menu = document.querySelector('.hamburger-menu');
  const menuIcon = document.querySelector('.menu-icon');

  menu.classList.toggle('active');
  menuIcon.classList.toggle('open');

  // アクセシビリティ対応
  const isExpanded = menu.classList.contains('active');
  menuIcon.setAttribute('aria-expanded', isExpanded);
};

機能4：Composer（複数ファイル編集）

一度の指示で、複数のファイルにまたがる変更を自動的に適用できます。

活用シーン

【指示】
"このプロジェクトに、ダークモード機能を追加して。
必要なファイルを作成・編集して、全体で統一された実装にして。"

【Cursorの自動実行】
✓ ThemeContext.js を作成
✓ App.js にThemeProviderを追加
✓ Header.js にダークモード切り替えボタンを追加
✓ globals.css にダークモード用のCSSカスタムプロパティを追加
✓ すべてのコンポーネントでテーマ切り替えに対応

【結果】
5つのファイルが自動的に編集され、統一されたダークモード機能が実装される

機能5：@コマンド（コンテキスト指定）

チャット内で@記号を使って、特定のファイルやフォルダ、ドキュメントを参照できます。

コマンド一覧

@ファイル名      → 特定のファイルを参照
@フォルダ名      → フォルダ全体を参照
@web            → Web検索結果を参照
@docs           → 公式ドキュメントを参照
@codebase       → プロジェクト全体を参照
@git            → Git履歴を参照

【使用例】
User: @components/Header.js のスタイルを @styles/theme.css のデザインシステムに合わせて修正して

Web制作での7つの活用シーン

Web制作の活用シーン

シーン1：HTML構造の高速生成

デザインカンプやワイヤーフレームから、セマンティックなHTMLを自動生成できます。

【指示（⌘ + K）】
"ヘッダー（ロゴ、ナビゲーション5項目、ハンバーガーメニュー）、
ヒーローセクション（見出し、説明文、2つのCTAボタン）、
特徴セクション（3カラムのカード）のHTMLを作成。
アクセシビリティとSEOに配慮すること。"

【生成されるコード】
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webサイト</title>
</head>
<body>
  <header class="site-header">
    <div class="header-container">
      <a href="/" class="logo" aria-label="ホームに戻る">
        <img src="logo.svg" alt="ロゴ">
      </a>

      <nav class="main-nav" aria-label="メインナビゲーション">
        <ul>
          <li><a href="#about">会社概要</a></li>
          <li><a href="#services">サービス</a></li>
          <li><a href="#case-studies">導入事例</a></li>
          <li><a href="#pricing">料金</a></li>
          <li><a href="#contact">お問い合わせ</a></li>
        </ul>
      </nav>

      <button class="hamburger" aria-label="メニューを開く" aria-expanded="false">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>

  <main>
    <section class="hero">
      <h1>ビジネスを加速させるWebソリューション</h1>
      <p>最新のテクノロジーで、あなたのビジネスを次のステージへ</p>
      <div class="cta-buttons">
        <a href="#contact" class="btn btn-primary">無料相談する</a>
        <a href="#case-studies" class="btn btn-secondary">導入事例を見る</a>
      </div>
    </section>

    <section class="features">
      <h2>選ばれる3つの理由</h2>
      <div class="features-grid">
        <article class="feature-card">
          <h3>高速開発</h3>
          <p>最新のフレームワークとツールで、開発期間を50%短縮</p>
        </article>
        <article class="feature-card">
          <h3>高品質</h3>
          <p>厳格なコードレビューとテストで、堅牢なシステムを構築</p>
        </article>
        <article class="feature-card">
          <h3>充実サポート</h3>
          <p>リリース後も継続的なサポートで、安心して運用可能</p>
        </article>
      </div>
    </section>
  </main>
</body>
</html>

シーン2：CSSレイアウトの自動生成

Flexbox、Grid、レスポンシブデザインなど、モダンなCSSレイアウトを自動生成できます。

【指示】
"上記のHTMLに対して、以下の要件でCSSを作成：
・モダンでクリーンなデザイン
・Flexbox/Grid使用
・モバイルファースト
・タブレット（768px）、PC（1024px）のブレークポイント
・BEM記法"

【生成されるCSS】
/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* カスタムプロパティ */
:root {
  --primary-color: #3498db;
  --secondary-color: #2c3e50;
  --text-color: #333;
  --bg-color: #f8f9fa;
  --container-width: 1200px;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
}

/* ヘッダー */
.site-header {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-nav ul {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
}

.main-nav a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s;
}

.main-nav a:hover {
  color: var(--primary-color);
}

/* ハンバーガーメニュー（モバイル） */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: var(--text-color);
  transition: 0.3s;
}

/* ヒーローセクション */
.hero {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--spacing-md);
}

.hero p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: var(--spacing-lg);
  max-width: 600px;
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s, box-shadow 0.3s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-primary {
  background: white;
  color: var(--primary-color);
}

.btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

/* 特徴セクション */
.features {
  padding: var(--spacing-xl) var(--spacing-md);
  max-width: var(--container-width);
  margin: 0 auto;
}

.features h2 {
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--spacing-xl);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.feature-card {
  padding: var(--spacing-lg);
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

/* タブレット */
@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* モバイル */
@media (max-width: 480px) {
  .hero {
    min-height: 400px;
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

シーン3：JavaScriptインタラクションの実装

スムーススクロール、フォームバリデーション、アニメーションなど、一般的なインタラクションを自動生成できます。

【指示】
"ハンバーガーメニューのトグル機能、スムーススクロール、
フォームバリデーション（メール形式チェック、必須項目チェック）を実装して"

【生成されるJavaScript】
// ハンバーガーメニュートグル
const hamburger = document.querySelector('.hamburger');
const mainNav = document.querySelector('.main-nav');

hamburger.addEventListener('click', () => {
  mainNav.classList.toggle('active');
  const isExpanded = mainNav.classList.contains('active');
  hamburger.setAttribute('aria-expanded', isExpanded);

  // アニメーション
  const spans = hamburger.querySelectorAll('span');
  spans[0].style.transform = isExpanded ? 'rotate(45deg) translate(5px, 5px)' : '';
  spans[1].style.opacity = isExpanded ? '0' : '1';
  spans[2].style.transform = isExpanded ? 'rotate(-45deg) translate(7px, -6px)' : '';
});

// スムーススクロール
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    if (targetId === '#') return;

    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });

      // ハンバーガーメニューを閉じる
      if (mainNav.classList.contains('active')) {
        hamburger.click();
      }
    }
  });
});

// フォームバリデーション
const form = document.querySelector('#contact-form');

if (form) {
  form.addEventListener('submit', (e) => {
    e.preventDefault();

    // エラーメッセージをクリア
    clearErrors();

    // バリデーション
    const name = form.querySelector('#name');
    const email = form.querySelector('#email');
    const message = form.querySelector('#message');

    let isValid = true;

    // 名前チェック
    if (name.value.trim() === '') {
      showError(name, '名前を入力してください');
      isValid = false;
    }

    // メールチェック
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (email.value.trim() === '') {
      showError(email, 'メールアドレスを入力してください');
      isValid = false;
    } else if (!emailPattern.test(email.value)) {
      showError(email, '有効なメールアドレスを入力してください');
      isValid = false;
    }

    // メッセージチェック
    if (message.value.trim() === '') {
      showError(message, 'メッセージを入力してください');
      isValid = false;
    }

    if (isValid) {
      // フォーム送信処理
      console.log('フォーム送信:', {
        name: name.value,
        email: email.value,
        message: message.value
      });
      form.reset();
      alert('お問い合わせありがとうございます。');
    }
  });
}

function showError(input, message) {
  const formGroup = input.parentElement;
  const error = document.createElement('span');
  error.className = 'error-message';
  error.textContent = message;
  formGroup.appendChild(error);
  input.classList.add('error');
}

function clearErrors() {
  document.querySelectorAll('.error-message').forEach(el => el.remove());
  document.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
}

シーン4：レスポンシブ対応の一括修正

既存のデスクトップ専用サイトを、レスポンシブ対応に一括変換できます。

【指示（Composer使用）】
"このプロジェクト全体をレスポンシブ対応にして。
・モバイルファーストアプローチ
・タッチデバイス対応
・画像の最適化（srcset使用）
・フォントサイズはclamp()関数で可変に"

【Cursorの実行】
✓ 全CSSファイルにメディアクエリを追加
✓ 固定幅をmax-width、flexbox、gridに変更
✓ フォントサイズをclamp()関数に変更
✓ 画像タグにsrcset属性を追加
✓ タッチイベントハンドラを追加
✓ viewport meta tagを確認・追加

【結果】
10ファイルが自動的にレスポンシブ対応に変換される

シーン5：コードレビューとリファクタリング

既存のコードを分析し、改善提案とリファクタリングを自動で行います。

【指示（Chat機能）】
"@src/components/ProductList.js をレビューして。
パフォーマンス、可読性、保守性の観点で改善提案を出して。"

【AIの分析結果】
このコードには以下の改善点があります：

1. **パフォーマンス問題**
   - 不要な再レンダリングが発生（React.memo未使用）
   - useEffect内で毎回新しい関数を生成

   修正案：
   ```javascript
   import React, { memo, useCallback } from 'react';

   const ProductList = memo(({ products, onProductClick }) => {
     const handleClick = useCallback((id) => {
       onProductClick(id);
     }, [onProductClick]);

     return (
       <div className="product-list">
         {products.map(product => (
           <ProductCard
             key={product.id}
             product={product}
             onClick={handleClick}
           />
         ))}
       </div>
     );
   });
   ```

2. **可読性の問題**
   - マジックナンバーが多い
   - 変数名が不明確

   修正案：
   ```javascript
   const MAX_PRODUCTS_PER_PAGE = 20;
   const PRODUCT_CACHE_DURATION = 5 * 60 * 1000; // 5分
   ```

3. **保守性の問題**
   - エラーハンドリングが不足
   - TypeScriptの型定義がない

   修正案：
   ```typescript
   interface Product {
     id: string;
     name: string;
     price: number;
     imageUrl: string;
   }

   interface ProductListProps {
     products: Product[];
     onProductClick: (id: string) => void;
   }
   ```

シーン6：ドキュメントとコメントの自動生成

複雑な関数やコンポーネントに、わかりやすいコメントとドキュメントを自動追加できます。

【指示】
"この関数にJSDocコメントを追加して"

【元のコード】
function calculateShippingCost(items, destination, isPremium) {
  let baseCost = 500;
  if (items.length > 5) baseCost += 200;
  if (destination === 'overseas') baseCost *= 3;
  if (isPremium) baseCost *= 0.5;
  return baseCost;
}

【AIが追加するコメント】
/**
 * 配送料を計算する
 *
 * @param {Array<Object>} items - 配送する商品の配列
 * @param {string} destination - 配送先（'domestic' または 'overseas'）
 * @param {boolean} isPremium - プレミアム会員かどうか
 * @returns {number} 配送料（円）
 *
 * @example
 * const cost = calculateShippingCost(
 *   [{id: 1}, {id: 2}],
 *   'domestic',
 *   false
 * );
 * // returns 500
 *
 * @description
 * 基本配送料は500円。
 * - 商品数が6個以上の場合：+200円
 * - 海外配送の場合：3倍
 * - プレミアム会員の場合：50%割引
 */
function calculateShippingCost(items, destination, isPremium) {
  let baseCost = 500;
  if (items.length > 5) baseCost += 200;
  if (destination === 'overseas') baseCost *= 3;
  if (isPremium) baseCost *= 0.5;
  return baseCost;
}

シーン7：バグ修正とデバッグ支援

エラーメッセージやバグを分析し、修正案を提示します。

【エラーが発生】
Uncaught TypeError: Cannot read property 'map' of undefined
  at ProductList.render (ProductList.js:15)

【Chatで質問】
User: "このエラーの原因と修正方法を教えて"

【AIの回答】
このエラーは、`products`プロパティが`undefined`の状態で
`.map()`メソッドを呼び出そうとしているために発生しています。

原因：
1. 親コンポーネントからpropsが正しく渡されていない
2. 非同期データ取得中にレンダリングされている
3. propsのデフォルト値が設定されていない

修正案：

```javascript
// 方法1：デフォルト値を設定
const ProductList = ({ products = [] }) => {
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

// 方法2：条件付きレンダリング
const ProductList = ({ products }) => {
  if (!products || products.length === 0) {
    return <p>商品がありません</p>;
  }

  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

// 方法3：ローディング状態を追加
const ProductList = ({ products, isLoading }) => {
  if (isLoading) return <LoadingSpinner />;
  if (!products) return <ErrorMessage />;
  if (products.length === 0) return <EmptyState />;

  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};
```

推奨は方法3です。ユーザー体験が最も良くなります。
```

VS Codeとの詳細比較

CursorとVS Code
生徒

VS Codeから乗り換える価値はありますか？どう違うんですか？

ペン博士

良い質問じゃ！両者の違いを詳しく見ていくぞい

機能比較表

機能VS Code + GitHub CopilotCursor AI
コード補完優秀（単一行中心）非常に優秀（複数行、コンテキスト理解）
コード生成コメントベース自然言語での詳細指示が可能
コード編集拡張機能が必要⌘ + K で直接編集指示
チャット機能Copilot Chatが別途必要Ctrl + L で統合チャット
複数ファイル編集手動Composerで自動
コンテキスト理解現在のファイル中心プロジェクト全体を理解
@コマンド限定的豊富（@web, @docs, @git等）
料金Copilot: $10/月Pro: $20/月（より高機能）
無料プランなしあり（月200回 GPT-3.5）

どちらを選ぶべきか

VS Code + GitHub Copilotが向いている人

  • すでにVS Codeの環境を完璧に構築している
  • 基本的なコード補完だけで十分
  • 予算を抑えたい（$10/月）
  • Microsoft製品に統一したい

Cursor AIが向いている人

  • AIを最大限活用してコーディング効率を上げたい
  • 自然言語でコード生成・編集したい
  • 複数ファイルにまたがる変更を自動化したい
  • プロジェクト全体のコンテキストを理解したAI支援が欲しい
  • まず無料で試してから判断したい

Web制作の実務では、Cursor AIの方が圧倒的に効率化できるケースが多いです。特に、LP制作、コーポレートサイト、ECサイトなど、定型的なパターンが多い案件では、生産性が2〜3倍になることも珍しくありません。

料金プランと始め方

始め方の手順

料金プラン詳細

プラン料金GPT-4利用GPT-3.5向いている人
Free$0月50回（低速）月200回まず試してみたい初心者
Pro$20/月月500回（高速）無制限プロフェッショナル・フリーランス
Business$40/月（ユーザーあたり）すべてのPro機能無制限チーム開発・制作会社

ProプランではClaude 3.5 Sonnetも利用可能で、優先サポートが付きます。Businessプランではチーム管理機能、コードベースの共有、セキュリティ強化が追加されます。

Cursor AIの始め方（5ステップ）

ステップ1：ダウンロードとインストール

1. 公式サイトにアクセス：https://cursor.sh/
2. 「Download for Mac/Windows/Linux」をクリック
3. ダウンロードしたファイルを実行
4. インストーラーの指示に従って完了

ステップ2：VS Code設定のインポート

初回起動時に表示される画面で：
1. "Import VS Code Settings" を選択
2. 設定、拡張機能、キーバインディングが自動的にインポートされる
3. 数秒で完了

ステップ3：アカウント作成とプラン選択

1. メールアドレスまたはGitHubアカウントでサインアップ
2. 無料プランで開始（クレジットカード不要）
3. 必要に応じて後からProプランにアップグレード可能

ステップ4：基本操作の習得

最初に覚えるべき3つのショートカット：

1. Ctrl + L（Windows）/ Cmd + L（Mac）
   → AIチャットを開く

2. Ctrl + K（Windows）/ Cmd + K（Mac）
   → 選択したコードをAIで編集

3. Tab
   → AI補完を受け入れる

ステップ5：実践練習

【練習課題1】
新規HTMLファイルを作成し、⌘ + K で以下を指示：
"レスポンシブ対応のプロフィールカードを作成して"

【練習課題2】
Ctrl + L でチャットを開き、質問：
"Flexboxで3カラムレイアウトを作る方法を教えて"

【練習課題3】
既存のCSSファイルを開き、⌘ + K で指示：
"このCSSをモバイルファーストに書き換えて"

注意点とベストプラクティス

使う際の注意点

Cursor AIを使う上での5つの注意点

1. AIの出力を盲目的に信じない

AIが生成したコードは必ずレビューし、理解してから使用しましょう。

【悪い例】
AIが生成したコードをコピー＆ペーストするだけ
→ セキュリティホール、パフォーマンス問題が混入する可能性

【良い例】
1. AIの出力を読んで理解する
2. 必要に応じて修正・改善する
3. テストして動作を確認する
4. コミット前に再度レビューする

2. 詳細な指示ほど精度が高い

曖昧な指示ではなく、具体的で詳細な指示を心がけましょう。

【❌ 悪い指示】
"ボタンを作って"

【✅ 良い指示】
"以下の仕様でボタンコンポーネントを作成：
・プライマリ、セカンダリ、ダンジャーの3バリエーション
・サイズはsmall、medium、largeの3種類
・ホバー時にアニメーション
・アクセシビリティ対応（ARIA属性、キーボード操作）
・TypeScriptの型定義も含める"

3. セキュリティとプライバシーに配慮

機密情報を含むコードは、AIに送信しないよう注意が必要です。

【送信してはいけない情報】
・APIキー、パスワード、トークン
・個人情報、顧客データ
・企業の機密コード
・未公開の製品情報

【対策】
1. .env ファイルは .cursorignore に追加
2. 機密情報はコメントアウトしてから質問
3. ビジネスプランでプライバシーモードを使用

4. 大枠AI生成、細部手動調整の原則

完全自動化を目指すのではなく、AIと人間の役割分担を意識しましょう。

【AIに任せる部分】
・基本的なHTML構造
・CSSレイアウトの雛形
・定型的なJavaScript処理
・テストコードの雛形

【人間が調整する部分】
・デザインの細部（余白、色、フォント）
・ユーザー体験の最適化
・パフォーマンスチューニング
・ブランドガイドラインへの適合

5. バージョン管理を必ず使用

AIが大幅な変更を加える前に、Gitでコミットしておきましょう。

【推奨ワークフロー】
1. 現在の状態をコミット
2. AIで大規模な変更を実施
3. 変更内容を確認
4. 問題があればgit resetで戻す
5. 問題なければコミット

これにより、いつでも元の状態に戻せる安全性を確保

効率を最大化する5つのベストプラクティス

1. プロンプトライブラリを作成

よく使う指示をテンプレート化して保存しておきましょう。

【例：レスポンシブコンポーネント生成プロンプト】
"以下の仕様でReactコンポーネントを作成：
・TypeScript使用
・モバイルファースト
・Tailwind CSS使用
・アクセシビリティ対応（WCAG 2.1 AA）
・Storybook用のストーリーも作成
・ユニットテストも含める

コンポーネント仕様：
[ここに具体的な仕様を記入]"

2. @コマンドを積極活用

【活用例】
"@styles/globals.css のカラーパレットを使って、
@components/Button.tsx を作成して"

"@web Next.js 14のApp Routerでの認証実装方法"

"@docs Tailwindのダークモード実装"

3. Rules for AIを設定

プロジェクトルートに .cursorrules ファイルを作成し、プロジェクト固有のルールを定義します。

【.cursorrules の例】
# コーディング規約
- 関数コンポーネントを使用
- TypeScriptを使用し、anyは禁止
- CSSはTailwind CSSを使用
- 命名規則：camelCaseを使用
- コメントは日本語で記述

# ファイル構成
- コンポーネントは src/components/ に配置
- 型定義は src/types/ に配置
- ユーティリティは src/utils/ に配置

# アクセシビリティ
- すべての画像にalt属性を付ける
- ボタンには適切なaria-label
- キーボード操作に対応

# パフォーマンス
- 画像はNext.js の Image コンポーネントを使用
- 動的インポートを活用
- useMemo, useCallback を適切に使用

4. インクリメンタルな開発

一度に大きな機能を依頼するのではなく、小さな単位で段階的に開発しましょう。

【❌ 悪い例】
"ECサイト全体を作って"

【✅ 良い例】
ステップ1: "商品カードコンポーネントを作成"
ステップ2: "商品一覧ページを作成"
ステップ3: "フィルター機能を追加"
ステップ4: "検索機能を追加"
ステップ5: "カート機能を追加"

各ステップで確認とテストを行い、確実に進める

5. AIとペアプログラミング

AIを「アシスタント」として捉え、対話しながら開発を進めましょう。

【対話例】
User: "このフォームのバリデーションロジックを追加したいんだけど"

AI: "わかりました。どのようなバリデーションが必要ですか？"

User: "メールアドレス、電話番号、郵便番号のフォーマットチェックと、
      必須項目のチェック"

AI: "了解です。以下のバリデーション関数を作成します…"

User: "エラーメッセージは日本語で、フィールドの下に表示したい"

AI: "修正しました。エラーメッセージコンポーネントも追加します…"

このように段階的に要件を詰めていくことで、
より正確な実装が可能になります。

よくある質問

Cursor AIはプログラミング初心者でも使えますか？

はい、使えます。無料プランで始められ、自然言語で指示できるためコーディング経験が少なくても活用できます。ただし、AIが生成したコードを理解するために、HTML・CSS・JavaScriptの基礎知識はあった方が適切に使いこなせます。生成されたコードをそのまま使うのではなく、内容を理解して活用することが重要です。

VS CodeからCursor AIへの移行は難しいですか？

ほぼ手間なく移行できます。初回起動時に「Import VS Code Settings」を選択するだけで、設定・拡張機能・キーボードショートカットが自動的に引き継がれます。UI・操作感はVS Codeとほぼ同じため、既存のワークフローを変える必要はありません。

Cursor AIを使うと本当に効率が上がりますか？

LP制作やコーポレートサイトなど定型的なパターンが多い案件では、生産性が2〜3倍になる事例が報告されています。ただし、効率化の幅はプロンプトの質（指示の具体性）に大きく依存します。詳細で具体的な指示を出すほど、精度の高いコードが生成されます。使い込むほど効果が上がるツールです。

Cursor AIに機密情報を送っても安全ですか？

APIキー・パスワード・個人情報・顧客データなどの機密情報はCursor AIに送信しないでください。.envファイルは必ず.cursorignoreに追加して除外しましょう。Businessプランではプライバシーモードが利用可能で、コードがAIのトレーニングに使用されない設定にできます。

GitHub Copilotとどちらがおすすめですか？

Web制作の実務用途であればCursor AIをおすすめします。Composerによる複数ファイル一括編集、プロジェクト全体のコンテキスト理解、@コマンドによる柔軟なコンテキスト指定など、Web制作で頻出の作業に直結する機能が充実しています。月$20のProプランはGitHub Copilotより高いですが、機能の充実度を考えると費用対効果が高いと言えます。

まとめ

Cursor AIは、Web制作のコーディング効率を大幅に向上させるAI統合エディタです。VS Codeユーザーはほぼゼロコストで移行でき、無料プランから試せる点も魅力です。

  • AI Chat（Ctrl+L）・AI Edit（⌘+K）・Tab補完・Composer・@コマンドの5機能が核心
  • HTML生成、CSS自動作成、JSインタラクション、レスポンシブ一括対応、コードレビューなど7シーンで即戦力
  • VS Code + GitHub Copilotより高機能で、LP・コーポレート・EC案件で生産性2〜3倍の報告あり
  • 無料プランは月200回GPT-3.5利用可能。Proプランは$20/月でGPT-4月500回（高速）
  • AIの出力は必ずレビューし、機密情報は送らず、Gitでこまめにコミットすることが安全な活用の基本
  • .cursorrulesファイルでプロジェクト固有ルールを設定すると、精度がさらに向上する

関連記事

参考リンク（公式・一次情報）

WithCodeを体験できる初級コース公開中！

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

  • 期間：1週間
  • 学習内容：
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →
AI

この記事を書いた人

WithCode 編集部のアバター WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

関連記事

  1. ホーム
  2. AI
  3. 【効率3倍！】Cursor AIエディタでWeb制作を劇的に効率化｜実践テクニックと活用法を徹底解説

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次