フロントエンド開発者の間で急速に注目を集めているUIビルダー「V0」。
自然言語でUIを設計し、Reactコンポーネントを自動生成できるという革新的なツールです。
ただし、生成されたコードを活かすにはNext.jsなどのフレームワークが必要……と思われがちで、ペライチ(1ページだけの静的サイト)を作りたいだけなどの場合は、オーバーエンジニアリングに感じますよね。実はVite + React構成であれば、もっと軽量に、もっと高速にペライチのポートフォリオを公開できます。
今回は、V0で作ったUIをVite + React構成でポートフォリオとしてまとめる方法を紹介します。
Next.js、およびReactの基礎を理解していること
[目次を開く]
ステップ1:V0でUIを生成する
まずはV0.devにアクセスし、次のようなプロンプトを入力します。
“A simple portfolio page with a hero section, about section, and project cards.”
すると、すぐにReact(JSX)形式でUIコードが生成されます。
コードはコピー可能なので、あとでViteのプロジェクトにそのまま貼り付ける準備をしておきましょう。
ステップ2:Vite + React プロジェクトを作成
次に、Viteを使ってReactプロジェクトを立ち上げます。以下のコマンドを実行:
npm create vite@latest my-portfolio --template react
cd my-portfolio
npm install
開発サーバーを起動して動作確認もしておきましょう。
npm run dev
ステップ3:V0のコードを貼り付ける
src/App.jsx
を開いて、V0で生成されたコードを貼り付けます。
Tailwind CSSを使っている場合は、以下のように事前にセットアップが必要です。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js
と index.css
をV0のスタイルに合わせて調整しましょう。
ステップ4:自分の情報に差し替える
V0が生成したダミーコンテンツを、自分のプロフィールやプロジェクト情報に差し替えていきます。
<h1 className="text-4xl font-bold">こんにちは。私はUIエンジニアです。</h1>
<p>Reactを使ってUXをデザインすることができます。</p>
必要に応じて、GitHubやX(旧Twitter)などのSNSリンクも追加すると、よりプロフェッショナルに仕上がります。
ステップ5:ビルドして公開
ビルドして静的ファイルに書き出します:
npm run build
生成されたdist/
フォルダの中身を、GitHub PagesやNetlify、Firebase Hostingなどにアップロードすれば公開完了!
特にGitHub Pagesなら、以下のような設定でサクッと公開できます:
npm install gh-pages --save-dev
package.json
に以下を追加:
"homepage": "https://yourname.github.io/my-portfolio",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
※homepageの個所は適宜、ご自身の情報に置き換えてください。
そして、
npm run deploy
でデプロイ完了!
まとめ:V0 × Viteはペライチにベストマッチ
- ✅ UIはV0で爆速生成
- ✅ 軽量構成はVite + React
- ✅ デプロイもGitHub Pagesでお手軽
Next.jsほどの機能は不要だけど、Reactの柔軟性は使いたい——そんなあなたにこそ、V0 × Vite構成のペライチはベストな選択です。
デザインもクオリティも妥協しない、そんなモダンなポートフォリオを今日から始めましょう!