友人のウェブサイトを超短期間で作り上げてリリースした話

Posted at 2025-05-18

Cursorを活用したビジネスプラン設計、ウェブサイト開発からデプロイまで

1. はじめに

1.1. 今回のプロジェクトを始めたきっかけ

2023年9月に会社を辞め、動画制作・編集の勉強を始めた弟
毎週YouTubeに動画を着実にアップロードしながら技術向上
プロ活動が可能なレベルまで成長し、誕生日プレゼントとしてドメインとウェブサイトを提供することを決定

昨年9月、私の弟が会社を辞めて動画制作・編集の勉強を始めました。

「兄さん、俺が会社辞めてるし、せっかくだから何か意味のあることをしたいんだ。今回は動画編集を学んでみようと思って」という言葉を聞いた時は、正直心配が先立ちました。
そこで当時、弟がこれから進もうとしている道がどれほど厳しく難しいのか、これからやるべきことは何があるのかを一緒に探りながら、将来を考えてプランを一緒に立てました。

当時、「これから1年間着実に動画制作をしてYouTubeにアップロードすれば、必ず道が開けるよ」と話しました。
その時が来たら全面的に支援すると心の中で思いながらも、言葉には出さずにいました。

弟の成長過程を見守りながら、私の専門知識と経験を活かして弟を体系的に支援できる方法を考えました。
コンサルティングとメンタリングを通じて人々が成長する姿を見ることが私にとって最も大きなやりがいだからです。

そこで3ヶ月ごとに弟の動画制作の成長ぶりを客観的な指標で分析し、その結果を可視化してモチベーションを与えました。

時間が経ち、6ヶ月目になると、いつの間にか動画が24本も蓄積されていました。

半年が過ぎた今、弟の技術は目に見えて向上し、今ではプロとして活動しても良いレベルになりました。誕生日が近づいてきたので特別なプレゼントを考えていたところ、「ドメインとウェブサイトをプレゼントしたらどうだろう？」という考えが浮かびました。開発者である私ができる最も意味のあるプレゼントだと思ったからです。

1.2 プロジェクト目標

プロフェッショナルなポートフォリオウェブサイトの構築
見積もり問い合わせおよびファイルアップロード機能の実装
安定したサービス運営の保証
データに基づく成長戦略策定支援

単にポートフォリオを見せるだけのウェブサイトではなく、実際に弟がビジネスを運営する際に役立つ機能を入れたいと思いました。見積もり問い合わせシステム、ファイルアップロード機能、自動メール送信まで...ポートフォリオとしては膨大な計画を立てました。このすべての過程でCursor IDEを活用すれば効率的に開発できると考えたためです。

「君のビジネスはこういう方向に進めば良いと思うけど、どう？」データアナリストとしての経験を活かして弟に初期に言及した直接ビジネスプランを再度確認し、コンサルティングを提供しました。弟のポートフォリオサイト（https://truffle-studio.com）の紹介からビジネスプロセスまですべての要素を明確に定義しました。

市場トレンドと競合分析データを活用して弟のビジネスポジショニングを明確にし、ユーザー体験を最適化する方向で設計を進めました。本業でのデータ分析および意思決定経験をもとに3～4時間でビジネスプランの核心要素を確定することができました。将来的には訪問者データ分析機能も追加して、弟が自分のビジネスをデータに基づいて成長させられるよう支援する予定です。

2. 全体プロセス

2.1 企画段階

ビジネスプラン設計（所要時間：3～4時間）
- 動画制作・編集サービスのターゲット顧客層分析
- サービス範囲定義（ポートフォリオ、見積もり問い合わせ、ファイルアップロード）
- 収益モデル構想

「どんな顧客をターゲットにするの？」「どんなサービスを主に提供したい？」弟と一緒にブレインストーミングを行いました。Cursor IDEを活用してビジネスプランを素早く生成し修正することができました。

データアナリストとして市場トレンドと競合分析データを活用し、弟のビジネスポジショニングを明確にすることに集中しました。3～4時間でビジネスプランの核心要素を確定できたのは、Cursorの効率的な文書作成支援と、本業でのデータ分析および意思決定経験のおかげでした。

