111seek/blogger-portfolio

博主人设作品集（面试用单文件 HTML）

出力は1つの index.html です。画像はすべて base64 で埋め込まれており、ダブルクリックで開け、微信（WeChat）やメールで面接官に直接送れます。 構成は7つのブロックで固定され、「ライフタイムライン」でつながっています。文章は強みだけを語り、すべての数字がアカウントのプロフィールと一致している必要があります。

使用タイミング

• ユーザーが自分のブロガーアカウントを応募資料（新メディア / コンテンツ運用 / ブランドPR職）として使いたいとき
• ユーザーが他のブロガー向けに同じページを作りたいとき（人設を変え、データを変え、デザインを書き直さない）
• ユーザーが古いポートフォリオを持っており、配色・構成・成績表を変更する必要があるとき

納品物の外観

portfolio/
├── index.html          ← 唯一の納品物
├── data.json           ← データソース（ノート、四半期、ブランド、プロフィール）
└── assets/             ← カバー画像 + アバター（ビルド時に埋め込まれる）

7つのブロック（番号テーマは変更可能。references/theming.md を参照）：

ブロック	内容	重要な要件
12:00 オープニング	タイトル + リード + 5つのデータバー	一言で「私が成し遂げたこと」を復唱できること
12:15 作品	TOP1 単独解説 + TOP2–5 常時表示 + TOP6–9 折りたたみ	カバーは本人が写っている元の写真であること
12:40 データ	四半期ごとのいいね曲線 + シェア率/保存率の比率バー	曲線は滑らか、グラデーションエリアと線アニメーション付き
13:00 経歴	ナラティブ + 2×2 成績表 + ファン層 + まとめ	数字は3段階：規模/爆発/商業化
13:20 方法	4つの原則、それぞれに数字の裏付けを添える	データで裏付けられない原則は書かない
13:40 強み	4枚の能力カード（大きな数字 + タグ + 証拠）	強みであって振り返りではない。問題点や計画を書くのは禁止
14:00 プロフィール	締めの一言 + 事実テーブル（所在地/学歴/アカウント/メール）	面接官が連絡先をコピーしやすいように

事前依存関係（ステップ0、データ取得前に必ず行うこと）

データ取得には小红书CLIが必要です。CLIはすでにこのスキルに組み込まれています（vendor/redbook/、上流はMIT）。 したがって、スキルディレクトリ全体を相手にコピーすれば使え、相手が npm i -g する必要はありません。

bash scripts/doctor.sh     # ヘルスチェック：node / CLI の出元 / cookie / ログイン状態

チェック項目	要件	満たさない場合
node	≥ 22	node をインストールしてから再実行。内蔵コピーもこれで動く
CLI	グローバルの redbook または vendor/redbook/dist/cli.js のいずれかが存在すること	vendor のコピー漏れ、または npm i -g @lucasygu/redbook を実行
ログイン状態	~/.redbook/cookies.json が有効であること	bash scripts/redbook.sh auth save を実行。失敗した場合は data-collection.md 末尾の CDP 方式を参照

すべてのデータ取得コマンドはランチャー bash scripts/redbook.sh <サブコマンド> を経由します。ランチャーはグローバル版（npm アップグレードに追従可能）を優先し、 なければ内蔵コピーにフォールバックし、自動で REDBOOK_COOKIE_FILE を設定します。相手の環境で redbook とだけ書くと存在しない可能性があります。

他人と共有する場合：blogger-portfolio/ ディレクトリ全体をパッケージ化してください（vendor/ を含み、約1MB）。 相手側で自分で行うことは2つだけ：node ≥22 をインストールすること、自分の小红书アカウントで1度ログインすること。 vendor/redbook/ を削除してサイズを減らさないでください。削除すると「npm パッケージを先にインストールしなければならない」状態に退化します。 CLI をアップグレードする場合：npm i -g @lucasygu/redbook@latest を実行後、新しい dist/ node_modules/ を vendor/redbook/ に同期してください。

フロー

1. データ取得

公開データは内蔵の小红书CLIで取得します（ノート一覧、いいね/保存/共有、TOP9カバー、四半期分布）：

RB="bash scripts/redbook.sh"
$RB whoami                                        # まずログイン状態を確認
$RB search "<アカウントニックネーム>" --json                     # 数字の小红号 → userId + xsec_token を取得
$RB user-posts <userId> --xsec-token '<t>' --xsec-source pc_search --all --delay 3000 --json > posts.json

