数値で比べる
元のサイトと同じスクリプトで測った値です。目的は元サイトの複製ではなく、配置の骨格（型）が伝わったかどうかを見ることです。カッコ内は元との差です。
| 項目 | 参考元 | A. URLだけ | B. 旧MD | C. 新MD |
|---|
| ページ全体の高さ（px） | 8,634 | 7,319 (-15%) | 9,473 (+10%) | 8,740 (+1%) |
| 最初のブロック（FV）の高さ（px） | 1,941 | 774 (-60%) | 900 (-54%) | 2,186 (+13%) |
| いちばん大きい見出し（px） | 100 | 100 (±0%) | 52 (-48%) | 100 (±0%) |
| セクションの数（ヘッダーを除く） | 8 | 8 (±0%) | 9 (+13%) | 8 (±0%) |
| スマホ（390px）のページの高さ（px） | 8,056 | 8,376 (+4%) | 11,571 (+44%) | 10,113 (+26%) |
わかったこと
A. URLだけ: 雰囲気は近いが、並べ方が平均に寄る
色・書体・見出しの大きさは参考に近く、AIが実際にページを見た効果が出ています。ただ、お知らせの右にあった写真の送り表示がなくなり、製品は同じ形のカードの3列になりました。最初のブロックも元の4割ほどの高さで、写真と縦書きのコピーが重なり合う冒頭の見せ場がなくなっています。AIは見たものを、よくある形に寄せて組み直しがちです。
B. 旧MD: 並び方は伝わるが、大きさが自己流
セクションの順番、お知らせの右の写真、製品の「大1枚＋小2枚」は、MDの言葉の説明から伝わりました。ただ、大きさは数値で書かれていなかったため、AIが自分で決めています。最初のブロックは元の半分以下（900px）、いちばん大きい見出しは約半分（52px）で、ページは10%、スマホでは44%長くなりました。
C. 新MD: 高さ・FV・並び順が近い
ページの高さは元と1%差、FVの見出しは同じ100px、セクションの数も同じ8つでした。並び方はBと同じく元に沿っていて、そのうえで最初のブロックの高さ、写真に重ねる大きな見出し、採用の「写真左・文字右」、フッターの大きなロゴまで追えています。
一方で弱点も見つかりました。元のサイトでは写真の下の列が写真に食い込んで重なっていますが、C は縦に積みました。この結果を受けて、MDに「前の行に何px食い込んで重なるか」を書くよう改善済みです。スマホのページが長くなる点は、今後の課題です。
何が違ったのか: 配置を数値で渡す
C のMDには、参考サイトをブラウザで実測した「配置の設計図」が入っています。元の文章や画像は含まず、箱の種類・位置・大きさ・文字の設定だけです。たとえば FV の部分はこうなっています（抜粋）。
## 数字で見る決め手（外すと別物になる）
- FVの高さは画面 2.2 枚分。いちばん大きい見出しは 100px・太さ500・行間1（本文の 7.1 倍）
で、横幅 392px（画面の 27%）を占める。画像・映像は最初の画面の約 100%
- 文字の左右余白は 60px 前後。写真は端から 0px まで広げ、文字より外に出す
- すべてを同じ幅のカードの3列にしない
### S2 FV
+----------------------------------------------------------------+
|+==============================================================+|
||IMG 1.2:1+5...................................................||
|+==============================================================+|
|+==============================++==============++==============+|
||IMG 4:5+2.....................||H24+1.........||H24+1.........||
|+==============================++==============++==============+|
+----------------------------------------------------------------+
- 行1: 画像（1420×1186px）→ 見出し（100px・太さ500・2行）を画像の左下に重ねる …
- 行2: 3列・列の間隔10px: 画像（4:5）＋縦書きの見出し ｜ 縦書きの見出し＋画像 ｜ …
「大胆なFV」のような言葉だと、AIはよくある大きさに寄せます。「見出し100px・画面の27%・画像の左下に重ねる」と数値で書けば、外しようがありません。さらに、配置だけを先に組んだ骨組みコードを渡し、作ったあとに同じ項目を測って15%以上ずれたところを直す、という答え合わせの手順も入れています。
この検証の限界
- サイト1つ・スライド1つ、それぞれ1回ずつの比較です。AIの出力は毎回ばらつくので、傾向として読んでください。
- 今回のAIは、参考URLをブラウザで実際に開ける環境でした。ページを開けない・一部しか読めないAIでは、URLだけの結果はこれより下がると考えられますが、検証はしていません。
- 数値が元に近いことは、参考の型が伝わったことを示しますが、デザインの良し悪しそのものではありません。
試してみる
Katapick では、掲載している各サイト・資料のデザイン分析MDを、無料で3件までダウンロードできます。AIに渡して、自分の内容を伝えるだけで使えます。
