【AI搭載エディタ】Cursorエディタとは？導入・使い方から制作を効率化するプロンプト（指示）を徹底紹介！

2024.9.16

その他

こんにちはNNCの中里です！

Web制作を効率よく行うためCursorエディタを導入しようと考えている方に向け、導入から作業効率化の役に立つプロンプトまでを紹介します。
すでに導入済みの方でプロンプトをご覧いただきたい方は、目次からプロンプトの紹介へ移動してください。

1 Cursorエディタとは
2 Cursorエディタのダウンロードとインストール
- 2.1 インストール時のポイント
3 Cursorエディタの使い方
- 3.1 AI機能の使い方
4 Cursor おすすめプロンプト（指示）- HTML編 –
5 Cursor おすすめプロンプト（指示）- CSS編 –
6 Cursorエディタの便利なショートカット（随時更新）
7 まとめ

Cursorエディタとは

Cursorエディタは、AIを活用したコードエディタです。
大きな特徴としてVS Codeをベースに作られているため、VS Codeの設定やインストール済みのパッケージをそのまま引き継ぐことができます！
特に、ソフトウェア開発やWeb制作の効率化を目的として設計されています。
AIがコードの補完や生成、最適化のサポートを行うため、開発者は少ない入力で高品質なコードを素早く生成できます。
※無料で利用できるエディタソフトですが、無料プランはGPTの使用回数に制限があります。（GPT-3.5の使用回数200回/月まで、GPT-4使用回数（低速）50回/月まで）

Cursorエディタのダウンロードとインストール

まずは早速Cursorをダウンロードしてみましょう！
こちらのページからダウンロードができます。（外部サイトへ移動します）

「Download for Free」ボタンをクリック後、保存先を指定してダウンロードをします。
ダウンロード後インストーラーを開いてインストールを行なってください。

インストール時のポイント

・Languageに「日本語」とテキスト入力（プルダウンによる選択ではありません）。それ以外は初期設定のままでOK。
・VSCode Extensions 画面で「Use Extensions」をクリックしてVSCodeの設定を引き継ぎ。（VSCodeを使用していない方は「Start from Scratch」をクリック）
・Cursorのアカウント登録を求められるので、はじめての方は Sign up をクリック。（Googleアカウントでのログインも可能）

インストールができたら早速使ってみましょう！

Cursorエディタの使い方

基本的な使い方は一般的なエディタソフトと変わりはありません。
普段VSCodeを使用されている方は、同じ操作感で使用することができます！
まずはファイルメニューから新しいテキストファイルの作成を行いましょう。

AI機能の使い方

「⌘ + K」のショートカットでクリックされている箇所に質問や指示を出すことができます。

まずは「基本的なHTMLドキュメントのテンプレートを生成してください。」とおねがいしてみました。

そうすると即座に文書型宣言をはじめとする基本的なHTMLドキュメントを生成してくれます！
この内容でよければ「⌘ + ↩︎(Return)」で決定、キャンセルする場合「⌘ + delete」でキャンセルすることができます。
内容を変更したり追記を行いたい場合は、「Follow-up instructions…」に内容を記入すると吐き出したコードを編集してくれます。

基本的な使い方はとても簡単ですね。
続いてWeb制作を効率化するためのプロンプト（指示）を紹介します！

Cursor おすすめプロンプト（指示）- HTML編 –

【ドキュメント全体の設定】

Webサイトの基盤となるHTMLドキュメントの全体構造を効率的に作成できます。

プロンプト例：「基本的なHTMLドキュメントのテンプレートを生成してください。」

生成されるコード例：

<!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>
  <!-- コンテンツエリア -->
</body>
</html>

【headタグ内の設定】

headタグ内の設定には、SEOや外部リソースの読み込み、メタ情報の挿入が含まれます。

プロンプト例：「SEOとパフォーマンスを最適化したheadタグを作成してください。」

生成されるコード例：

<head>
  <meta charset="UTF-8">
  <meta name="description" content="このページの説明を入力">
  <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>

【OGタグの設定】

SNSでシェアされた際の表示を最適化するためのOG（Open Graph）タグの設定です。

