2026.05.05

サンプルを 30 → 100 件まで増やした日のメモ

技術日記

はじめに

おとといの時点で 30 件まで増やした /samples/ (こういうのが作れます、というページ) を、今日もう一度大きく広げました。最終的には LP 50 件 + HP 50 件 = 合計 100 件。あわせて業種フィルタとピックアップ枠を入れて、ページ全体の見せ方も整え直しています。

1 日に 70 件追加したら自分の手では到底まわらないので、Claude Code のサブエージェントを 4 体並列で走らせて作りました。流れだけ大まかに書いておくと、今日のメニューはこんな感じです。

既存サムネイル 30 件を「実機ブラウザでキャプチャした実画像」に差し替え
新規サンプル LP 20 + HP 20 を追加(計 70 件に)
業種別フィルタとピックアップ枠を実装
6 件には AI 生成写真を組み込み
「これまでと全然違うデザイン方向性」で LP 15 + HP 15 を追加(計 100 件に)
ページ全体の文章を品質チェック → 文体ルール違反を 5 箇所修正
フィルタをピックアップ枠の上に移動

順に振り返ります。

まずはサムネイルを実機キャプチャに差し替えた

これまでサンプルカードのサムネイルには、Pollinations AI で生成した「それっぽい画像」を貼っていました。実際のサンプルサイトとは無関係の AI イラスト。当然、本物のサイトの方が情報量も説得力も上です。

なので、scripts/capture-samples.mjs というキャプチャスクリプトを作って、Playwright (ブラウザ自動操作) で各サンプルの実物 URL を 1280×720 で撮影 → そのまま screenshot.jpg として保存する形に変えました。

WSL2 + Ubuntu 24.04 環境で初めて Playwright を動かしたので、依存ライブラリのインストールにいくつかつまずきました。

libnspr4 / libnss3 / libasound2t64 などを apt で追加
日本語が□で表示される問題は fonts-noto-cjk を入れて解決
カラー絵文字 (🍣🌸🐶 など) も□になっていたので fonts-noto-color-emoji を追加

これで全 30 件きれいに撮れて、frontmatter の screenshot: パスも一括で書き換わるようにしました。

新規 40 件 (LP 20 + HP 20) を 4 体並列で実装

ここからが本日の本番。Claude Code のサブエージェント機能で、ブラウザ画面の中で「ミニ Claude」を 4 体同時に走らせます。各エージェントには次のような仕様を渡しました。

業種・トーン・配色・レイアウトの方針
単独で動く 1 ファイルの静的 HTML(外部 CSS/JS なし)
画像は使わず、CSS グラデ・SVG・絵文字だけで雰囲気を作る
noindex メタタグ・viewport・レスポンシブ最低限
frontmatter のスキーマと文体ルール

担当を 10 件ずつ 4 体に割り振って、約 13 分ですべての HTML + メタデータ MD ができあがりました。1 体あたり 700 秒前後。並列で待ち時間ゼロ。

仕上がったら全 30 件を一気にローカル HTTP サーバ越しにキャプチャ。Pollinations の画像と違って、本物のサイトのスクリーンショットなので「画面で見た印象」と「カードのサムネ」が完全に一致します。

業種別フィルタとピックアップ枠を追加

70 件並ぶと「全部見るのしんどい」「自分の業種に近いやつだけ見たい」となるので、ページ上部に 業種別チップ を置きました。クリックでクライアント側 JS が display: none を切り替えるだけのシンプルな仕組みです。

それと、自分が「特に気に入っているもの」を 12 件選んで featured: true を立て、ページ最上部にピックアップ枠として並べました。配色・余白・タイポグラフィのバランスがうまくいったやつだけを集めた、見せ場ゾーンです。

スキーマには featured: z.boolean().default(false) を 1 行追加するだけ。SampleCard コンポーネントには「★ ピックアップ」のバッジを表示するだけ。

必要な 6 件には AI 生成写真を組み込み

CSS だけで完結している方向性 (ミニマル、サードウェーブコーヒー、和モダン旅館など) はそのままでも見栄えしますが、「料理」「物品」「人」が主役のサンプルは、本物の写真が入ると説得力が一段上がります。品質チェックの結果、6 件が該当しました。

マグカップ (クラファン LP)
宅配食の俯瞰写真
現代アート作品 (個展 LP)
春の花束 (花屋 LP)
モノクロのトレーニング (会員制ジム LP)
ラテアート + コーヒー豆 (サードウェーブ HP)

