【実証実験レポート】プログラミング初心者がCursorでワイヤーフレーム作成ツールを作ってみた話〜企画書作成が3-4倍速になった驚きの結果〜

「企画書のワイヤーフレーム、またパワポですか?」そんな非効率から解放された話

「新しいサービスの企画書を作るのに、またワイヤーフレームをパワポでつくるの?」

中小企業でWEB企画を担当していると、必ずこの瞬間がやってきます。PowerPointで四角形を並べて「ここに写真」「ここにテキスト」と書き込んで...時間はかかるし、修正も面倒。かといって、本格的なワイヤーフレームツールはちょっと高いし、不必要な機能もたくさん。私はお客様やデザイナーにこのページはこんな情報を入れたい、という基本中の基本構成を整理して伝える役割のため、そこまでの網羅性や機能性は求めていませんでした。デザイナーからもあまり細かく作られるとデザインが制限されるので、概略だけでいいとよく言われていましたし。

そんな時、「これ、AIで自動化できないかな?」とふと思い立ったんです。プログラミング経験ゼロの私が、AIコーディングアシスタントのCursorと一緒に、ワイヤーフレーム作成ツールを開発してみた実体験をお話しします。

1. どんなツールを作ったのか

基本機能:企画書作成に特化したシンプル設計

作成したのは、完全ブラウザ内で動作するワイヤーフレーム作成ツールです。専門知識がなくても、直感的に使える設計にこだわりました。

主な機能:

技術的には、HTML5、CSS3、JavaScriptで構築した完全クライアントサイドのアプリケーションです。サーバーは不要で、ブラウザでHTMLファイルを開くだけで使える手軽さが特徴です。

※実際に作成したのがこちら。

2. Cursorと一緒に開発してみた感想

「本当にできるの?」から「意外と簡単!」への転換

正直、プログラミング経験がまったくない私には「フレーム作成アプリなんて作れるの?」という不安しかありませんでした。でも、Cursorに「ワイヤーフレーム作成ツールを作りたいんですが...」と相談してみたところ、意外とすぐに基本形ができて驚きました。

Cursorの優れている点:

最初は「ページタイトルと簡単なブロックが作れればいいかな」程度の期待でしたが、気がつけば本格的なワイヤーフレームツールになっていました。

つまずいたポイントと学んだコツ

もちろん、すべてが順調だったわけではありません。特に機能追加の段階で重要な教訓を得ました。

つまずいたポイント:

発見したコツ:

この教訓は、プログラミング以外の業務でも活かせる重要な気づきでした。

3. 驚きの開発プロセス:5段階の進化

開発作業記録を振り返ると、ツールは5つの段階を経て進化していました。

第一段階:基本機能の実装

所要時間:約半日

感想:「え、本当にできちゃった!」

第二段階:ページ管理機能

所要時間:1日

苦労した点:ページ間でデータが混在する問題の解決

第三段階:ブロックタイプの拡充

所要時間:半日

発見:ユーザビリティの重要性

第四段階:ボタンブロックの改善

所要時間:半日

学び:細部へのこだわりが使いやすさを左右する

第五段階:ページ削除機能

所要時間:数時間

完成:実用的なツールとして完成

4. 実際の業務効率化効果

企画書作成が3-4倍速に

実際に企画書作成で使ってみたところ、効果は想像以上でした。

Before(手動作成でゼロベースからの前提):

After(ワイヤーフレームツール使用):

結果:70%程度の時間短縮を実現しました。しかも、手作業より統一感があり、同じ悩みがあった業務委託の人からの評価も向上。「思ってたより楽に作れますね、無料で使えるから全然いいです」と驚かれることも増えました。

5. プログラミング初心者でも本当にできるのか?

「私にもできた」リアルな体験

開発前の私のプログラミングスキル:

それでも実用的なツールが作れた理由:

1. Cursorの対話型サポート

「こんな機能が欲しい」と日本語で説明するだけで、動作するコードを生成してくれます。

2. エラー解決の丁寧さ

エラーが出ても、「ここが問題ですね。こう修正しましょう」と具体的な解決策を提示。

3. 段階的な学習

いきなり高度なことをするのではなく、基本から徐々にステップアップできる設計。

成功の秘訣:完璧を求めない

重要なのは「完璧なツールを作ろう」と思わないことです。

おすすめのマインドセット:

6. AIコーディングがもたらす可能性

民主化される開発体験

今回の実験で強く感じたのは、AIツールがプログラミングを民主化しているということです。

従来は:

AIコーディング時代は:

中小企業にとっての意味

特に中小企業にとって、この変化は革命的です:

コスト面のメリット

スピード面のメリット

カスタマイズ面のメリット

今まではSaaSサービスを契約していたけど、これからは簡単なものは自分で作ってしまうことが当たり前の時代になりそうです。そのくらいちょっとしたアプリならすぐに作れてしまいます。

7. 「まず試してみる」ことの大切さ

行動することで見える世界

今回の開発を通じて学んだ最も重要なことは、「やってみないと分からない」ということです。

実際にやってみるまでの想像:

実際にやってみた結果:

次のステップへのヒント

「私も作ってみたい」と思った方へのアドバイス:

スタートのポイント

おすすめの第一歩

続けるためのコツ

8. 今後の展望:AIと一緒に働く未来

変化する働き方

このワイヤーフレームツール開発は、単なる業務効率化以上の意味を持っています。それは、人間とAIが協働する新しい働き方の実証実験でもありました。

従来の働き方:

AIとの協働スタイル:

5年後の予想

今回の体験を踏まえ、5年後の業務環境を予想してみます:

ツール開発の常識化

スキルギャップの解消

創造性の解放

9. AIコーディング時代の到来

今、始めるべき理由

「まだ早いかな」「もう少し技術が成熟してから」と思っている方もいるかもしれません。しかし、今がまさに始めるべきタイミングです。

理由1:学習コストの低さ

理由2:競争優位性の確保

理由3:技術の安定化

最後のメッセージ

半年前の私は「プログラミングなんて絶対無理」と思っていました。でもCursorと出会って、AIと一緒に働くことの可能性を実感しています。

重要なのは、AIに全てを任せるのではなく、人間とAIが協力して価値を生み出すこと。私が業務の課題を整理し、Cursorが技術的な実装をサポートする。この役割分担がうまく機能したからこそ、短期間で実用的なツールを作ることができました。

技術の進歩は止まりません。でも、その技術を使いこなすかどうかは、私たち次第です。「難しそう」「時間がない」「失敗したら恥ずかしい」という気持ちは分かります。でも、一歩踏み出してみてください。

きっと「こんなことができるの?」という驚きと、「自分でも作れた!」という達成感を味わえるはずです。そして何より、明日からの業務が、もっと効率的で楽しいものになりますよ!

今回使用したツール

開発のポイント

プロジェクト成果