1. ホーム
  2. 要約：ライター業の幅が広がるツール開発｜Cursor編

要約：ライター業の幅が広がるツール開発｜Cursor編

※AIツールを利用して、今回の話を要約しました。

ほぼ修正はしてないので実際の内容と相違している部分があります。
参考資料としてお使いください。

»本編（動画やスライドが見れる）はこちら

WebライターのためのCursor活用講座まとめ

1. はじめに：Cursor（カーソル）とは何か？

概要

  • 定義：Microsoftが開発したコードエディタ「VS Code（Visual Studio Code）」に、AI機能を統合した開発ツール。
  • 読み方：カーソル、カーサー、カーソーなど定まっていないが、本講義では「カーソル」と呼称。
  • Webライターにとっての意義：
    • 単なる記事執筆だけでなく、簡易的なアプリやツール開発が可能になる。
    • 業務の幅が広がり、単価アップや付加価値の向上につながる。
    • エンジニアの領域と思われがちだが、AIの補助により非エンジニアでも扱える。

特徴と料金

  • 画面構成：VS Codeとほぼ同じ。
    • 左側：ファイルやフォルダの管理（エクスプローラー）。
    • 真ん中：エディタ（編集・プレビュー画面）。
    • 右側：AIチャット画面（ここが最大の特徴）。
  • 搭載AIモデル：
    • ChatGPT
    • Claude
    • Gemini（追加可能と思われる）
    • Cursor独自のモデル（small model等）
    • これらを切り替えて使用可能。
  • 料金：
    • 無料プラン：あり（使用上限はあるが、最初は十分に使える）。
    • 有料プラン：月額20ドル（約3,000円）。
    • ポイント：主要なAIモデル（GPT-4, Claude 3.5 Sonnet等）が使い放題に近い状態で使えるため、個別に契約するよりもコストパフォーマンスが良い。

2. 実践編①：Cursorで「インタビュー記事」を作成する

Webライターの業務効率化として、複数のファイルを読み込ませて記事を書く手法が紹介されました。

手順

  1. フォルダとファイルの作成：
    • Cursor上で新しいフォルダ（案件名など）を作成。
    • その中にテキストファイル（.txtなど）を作成する。
  2. 素材の用意：
    • インタビューの文字起こしデータ（YouTubeの文字起こし機能や拡張機能を使用）をテキストファイルに貼り付けて保存（Command+S / Ctrl+S）。
    • 記事作成用の「プロンプト（指示文）」も別ファイルとして用意しておくと便利。
  3. AIへの指示（チャット機能）：
    • チャット欄で@（アットマーク）を入力すると、フォルダ内のファイルを呼び出せる。
    • 指示例：「@インタビュー記事プロンプト の内容に沿って、@文字起こしデータ の内容を記事にしてください」
  4. 生成：
    • AIがファイルの中身を読み込み、記事構成や本文を作成する。

従来の生成AI（ChatGPT/Claude）との違い

  • プロジェクト管理：
    • 従来：プロンプト、文字起こし、過去記事などを毎回コピペしたり、別々のウィンドウで管理する必要があった。
    • Cursor：1つの画面（フォルダ）内に全ての素材（プロンプト、過去記事、参考資料、メモ）を保存し、@で即座に呼び出せる。
  • 読み込み精度：
    • PDFやURLよりも、テキストファイル（.txt）形式の方がAIにとって読みやすく、精度が高い傾向がある。

3. 実践編②：Webライターが作れる「便利ツール」開発

Cursorを使えば、プログラミング知識がゼロでも、自然言語（日本語）の指示だけでツールが作れます。

事例A：禁止表現チェックツール

ディレクターやクライアントに喜ばれる、NGワードを自動検出するツールです。

  • 作り方：
    1. 「禁止表現リスト」をテキストファイルで作成し、Cursorに保存。
    2. AIへの指示：「ユーザーが文章を入力すると、@禁止表現リスト に該当する部分があれば、赤くアラートを出すチェックツールを作ってください」
    3. CursorがHTML/CSS/JavaScriptなどのコードを自動生成する。
  • 活用：
    • ローカル環境（自分のPC上）で動作確認。
    • 納品前のセルフチェックに使用したり、クライアントごとのレギュレーションを守るために活用できる。