基本設計書作成（所要時間：1時間）
- システムアーキテクチャ設計
- データベース構造設計
- APIエンドポイント設計

Cursor IDEにシステムアーキテクチャ設計を依頼し、提案された内容を検討する方式で作業しました。AIの提案をもとに素早く設計書を完成させることができました。AI開発経験をもとにCursorが提案した設計案を効果的に検討し修正することができました。

UI設計書作成（所要時間：1時間）
- ユーザーエクスペリエンス（UX）設計
- ユーザーインターフェース（UI）デザイン
- レスポンシブウェブデザイン計画

Cursor IDEに「ビジネスプランに合わせて動画編集専門家のためのポートフォリオウェブサイトのUI設計書を作成して」と依頼しました。AIが提案した設計案をもとにデータ可視化経験を活かしてユーザーフレンドリーなUIに修正しました。普段の開発者としての視点や、職務でのデザイン設計、データ分析ダッシュボードを作っていた経験が複雑な情報を直感的に伝えるUI設計に大いに役立ちました。

2.2 開発段階

プロトタイプ開発（所要時間：4時間）
- HTML/CSSで初期プロトタイプデザイン設計（1時間）
- Nuxt3 + Vuetify3で再プロトタイプ化（3時間）
- 実際のブランドに合ったデザイン再編成

効率的な設計のためにまずCursor IDEに「HTML/CSSで簡単なポートフォリオウェブサイトのプロトタイプコードを作成して」と依頼しました。これはGPT系のAIを効率的に活用する方法で、実際の開発前にデザイン案を素早く確認するためでした。1時間で基本デザイン案が完成し、これを弟に見せると「兄さん、これ本当にかっこいい！」という反応で気分が良かったです。

草案をもとに実際の効率的な開発のためにCursorに「このHTML/CSSデザインをNuxt3とVuetify3ベースに変換して」と依頼しました。このように段階的にアプローチするとデザインと機能を分離して検討できるので効率的です。Cursorのコード変換機能のおかげでフレームワーク転換作業がはるかに容易になり、VuetifyのコンポーネントはUI開発時間を大幅に短縮してくれました。

動的システム実装（所要時間：5時間）
- フロントエンド開発
- バックエンドAPI開発
- データベース連携

Cursor IDEのコード生成および自動補完機能を活用して動的システムを実装しました。「見積もり問い合わせフォームをNuxt3で実装して」「ファイルアップロード機能を追加して」などの要求を通じて必要なコードを素早く生成し、これを検討し修正する方式で作業しました。

AI開発経験から得た効率的なコードレビュー習慣とCursorの強力なコード生成機能が組み合わさり、複雑な動的システムも5時間で実装することができました。特にデータ処理ロジックを設計する際には、大容量データ処理経験をもとにCursorが生成したコードを最適化しました。

2.3 デプロイおよび運用段階（所要時間：2時間）

初期デプロイ試行と失敗
- フロントエンドとバックエンドの一元化デプロイ試行
- Firebase Hostingを通じた無料運用計画
- Formidableなどライブラリのビルド失敗

普段趣味で開発していた他のウェブサイトのようにフロントエンドとバックエンドを一元化して一度にデプロイしようとしました。弟のウェブサイトを無料で運営するためにFirebaseベースのホスティングを選択しましたが、ここで問題が発生しました。Formidableライブラリがビルド過程で継続的にエラーを発生させ、サーバーAPIの構成も思うようにいきませんでした。

「なぜうまくいかないんだろう...？」Cursorに「Firebase HostingでFormidableなどのライブラリのビルド失敗問題を解決する方法はありますか？」と尋ねました。Cursorが提案した複数の解決策を試してみましたが、結局成功せず、迅速にデプロイするためにアーキテクチャを再設計する必要があるという結論に達しました。時には一歩下がって大きな絵を再度見ることが必要だという教訓ですね。

アーキテクチャ再設計（所要時間：2時間）
- 静的ページとサーバーレスAPIの分離決定
- 段階的デプロイ戦略策定

