AIでポートフォリオサイトを作る方法

ポートフォリオサイトが必要なとき、たいてい人はWeb開発を学びたいのではありません。採用されたい、クライアントを獲得したい、スクリーンショットのGoogle Driveフォルダを送り続けるのをやめたいのです。AIコーディングエージェントはこれに本当に適しています。ポートフォリオサイトは本質的に「同じ数個のセクションを丁寧に作る」だけで、それらのセクションを平易な英語で説明するほうが、テンプレートを選んでそのレイアウトの制約と格闘するより早いことが多いからです。

ここでは、良いポートフォリオサイトに実際に何が必要か、良い初版を得るためにAIエージェントに実際に何と言えばいいか、見たあとにどう反復するか、そして作成後に「公開する」とが実際に何を意味するかを順に見ていきます。

ポートフォリオサイトに本当に必要なセクション

プロンプトを一つ書く前に、何を目指すかを知っておくと楽です。実際に機能するポートフォリオサイト——人にメールを送らせるサイト——は、同じ中核セクションを持ちます：

• プロジェクト／制作物。 サイトの存在理由です。各プロジェクトには最低でも画像かスクリーンショット、それが何で自分が何をしたかの短い説明、できれば本番の成果物へのリンクかケーススタディが必要です。有力な三つか六つは、凡庸な十二個に勝ります。
• 自己紹介。 エッセイではなく短い段落。何をしているか、どんな仕事を探しているか、そして履歴書の箇条書きではなく人に聞こえる程度の個性。
• 連絡先。 最低限メールアドレス。お問い合わせフォームはあっても必須ではありません。素朴な mailto: リンクで十分で、壊れる可動部はゼロです。
• 履歴書へのリンク。 リクルーターやクライアントが先にメールせずに受け取れるPDF（または専用の履歴書ページ）へのリンク。

以上です。この四つのどれにも役立たないものは省きましょう——ブログとお客様の声のカルーセルとアニメーションするヒーロー動画付きのポートフォリオサイトは、完成までに三週間余計にかかり、コンバージョンも良くはなりません。

AIエージェントに実際に何を言うか

ここで多くの人が犯す間違いは、サイトを技術の言葉で説明すること（「コンポーネントライブラリ付きのReactを使って」）です。欲しいのは結果なのに。エージェントは実装の指示を必要としません。ページに何があるべきか、ざっくりどんな感じであるべきかを知る必要があります。

良い初版を得るプロンプトはこのようになります：

フリーランスのグラフィックデザイナー向けに、1ページのポートフォリオサイトを作ってください。構成：上部に自分の名前と仕事内容を一言で説明するヒーロー、4つのプロジェクトカード（画像・タイトル・一文の説明・「プロジェクトを見る」リンク）のグリッド、短い段落とプロフィール写真のプレースホルダーを含む自己紹介、メールアドレスと履歴書PDFのダウンロードリンクをお問い合わせセクション。スタイル：クリーンでミニマル、余白多め、アクセントカラー一つ、読みやすいサンセリフ。モバイルでも美しく。

このプロンプトの形に注目してください。すべてのセクションを名前で挙げ、各セクションに何を入れるかを言い、完全なデザイン仕様ではなくスタイルの単語を二つか三つだけ与えています。それで十分です。フォント、余白、レイアウトの細部はエージェントが自分で選びます。あなたが仕切るのはコンテンツと雰囲気で、CSSを書くことではありません。

デザイナーではなく開発者やライターなら、具体を差し替えるだけです。「プロジェクト」は「ケーススタディ」になり、「プロフィール写真」になり、「プロジェクトグリッド」の代わりにスキル一覧を頼むかもしれません。構成——ヒーロー、制作物、自己紹介、連絡先——は分野に関係なく同じままです。

初版を見てからの反復

最初の版は下書きであって、正解ではありません。最初のプロンプトを完璧にしようとしてではなく、数秒で反応できるものであるべきです。よくある次のステップ：

プロジェクトを追加する。 サイト全体をもう一度説明する必要はありません。新しい部分だけを説明します：

グリッドに五枚目のプロジェクトカードを追加してください。「コーヒーロースターのリブランディング」というタイトル、この画像、説明は「ロゴ・パッケージ・Webサイトを含むビジュアルアイデンティティの全面リデザイン」。coffeecraftbrand.comへリンクしてください。

レイアウトを変える。 プロジェクトグリッドが窮屈に感じるか、違うリズムが欲しいときは：

プロジェクトセクションを2カラムのグリッドから、各プロジェクトを左に画像・右にテキストとする1カラムのリストに変更してください。

お問い合わせフォームを追加する。 mailto: リンクで始めるには十分ですが、本物のフォームが欲しいなら：

お問い合わせセクションのメールリンクを、シンプルのお問い合わせフォームに置き換えてください——名前、メール、メッセージのフィールドと送信ボタン。送信したら私のメールアドレスに届くようにします。

何が悪いか、何を変えたいのかを具体的に伝えてください。デザイナーにフィードバックするのと同じように——「ヒーローが窮屈なので、名前の上に余白を多く」は「良くして」より良い結果を生みます。これらはどれも小さく狙いの定まった変更なので、エージェントはサイトの他部分に触れずに反映できます。

公開する

ノートPCの上に置いたポートフォリオサイトは誰の役にも立ちません。見え方ができたら、履歴書やLinkedInプロフィールに載せられる本物のURL付きでどこかにホスティングする必要があります。エージェントに直接頼みます：

良い感じです。共有できる本物のURLでインターネット上に公開できるように手伝ってください。

静的なポートフォリオサイト（ログインなし、DBなし——ほとんどのポートフォリオサイトがこれに当てはまる）なら、エージェントは通常、Netlify、Vercel、GitHub Pagesのような無料ホストへの設定を手配し、アカウント連携を案内し、デプロイします。すでにドメインを持っているなら、そのドメインを新しいサイトに向けるのも頼めます。持っていなければ、ホストがくれる無料サブドメイン（yourname.netlify.app のようなもの）も、カスタムドメインの価値を判断するまでは履歴書に載せられる、完全に使えるリンクです。

最初に知っておく価値があることがひとつ。「公開」は一度きりのイベントではありません。来月新しいプロジェクトが受注できたら、追加して再デプロイしたくなるでしょう。NetlifyやVercelのようなもので設定してあれば、それは通常、コードが変更されたら自動で再デプロイしてくれるこれらのホストに更新をプッシュするよう頼むだけです。

現実的な出発点

ポートフォリオサイトは小さく、よく理解されたプロジェクトです。数個のセクション、複雑なバックエンドなし、管理すべきアカウントなし。この組み合わせこそ、AIコーディングエージェントが最も強い場所です。記述的なプロンプト一つから、一回の作業で動き、見た目の整ったサイトまでたどり着け、その後のフィードバックのラウンドは作り直しではなく、短く具体的な依頼になります。重要な判断——どのプロジェクトを前面に出すか、自己紹介でどんなトーンで書くか——は引き続きあなたが下します。エージェントはその決定を、実際にデプロイ可能なWebサイトに変えるだけです。

👉 meshcodeをダウンロード — Mac、Windows。