これらは Pollinations AI に英文プロンプトを投げて、flux モデルで生成 → そのまま images/hero.jpg などに保存 → 該当 HTML の SVG プレースホルダや CSS グラデを <img> または background-image に置換、という流れ。10 枚で合計 600KB 程度に収まりました。

「全然違うデザイン方向性」で 30 件追加

70 件まで増えたところで「もう一周、これまでと全然違う方向のデザインも欲しい」というお題が来ました。

既存 70 件は基本的に「業種に応じた典型的な配色・装飾」だったので、今回は レイアウトの発想ごと別物にする ことを意識しました。

雑誌の誌面 (ジン)
設計図 (ブループリント)
Y2K リバイバル (極端に派手)
ブルータリズム (装飾を意図的に削ぐ)
レシート風 (感熱紙のギザギザ)
古いポストカード (切手 + 消印)
バウハウス (原色三色)
サイバーパンク (CRT スキャンライン)
新聞ブロードシート (4 段組)
bento グリッド (Apple 風)
縦書き墨絵 (古刹)

など。これも 4 体並列で実装、約 12 分で 30 件完成。

ファーストビューの構造をコピーしないことを最重要にしてサブエージェントに依頼したので、横並びにすると同じレイアウトが 1 つもない状態にできました。

段階的な品質チェック

新規 30 件には次のフローを通しました。

一括キャプチャ
30 枚を別エージェントに目視させて、品質スコア (◎○△×) と「写真を入れたほうがいいか」を 1 行ずつレビュー
写真追加候補 3 件 (山あい村・京都町家・ラーメン店) を Pollinations で生成して組み込み
△判定 (改行が崩れた 1 件) はコピー幅と font-size を調整して修正
再キャプチャ → 2 回目の目視
仕上げで 1 件 (暖簾の文字が見切れていた) を再修正

× (致命的な崩れ) は最終的に 0 件。修正は最小限の手戻りで済みました。

ページ全体の品質チェックでも 5 箇所修正

100 件揃ったところで、最後に /samples/ ページ自体のコピーをチェック。

ピックアップ枠の説明文に「70 件の中から」と書いてあって、もう古かった → 動的に件数を出すよう修正 ({all.length} 件の中から)
4 件のサンプル説明に「丁寧に」「丁寧な」が入っていた → Onbit の文体ルールでは業界用語として避けたい言葉なので、別表現に置き換え
「ご提供します」 → 「お渡しします」に

文体ルールはメモリに書いてあって、Claude Code が保持してくれているのですが、サブエージェントに作らせると微妙にすり抜けて入ってきます。最後に grep で禁止語をスキャンする工程は今後もルーチンに入れておきたい。

フィルタをピックアップ枠の上に移動

最後の仕上げとして、ページの順序を入れ替え。

旧:  PageHero → ピックアップ → フィルタ → LP → HP
新:  PageHero → フィルタ → ピックアップ → LP → HP

「業種で絞ってから、ピックアップ・LP・HP すべてに反映させて見る」という流れに整えました。あわせてフィルタ操作のクライアント JS も拡張して、ピックアップ枠の件数バッジと「該当業種にはピックアップなし」の空状態メッセージも動的に出るようにしています。

100 件並べてみての感想

100 件を 1 つのページに置くと「自分の業種に近いものを探す」のは大変ですが、業種フィルタを入れた時点で体験はだいぶ変わりました。フィルタで「カフェ」を選ぶと 3 件しか残らない、みたいな静かな現実も見えるようになります。

それと、サンプルを増やすこと自体に意味がある、というよりは 「型のバリエーション」が見えるかどうか が、お客さんから見たときの説得力につながると感じました。同じ「カフェの HP」でも、ナチュラル系・モノクロ写真ファースト・サードウェーブミニマルで全然違う見た目になる、というのが一覧で並ぶこと。これが今日の本当の成果かもしれません。

おわりに

朝から晩までずっとサブエージェントが何かを生成している 1 日で、自分の手は主に「指示を出す」「キャプチャ画像を目視する」「文章を直す」に集中していました。

普通に手で書いていたら 100 件のサンプルを作るのに 1 ヶ月くらい。それが 1 日で終わるのは、Claude Code を使う日常としてもなかなか手応えのある日でした。とはいえ、目視での品質チェックは出来てないので、この後じっくり取捨選択していきます。