Cursorに「静的ページとサーバーレスAPIを分離するアーキテクチャを設計して」と依頼しました。AIが提案したアーキテクチャを検討し、「まずは静的ページだけでもデプロイして、APIはゆっくり開発しよう」という現実的なアプローチを選びました。

データ分析プロジェクトでよく使用する段階的改善方法論をウェブ開発にも適用しました。完璧なシステムを一度に構築するよりも、核心機能から段階的に実装し改善していく戦略でした。

アプリデプロイ（所要時間：7時間）
- 見積もり問い合わせシステムをクローズして静的ページ優先デプロイ
- ドメイン接続（Whois）
- Google Cloud Functionsで見積もり問い合わせシステムAPI再構成およびデプロイ

まず、静的ページ自体はCursorを使用して素早く最適化しデプロイしました。

個人的にウェブサイトを直接最初から最後までオープンするのは初めてだったので、ドメイン接続は大したことないだろうと甘く見ていました。

しかしWhoisで購入したドメインをGoogle Firebase Hostingに接続する際、正しく接続されず、Cursorが提供する情報も断片的で、日本語の適切な最新文書や資料もなく、深夜22時30分から12時30分まで長い間迷いました。

実際には接続は正しく行ったのに、Googleコンソールがステータスアイコンを正しく変更してくれなかったため気づかなかったことに虚しさを感じました。30分で接続は完了していたのに、ドメイン伝播が不十分だったことと同時に、証明書発行まで最大24時間かかるということが認識を妨げる要因だったのです。

その後Cursorに「Google Cloud Functionsを使用した見積もり問い合わせAPIコードを作成して」と依頼しました。その後AIが生成したコードを検討し修正しながらAPIを再構成し、問題なく起動するかテストを実施して、APIデプロイを実施しました。

3. 技術的課題と解決

3.1 ファイルアップロードシステム

APIでファイルアップロード機能の誤動作問題発生
サーバレス Google Cloud Functions に切り替え
Expressを使用したファイルアップロードシステムに変更
セキュリティおよび容量制限設定
エラーハンドリング実装

ファイルアップロード機能は最も頭を悩ませる部分でした。Formidableというライブラリを活用したファイルアップロード機能が、Firebaseにアップロードするプロダクション用にビルドするとエラーが出ることが問題でした。Cursorに「ファイルアップロード機能が動作しない問題をデバッグして」と依頼しました。Cursorが提案したデバッグ方法に従って問題を分析しましたが、結局根本的な解決策が必要でした。

結局、APIサーバー自体を別のサーバーレスGoogle Cloud Functionsに切り替え、それに合わせてAPIをサーバーレスに全面的に変更し、Expressを搭載してファイルアップロード機能を実装しました。

3.2 メールシステム

初期実装と予期せぬ変化
- OAuth2.0ベースの認証システム構築
- NodemailerベースのGoogleメール送信システム実装
- 認証ポリシー変更による問題発生

「メール送信機能は簡単に実装できるだろう」と考えました。実務で今年3月に似たような機能を実装した経験があったので自信がありました。個人的にも開発して問題なく使用していたコードを持ってきてCursorでシステムに合わせて変更してもらうよう依頼し、AIが生成したコードをもとにシステムを構築しました。

しかし予期せぬ問題が発生しました。わずか数ヶ月の間にGoogleの認証システムが改編され、今では機密情報に関するスコープを使用するには動画を撮影してGoogleに審査を受ける必要がありました。既にデプロイされたサイトの見積もり問い合わせ機能を迅速にオープンしたい状況で、審査過程を待つ時間的余裕がありませんでした。

システム変更
- サーバレス Google Cloud Functions に切り替え
- 2段階認証導入

既存のNodemailerに2段階認証を使用した方式に転換しました。セキュリティ面では弱まりましたが、メールを送信できる最短ルートとしての選択としては悪くない選択だったと思います。サイトが大きくなり有名になる前に、もう一度セキュリティ強化をする必要があるでしょう。

3.3 Googleアナリティクス連携

今後の顧客管理およびマーケティングのための最小限の分析ツールを事前に連携しました。これからどのような人々が訪れるのか、またどうすれば弟がビジネスを効率的に行えるのかなどを分析検討するための土台になると予想しています。

3.4 管理者システム（追加実装：約8時間）

