ポートフォリオビルダー
個人の仕事を一ページのポートフォリオに変えます。Claudeはチャットでコンテンツを計画し、BRIEF.mdに確定し、Claude Codeプロンプトを引き継ぎます。Claude Codeがローカルでビルドし、GitHubにプッシュし、Netlifyがデプロイします。その後、Claudeはリポジトリとライブサイトを監査します。
このスキルが生成するすべてのものに関するライティングルール: カジュアルで直接的な口調、短い文、エムダッシュなし（通常のハイフンのみ）。
フェーズ1: 質問する前に収集する
- 既にわかっていることを引き出す: メモリ、過去のチャット、ライブサイト（実際の機能リストとコピーのためにそれらを取得する）。
- 最初にコンテンツの棚卸しを下書きする。決して白紙の質問票から始めない。
フェーズ2: 概要v1を下書きし、最大4つの決定事項を質問する
実際のコピーでセクションを下書きし、ビルドを変更するものだけを質問する:
- 主なオーディエンス（クライアント、採用担当者、またはその両方、そしてどちらが主か）。
- 可視性の制約（現在の雇用主を明記するか一般名にするか、非公開にするものがあれば）。
- 含めるプロジェクト。
- どこに置くか（最初はNetlifyサブドメインで問題ない）。
ガードレール:
- 捏造された指標、推薦文、クライアントは掲載しない。
- 本人が行っていない主張（例: 本業で行っていないAI関連の仕事）は掲載しない。
- チームの成果はチームの成果としてクレジットする。
- 雇用主を一般名にする場合は、それを特定できる詳細（国リスト、正確な役職と業界）も削除する。リストではなく「5つの市場」と表記する。
- 地域の表現（例: 1つの国が大陸にまたがる場合の「アジア市場」）と、ヒーローコピー内の曖昧な代名詞に注意する。
プロジェクト包含ルール: プロジェクトは、それがライブであり、オーディエンスが対価を払うであろうスキルを示す場合に掲載される。多すぎる事業は「あなたに割く時間がない」というシグナルになる。保留中または過去の作業は、小さな「実験室から」という行に、正直にラベルを付けて掲載する。名前のない、または未公開のプロジェクトは待機する。
ツール: 実際にハンズオンで使用したツールのみをリストする。単に精通しているツールは、1行の脚注に入れる（「XとYにも対応可能」）。
フェーズ3: ギャップを埋める
以下を依頼する: 表示名、顔写真、ビルドごとに1枚のスクリーンショット、ライブURL、GitHub URL、連絡先メールアドレス、ソーシャルメディア。提供されたサイトコピーは、ポートフォリオに適した形に書き換える（それが何か、誰のためのものか、何を構築したか）。 すべてのカードリンクは、そのアイテムを実際に説明するライブページを指している必要がある。ページが準備できていない場合は、リンクなしでタグを付ける（例: 「近日公開」）。 準備ができていないもの（予約リンク、「一緒に仕事をしましょう」、推薦文）は、v1をブロックする代わりに「後で」リストに延期する。
フェーズ4: BRIEF.mdをロックする
以下のセクションを順に含むBRIEF.mdを作成する:
- 目標（10秒テスト: 何を構築するか、証拠、連絡方法）
- オーディエンス
- コピーのルール（口調、エムダッシュなし、可視性と正確性のガードレール、コピーをそのまま使用）
- 技術（プレーンなHTML/CSS/バニラJS、ビルドステップなし; index.html、styles.css、main.js、/assets; GitHub + Netlify; Lighthouse 95以上; モバイルファースト）
- デザインの方向性（デフォルトはApple風: Interまたはシステムフォント、十分なホワイトスペース、〜1080px最大幅、〜680pxテキストブロック、タイトな大見出し、ニュートラルパレット、20-24pxカード半径、ヘアライン境界線、控えめに使用する1つのアクセントカラー、ライト/ダーク切り替え、動きの軽減を尊重した微妙なフェードアップ、最小限のブラウザフレームカード内のスクリーンショット、固定スティッキーナビゲーション）
- レイアウトルール（最初から組み込む）:
- ナビゲーションとすべてのセクションは1つのコンテナを共有し、すべての左端が揃うようにする。
- すべてのギャップに1つのセクション間スペーシングトークン（デスクトップ約96px、モバイル約56px）を使用し、パディングを積み重ねない。
- ヒーローは1366x768および375x812で、ブラウザツールバーを含めて（可視範囲約650pxおよび635px）ファーストビューに収まる。
- 見出し: モバイルではtext-wrap: pretty、デスクトップではbalance; 強制改行なし。
- すべてのセクションには、目に見える見出しまたはアイブロウラベルがあり、何も浮遊しないようにする。
- アセット（正確なファイルパス; スクリーンショットはモバイルサイズを小さくしたWebPに変換、フォールド以下は遅延読み込み; 欠落している場合はプレースホルダー、壊れた画像は絶対に表示しない）
- ページコンテンツ、上から下へ、最終コピー: ヒーロー、私がしていること（3つのカード）、ビルド（注目カード + グリッド + ラボ行）、構築方法、ツール（グループ化されたピル）、背景ストリップ、原則（本人の言葉で、引用ではない）、連絡先、フッター
- SEOとメタ（タイトル、説明、OG画像、ファビコン、セマンティックHTML、altテキスト、フォーカス状態、AAコントラスト）
- 事前入力された詳細: リポジトリURL、優先サブドメインと代替、ソーシャルハンドル、メールアドレス（Claude Codeが質問しなくて済むように）
- 後で（v1には含めない）
アクセントカラー: ビルドのスクリーンショットの色から分離するものを選択する。ライトモードとダークモードの正確な16進数値を指定し、両モードでリンクとボタンテキストのアクセントに対するAAコントラストを確認する（ダークモードのボタンは通常、明るいアクセントに暗いテキストが必要）。
BRIEF.mdをファイルとして提供する。
フェーズ5: セットアップ手順 + 4つのプロンプト
セットアップ（1回）:
- 空のGitHubリポジトリを作成し、
git clone <repo-url>でローカルフォルダにクローンしてgitが既に配線されている状態にする。 - BRIEF.mdをルートに配置し、/assetsと/assets/shotsを名前付きファイルで追加する。
- そのフォルダでClaude Codeを開く。
プロンプト1、計画:
BRIEF.mdを完全に読んでください。まだコードは書かないでください。
簡潔なビルド計画を教えてください: ファイル構造、セクションごとのレイアウト、使用するカラートークンとタイプスケール、そして概要に疑問点や競合があればそれら。1画面以内に収めてください。
アクセントカラー: ライトモードは<LIGHT_HEX>、ダークモードは<DARK_HEX>。控えめに使用し、両方がAAコントラスト（ボタンテキスト含む）に合格することを確認してください。
その質問に対する回答を、ペースト可能な1つの返信で支援する。
プロンプト2、ビルド:
BRIEF.mdと合意した計画に正確に従ってサイトをビルドしてください。
- コピーは一字一句そのまま使用すること。エムダッシュはどこにも使用しないこと。
- プレーンなHTML、CSS、バニラJS。フレームワークもビルドステップもなし。
- アクセント: ライト<LIGHT_HEX>、ダーク<DARK_HEX>。それ以外はすべてニュートラル。
- BRIEF.mdのレイアウトルールに従うこと（共有コンテナ、1つのスペーシングトークン、ヒーローはファーストビューに収めること）。
- /assetsの画像をWebPとして使用すること。画像がない場合はクリーンなプレースホルダーを表示すること。
- ライト/ダークモード、固定スティッキーナビ、スクロール時のフェードアップ（動きの軽減対応）。
完了したら、ローカルサーバーを起動し、レビューできるようにURLを教えてください。
プロンプト3、磨き上げ:
Appleのシニアデザイナーのようにサイトをレビューし、見つけた問題を修正してください:
1. 375px、768px、1366px、1440pxで確認すること。水平スクロールがなく、何も窮屈でないこと。
2. すべての左端が揃っていること。すべてのセクションギャップは1つのスペーシングトークンを使用していること。
3. ヒーローは1366と375でブラウザツールバーを含めてファーストビューに収まること。
4. ダークモードは意図的に見えることであって、単に反転したものではないこと。アクセントは両モードで読みやすいこと。
5. アクセシビリティ: altテキスト、フォーカス状態、AAコントラスト、セマンティック見出し。
6. すべてのファイルでエムダッシュを検索し、置き換えること。
7. Lighthouseを実行し、4つのスコアすべてを95以上にすること。
変更した内容の短いリストを教えてください。
その後、本人が満足するまで平易な言葉でフィードバックを与える。
プロンプト4、プッシュしてデプロイ:
このフォルダは<REPO_URL>から既にクローンされています。
1. .gitignoreとnetlify.tomlを追加します（公開ディレクトリ = ルート、適切なキャッシュヘッダー、BRIEF.mdとソースPNGが公開されないように404）。
2. 明確なメッセージですべてをコミットし、mainにプッシュします。
3. リポジトリをNetlifyに接続します。まず<SUBDOMAIN>を試し、フォールバックに<FALLBACK>を試します。NetlifyのGitHubアプリがリポジトリを認識できない場合は、アクセスを許可する方法を教えてください。
注: Claude Codeはしばしば先走ってビルド、磨き上げ、デプロイを一度に行うことがあります。それでも問題ありません。監査にスキップしてください。
フェーズ6: プッシュ後の監査
リポジトリまたはライブURLが共有されたとき:
- リポジトリをクローンし、確認する: コピーはBRIEF.mdと一致しているか、何も捏造されていないか、エムダッシュがないか、制限された名前がないか、すべてのリンクが正しいか、画像はaltテキストとサイズを持つWebPか、メタ/OG/ファビコンが存在するか、内部ファイルがライブサイトからブロックされているか。
- ライブサイトを1440と1366（ライト）および375（ダーク）のブラウザで視覚的に確認する: エッジの配置、ギャップの一貫性、ヒーローがファーストビューに収まっているか、見出しの折り返し、オーバーラップがないか。
- 修正内容を1つのペースト可能なClaude Codeプロンプトとして提供し、プッシュ後に再確認する。 リポジトリが空の場合は、その旨を明確に伝え、最初にプッシュするよう依頼する。
既知の落とし穴:
- Netlifyは2026年8月19日以降に作成された無料プランのプロジェクトに「Powered by Netlify」バッジを追加します。これはコードにはありません。プロジェクト設定 > 一般 > Powered by Netlifyバッジで、プロジェクトごとにオフにしてください。
- 遅い接続からのライブLighthouseスコアは変動します。ローカル実行だけでなく、pagespeed.web.devで判断してください。
フェーズ7: その他のプレゼンスを同期する
GitHubプロフィールのREADME（およびその他のバイオ）をポートフォリオと揃えることを提案する: 同じポジショニングライン、同じ連絡先メールアドレス、ライブビルドとポートフォリオへのリンク、そしてポートフォリオから意図的に除外したプロジェクトを削除する。