プロンプト例：「ページに最適なOGタグを追加してください。」

生成されるコード例：

<head>
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページの説明文">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:url" content="https://example.com">
</head>

【一括指定　ドキュメント全体・headタグ内・OGタグ・bodyタグ内の設定】

ここまでの内容をまとめて一括で指定することもできます！（追加でjQueryCDNへリンクも貼っています）

一括でまとめたプロンプト：

・基本的なHTMLドキュメントのテンプレートを生成してください。
・SEOとパフォーマンスを最適化したheadタグを作成してください。
・ページに最適なOGタグを追加してください。
・jQueryのCDNへリンクを貼ってください。

生成されるコード例：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
    <meta name="description" content="ページの説明文をここに入力してください。">
    <meta name="keywords" content="キーワード1, キーワード2, キーワード3">
    <link rel="canonical" href="https://www.example.com/このページのURL">
    
    <!-- OGタグ -->
    <meta property="og:title" content="ページタイトル">
    <meta property="og:description" content="ページの説明文をここに入力してください。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.example.com/このページのURL">
    <meta property="og:image" content="https://www.example.com/ogp-image.jpg">
    <meta property="og:site_name" content="サイト名">
    <meta name="twitter:card" content="summary_large_image">
    
    <!-- パフォーマンス最適化 -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preload" as="style" href="styles.css">
    <link rel="stylesheet" href="styles.css">
    
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
    <!-- ここにコンテンツを追加 -->
    
</body>
</html>

先ほどのプロンプトをコピペするだけで、あっという間にコードが生成できます。
全て手で入力することを考えると、時短になると思います！

【bodyタグ内の設定　headerからfooterまで】

bodyタグ内は、ページの主要なコンテンツを配置する場所です。

プロンプト例：「基本的なレイアウトを持つbodyタグの中身を作成してください。」

生成されるコード例：

<body>
  <header>
    <h1>サイトタイトル</h1>
    <nav>
      <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">概要</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="home">
      <h2>ホームセクション</h2>
      <p>ここにコンテンツを挿入します。</p>
    </section>
  </main>
  <footer>
    <p>© 2024 サイト名</p>
  </footer>
</body>

もう少し具体的に指示を出してみましょう。

具体的なプロンプト例：

・基本的なレイアウトを持つbodyタグの中身を作成してください。
・ヘッダー・メイン（メイン内にセクション4つ）・フッターを作ってください。
・各セクションには見出しと本文を書いてください。
・各要素にはclassを付与してください。
・class名の命名規則はBEMでお願いします。
・セクションが複数ある場合、共通のclassと個別のclassを付与してください。

生成されるコード例：

<body class="page">
  <header class="header">
    <h1 class="header__title">ウェブサイトのタイトル</h1>
  </header>

  <main class="main">
    <section class="section section--first">
      <h2 class="section__heading">セクション1の見出し</h2>
      <p class="section__content">セクション1の本文がここに入ります。Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>

    <section class="section section--second">
      <h2 class="section__heading">セクション2の見出し</h2>
      <p class="section__content">セクション2の本文がここに入ります。Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section class="section section--third">
      <h2 class="section__heading">セクション3の見出し</h2>
      <p class="section__content">セクション3の本文がここに入ります。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>

    <section class="section section--fourth">
      <h2 class="section__heading">セクション4の見出し</h2>
      <p class="section__content">セクション4の本文がここに入ります。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
    </section>
  </main>

  <footer class="footer">
    <p class="footer__text">© 2023 ウェブサイト名. All rights reserved.</p>
  </footer>
</body>

しっかりとclassの命名規則も守られたコードが生成されます！
ここまで細かく記述を行うと案外時間がかかるので、これもまた時短につながりますね。

【表組みの作成】

表を使ってデータを表示する際に役立つプロンプトです。

プロンプト例：「シンプルなHTMLの表組みを作成してください。」

生成されるコード例：

<table border="1">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

もう少し具体的に指示を出してみましょう。

具体的なプロンプト例：

・シンプルなHTMLの表組みを作成してください。
・4行5列としてください。
・1列目は全て見出しセルとしてください。
・キャプションは「一般的な表組み」としてください。
・4行目の2列目から5列目まで結合してください。

