DIVX テックブログ

catch-img

Cursorの並列エージェントを使って迅速に最適解を探る

はじめに

こんにちは、DIVX エンジニアの遠矢です。

最先端のAI技術を開発にどう活かしていくかを日々研究している中で、ぶつかる一つの壁があります。

それは、「最適な選択」をいかに素早く見つけ出すか、という課題です。

例えば、ユーザー体験(UX)に直結するUIデザインの分野では、「このボタンの配置で本当に使いやすいのだろうか?」「これがベストなのだろうか?」

という迷いが出てくることがあります。

そんな時、私はバージョンアップしたCursorの「並列エージェント」という機能に出会いました。

今日はバージョンアップしたCursorを使用して「最適な選択」を早く見つけ出す方法を共有します。

この記事を読んで分かること

  • Cursorの並列エージェント機能を比較検討に活用する具体的な手順

背景

私たちが日々取り組む開発では、お客様の課題解決に特化したスピーディーで無駄のないプロセスを実現することが強く求められています。

そのため、開発のあらゆる段階でAIを活用し、迅速かつ高品質なアウトプットを出すことが重要です。

ある案件で、特定の画面から次の画面へユーザーをスムーズに遷移させるためのUI要素を決める必要がありました。

従来の私の進め方は以下の通りです。

  1. 類似サービスのアプリやWebシステムをリサーチする。

  2. その調査結果をもとに、自分なりの最適解を導き出す。

  3. 導き出した設計に基づき、AIに具体的な指示(例:「この位置に、この要素を配置して」)を与えてコード生成を依頼する。

この方法の欠点は、リサーチと自己判断に時間がかかりすぎること、そして何より自分の偏った思考から抜け出せない可能性があることです。

「この方法がいいに違いない」と決めてからAIにコードを書かせても、それはあくまで私の思考の延長線上にすぎず、より良い選択肢を見落としているかもしれないという懸念がありました。

そんな時、Cursorのバージョンアップで複数エージェントを並行して扱えることを知りました。

これを使用すれば、「私が一つに絞り込むのではなく、AIに複数の異なる選択肢を同時に提案させ、その中から私が選ぶ」ことができると思い試してみました。


試したこと:並列エージェントによるデザイン案の比較

複数の視点を引き出すためのシンプルな手順として、並列エージェントは、一つのプロンプトを複数の異なるAIモデルに同時に実行させる機能です。この機能を使えば、モデルごとの特性や学習データの違いから、同じ要求に対しても異なる角度のデザイン案を引き出すことができます。

  1. モデルの選択とプロンプトの実行:
    まず、デザイン案を比較したいAIモデル(例:Composer1、GPT-5.1 Codex、Sonnet4.5など)をCursor上で複数選択します。
    そして、UIの目的と要求を記述したプロンプトを入力して実行しました。
  2. 並行した作業の開始:
    実行すると、選択したモデルの数だけカードが並んで表示され、各モデルが独立してデザイン案の作業を開始します。
  3. 提案内容の検討と比較:
    作業が完了した後、各モデルのカードを選択し、提案されたコードやデザインの変更点を一つひとつ
    確認しました。この時、Aモデルは「視認性を最優先した中央配置」を提案し、
    Bモデルは「片手操作を考慮した画面下部固定配置」を提案するなど、
    モデルごとに明確な設計思想の違いが見られたのが大きな発見でした。

この仕組みのおかげで、私がリサーチに費やしていた時間は、複数の選択肢の中から客観的な視点を持って「選ぶ時間」へと変わりました。

さらに、出てきた案に対して「ここのボタンの配色だけ少し変えたい」「パディングを調整したい」といった細かい修正が必要な場合は、

Cursorの「Browser Mode」が非常に有効でした。

「Select element」機能を使って、修正したい箇所を直接指定しながらAIに指示を出すことで、

全体のトンマナを崩すことなく、UIを直感的にブラッシュアップすることができました。

プロンプト設計で気をつけたこと

並列エージェントの力を最大限に引き出すために、プロンプトを投げる際にはいくつか意識的に行っていることがあります。

これは、AIの力を借りつつも、最終的な品質と安全性を担保するためです。

  1. 不必要な自動実行の抑制:
    Agentモードでは、AIが自動でコマンドを実行してしまうことがあります。しかし、意図しないコードの変更や予期せぬ影響を防ぐため、私は必ず「コマンドは勝手に実行しないでください」とプロンプトに明記するようにしています。

  2. 既存デザインの保護:
    既存の画面に新しい要素を追加する場合、AIが全体のトーン&マナー(トンマナ)を
    崩してしまうことがあります。それを避けるために、「今のデザインを変えずに、修正してください」と
    明確に伝えることで、全体の整合性を保ちました。

考察

今回の実践を通じて、AIとの共創が開発効率にもたらす効果を改めて実感しました。

特に、複数のAIモデルの「多様性」を瞬時に引き出せる並列エージェントは、

リサーチや比較検討といった定性的な判断プロセスを、客観的な選択という定量的なプロセスへと変換してくれます。

並列エージェントはUIデザイン案の比較だけでなく、以下のような様々な応用が考えられます。

  • 機能設計の初期段階: 同一の要件に対し、複数のエージェントに「データベース設計案」や「APIのエンドポイント設計案」を同時に提案させ、比較する。

  • 技術選定の比較: 例えば型エラーが発生し、ブラウザに表示できないという問題に直面したとします。

    その際に、Aモデルには「Reactを使用した解決策」を、Bモデルには「Flutterを使用した解決策」を提案させ、実装コストやパフォーマンスを比較します。

まとめ

今回は、Cursorの「並列エージェント」機能を活用し、デザイン検討のスピードが向上しただけでなく、「こういう視点もあったか!」という新しい発見が増えました。

今後もバージョンアップするAIツールを上手に活用し、お客様のニーズに迅速かつ柔軟に応える提案やプロダクトを提供していきたいです。

お気軽にご相談ください


ご不明な点はお気軽に
お問い合わせください

サービス資料や
お役立ち資料はこちら

DIVXブログ

テックブログ タグ一覧

人気記事ランキング

関連記事