閲覧数、ファン層、ブランド数、成約額などはユーザーに直接尋ねる必要があります。

完全なコマンド、重複排除と集計スクリプト、Cookie失効の修復、コメント取得時のアンチボット対策については、 references/data-collection.md を参照してください。取得は必ず直列 + 3秒間隔で行い、コメントで認証コードが出たらすぐに停止してください。

2. 人設とスキンの決定

まず3つのことを確認します：アカウントのポジショニング（ライフスタイル/ホーム/マタニティ＆ベビー/ペット/レストラン探訪など）、志望職種、本人が写真に写っているかどうか。 次に references/theming.md に従って、タイムラインメタファー、カラーパレット、セクション名を選択します。 デフォルトは薄い紙風（生成り #fbf6ee + 杏オレンジ #d9744f）。ライフスタイル系ブロガーは暗い色を使いません。

3. data.json を書く

demo/data.json からコピーして修正します（demo/ はそのままビルドできるサンプル：架空の人物 + プレースホルダーカバー）：

{
  "site":  {"title","meta","name","tagline","handle","profile_url","collected_at","start","avatar"},
  "hero":  {"clock","h1","lead","roles"},
  "ledger":[{"value","label","hl"}],            // 5つ、最初のものは hl:true
  "facts": [{"k","v"}],                          // プロフィールページ右側の事実テーブル（所在地/学歴/アカウント/メール）
  "notes": [{"rank","title","date","like","collect","share","comment","url","brand","img"}],
  "quarters": [["24Q3", 1, 260]],               // [四半期, 投稿数, いいね合計]、6～12個でOK
  "brands":[{"name","cat"}]
}

notes は9つで十分です（TOP1 + TOP2–5 + TOP6–9）。img は相対パスで書き、ビルド時に自動埋め込みされます。 数値はプラットフォームの元の表記を保持します（"7.6万"）。ページ内の toN/fmt が統一換算します。 h1 と lead にはHTMLを含めることができます（<br>、<span class="mark">、<em>）。

4. ビルド

python3 scripts/build.py --data portfolio/data.json --out portfolio/index.html

スクリプトは画像の埋め込み、プレースホルダーの充填を行います。プレースホルダーが埋まっていない場合はエラーで終了し、最後にまだ変更が必要なサンプル文がいくつ残っているかを表示します。

5. サンプル文の書き換え（スキップ不可）

テンプレートには「車中仮眠」のサンプルが一式含まれています。ビルド後、マークに従って1つずつ書き換えます：

<!--EDIT:works-->       作品エリアのタイトル＋リード＋TOP1の3つの解説
<!--EDIT:featured-->    TOP1ハイライトカード（はじめに＋なぜバズったか）
<!--EDIT:datahead-->    データエリアのタイトル＋3つの比率説明
<!--EDIT:experience-->  経歴：ナラティブ＋成績表＋ファン層＋まとめ
<!--EDIT:method-->      方法の4つ
<!--EDIT:strengths-->   強みの4枚
<!--EDIT:about-->       プロフィール＋サイドバーの事実テーブル

ライティングルール、セクションの公式、禁止リスト、各カードがどの面接質問に対応するかは、references/copy-playbook.md を参照してください。 書き始める前にこれを読んでください。 読まないと振り返り文になってしまいがちです。

順序の推奨：最初にビルドし、次にHTML上で書き換えます。その後 data.json を変更する必要がある場合は、再ビルドすると手で直した内容が上書きされることに注意してください。

6. ヘルスチェック

npm i playwright-core     # 任意の一時ディレクトリに1度インストール
node scripts/verify.js portfolio/index.html

3つのビューポート（1440 / 768 / 390）それぞれでチェック：コンソールエラー、表示されている画像が読み込まれているか、横方向のはみ出し、 スクロールフェードインがすべて表示されているか、曲線が生成されているか、比率バーの幅が0でないか、本文のコントラスト比が4.5以上あるか。 深刻な問題がある場合、終了コードは0以外になります。

ユーザーにスクリーンショットは送らないでください。 数値の結論だけを報告してください。ユーザーが明示的に見たいと言った場合のみスクリーンショットを送ります。

7. 納品

present_files で portfolio/index.html を開き、本文で3つのことを明確に伝えます：

1. 今回の変更点（配色 / 構成 / 数字の基準）
2. プラットフォーム表示と合わない数字、どう書くのが良いか（自分でごまかさないこと）
3. 不足しているもの：職務経歴【未記入】、連絡先メールアドレス、オンラインリンクとして公開するかどうか