ポートフォリオ管理機能を優先的に実装
見積もり問い合わせ管理システム追加
ウェブサイト現況ダッシュボード開発
Nuxt3とVuetify3ベースの管理者ページ構築
直感的なダッシュボードUI設計
リアルタイム見積もり問い合わせ管理機能統合
管理者アクセス権限制限設定

最初は弟がポートフォリオだけを簡単に更新できるようにしようと思っていました。しかし、私の自尊心がそれだけでは満足できなかったのです。そのため、管理機能をしっかり搭載したシステムにアップグレードすることに決めました。

特にダッシュボード部分に力を入れました。弟が一目でウェブサイトの状況を把握できるよう直感的なUIで構成したのです。見積もり問い合わせが入ると即座に確認して管理できるページも作りましたし、ポートフォリオ作品も簡単に追加・修正できるようにしました。

最後に、個別に見積もり問い合わせが入った時、各問い合わせごとに対応し、その対応結果をステータス変更を通じて管理できる最小限のビジネスプロセス管理システムを構築しました。

3.5 最終システム構成

メインサイト
- 紹介とポートフォリオ、その他ホームページを構成する基本要素
- 見積もり問い合わせシステム（ファイルアップロード機能含む）
  - メール送信システム
- Googleアナリティクス連携
管理サイト
- ダッシュボード
- ポートフォリオ管理システム
- 依頼管理システム

数多くの試行錯誤の末に見積もり問い合わせ、ファイルアップロード、メール送信がすべて一元化されたシステムを完成させました。弟に最終結果を見せた時の表情は忘れられません。「兄さん、これ本当にプロフェッショナルだ！私がこんなウェブサイトを持つことになるなんて...」

実際にシステムをテストしながら見積もり問い合わせが入り、ファイルがアップロードされ、自動的にメールが送信される過程を見守ることは本当にやりがいがありました。すべての苦労がこの瞬間のためだったと感じました。

4. 結論

4.1 成果

安定したウェブサイト運営
効率的な見積もり問い合わせ処理
ポートフォリオを簡潔に示すことができるシステム完成
見積もり問い合わせ + ファイルアップロード + メール送信が一元化されたシステム構築

4.2 今後の計画

システムモニタリング強化
ユーザーフィードバックに基づく改善
訪問者データ分析機能実装
AIベースの見積もり自動化システム開発検討

この開発を通じて技術的な知識だけでなく問題解決能力、忍耐力、そして時には一歩下がって再考することの重要性を学びました。特に、コード自動補完とAIベースの提案機能は開発速度を大きく向上させることを再認識しました。

これからは弟のビジネスが成長するにつれて必要な機能を追加し、セキュリティとパフォーマンスも強化する予定です。何よりも弟のビジネスがこのウェブサイトを通じて成長する姿を見守ることが最大のやりがいになると思います。

データアナリストとしての専門性を活かし、今後は訪問者行動データを分析して弟のビジネス戦略策定に役立つインサイトを提供したいと思います。また見積もり管理システムも開発中です。これからも、人の成長のためになることでやりがいを感じたいですね。

5. 完成したウェブサイト公開

作業内容	所要時間	使用ツール	成果
最終テスト実施	約2時間	様々なブラウザ	クロスブラウザ動作確認、レスポンシブ検証
本番環境最終確認	約1時間	Firebase管理コンソール	セキュリティ設定、パフォーマンス最適化

5.1 メインウェブサイト

5.1.1 プロトタイプ

5.1.2 最終完成リリース版

上記のリンクは最終完成リリース版の映像です。実際の動作は、以下リンクから見られます。

※ 韓国語ベースなので、翻訳機能をお使いいただければ幸いです。

5.2 管理サイト

5.2.1 ダッシュボード

5.2.2 ポートフォリオ管理

5.2.3 依頼管理

※ こちらに関しては、無難の極まりのため、省略しています。

5.5 Cursor活用による開発時間の短縮効果

このプロジェクトの各開発段階において、Cursor IDEの活用による時間短縮効果を以下の表にまとめました。従来の開発手法と比較して約70%の時間削減を実現しました。