生成されるコード例：

<table border="1">
    <caption>一般的な表組み</caption>
    <tr>
        <th>見出し1</th>
        <td>データ1-2</td>
        <td>データ1-3</td>
        <td>データ1-4</td>
        <td>データ1-5</td>
    </tr>
    <tr>
        <th>見出し2</th>
        <td>データ2-2</td>
        <td>データ2-3</td>
        <td>データ2-4</td>
        <td>データ2-5</td>
    </tr>
    <tr>
        <th>見出し3</th>
        <td>データ3-2</td>
        <td>データ3-3</td>
        <td>データ3-4</td>
        <td>データ3-5</td>
    </tr>
    <tr>
        <th>見出し4</th>
        <td colspan="4">結合されたセル</td>
    </tr>
</table>

結合までは難しいかと思いましたが、思い通りに結合されていますね！
デザインデータを見ながら細かく指示を出すことで、表組みも思い通りに作れそうです。

【フォームの作成】

フォームを素早く作成するためのプロンプトです。

プロンプト例：「基本的なHTMLフォームを作成してください。」

生成されるコード例：

<form action="/submit" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" name="name">
  
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="送信">
</form>

もう少し具体的に指示を出してみましょう。

具体的なプロンプト例：

・基本的なHTMLフォームを作成してください。
・以下の項目をお願いします。
お名前（必須）・性別（必須）・メールアドレス（必須）・電話番号・お問合せ内容・送信ボタン
・お問合せ内容はテキストエリアとしてください。
・送信ボタンのラベルは「この内容でお問合せする」としてください。
・各お問合せ項目はdlでグループ化し、ラベルはdt、入力パーツはddタグで囲んでください。（送信用のボタンに関してはdivでグループ化してください）

生成されるコード例：

<form action="#" method="post">
	<dl>
		<dt><label for="name">お名前（必須）</label></dt>
		<dd><input type="text" id="name" name="name" required></dd>

		<dt>性別（必須）</dt>
		<dd>
			<input type="radio" id="male" name="gender" value="male" required>
			<label for="male">男性</label>
			<input type="radio" id="female" name="gender" value="female" required>
			<label for="female">女性</label>
		</dd>

		<dt><label for="email">メールアドレス（必須）</label></dt>
		<dd><input type="email" id="email" name="email" required></dd>

		<dt><label for="phone">電話番号</label></dt>
		<dd><input type="tel" id="phone" name="phone"></dd>

		<dt><label for="message">お問合せ内容</label></dt>
		<dd><textarea id="message" name="message" rows="5" cols="30"></textarea></dd>
	</dl>

	<div>
		<input type="submit" value="この内容でお問合せする">
	</div>
</form>

必須項目の指定などもしっかりと反映されていますね！
各項目を囲むタグに関しても細かく設定ができて便利です。

HTMLについては以上です。
HTML全体に対する命令からhead・metaなどの関連情報、bodyタグ内の記述まで具体的に指示を出すことができます。
必要な箇所は編集しつつうまく利用することで時短になりそうですね！

Cursor おすすめプロンプト（指示）- CSS編 –

【初期スタイルのリセットに関する設定】

ブラウザごとに異なる初期スタイルをリセットして、統一感のあるデザインを作るためのプロンプトです。

プロンプト例：「ブラウザがHTMLに設定する初期のスタイルをリセットしてください。」

生成されるコード例：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

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

もう少し具体的に指示を出してみましょう。

・ブラウザがHTMLに設定する初期のスタイルをリセットしてください。
・表組みやフォームに対するスタイルもリセットしてください。
・全ての文字サイズや文字の太さもリセットしてください。

生成されるコード例：

/* ブラウザの初期スタイルをリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML5要素のデフォルト表示をブロックに設定 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, nav, section {
    display: block;
}

/* テーブルのボーダーを結合し、セル間のスペースを削除 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* フォーム要素のフォントを継承 */
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
}

/* リストのスタイルを削除 */
ol, ul {
    list-style: none;
}

