「企画書のワイヤーフレーム、またパワポですか？」そんな非効率から解放された話「新しいサービスの企画書を作るのに、またワイヤーフレームをパワポでつくるの？」中小企業でWEB企画を担当していると、必ずこの瞬間がやってきます。PowerPointで四角形を並べて「ここに写真」「ここにテキスト」と書き込んで...時間はかかるし、修正も面倒。かといって、本格的なワイヤーフレームツールはちょっと高いし、不必要な機能もたくさん。私はお客様やデザイナーにこのページはこんな情報を入れたい、という基本中の基本構成を整理して伝える役割のため、そこまでの網羅性や機能性は求めていませんでした。デザイナーからもあまり細かく作られるとデザインが制限されるので、概略だけでいいとよく言われていましたし。そんな時、「これ、AIで自動化できないかな？」とふと思い立ったんです。プログラミング経験ゼロの私が、AIコーディングアシスタントのCursorと一緒に、ワイヤーフレーム作成ツールを開発してみた実体験をお話しします。どんなツールを作ったのか基本機能：企画書作成に特化したシンプル設計作成したのは、完全ブラウザ内で動作するワイヤーフレーム作成ツールです。専門知識がなくても、直感的に使える設計にこだわりました。主な機能：ページタイトルとメインビジュアルの設定：基本的なページ構造を定義ブロック式コンテンツ作成：13種類のブロックタイプから選択可能PC・スマホ両対応：同時プレビューで確認しながら作成複数ページ管理：サイト全体の構成を管理PNG形式ダウンロード：PowerPointに貼り付けて企画書に活用ページ削除機能：不要なページを簡単に整理技術的には、HTML5、CSS3、JavaScriptで構築した完全クライアントサイドのアプリケーションです。サーバーは不要で、ブラウザでHTMLファイルを開くだけで使える手軽さが特徴です。※実際に作成したのがこちら。Cursorと一緒に開発してみた感想「本当にできるの？」から「意外と簡単！」への転換正直、プログラミング経験がまったくない私には「フレーム作成アプリなんて作れるの？」という不安しかありませんでした。でも、Cursorに「ワイヤーフレーム作成ツールを作りたいんですが...」と相談してみたところ、意外とすぐに基本形ができて驚きました。Cursorの優れている点：思いついたらすぐ形に：「こんな機能が欲しい」と伝えると、動作するコードを生成エラーも怖くない：動かない時も「一緒に解決していきましょう」という感じで修正段階的な改善：基本機能から徐々に高度な機能へとステップアップ最初は「ページタイトルと簡単なブロックが作れればいいかな」程度の期待でしたが、気がつけば本格的なワイヤーフレームツールになっていました。つまずいたポイントと学んだコツもちろん、すべてが順調だったわけではありません。特に機能追加の段階で重要な教訓を得ました。つまずいたポイント：一度に複数機能を追加しようとして失敗：「あれもこれも」と欲張ると、全体が動かなくなるバックアップなしで作業して後悔：新機能を追加した際に既存機能が壊れることが多発エラーの原因が分からず混乱：何が問題なのか特定できずに時間を浪費発見したコツ：段階的開発の重要性：「まずこの機能、次はこれ」と一つずつ確実に進めるこまめなバックアップ：機能が動いた段階で必ずバックアップを取るCursorへの相談：分からないことは遠慮なく相談するこの教訓は、プログラミング以外の業務でも活かせる重要な気づきでした。驚きの開発プロセス：5段階の進化開発作業記録を振り返ると、ツールは5つの段階を経て進化していました。第一段階：基本機能の実装ワイヤーフレームの骨格作成PC・スマホ表示切り替え基本的なブロック配置PNG形式でのダウンロード機能所要時間：約半日感想：「え、本当にできちゃった！」第二段階：ページ管理機能複数ページの作成・切り替えページ独立性の確保タブベースのページ管理所要時間：1日苦労した点：ページ間でデータが混在する問題の解決第三段階：ブロックタイプの拡充1カラム〜4カラムレイアウト写真のみ、テキストのみブロックボタンブロックの追加所要時間：半日発見：ユーザビリティの重要性第四段階：ボタンブロックの改善テキスト内容の正確な反映ボタン風デザインの実装Canvas描画処理の最適化所要時間：半日学び：細部へのこだわりが使いやすさを左右する第五段階：ページ削除機能不要ページの削除機能確認ダイアログの実装企画書作成ワークフローの完成所要時間：数時間完成：実用的なツールとして完成実際の業務効率化効果企画書作成が3-4倍速に実際に企画書作成で使ってみたところ、効果は想像以上でした。Before（手動作成でゼロベースからの前提）：PowerPointで四角形を配置「写真エリア」「テキストエリア」をテキストボックスで記載ページごとに同じ作業を繰り返し10ページの企画書で約2-3時間After（ワイヤーフレームツール使用）：ブロックを選択して内容を入力PC・スマホ表示を同時確認PNG形式でダウンロードしてPowerPointに貼り付け10ページの企画書で約40分結果：70%程度の時間短縮を実現しました。しかも、手作業より統一感があり、同じ悩みがあった業務委託の人からの評価も向上。「思ってたより楽に作れますね、無料で使えるから全然いいです」と驚かれることも増えました。プログラミング初心者でも本当にできるのか？「私にもできた」リアルな体験開発前の私のプログラミングスキル：HTML、CSS、JavaScript：聞いたことがある程度プログラミング経験：ほぼゼロ開発環境構築：ほぼやったことなしそれでも実用的なツールが作れた理由：1. Cursorの対話型サポート「こんな機能が欲しい」と日本語で説明するだけで、動作するコードを生成してくれます。2. エラー解決の丁寧さエラーが出ても、「ここが問題ですね。こう修正しましょう」と具体的な解決策を提示。3. 段階的な学習いきなり高度なことをするのではなく、基本から徐々にステップアップできる設計。成功の秘訣：完璧を求めない重要なのは「完璧なツールを作ろう」と思わないことです。おすすめのマインドセット：70点で十分：最初から100点を目指さず、まず動くものを作る小さく始める：壮大な計画より、身近な困りごとの解決から失敗を恐れない：エラーは学習の機会と捉えるバックアップ必須：動いた段階で必ず保存AIコーディングがもたらす可能性民主化される開発体験今回の実験で強く感じたのは、AIツールがプログラミングを民主化しているということです。従来は：プログラミング = 専門家の領域ツール開発 = 大きな投資が必要カスタマイズ = 外注するものAIコーディング時代は：プログラミング = 誰でも挑戦できるスキルツール開発 = アイデアがあれば実現可能カスタマイズ = 自分で調整できる中小企業にとっての意味特に中小企業にとって、この変化は革命的です：コスト面のメリット外注費用の削減（数十万円の開発費が実質ゼロに）ライセンス費用の節約（年間数万円のツール費用が不要）保守費用の軽減（自分で修正・改善が可能）スピード面のメリット思いついたらすぐ試せる業務に合わせてリアルタイムで調整外部ベンダーとの調整が不要カスタマイズ面のメリット自社の業務にピッタリ合ったツール必要な機能だけを実装不要な機能による複雑化を回避今まではSaaSサービスを契約していたけど、これからは簡単なものは自分で作ってしまうことが当たり前の時代になりそうです。そのくらいちょっとしたアプリならすぐに作れてしまいます。「まず試してみる」ことの大切さ行動することで見える世界今回の開発を通じて学んだ最も重要なことは、「やってみないと分からない」ということです。実際にやってみるまでの想像：難しそう時間がかかりそう失敗しそう実際にやってみた結果：思ったより簡単想像以上に早く完成失敗しても学びがある次のステップへのヒント「私も作ってみたい」と思った方へのアドバイス：スタートのポイント身近な困りごとを洗い出す：毎日の業務で「面倒だな」と思うことを特定Cursorをインストール：まずは環境を整える小さな要望から始める：「こんなツールがあったら便利」から開始完璧を求めない：70点で動くものを目指すおすすめの第一歩簡単な計算ツールデータ整理ツールタスク管理ツール定型業務の自動化続けるためのコツ段階的に機能追加こまめなバックアップエラーを恐れない仲間と情報共有今後の展望：AIと一緒に働く未来変化する働き方このワイヤーフレームツール開発は、単なる業務効率化以上の意味を持っています。それは、人間とAIが協働する新しい働き方の実証実験でもありました。従来の働き方：人間がすべてを考え、実行する専門知識がないとできないことが多い外部リソースへの依存度が高いAIとの協働スタイル：人間がアイデアと判断、AIが実装を担当専門知識がなくても実現可能内製化による自立性の向上5年後の予想今回の体験を踏まえ、5年後の業務環境を予想してみます：ツール開発の常識化業務ツールの自作が当たり前になる「困ったらまず自分で作ってみる」が標準的な発想に外注や既製品購入は最後の選択肢にスキルギャップの解消エンジニアと非エンジニアの境界が曖昧に誰でも基本的な開発スキルを持つ時代「プログラミングができない」は過去の話に創造性の解放技術的制約からの解放により、純粋なアイデア勝負により多様で実験的なソリューションの登場イノベーションの加速AIコーディング時代の到来今、始めるべき理由「まだ早いかな」「もう少し技術が成熟してから」と思っている方もいるかもしれません。しかし、今がまさに始めるべきタイミングです。理由1：学習コストの低さAIサポートにより、従来の1/10以下の時間で習得可能エラー解決も自動化され、挫折率が大幅に低下段階的学習により、無理なくスキルアップ理由2：競争優位性の確保まだ多くの人が挑戦していない今がチャンス早期習得により、市場での差別化要因になる組織内でのキーパーソンになる可能性理由3：技術の安定化Cursorなどのツールが実用レベルに到達大きな変化より、漸進的な改善の時代へ基本スキルは今後も通用する最後のメッセージ半年前の私は「プログラミングなんて絶対無理」と思っていました。でもCursorと出会って、AIと一緒に働くことの可能性を実感しています。重要なのは、AIに全てを任せるのではなく、人間とAIが協力して価値を生み出すこと。私が業務の課題を整理し、Cursorが技術的な実装をサポートする。この役割分担がうまく機能したからこそ、短期間で実用的なツールを作ることができました。技術の進歩は止まりません。でも、その技術を使いこなすかどうかは、私たち次第です。「難しそう」「時間がない」「失敗したら恥ずかしい」という気持ちは分かります。でも、一歩踏み出してみてください。きっと「こんなことができるの？」という驚きと、「自分でも作れた！」という達成感を味わえるはずです。そして何より、明日からの業務が、もっと効率的で楽しいものになりますよ！今回使用したツールCursor：AIコーディングアシスタント。プログラミング初心者でも安心HTML5/CSS3/JavaScript：モダンWebアプリケーション開発の基礎技術Canvas API：高品質画像出力のための描画機能開発のポイント完璧を求めず、まずは動くものを作るエラーを恐れず、Cursorに相談しながら進める段階的開発とこまめなバックアップが成功の鍵小さな業務改善から始めて、徐々に拡張していくプロジェクト成果開発期間：約1週間（実作業時間は3-4日）最終機能数：13種類のブロックタイプ、ページ管理、画像出力等業務効率化：企画書作成時間を70%程度短縮技術習得：プログラミング初心者からWebアプリ開発者へ#ライターの紹介-横内 圭介（Musubi Inc.）：調査・分析、戦略〜施策の立案と実行まで担当略歴 ##略歴"""-総合商社にて、主に製造業を中心としたマーケティング・営業を担当。15年以上に亘り、国内外メーカーの海外進出支援や営業・マーケティング戦略の立案から実行までを行う。2015年にMusubi Inc.を設立してから全く畑の違うブランディングの業務に従事。製造、建設、サービス、銀行、飲食、ホテル、運送、流通、リサイクルなど多くの業界を担当し、様々な領域の課題可決をコンサルタントとして担当している。ここ1年ほど様々なAIツールに触れ自身の業務効率が格段に上がったことから、兼業でブランディングやマーケティング業務を担われている方などに向けて情報発信できたらなと考えています。兼業でなかなか時間が割けない＝ブランディング・マーケティング活動ができないといった方々に少しでも役に立てればと思っています。"""