ゆきしょう 
こんにちは、ゆきしょうです。
デザインカンプからのコーディングを、AIに任せられないか試しています。
書かせたコードが、カンプとどれだけ合っているのかを機械で測ってみました。
その数字と、測る側でつまずいた話です。
AIにカンプからコーディングさせると、どこまでできる？
形にはなります。
ただ、1回目に測ったときは、カンプと56%ずれていました。
試したのは、会社サイトのトップページ1枚です。
Figmaのカンプを読ませて、Claude CodeにHTMLとSCSSを書かせました。
そのうえで、書かせたページの画面とカンプの画像を重ねて、違う点の割合を出しました。
結果は、画面の56%の点がカンプと違っていました。
ページの高さも、カンプより720px足りません。
中身を見ると、ずれの理由ははっきりしていました。
一番上の大きな写真の組み方が、カンプと違います。
画像はすべて仮のままでした。
動画の枠、大きな英字、フッターは、そもそも作られていませんでした。
測るのにかかった時間は51秒です。
なぜ目で見比べずに、機械で測ることにしたのか？
先にAIでの自動コーディングに取り組んでいる会社が、そうしていたからです。
事例を調べると、画面を画像で撮ってカンプと重ね、違いの割合で合否を決めていました。
目で見て合っているつもりでも違う、ということは独学の頃にもありました。
Web制作の課題で、不合格になったことがあります。
パソコンの画面では、完璧に見えていました。
不合格の理由の1つは、タブレットの表示でした。
パソコンとスマホは何度も確かめたのに、その間の幅を軽く見ていたのです。
そのときの話は、こちらに書いています。
合格の線は、違う点が10%以下にしました。
先に取り組んでいる会社の1社が使っている値を、そのまま借りています。
測る仕組みそのものが甘かったら？
甘かったです。
カンプに寄せて直している途中で、一度9.7%という数字が出ました。
10%を切ったので、合格です。
ところが、撮った画像では、ページの下の方の写真が空白で写っていました。
画面に入るまで読み込まない作りの画像を、読み込む前に撮っていたのです。
写真がない分、カンプとの違いが小さく出ていました。
実際より良い数字が出ていたことになります。
1画面ずつ下へ送って、画像を読み込ませてから撮るように直しました。
コードを直す前に、物差しの方を直すことになったわけです。
これは、機械で測っていても起きます。
数字だけを見て合格にしていたら、写真の抜けたページを「合っている」と判断していました。
1回目の測定では、数字を出したあとに、カンプと実装と違いの3枚を並べて中身を見ています。
数字と画像は、セットで見るものだと分かりました。
直したら、どこまで縮んだのか？
5.1%まで縮みました。
合格の線の10%を下回っています。
直したのは、一番上の写真の組み方、ヘッダーの重ね方、写真の配置、背景のグラデーションの角度などです。
仮だった画像も、Figmaから本物を取り込みました。
足りなかった動画の枠やフッターも作りました。
ページの高さは、カンプとの差が1pxになりました。
ここまでにかかったのは、約40分です。
残っている違いは、写真の縁や文字の1〜2pxのずれです。
英字の字と字の間隔も、まだ少し違います。
スマホ幅は、比べる相手になるスマホ用のカンプがないので、まだ測れていません。
測れていないものは、合格とは言えません。
AIが書く時代に、コーディングの基礎は要るのか？
要ります。
合っているかを見分けるのに使うからです。
コーディングの仕事そのものは、AIでなくなっていくと思っています。
それでも今回、人が決めたことがありました。
合格の線を10%のままにすると決めたのは私です。
1〜2pxのずれが残っていても、この線なら合格になります。
どこまでを許すかは、機械ではなく人が決めることでした。
2回目に直したのは、ヘッダーの重ね方やグラデーションの角度といった、CSSの細かい指定です。
HTMLとCSSが読めないと、何を直したのかも、どれが大きな違いなのかも判断できません。
9.7%と甘く出たページは、数字だけを見ていれば合格になっていました。
私は独学で基礎を身につけました。
時間はかかりました。
これから学ぶ人が、どこにお金を払えば遠回りを減らせるかは、スクールの比較記事にまとめています。
以上、AIが書いたコードをカンプと重ねたら56%ずれていた話でした。