事例B：シミュレーションツール（計算ツール）

Web記事の滞在時間を延ばすためのコンテンツとして有効です（例：税金計算、住宅ローン計算、適職診断など）。

  • 作り方（所得税計算ツールの例）：
    1. 情報のインプット：国税庁のWebページなどをPDF化してCursorに読み込ませる（URL読み込みよりPDF化が推奨）。
    2. 構造化：AIに「このPDFの計算式をマークダウン形式に変換して」と指示し、AIにロジックを理解させる。
    3. ツール作成：
      • 指示：「この計算内容を使って、ユーザーが所得を入力すると税金が計算されるツールを作ってください」
      • 指示：「WordPressの記事に貼り付けて使うので、HTML形式で出力してください」
  1. 実装：
    • 出力されたHTMLコードをコピーする。
    • WordPressの投稿画面で「カスタムHTML」ブロックに貼り付ける。
    • プレビューで動作を確認する。
  • メリット：
    • 通常、外注すると数万円〜数十万円かかるツールを短時間（30分程度）で作成できる。
    • 記事の滞在時間が伸び、SEO評価の向上（検索1位獲得など）に貢献できる。

4. 作成したツールの公開・納品方法

作成したツールをどのように共有・公開するかについて解説されました。

Web上で公開する場合（ポートフォリオやアプリとして）

  • GitHub（ギットハブ）：プログラムのコードを保存するWeb上の場所。
  • Vercel（バーセル）：GitHubと連携して、作成したツールにURLを付与して公開できるサービス（小規模なら無料）。
  • 手順：
    • CursorのAIに「これをGitHubしてVercelで公開したいです」と指示する。
    • AIが手順（ターミナルでのコマンド入力など）を教えてくれるので、思考停止で従えば公開までたどり着ける。
    • 独自ドメインを設定することも可能。

クライアントに納品する場合

  1. WordPressへの埋め込み：
    • HTML/CSS/JSコードとして出力し、記事内に埋め込む形式で納品。
  2. ローカルツールとして：
    • ネット上に公開せず、ローカル環境（オフライン）で動くファイルとして納品（セキュリティリスクが低い）。

5. 発展的なトピックとQ&A

Claude Code（クロードコード）との比較

  • Claude Codeとは：ターミナル（コマンドライン）で動くAIエージェント。
  • 違い：
    • Cursor：ファイル構造が見え、何をしているか理解しながら進められる。部分的な修正指示がしやすい。
    • Claude Code：自律性が高く、「作って」と言うだけでバグ修正まで勝手にやってくれるが、中身がブラックボックスになりやすい。
  • 推奨：初心者はまずCursorで構造を理解し、慣れてきたらCursor内のターミナルでClaude Codeを呼び出して使うなどの併用が良い。

セキュリティと注意点

  • 機密情報の扱い：
    • SlackやLINEの連携、社内データの読み込みなどは、セキュリティリスク（情報漏洩）の観点から慎重になるべき。
    • 特にインターネットに接続するツールを作成する場合は注意が必要。
  • ローカル活用の安全性：
    • 「電卓」のようなローカル完結型のツールであれば、外部にデータが送信されないため、企業への提案も通りやすい。

Webライターへのアドバイス

  • 希少価値：Cursorを使って開発ができるWebライターは、現時点で100人に1人もいない（非常に希少）。
  • 単価アップ：単なるライティングだけでなく、「診断ツール付きの記事」や「業務効率化ツール」をセットで提案することで、単価を大幅に上げることが可能。
  • 学習方法：まずはYouTubeなどで「Cursor 導入」「Cursor 使い方」などを検索し、実際に触ってみることから始めるのがおすすめ。

まとめ

Cursorは、Webライターにとって「単なる執筆ツール」を超えた、「ビジネスの幅を広げる強力な武器」となります。

  • 執筆効率化：関連ファイルを一元管理し、呼び出して執筆。
  • ツール開発：禁止用語チェックや計算シミュレーションを作成。
  • 提案力強化：WordPressへの動的コンテンツの実装など、技術的な提案が可能に。

まずは無料プランから導入し、プログラミングアレルギーを払拭して触ってみることが推奨されています。