/* フォントサイズと太さをリセット */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dd {
    font-size: 100%;
    font-weight: normal;
}

/* リンクの下線を削除 */
a {
    text-decoration: none;
}

/* 画像の下部の余白を削除 */
img {
    vertical-align: bottom;
}

先ほどより詳細なリセットの記述が生成されました！
リセットCSSの生成も思い通りに行えそうですね。

【一般的なheaderレイアウトの設定】

一般的なheaderレイアウトのためのプロンプトです。
ここからはHTMLとCSSを同時に生成するため「⌘ + L」でチャットモードにして編集します。

プロンプト例：

・index.htmlとstyle.cssを作成してください。
・header内にはロゴ・ナビゲーション（メニュー4つ）・メインビジュアル・キャッチコピーを配置してください。
・ロゴとナビゲーションは左右に並べ、その下にメインビジュアルを配置しメインビジュアルの上にキャッチコピーが重なるようにしてください。

生成されるコード例：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

理想通りに生成ができました。
メインビジュアルの上に重ねたキャッチの位置に関して、何も説明しなくても中央に配置されているところが優秀です！
※メインビジュアルのパスは書き換えないとリンクが切れてしまうため書き換えています。

【sectionのレイアウトの設定1（左右レイアウト）】

一般的なsectionでよく見られる左右レイアウトのためのプロンプトです。

プロンプト例：

・index.htmlとstyle.cssを作成してください。
・3つsectionを作成します。
・全てのsectionには見出し（h2）・イメージ・説明文（300文字程度）を記述し、
見出し・イメージのグループと説明文を左右にレイアウトしてください。
・偶数番目のsectionのみレイアウトを反転させてください。
・イメージの幅は100%（最大500px）としてください。

生成されるコード例：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

「左右にレイアウト」と伝えただけで、メディアクエリまで設定してレスポンシブにも対応してくれました！
この辺りも非常に勘が良いですね。

【sectionのレイアウトの設定2（より具体的なレイアウト指定）】

sectionごとにレイアウトの指定を分けてみましょう。
より詳細な指示になります。

プロンプト例：

・index.htmlとstyle.cssを作成してください。
・3つsectionを作成します。
・1つ目のsectionは見出し（h2）・説明文（600文字程度）を記述し、
中央揃えにしてください。
・2つ目のsectionは見出し（h2）・イメージ・説明文（300文字程度）を記述し、
見出し・イメージのグループと説明文を左右にレイアウトしてください。
・3つ目のsectionは見出し（h2）の下にイメージ・説明文（100文字程度）のグループを4つ記述し、イメージ・説明文のグループが全て左右に並ぶようレイアウトしてください。。
・イメージの幅は100%（最大500px）としてください。

生成されるコード例：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

こちらもまたレスポンシブ対応までされています。
ここまで詳細にプロンプトを考えるのは大変と思うかもしれませんが、デザインデータを見ながら考えれば案外難しくないはずです。

【一般的なfooterレイアウトの設定】

一般的なfooterレイアウトのためのプロンプトです。

プロンプト例：

・index.htmlとstyle.cssを作成してください。
・footer内にはロゴ・連絡先（住所・電話番号）・ナビゲーション（メニュー4つ）・コピーライトを配置してください。
・ロゴ・連絡先・ナビゲーションは左右に並べ、その下にコピーライトを配置してください。

生成されるコード例：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

こちらもまた指示通りの内容にコードが生成されていますね。

【一括指定　headerからfooterまでのレイアウト】

最後にこれまでのプロンプトをまとめて一括で指定してみましょう。ロゴ・イメージのパスやレスポンシブ対応の命令を最後に追記します。

プロンプト例：

