【慣れた人向け】本格的なプロトタイプ構築

はじめに

プログラミングの知識がなくても、Acsimが生成した業務フローや要件をもとに、Cursorを使って実際に動くプロトタイプを作ることができます！ このガイドでは、Acsimの出力結果を使って、Cursorでプロトタイプを作る方法を順を追って説明します。

Cursorを使ったプロトタイプ作成は、一般的な画面デザインツールと比べて、以下のような大きなメリットがあります。

• 実際に動くシステムを作れる：画面デザインだけでなく、ボタンを押したときの処理や機能が実際に動作します
• 本物のデータを扱える：テスト用のデータだけでなく、実際のデータベースと連携して動作します
• ユーザー体験を実感できる：ログイン、検索、並べ替えなどの機能が実際に使えるので本番に近い体験ができます
• 細かい調整が簡単：「この機能を追加したい」「ここの動きを変えたい」といった要望にすぐ対応できます
• 本番システム開発へスムーズに移行：作ったプロトタイプをそのまま本番システム開発に活かせます

言い換えると、他のツールが「見た目と画面の流れ」を確認するためのものなのに対し、Cursorでは「実際に使えるシステム」として作れます。これにより、ユーザーからより具体的な意見をもらえ、開発チームへの引き継ぎもスムーズになります。

1. 必要なインプットファイルの準備

まずは以下のファイルを用意しましょう。これらはAcsimから生成されるか、または別途作成する必要があります：

• Acsimから入手するファイル ・ToBe業務フロー図（業務の流れを図式化したもの） ・ドキュメント情報（要件や仕様の詳細） ・画面一覧（システムに必要な画面のリスト） ・機能一覧（システムが提供する機能のリスト） ・概念モデル（データの関連性を示す図） ・デザイン仕様書（画面デザインの統一感を出すため）

※Acsimから取得できないファイルは成果物ページで生成した情報を使用してください

2. プロトタイプを作る手順

Claudeを起動し、以下のようなプロンプトの形式で作成を依頼してください：

【プロジェクト名】のシステムをCursorで構築したいと思います。 
以下の添付ファイルに基づいて、構築計画を作成してください。

前提条件
・実装は別ツールで実行するので、実行計画のみ出力すること
・デザイン仕様はファイルをCursor上に添付可能

添付ファイル情報
- ToBe業務フロー: 【ファイル名】
- ドキュメント情報: 【ファイル名】
- 画面一覧: 【ファイル名】
- 機能一覧: 【ファイル名】
- 概念モデル: 【ファイル名】
- デザイン仕様: 【ファイル名】

実装の際は以下の流れを考慮してください：
1. まず簡易環境を構築し、画面デザインが正しく表示されることを確認する
2. 基本機能から実装を進め、徐々に高度な機能を追加する
3. 各ステップで動作確認を行う

3. プロンプトの具体例

以下は実際に使えるプロンプトの例です。ご自身のプロジェクトに合わせて調整してください：

社内勤怠管理システムを作りたいと思います。
以下のファイルに基づいて、実際に動くプロトタイプを作ってください。

前提条件
・実装は別ツールで実行するので、実行計画のみ出力すること
・デザイン仕様はファイルをCursor上に添付可能

【添付ファイル情報】
- ToBe業務フロー: attendance-management-flow.pdf
- ドキュメント情報: attendance-requirements.xlsx
- 画面一覧: screens-list.xlsx
- 機能一覧: features-list.xlsx
- 概念モデル: conceptual-model.pdf
- デザイン仕様: attendance-system-design.fig

実装の際は以下の流れを考慮してください：
1. まず簡易環境を構築し、CSSが正しく反映されていることを確認する
2. 基本機能から実装を進め、徐々に高度な機能を追加する
3. 各実装ステップで動作確認を行う

4. Claudeからの返答を確認する

わからない点があれば、遠慮なくCursorに「このステップをもう少し詳しく説明してください」と質問しましょう。

5. プロトタイプの構築を始める

Cursorの指示に従ってプロトタイプの構築を始めます：

1. Cursorが指示するコマンドをそのままコピー＆ペーストで実行する
2. 必要に応じてファイルの作成や編集を行う（Cursorが具体的に指示します）
3. 画面が表示されたら、Cursorの指示に従って確認する

ヒント: 理解できないコマンドや手順があれば、「このコマンドは何をしているのですか？」と質問しましょう。

6. 構築中のポイント

• 小さなステップで進める：一度に全部を作ろうとせず、一つの機能ごとに確認しながら進めましょう
• わからないことは質問する：「この部分がうまくいかない」と具体的に伝えれば、Cursorが代替案を提案してくれます
• デザインの調整：「このボタンの色を青にしたい」など、見た目の調整も気軽に依頼できます
• 機能の追加：基本機能ができたら「〇〇の機能も追加したい」と依頼してみましょう

7. プロトタイプの評価と改良

完成したプロトタイプを実際に使ってみて、改良点を見つけましょう：

1. 同僚や顧客に実際に使ってもらい、感想をメモする
2. 「ここをこう変えたい」というリストを作る
3. 改善したい点をCursorに伝えて、更新を依頼する
4. 改良版で再度確認する

まとめ

Acsimの出力結果とCursorを組み合わせることで、プログラミングの知識がなくても、実際に動くプロトタイプを作ることができます。わずか1日で高品質なプロトタイプが完成し、実際の使用感を確かめられます。

「こんなシステムがあったらいいな」というアイデアを、専門知識なしで形にできるのがCursorの魅力です。ぜひチャレンジしてみてください！