開発フェーズ	Cursor使用時間	従来手法予想時間	時間削減率	主な効率化要因
ビジネスプラン設計	3～4時間	約20時間	約80%	AIによる未来設計・コンサル・市場分析および文書作成の迅速化
基本設計書作成	1時間	約6時間	約83%	アイデア創出・ブレインストーミング・設計書作成の効率化
UI設計書作成	1時間	約8時間	約88%	デザイン案検討・UI/UXブレインストーミングの時間短縮
プロトタイプ開発	4時間	約10時間	約60%	コード自動生成とフレームワーク変換
動的システム実装	5時間	約24時間	約79%	モジュール化と再利用性を考慮した効率的な実装
アーキテクチャ再設計	2時間	約8時間	約75%	問題解決策の迅速な提案と検証時間の短縮
アプリデプロイ	7時間	約15時間	約53%	AIによる最適な配置戦略提案とエラー対応
管理者システム実装	8時間	約25時間	約68%	複雑なUI/ロジックの効率的実装 ※ 今回はリリースの後で別途対応しております
最終テスト	2時間	2時間	0%	手動テストは自動化困難
本番環境確認	1時間	1時間	0%	構成確認は手動作業が必要
合計	34～35時間	約119時間	約71%	-

Cursor IDEを活用することで、特に設計フェーズと実装フェーズで顕著な時間削減効果が見られました。

AIによるコード生成、問題解決サポート、そして市場分析や未来設計などの複雑な思考プロセスの支援により、開発全体の効率が大幅に向上しました。特にビジネスプラン設計では、AIの支援なしでは多くの時間がかかるブレインストーミングや市場分析が短時間で実現できました。

また、システム実装においてはモジュール化や再利用性を考慮した効率的なコーディングを同時並行しているので、実際人力でコーティングしていたなら、もっと時間がかかっていたかと思います。

※ 今回は、ビジネスプラン設計～リリースまで、金曜～日曜までを使っています。管理システムは、リリース後の利便性アップデート対応です。

6. 技術スタック

6.1 フロントエンド

技術	バージョン	説明
Nuxt	v3.17.2	Vueベースのウェブフレームワーク
Vue	v3.5.13	UIコンポーネント構築ライブラリ
Vuetify	v3.8.4	マテリアルデザインVueコンポーネントライブラリ
Pinia	v3.0.2	Vueの状態管理ライブラリ
Vue Router	v4.5.1	SPA向けのルーティングライブラリ
HTML/CSS	-	ウェブページ基本構成言語
Material Design Icons	v7.4.47	アイコンライブラリ

6.2 バックエンド

技術	バージョン	説明
Google Cloud Functions	v5.0.0	サーバーレスコンピューティングプラットフォーム
Express	v4.18.2	Node.jsウェブアプリケーションフレームワーク
Node.js	v20	JavaScriptランタイム環境
Nodemailer	v6.9.1	メール送信ライブラリ
Busboy	v1.6.0	ファイルアップロード処理ライブラリ
Googleapis	v118.0.0	Google APIアクセスライブラリ
Firebase Admin	v12.0.0	Firebaseサービス管理ライブラリ
JWT	v9.0.2	トークン認証ライブラリ

6.3 インフラ

技術	バージョン	説明
Firebase Hosting	-	静的コンテンツホスティングサービス
Google Cloud Platform	-	クラウドコンピューティングサービス
Whoisドメイン	-	ドメイン登録サービス

6.4 開発ツール

技術	バージョン	説明
Cursor IDE	-	AI搭載コードエディタ
Git	-	バージョン管理システム
VS Code	-	補助開発ツール
TypeScript	v5.1.3	型付きJavaScript言語

7. 最後に

今回のプロジェクトは私の技術力と経験を弟のビジネス成長に実質的に役立つ方向で活用した事例です。

また、Truffle Studio公式サイトのオープンを記念して、
リズムに合わせて踊るウーパールーパーの動画もアップしました。

ぜひ以下の動画（3つとも同じ）もご覧ください：

次回は、効率的なGPT使用方法についての簡単な紹介、またはTruffle-Studioの成長についてのお話になる予定です。

以上、長い記事をお読みいただきありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up