Zenn
👽

Cursorでポートフォリオサイトを作成し、デプロイまでやる

に公開
Next.js
ポートフォリオ
cursol
tech

こんにちは、Mygです。今回は話題のAI開発環境「Cursor」を使って、ポートフォリオサイトをゼロから作成し、デプロイまで行う流れを記録としてまとめてみました。
ReactやNext.jsに触れたことがある方や、ポートフォリオ作りを検討している方の参考になれば幸いです。

✅ Cursorとは？

Cursorは、AI機能が統合された次世代のコードエディタです。ChatGPTと連携しており、以下のような特徴があります。

  • コード補完やリファクタの提案が強力
  • Chatで質問すると、ファイル構成を考慮して返答してくれる
  • GitHub Copilotのような補完＋VSCodeのUIに似た使いやすさ

実際に使ってみると、「ただのエディタ」ではなく、AIペアプログラマと一緒に開発しているような感覚になります。

🔧 プロジェクト作成：Next.jsでポートフォリオサイトを構築

1. 新規プロジェクトを作成

Cursor上で新しいNext.jsプロジェクトを作成します。npx create-next-app@latest を使ってもいいですが、Chat機能で以下のように入力すると、AIがセットアップしてくれます。

「Next.jsでシンプルなポートフォリオサイトを作りたい。TypeScriptとTailwind CSSを使いたい。」

→ src/構成、tailwind.config.js、postcss.config.jsなどを自動生成してくれました。

2. 作りたいサイトのイメージをそのまま伝えてみる

以下のプロンプトを投げてみました。

現在Reactでポートフォリオサイトを作成しています。
今から指定する内容で新しくサイトを作成し直してください。
🔹 基本構成

1. トップページ（ファーストビュー）
名前（またはハンドルネーム）
キャッチコピー（例：「React×TypeScriptが得意なフロントエンドエンジニア」）
簡単な自己紹介（1〜2行）
SNSやGitHub、Qiita、Wantedlyなどへのリンク
2. 自己紹介 / プロフィール
経歴の概要（どんな会社で何年働いたか、どんな開発をしてきたか）
使用できる技術スタック（言語、フレームワーク、ツールなど）
強み・得意分野（例：UI設計、パフォーマンス最適化、API設計 etc.）
学習中の技術・興味のある分野
資格や受賞歴（あれば）
3. ポートフォリオ（制作物一覧）
各プロジェクトごとに以下の情報を掲載：

タイトル
概要説明（どんなアプリ／サービスか）
使用技術
担当箇所（チーム開発なら）
開発の背景や目的
工夫した点や苦労した点
GitHubリンク
デモリンク（あれば）
スクリーンショット or 動画
4. スキル一覧
フロントエンド（React, Vue, TypeScript, etc.）
バックエンド（Node.js, NestJS, Prisma, MySQL, etc.）
その他（Docker, Git, CI/CD, etc.）
レベル感（例：★★★☆☆）
5. ブログ / 技術記事
技術的なアウトプットのリンクや要約
Zenn、Qiita、noteなどへのリンクでも可
6. 連絡先 / お問い合わせフォーム
メールアドレス
SNSのDM
Googleフォームやコンタクトフォームなども◎
7. 履歴書・職務経歴書のPDF（任意）
転職・営業目的なら用意すると親切

また、UI、UXは、モダンなデザインになるようにしてください。

プロンプトの内容についても、ChatGPTに「ポートフォリオサイトに必要な情報を教えて」という質問に対して回答を生成してもらいました。

3. コンポーネントの実装

以下のように瞬く間にコンポーネントが生成されました。

AIのコードはそのまま使ってもいいし、自分で調整しやすい構造になっているのが助かります。

4. 修正と改善

起動してみるとかなり良い感じにサイトができていました。
ここからは、画像を追加したり、自分の情報を追加していきます。
AIによって分かりやすくコンポーネントが分割されているので、すぐに修正箇所に辿り着くことができます。

また、さらにプロンプトを追加することで、サイトを改善していきます。
例えば:

スキルについては、経験年数に基づいて計算するように変更してください。

コードは修正せず、テキストカラーや背景色のスタイルを変更をすることで、より洗練されたデザインにしてください。

🚀 デプロイ：Vercelで一瞬

プロジェクトが完成したら、Vercelにデプロイして公開します。

手順：

  1. GitHubにリポジトリをPush
  2. Vercel にアクセスし、GitHub連携
  3. リポジトリを選択 → デプロイ

これだけで、数分でWeb上にポートフォリオサイトが公開されます。

📌 作ってみた感想

  • Cursorは思っていた以上に実務で使える
  • エディタとAIが一体化しているので、思考が中断されない
  • ドキュメントを読まずとも「こうしたい」で実装が進む
  • 初学者にもベテランにも便利な開発環境だと感じました

特にポートフォリオのような「自分の表現」を詰め込む開発では、AIを相棒として使うことで、集中すべきところに集中できるのが最大の利点でした。

✍️ おわりに

今回は、Cursorを使ってポートフォリオサイトを作成し、Vercelにデプロイするまでの流れを紹介しました。

ポートフォリオをこれから作る方はもちろん、AIを使った開発に興味がある方は、ぜひ一度Cursorを触ってみるのをおすすめします。
「コードを書く」という行為の未来が、少しだけ見えた気がしました。

📎 デモサイト： https://portfolio-atiek-hubs-projects.vercel.app

Discussion