ポートフォリオサイトをAIで作って公開する

これまでの学習で、AIツールを使ってWebアプリを作る基本を身につけてきましたね。今回はその総まとめとして、あなた自身のポートフォリオサイト（＝自分の作品やスキルを紹介するWebページ）をAIの力で作り、インターネットに公開するところまで一気にやります。

想像してみてください。引っ越し先の新しい町で、自分のお店の看板を腕利きの職人に頼むようなものです。あなたは「こんなお店で、こんな看板にしたい」と伝えるだけ。あっという間に立派な看板ができあがります。今回の職人がAIです。

このレッスンを始める前に、以下の準備ができているか確認しましょう。

• パソコンでターミナル（＝コンピュータに文字で命令を伝える画面）が開ける
• 次のいずれかのAIツールがインストール（＝パソコンに入れて使える状態）済みである
  • Claude Code（ターミナルで claude と打って起動できる）
  • Codex CLI（ターミナルで codex と打って起動できる）
  • Cursor（エディタアプリとして開ける）
• インターネットに接続されている

まだAIツールをインストールしていない場合は、先に「AIコーディングツールを使い始める」のレッスンを終えてから戻ってきてください。

ChatGPTを使いたい場合: ChatGPTでもコードを生成できますが、ファイルの作成・保存は手動になります。このレッスンでは Claude Code / Codex CLI / Cursor のようにファイルを直接作ってくれるツールを推奨します。

AIに指示を出す前に、あなたのポートフォリオに載せる内容をざっくり決めます。料理でいうと、冷蔵庫の中身を確認してから「今日は何を作ろう？」と決めるのと同じです。先に材料を把握しておくと、あとがスムーズです。

良い例：

• 「自己紹介・最近作った3つの作品・連絡先の3セクション構成にしたい」
• 「シンプルで白ベースのデザイン。名前を大きく目立たせたい」
• 「趣味の写真を3枚載せて、ギャラリー風にしたい」

悪い例：

• 「いい感じにお願いします」→ 何を作ればいいかAIに伝わりません
• 「FacebookみたいなSNSを作って」→ 15分では終わらないし、ポートフォリオではありません

メモ帳やスマホのメモに、以下の3つを書き出しましょう：

1. あなたの名前と一言紹介（例: 「山田太郎 ─ Web制作を学んでいます」）
2. 紹介したい作品やスキル（3つ程度でOK。まだ作品がなければ「学習中のスキル」でも大丈夫）
3. 連絡先（メールアドレスやSNSのリンク）

ここからが本番です。ターミナルを開いて、プロジェクト用のフォルダ（＝ファイルをまとめる箱）を作ります。

以下のコマンドをコピーして、ターミナルに貼り付けてEnterキーを押してください：

cd Desktop && mkdir my-portfolio && cd my-portfolio

この1行で「デスクトップに my-portfolio という新しいフォルダを作り、その中に入る」という操作をまとめて行っています。

Claude Code を使う場合

ターミナルで以下を実行して Claude Code を起動します：

claude

起動したら、以下のように入力してください。太字の部分はあなた自身の情報に書き換えてください：

次のようなポートフォリオサイトをNext.jsで作ってください。

【自己紹介】
- 名前：山田太郎
- 一言紹介：Webデザインを学んでいます

【構成】
- ヒーローセクション（名前と紹介文を大きく表示）
- 作品セクション（3つの作品カード。まだ作品がなければダミーデータでOK）
- 連絡先セクション（メールアドレス）

【デザイン】
- 白ベースのシンプルで今風なデザイン
- スマホでも見やすいレスポンシブ対応
- すべて日本語で表示する

package managerはnpmを使ってください。

AIがコード（＝Webページを作るための設計図）を生成し始めます。「このファイルを作ります」といった確認が出たら、すべて「はい」と答えて進めてください。

Codex CLI を使う場合

ターミナルで以下を実行します：

codex

起動後、Claude Code と同じプロンプト（上の指示文）を貼り付けてください。Codex CLI も同様にファイルを自動生成してくれます。

Cursor を使う場合

Cursor アプリで my-portfolio フォルダを開き、チャットパネル（Cmd+L / Ctrl+L）に同じプロンプトを貼り付けてください。

うまくいかないときのコツ: AIの返答がおかしかったり、途中でエラーが出たら、「最初からやり直して」と伝えるのが一番早いです。AIは何度やり直しても嫌がりません。

コードの生成が終わったら、ブラウザでプレビュー（＝完成品を自分のパソコンで事前に見ること）します。

ターミナルで以下を実行してください：

npm run dev

このコマンドは「開発用サーバー（＝あなたのパソコン上だけで見られるWebページの仕組み）を起動する」という意味です。

ブラウザで http://localhost:3000 を開いてみましょう。

あなたのポートフォリオサイトが表示されたら成功です！

チェックリストで確認する

以下の項目を1つずつ確認してください：

• 名前と紹介文は正しく表示されているか
• 作品セクションにカードが並んでいるか
• 連絡先が載っているか
• ブラウザの幅を狭めたとき、レイアウトが崩れないか（スマホ表示の確認）
• 文字が英語のまま残っていないか

AIに修正を頼む

気になる部分があれば、AIにそのまま伝えるだけで修正してくれます。

修正プロンプトの例：

ポイント: 「もっとオシャレにして」より「背景色を薄い青、見出しを太字にして」のように具体的に伝えると、思い通りの結果に近づきます。

見た目に満足したら、世界中の人が見られるように公開しましょう。この作業をデプロイ（＝作ったものをインターネットに公開すること）と呼びます。

今回は Vercel（＝Webサイトを簡単に公開できる無料サービス）を使います。

手順1: 開発サーバーを止める

まず、先ほど npm run dev で起動したサーバーを止めます。ターミナルで Ctrl + C（コントロールキーを押しながらCキー）を押してください。

手順2: Vercel で公開する

ターミナルで以下を実行してください：

npx vercel

このコマンドは「Vercelを使って、このサイトをインターネットに公開する」という意味です。

初回はいくつか質問されます：

ログイン画面が表示されたら: ブラウザが自動で開きます。GitHubアカウントなどでログインしてください。アカウントがなければ、メールアドレスで無料登録できます。

公開が完了すると、以下のようなURLが表示されます：

✅ Production: https://my-portfolio-xxx.vercel.app

これがあなたのポートフォリオサイトのURLです！

手順3: スマホで確認する

表示されたURLをスマホのブラウザに入力して開いてみましょう。パソコンと同じ内容がスマホでも見やすく表示されていれば完璧です。

以下の3つがすべてできていれば、このレッスンは完了です。

1. ポートフォリオサイトのURLにアクセスして、自分の名前と作品が表示される
   • スマホのブラウザからURLを開いて確認してください
2. AIに修正指示を出して、デザインを1箇所以上変更できた
   • 色、サイズ、レイアウトなど何でもOKです
3. 完成画面のスクリーンショットを保存した
   • パソコン: Cmd + Shift + 3（Mac）または Win + PrintScreen（Windows）
   • スマホ: 電源ボタン + 音量上ボタン

お疲れさまでした！あなたのポートフォリオサイトが世界中から見られるようになりました。このURLは名刺やSNSのプロフィールに貼ることもできます。ぜひ活用してください。