Blog

Cursorでプロジェクト管理のルールを設定する

更新日:2025年5月3日|公開日:2025年5月2日

Cursorで日頃のプロジェクト管理をやってみたら面白いんじゃないかと思ったので色々実験してみました。

私はWebディレクターとして主にWebサイトの構築や運用などのプロジェクトを仕事でやっているので今回はWebディレクター向けにCursorで行うプロジェクト管理をまとめてみたいと思います。

この記事の内容

いつものプロジェクトの業務フローを整理する

私はAIを利用する以前からプロジェクト毎に以下のフォルダ構成で区分をしているのでCursorのプロジェクトも同様にこのフォルダ構成で情報整理を行っていきます。

プロジェクトのフォルダ構成例

番号は業務のフロー順になりますが初期構築や運用などによっても前後しますし、プロジェクト進行中にも行ったり来たりすることもあるのであまり意味をなしていませんが基本の順を作るために接頭に連番を入れています。

自立型AIエージェントで動かすことを想定しているので基本となる情報整理のルールを決めたいと思います。

RulesでCursorにルールを設定する

Cursorの設定でRulesという項目があり、基本の根幹となるUser Rulesとプロジェクト毎のProject Rulesを作成することができます。User Rulesのデフォルトでは「Always respond in Japanese」と初期インストール時に設定をした日本語がルールとして記載されています。ここにはフォルダ構成や手順といったすべてのプロジェクトに共通する以下のルールを追加で入れておきます。

User Rulesは全体のルール

Rule Type:Always

#プロジェクト全体のルール
ファイルを作成を作成するときにどこに格納するかのルール。手順についてのルール。

##ファイルを作成するディレクトリのルール
- 00_情報: 情報や調査関連のファイルやWEB検索でのファクトチェックの情報を格納
- 01_企画: 企画書や戦略のファイルや情報を格納
- 02_仕様: コーディングルールやサイト構成のファイルや情報を格納
- 03_見積: 見積や仕入れのファイルや情報を格納
- 04_デザイン: figmaやPSDなどのデザインデータのファイルを格納
- 05_html: html、css、jsなどのコーディングデータファイルを格納
- 06_システム: Pythonやプログラム関連のファイルを格納
- 07_テスト: テスト環境のFTPやSSHの情報を格納
- 08_本番: 本番環境のFTPやSSHの情報を格納
- 09_共有: クライアントからのフィードバックや修正依頼などの共有情報を格納

##手順について
- 情報調査を依頼したときは必ずWEBサイトで最新の情報を取得すること
- ファイルを削除する時は確認をする
- ファイルを作成する時は確認をする

その他にも運用のなかで上手くいかなかった場合や追加のルールを入れたほうがスムーズになる場合などはここを随時カスタマイズしていきます。

またプロジェクトによっての個別のルールなどはProject Rulesとして個別に.mdcファイルにプロンプトを記載して呼び出せるようにしておきます。

Project Rulesはプロジェクト毎のルール

新規に登録する方法は以下の手順です。

Add new ruleをクリック
ファイル名を決めてエンター

作成された.mdcファイルにコーディング時のルールというかお作法のようなものを記載します。作成したProject Rulesは「.cursor>rules>coding-rules.mdc」という形でプロジェクトのフォルダに保存されます。

ここはルールの記載は結構迷うところがあってUser Rulesで記載したものもProject Rulesに入れたほうがいいかなとか汎用性を考えると今後の運用で色々試行錯誤しそうだなと感じています。

プロジェクトによっては企画だけ、デザインだけなどもあるのでコーディングやプログラムなどフォルダ構成の個別のタスクについてはProject Rulesに割り振ろうと思います。

Rule Typeには自動で毎回適用させる場合はAlwaysを、手動で都度発動させる場合はManualに設定します。

Rule Type:Manual

#コーディングのルールについて
ファイルの種類や格納ルール、使用するフレームワークやclassの命名規則についてのルールです。

##ファイルについて
- ページの拡張子は.htmlとする
- cssはcssフォルダに入れる
- jsはjsフォルダに入れる
- 画像はimgフォルダに入れる

##フレームワークについて
- tailwindcssを利用する
- jqueryを利用する

##classの命名規則について
- セクション要素はsectionを入れる。例 .***-section (ex キービジュアル) .kv-section
- ブロック要素はblockを入れる。例.***-block (ex 汎用ブロック) .base-block
- 要素内の内側はinnerを入れる。例. (ex 汎用ブロックの内側) .base-block__inner
- 要素内の子要素はitemを入れる。例(ex 汎用ブロックの子要素) .base-block__item
- 要素内の固有の見出しはheadingを入れる。例(ex 汎用ブロックの見出し) .base-block__heading
- 要素内の固有のテキストはtextを入れる。例(ex 汎用ブロックのテキスト) .base-block__text
- 要素内の固有の画像はimgを入れる。例(ex 汎用ブロックの画像) .base-block__img
- 見出しはheadingを入れる。例.heading-00 (ex 汎用見出し) .heading-01
- ボタンはbtnを入れる。例.***-btn (ex 汎用ボタン) .base-btn
- リストはlistを入れる。例.***-listや .***-num-list (ex 汎用リスト) .base-list (ex 汎用ナンバーリスト) .base-num-list
- テーブルはtableを入れる。例.***-table (ex 汎用テーブル) .base-table
- ナビゲーションはnavを入れる。例.***-nav グローバルナビ:.global-nav ローカルナビ:.local-nav パンくず:.bread-nav
- 画像ファイル名はimg-00という規則性にする。例はページ内で5枚目の画像名 img-05.png

ルールが適用されているか確認するには

僕は入れなかったのですがルールが適用されているかわからないな?という時は冒頭に以下のような文言を入れるとAIがコンソールログみたいな感じで確認することができます。

このルールを参照したら、「coding-rulesを参照します」と答えてください。

こうすることで少し安心します。

スニペットとしても使う

その他にもよく使うプロンプトは手動で登録してスニペットとして@のコンテキストメニューからCursor Rulesとして呼び出すことが可能です。

例はプログラムが上手く動かなかった時やリサーチの際に事実確認を取りたいときによく使うプロンプトです。

fix-again

上手く動いていないようです。問題を解決してください。

fact-check

最新のWebサイトの情報を参照して事実を確認してください。

以上、まだ試行錯誤中ですがルールの設定についてまとめました。

将来的に頼みたいこと

ライティング、変換、集計、プログラム業務は比較的AIを使えていますが、それ以外のクリエイティブな業務ではまだAIでは難しそうだと感じますが、将来的に頼めたらいいなというタスクをリストアップしてみました。

細かなタスクから実用につなげていければ面白いなと思います。