前回、CodexでHEROを生成したとき、正直こう思った。
「強い。でもまあ、所詮はパーツだろう」と。
だが今回は違う。
フルページだ。
しかも題材は、日本のスーパー求人。
“尖らせてはいけない領域”の代表格だ。
ここで崩れなければ本物。
崩れれば、ただの雰囲気ジェネレーター。
結論から言う。
Codexは、5分で“そのまま公開できる求人LP”を出してきた。
ワイヤーもモックもない。
気がついたら、もうHTMLがそこにあった。
投げたのは、ほぼ雑プロンプト
今回使ったプロンプトはこれ。
日本のスーパーマーケットの新規オープン店舗（春日部）の求人用ランディングページを1ページで作成してください。
対象は学生、主婦・主夫、フリーター、シニアなど幅広い層です。
未経験でも応募しやすく、生活に合わせて無理なく働ける安心感が伝わる構成にしてください。
時給1200円、週2日・1日2時間から勤務可能、研修あり、社員登用ありといった条件を自然に盛り込んでください。
日本語で、過度に派手すぎず、信頼感のあるトーンで。
画像も含めて、実在しそうな日本の求人ページとして違和感のないデザインにしてください。
プレースホルダーは使わないでください。指示は極端に少ない。
- 日本の求人であること
- 幅広い層を対象にすること
- 安心感を出すこと
これだけだ。
設計も構成も、ほぼAI任せ。
つまりこれはテストだ。
つまり今回の検証は、「日本の求人LPとして、どこまで文脈を理解できるか」のテストだった。
出てきたのは“普通に通る求人LP”
まず構成。
- HERO
- 働きやすさの理由
- 職種紹介
- ターゲット別導線
- FAQ
- 応募
かなり“日本の求人LPの型”に寄っている。
だが怖いのはそこじゃない。
コピーだ。
扶養内勤務、学校帰りの短時間、朝だけ・夕方だけの勤務も相談可能です。
テスト期間の相談もできます。
これ、狙って書けと言われても、外すやつは外す。
「生活に食い込んだ言葉」になっている。
ここがヤバい。
Codexは“日本の採用文化”をかなり深くなぞっている
今回の本質はこれ。
AIがやっているのは、
- HTML生成
- デザイン生成
ではない。
「日本の採用文化の再現」
だ。
- 学生
- 主婦主夫
- フリーター
- シニア
この分解もそう。
しかも、全員に“優しい距離感”で語っている。
求人で一番やっちゃいけないのは、
「売り込みすぎること」
そこを踏み外していない。
実装が軽すぎる（ここが一番危険）
ここ、今回一番ゾッとしたポイント。
出てきたものは、
- 素のHTML＋CSS
- システムフォント
- 外部CDNなし
つまり、
アップロードしたら終わり
だ。
しかも画像をminifyしたWebPに差し替えただけで、
Lighthouse で Performance 100
ここで気づく。
これは“モック”じゃない。
“完成品の叩き台”だ
png のサイズ圧縮最適化には、このツールを使用している。
1536×1024という“無意識のプロ品質”
さらに地味にヤバいのがこれ。
生成画像の解像度。
1536×1024
偶然の可能性はある。だが、結果としてはかなり“後工程に優しいサイズ”だった。
- 十分なディテール
- 余白耐性
- トリミング耐性
- レスポンシブ対応しやすい比率
これ、人間がやると地味に悩むやつ。
人物の一貫性まで保ってきたのは地味にすごい
今回、画像を見ていて驚いた点がある。
それは、別カットでも人物の連続性が保たれていたことだ。
店頭前の集合写真と、売場での会話シーン。
若手スタッフも、年配の男性スタッフも、見れば同じ人物として認識できる。
これは地味だが、かなり大きい。
求人LPでは「先輩の1日」「研修の流れ」「働くスタッフ紹介」など、
同じ人物を別の場面で見せたいケースがよくある。
そのたびに顔が別人になってしまうと、読者は無意識に冷める。
だが今回は違った。
“この店で、この人たちが働いている”という連続した現場感が崩れていない。
一枚絵がうまいだけでは、ここには届かない。
複数のビジュアルを並べたときに世界観がつながる。
この性質は、採用ページやブランドサイトのように
“人の空気感”を見せる場面で、かなり効いてくる。
システムプロンプトが透けて見える
今回、内部の設計思想もなんとなく見えた。
5m 39s作業しました
日本のスーパー求人LPを1ページで作ります。まずワークスペースを確認し、画像生成の手順も含めて最短で形にします。
1個のファイル、1 件のリストを探索、ran 1 command
画像生成スキルを使います。実在感のある求人ページに寄せるため、派手さよりも日本のスーパー採用サイトらしい写真トーンで2点用意します。
ヒーロー画像は十分使えます。次に保存先を特定してワークスペースへ移し、LP本体を組みます。
2 件のリストを探索
本文側にも生活感のある写真を1点足します。その後にHTMLとCSSをまとめて書きます。
画像の保存パスを拾って、参照先を固定します。続けて index.html を作成します。
1 件のリストを探索、ran 1 command
これから index.html を新規作成し、求人LPとして必要な訴求を1ページに整理します。あわせて生成画像を assets/ に固定配置します。
1 件のファイルを作成
index.html は作成済みです。最後に画像配置と軽い確認を行い、すぐ見られる状態にします。
1個のファイル、1 件のリストを探索、ran 2 commands
LP本体 を作成しました。春日部の新規オープンスーパー向けに、信頼感のある日本語トーンで、学生・主婦主夫・フリーター・シニアの各層に向けた訴求を1ページに整理しています。時給1,200円、週2日・1日2時間から、研修あり、社員登用あり も自然に組み込みました。
画像も実在感のある方向で用意し、hero画像 と 研修イメージ をページ内に配置済みです。ブラウザ表示の最終目視まではしていないので、必要なら次に余白や文言の微調整まで詰めます。軽く言うとこうだ。
「派手にするな、ちゃんと使えるものを作れ」
この思想が一貫している。
だから今回の出力は、
- 無難
- でも破綻しない
- ちゃんと現場で使える
という仕上がりになっている。
制作フローが“消えた”
従来の流れはこうだった。
- ワイヤー
- デザイン
- コーディング
だが今回は違う。
いきなり完成に近い状態が出る
残るのはこれだけ。
- 微調整
- 画像差し替え
- 文言の“刺し”
つまり、
“作る仕事”から“詰める仕事”へ変わる
それでも80点で止まる理由
今回のLPはよくできている。
ただし、それは「広く受け入れられる」設計であって、「特定の誰かに強く刺す」設計ではない。
この差が、そのまま80点と100点の差になる。
人間の仕事はここに残る
AIがやらない領域は明確。
「特定の1人に刺す」こと
例えばこういうやつ。
- 「子どもが学校に行っている間だけ働けます」
- 「テスト期間はシフト減らせます」
こういう“現実の一言”が入ると、応募は動く。
ここはまだ人間の領域。
結論｜これは進化じゃない、“地殻変動”だ
今回の結果をどう捉えるか。
「便利になった」じゃない。
制作の前提が壊れた
ワイヤーもモックも飛ぶ。
代わりに出てくるのは、
モックではなく完成品の叩き台
だ。
実物
実際のHTMLと画像最適化後のページを置いておく。
触ってみると、「叩き台」というには出来すぎている感覚が伝わるはずだ。
Codexに一度触れてみるといい。
「作る」とは何か、その前提が少しズレるはずだ。
※春日部フレッシュマート春日部中央店は、架空の店舗です
