Netlifyで、自分の
作品集を作ろう。

Claudeに頼む：

「Netlifyにある自分のサイト一覧を出して」

裏ではこういうMCPコールが走る：

netlify-project-services-reader / get-projects

返ってくるもの：

• name — サイト名
• urls.primarySiteUrl — 公開URL
• site_id — UUID（後で使う）
• currentDeploy.state — 稼働中かどうか

各サイトのURLを WebFetch で並列取得して、タイトル・概要を抽出してもらう。

「このURL全部見て、各サイトのタイトルと
何のサイトか教えて」
（URL一覧を渡す）

これで各カードに書く「タイトル」「説明文」「カテゴリタグ」の素材が揃う。

構造のキモ：iframeライブプレビュー

<div class="preview">
  <iframe
    src="https://your-site.netlify.app/"
    loading="lazy"
    sandbox="allow-same-origin"
    style="width:1440px;height:900px;
           transform:scale(0.25);
           transform-origin:0 0;
           border:0;
           pointer-events:none;">
  </iframe>
</div>

ポイント：

• width:1440px で PC幅でレンダリング（モバイル幅だと崩れて見えるサイトもあるため）
• transform:scale(0.25) で 1/4サイズに縮小 → サムネ風に
• pointer-events:none で iframe内をクリック不可に → カード全体のリンクが優先される
• loading="lazy" で 画面に入ってからロード → 初期表示が軽い

Claudeに頼む：

「ポートフォリオサイトを `あなたの名前-portfolio` で
新規作成して」

裏で走る処理：

netlify-project-services-updater / create-new-project
  params: { name: "your-name-portfolio" }

命名規則（ここ大事）

• ^[a-z0-9-]+$（小文字英数とハイフンのみ）
• 既存と被らない名前

Claudeに頼む：

「これをNetlifyに公開して」

裏で走る処理：

1. deploy-site でデプロイ用のnpxコマンド取得
2. ターミナルで npx -y @netlify/mcp@latest --site-id XXX 実行
3. Deploy is ready! が出たら完成 ✨

公開URL：

https://your-name-portfolio.netlify.app/

これで永続URL発行・自分のアカウント配下に正規所属。