・index.htmlとstyle.cssを作成してください。
・header内にはロゴ・ナビゲーション（メニュー4つ）・メインビジュアル・キャッチコピーを配置してください。
・ロゴとナビゲーションは左右に並べ、その下にメインビジュアルを配置しメインビジュアルの上にキャッチコピーが重なるようにしてください。
・3つsectionを作成します。
・1つ目のsectionは見出し（h2）・説明文（600文字程度）を記述し、中央揃えにしてください。
・2つ目のsectionは見出し（h2）・イメージ・説明文（300文字程度）を記述し、見出し・イメージのグループと説明文を左右にレイアウトしてください。
・3つ目のsectionは見出し（h2）の下にイメージ・説明文（100文字程度）のグループを4つ記述し、イメージ・説明文のグループが全て左右に並ぶようレイアウトしてください。。
・イメージの幅は100%（最大500px）としてください。
・footer内にはロゴ・連絡先（住所・電話番号）・ナビゲーション（メニュー4つ）・コピーライトを配置してください。
・ロゴ・連絡先・ナビゲーションは左右に並べ、その下にコピーライトを配置してください。
・イメージのパスはhttps://nnc-studio.jp/file/sky.jpg、ロゴのパスはhttps://nnc-studio.jp/wp-content/themes/nnc-theme/img/common/logo-circle@2x.pngとしてください。
・ブレークポイントを768pxで設定し、レスポンシブ対応もしてください。

生成されるコード例：

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

headerからfooterまでコードが生成されました！
文字数を指定したところが省略されていますが、本番用のテキストに書き換える前提であれば問題なさそうです。

Cursorエディタの便利なショートカット（随時更新）

内容	ショートカット
AIによるコード補完の呼び出し	⌘ + shift + K
AIによるコード補完の呼び出し（選択中の箇所に呼び出し）	⌘ + K
チャット画面を開く	⌘ + option + B
プロンプトを実行（決定）	⌘ + ↩︎(Return)
プロンプトをキャンセル	⌘ + delete
設定（VSCodeと同じ）	⌘ + ,

まとめ

いかがでしたでしょうか？

完全にデザイン通りのものを作るのは大変かもしれませんが、大枠をCursorで生成して細かな箇所は編集をしていくという使い方でもかなりの時短になりそうだなと感じました！
HTML・CSSだけではなくPython、JavaScript、TypeScriptなどの主要言語にも対応していて、かなり便利に活用ができるコードエディタです。

皆さんもぜひ活用してみてください。

STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！

こちらの記事はいかがでしたか？

PREV
BACK

【AI搭載エディタ】Cursorエディタとは？導入・使い方から制作を効率化するプロンプト（指示）を徹底紹介！

Cursorエディタとは

Cursorエディタのダウンロードとインストール

インストール時のポイント

Cursorエディタの使い方

AI機能の使い方

Cursor おすすめプロンプト（指示）- HTML編 –

【ドキュメント全体の設定】

プロンプト例：「基本的なHTMLドキュメントのテンプレートを生成してください。」

【headタグ内の設定】

プロンプト例：「SEOとパフォーマンスを最適化したheadタグを作成してください。」

【OGタグの設定】

プロンプト例：「ページに最適なOGタグを追加してください。」

【一括指定 ドキュメント全体・headタグ内・OGタグ・bodyタグ内の設定】

【bodyタグ内の設定 headerからfooterまで】

プロンプト例：「基本的なレイアウトを持つbodyタグの中身を作成してください。」

具体的なプロンプト例：

【表組みの作成】

プロンプト例：「シンプルなHTMLの表組みを作成してください。」

具体的なプロンプト例：

【フォームの作成】

プロンプト例：「基本的なHTMLフォームを作成してください。」

具体的なプロンプト例：

Cursor おすすめプロンプト（指示）- CSS編 –

【初期スタイルのリセットに関する設定】

プロンプト例：「ブラウザがHTMLに設定する初期のスタイルをリセットしてください。」

【一般的なheaderレイアウトの設定】

プロンプト例：

【sectionのレイアウトの設定1（左右レイアウト）】

プロンプト例：

【sectionのレイアウトの設定2（より具体的なレイアウト指定）】

プロンプト例：

【一般的なfooterレイアウトの設定】

プロンプト例：

【一括指定 headerからfooterまでのレイアウト】

プロンプト例：

Cursorエディタの便利なショートカット（随時更新）

まとめ

Related posts

RECENT ENTRIES

【PR】Tech Tech Zoo

CATEGORIES

【PR】オリジナルキャラクター「てくてくず」を公開しました！

RECENT ENTRIES