先に結論です。このブログのトップページが、エージェントAI（Claude Code）に頼んでから9分37秒で、記事が縦に並ぶだけの「ブログ型」から、有料テーマのデモサイトのような「サイト型」に変わりました。
お手本にしたのは、デザインの評判が高い有料WordPressテーマ「JIN:R」の公式デモ「Navy Blue」です。あの雰囲気を、無料テーマCocoonのまま再現してもらいました。CSSもHTMLも1行も書いていませんし、固定ページの作成も、トップページへの切り替え設定も、AI側の作業です。
9分37秒は最初の顔までの数字で、そのあと「もっと本家に寄せて」の微調整を5回頼みました。頼んだ言葉も、かかった時間も、そのまま載せます。
サイト型にしたくなる日は、記事が溜まったころに来ます
WordPressのトップページには2種類あります。新着記事が時系列で縦に並ぶのが「ブログ型」、雑誌や企業サイトのように、スライダーやカテゴリの入り口を自分で組んで見せるのが「サイト型」です。
最初はブログ型で何も困りません。記事が少ないうちは、新着の一覧がそのまま全記事の一覧だからです。サイト型にする意味が出てくるのは、記事が溜まってきてから。つまり、これは順番の問題です。このブログも7本になって、連載と実例という2つの流れができたところで、「新しい順」だけのトップでは連載の1回目がいちばん下に沈むようになりました。入り口を整理したい時期が、来たわけです。
ところが、いざやろうと解説を開くと、固定ページを2枚作って、ショートコードを並べて、カラムを組んで、という工程がずらっと続きます。定番の解説は7ステップ構成、動画版は21分から53分。「整えたい時期が来た」人の前に、この工程の重さが壁として立ちます。サイト型トップページは、そういう場所です。
巷の作り方は「手順を追う」か「コピペ」の2択です
サイト型トップページの作り方は、先人がしっかり整備してくれています。大きく2つの型があります。
- 手順型: 固定ページの作成からホームページ設定まで、画面つきで1歩ずつ進める。確実ですが、工程が長く、デザインの細部は自分のセンス頼み
- コピペ型: 完成デザインのHTMLとCSSを配布してくれていて、貼れば形になる。早いですが、用意された完成形に自分のサイトを合わせる方式で、色や並びを変えたくなった瞬間に手が止まります
どちらも良い方法です。ただ、どちらにも「うちのサイトの記事構成に合わせて、雰囲気だけ真似したい」という注文を受け付ける窓口がありません。今回やったのは、その第3の道です。
頼み方は、デモサイトのURLを渡すだけでした
頼んだ言葉は、これで全部です。
JIN:RのNavy Blueみたいにして
このサイト
https://jinr-demo.jp/demo-7/
デザインの指定は「みたいにして」だけ。お手本のURLを1つ渡すと、AIが手本を観察して、うちの記事を調べて、作って、切り替えるところまで進みます。
この実演で使っているのは、貼り付けや設定変更まで自分でやってくれるエージェントAIです（このブログの看板記事で説明しています）。ChatGPTのような対話型AIでのやり方は、記事の最後にまとめました。
9分37秒後、トップページはこうなりました
上から順に、こういう構成で組まれていました。
- 記事カードのスライダー: 全7記事が横に流れて、矢印で送れます
- News: 新着3本の日付つきリスト＋カテゴリの入り口が2つ
- Series: 連載「ブログの始め方」が、読む順の番号バッジつきで5枚
- Gallery: 紺色の帯に、カスタマイズ実例が「実測 2分49秒」「実測 47秒」のチップつきで2枚
- Profile: 運営者の自己紹介と、このブログを始めた理由への入り口
見た目の話は、スクリーンショットより実物のほうが早いです。このページのトップページがその現物なので、スライダーの動きごと確かめられます。
仕組みは、サイト型の定番手順そのものです（固定ページを作り、HTMLとCSSを書き込み、表示設定を切り替える）。特別な裏技ではなく、手順型の解説と同じ道を、人間の代わりにAIが歩いています。プラグインも増えていません（プラグイン0個の話は継続中です）。
かかった時間と、拘束された時間
タイムスタンプの記録では、依頼の一言からトップページの切り替えが終わるまで、9分37秒でした。この中には、AIが自分のミスを1つ見つけて直す時間も入っています。私から指摘したことは、今回もゼロです。
ボタン1個が2分49秒、配色が47秒だったので、トップページはさすがに桁が1つ違いました。それでも動画解説の21〜53分は「見るだけ」の時間で、そのあとに自分の手を動かす作業がもう一周あります。
数字より効いたのは、この拘束時間の差です。エージェントAIは、指示したら待つだけ。待っている間は別の作業ができます。時計の上では9分37秒でも、こちらの手が止まっていた時間は数えるほどでした。
デモサイトのURLを渡して、あとは待ってただけ！
おかわり5回。注文はぜんぶ「一言」のままでした
9分37秒でできた最初の顔は、いわば叩き台です。ここから「もっと本家に寄せて」の注文を5回重ねました。追加でかかった時間は合計21分54秒。注文は5回とも、一言のままです。中身は大きく3つでした。
- 色とフォントは、AIが本家のCSSを読みに行って答えを取ってきました。見出しの英字フォントの正体（Albert Sans）まで特定して、同じものに差し替えています。目で似せるのではなく、実データで合わせる方式です
- スライダーの動きも本家と同じに。最後のカードのあとも右へ流れ続けて、先頭へ戻ります
- 構造の読み違いが2回ありました。「背景は薄い青で、白い箱をくり抜くように並べる」という本家の骨格を、AIは縮小画像から読み違えていました。こちらが本家の画面スクショを1枚渡したら、一発で通じました。細かい見た目は、言葉で説明するより見本を見せるのが最強の指示です
5往復のあいだ、こちらがやったことは「見て、一言返す」だけです。待ち時間はそのまま自分の作業時間でした。
「うちの7記事に合わせる」が、コピペとの違いです
今回いちばん見てほしいのは、速さより、AIがうちのサイトの事情に合わせて設計を変えてきたところです。
- お手本のデモには「Popular Post（人気記事）」のランキング枠があります。ただ、このブログは開設6日目で、人気を名乗れるほどのアクセスデータがありません。AIはそこを「連載を読む順」の番号バッジに読み替えてきました
- 実例の帯には、過去記事の実測時間がそのままチップになっています。「2分49秒」「47秒」は、うちにしか出せない数字です
- カテゴリの入り口は、うちにある2つだけ。存在しない枠を飾りで置いていません
配布されている完成コードは、記事がたくさんある想定で組まれていることが多く、開設したてのサイトが貼るとスカスカになりがちです。「今の自分のサイトに合う形」から始めて、記事が増えたら組み替えてもらう。この身の丈スタートができるのが、言葉で頼む方式のいちばんの強みだと思います。
判定と、気になるところ
このブログの実例記事は、毎回同じ物差しで判定しています。🟢AIで一発／🟡工夫が要った／🔴手動やスキンのほうが早い、の3段階です。
今回は2段階に分けます。「それ風の顔にする」までは🟢、「本家に忠実に寄せ切る」は🟡です。
- 🟢: URL1つで9分37秒。注文もやり直しもなしで、サイト型の顔になりました
- 🟡: 本家と並べて見比べるレベルまで寄せるには、5回の注文と21分54秒が追加で必要でした。うち2回はAIの構造の読み違いで、本家の実物スクショを渡すひと工夫で解決しています
そのうえで、気になった点も並べておきます。
- 今回の再現は「ぱっと見の雰囲気が8割」です。残りの2割（フォントの細部、スクロール連動のアニメーション、新着記事の自動表示など）も、作り込めば同じようにできます。できないのではなく、今回はここで止めただけです。どこまで寄せるかは、かける時間との相談です
- JIN:Rを買えば、公式の機能でこのデモの完全版に1クリックで着せ替えられます。丸ごと欲しい人は、テーマを買うのが最短です。今回のは「無料テーマのまま、雰囲気を借りて、自分のサイトに合わせる」という別の道です
エージェントAIは指示して待つだけ。待ってる間に他の作業ができるんです！
ChatGPTなど、対話型AIでやる場合
ChatGPTのような対話型AIでも、この記事の内容は再現できます。違いは、出てきたHTMLとCSSを自分で貼ること。固定ページの作成と表示設定の切り替えも自分の手でやります。「部品はAIに作らせて、組み立ては自分」という分担です。
コピペで使える頼み方の例を置いておきます。
WordPressの無料テーマCocoonを使っています。
トップページをサイト型にしたいので、固定ページに貼るHTMLとCSSを作ってください。
雰囲気は、このデモサイトのような紺系の上品な感じにしたいです。
https://jinr-demo.jp/demo-7/
載せたい要素は、新着記事3本、連載の一覧、プロフィールです。
記事のタイトル・リンク・画像はあとで自分で差し替えるので、わかりやすい仮置きにしてください。対話型AIはサイトを直接見られないことが多いので、今のトップページのスクリーンショットを1枚貼ると、精度が上がります。好みと違ったら、直したい場所を言葉で返せば作り直してくれます。保険として、お手本のデモURLを見せて「これに寄せて」と頼むのも有効です。
まとめ
- サイト型の壁は工程の長さ（7ステップ・動画21〜53分）。それが「みたいにして」＋お手本のURLの一言になった
- 実測は最初の顔まで9分37秒、本家に寄せるおかわり5回で＋21分54秒。合計しても、長い動画1本を見るより短い
- 指示したら待つだけ。待ち時間は自分の作業に使えます。拘束された時間で数えれば、数分でした
- 判定は2段階で、それ風🟢・忠実🟡。細かな見た目は、見本のスクショを見せるのが最強の指示
- 完成形はコピペではなく、7記事の今のうちに合わせた設計。丸ごと本物が欲しい人はJIN:Rを買うのが最短です
トップページを整えたくなる日は、記事が溜まれば必ず来ます。その日が来たら、7ステップの解説と一緒に、「AIに一言」も選択肢に入れてみてください。工程の重さは、もう見送る理由になりません。
（次の実例は、見出しデザインを予定しています。実例が増えたら、トップページのGalleryにも足していきます）
コメント