ユーザーがスマートフォンでよく見る場合、ローカルネットワークプレビュー（~/.workbuddy/live-serve/live_serve.py）を使ってください。ファイルを何度も送りつけないようにしましょう。

ディレクトリ構成

SKILL.md                      本ファイル
scripts/build.py              data.json + テンプレート → 単一ファイルHTML
scripts/verify.js             納品前ヘルスチェック（playwright-core + ローカルChrome）
scripts/doctor.sh             データ取得前のヘルスチェック（node / CLI / cookie / ログイン状態）
scripts/preview.sh            ビルド＋サーバー起動＋スマホアドレス表示＋変更時自動再ビルド（1コマンド）
scripts/redbook.sh            CLIランチャー（グローバル版 → 内蔵コピー、自動選択）
assets/template.html          ページテンプレート（完全なCSS/JS、プレースホルダー {{NAME}} 形式）
demo/                         そのままビルドできるサンプル（架空の人物＋プレースホルダーカバー、1回実行して環境を確認）
references/data-collection.md データ取得、集約、Cookie修復、アンチボット対策
references/copy-playbook.md   ライティング公式、3段階の数字、禁止事項、面接質問マッピング
references/theming.md         人設変更：タイムラインメタファー、カラーパレット、装飾、アクセシビリティ基準
vendor/redbook/               内蔵小红书CLI（MIT、dist/ と node_modules/ を含む）
vendor/NOTICE.md              内蔵依存関係の出典、バージョン、ライセンス、アップグレード方法

テンプレートは37KB、画像埋め込み後の完成品は約1MBです。このサイズは許容範囲なので、サイズ削減のために画像を圧縮しないでください。 内蔵CLIは約760KBです。削除しないでください。これが「相手がnodeをインストールするだけで使える」唯一の保証です。

よくある落とし穴

• 数字の矛盾：ユーザーが「8万いいね」と口頭で言い、ページに7.6万と書いてあると、面接官が照合した瞬間に崩れます。プロフィールに表示されている値を統一して使ってください。
• redbook とだけ書いて command not found：相手の環境にグローバルパッケージがインストールされていません。必ず bash scripts/redbook.sh を使ってください。 これは vendor/redbook/ にフォールバックします。まず bash scripts/doctor.sh を実行して、どの部分が不足しているか確認してください。
• 振り返り文になってしまう：「問題点」「次のステップ」「学んだこと」が出てきたら方向性が間違っています。そのブロック全体を削除し、能力カードに置き換えてください。
• タイムスタンプの変更忘れ：ナビゲーションの <small>12:15</small> と、セクションの <b>12:15</b> を同期させる必要があります。
• 比率バーが表示されない：.bar .tr / .fl は span です。display:block にしないと幅が適用されません。
• 折りたたみ部分の画像が「読み込まれていない」と報告される：display:none の遅延読み込み画像は正常です。verify.js はこれを除外しています。
• スマートフォンでの改行：ファン層の3枚の小さなカードは white-space:nowrap を使っています。狭い画面ではフォントサイズと内側の余白を縮めてください。
• 大規模アカウントのいいねは上限値：フォロワー10万人を超えるアカウントの場合、いいねは一律「10万+」と表示され、collected_count も上限に達する可能性があります。「保存数 ÷ いいね数」のような比率は単なる上限値であり、結論として書いてはいけません。この場合は、比率バーを絶対値（保存数、コメント数をそれぞれ別のグループ）に変更してください。結論は同じように成立しますが、すべての数字に根拠があります。
• 大規模アカウントをいいね順に並べない：上限に達すると並び順は意味をなしません。「コンテンツタイプごとに代表作を1つずつ選ぶ」方式に変更し、小見出しでなぜ順位付けしないのかを説明してください。
• カバー画像の縦横比が混在：同じアカウントで9:16、3:4、4:3の3種類のカバー（長尺動画、正方形、横長）が混在することがあります。3:4に統一してトリミング + object-position:50% 42% を適用すると、縦長の画像でも下部のタイトルが切れません。
• heroのデータバーが半分の行にしかならない：.ledger がheroの2つ目の .wrap 内にあると、2カラムグリッドを継承してしまいます。.hero .wrap+.wrap{display:block} を追加してください。
• 大規模アカウントのデータ取得は遅い：1000+ 投稿の場合、--delay 2000 で約40ページ、2分程度で完了します。しかし、TOP9の詳細を取得するには1件ずつ read する必要があり、間隔は5秒、並行処理はしないでください。