こんにちは、ゆきしょうです。
デザインカンプからのコーディングを、AIに任せられないか試しています。
書かせたコードがカンプとどれだけ合っているかを、画像で重ねて測りました。
最初は56%ずれていて、いまは3.1%です。
測る側も、3回まちがえていました。
AIにカンプからコーディングさせると、どこまでできる？
形にはなります。
ただ、1回目に測ったときは、カンプと56%ずれていました。
試したのは、会社サイトのトップページ1枚です。
Figmaのカンプを読ませて、Claude CodeにHTMLとSCSSを書かせました。
1ページ書き上がるまでは、約18分でした。
そのあと色の指定などを少し直したページの画面と、カンプの画像を重ねて、違う点の割合を出しました。
結果は、画面の56%の点がカンプと違っていました。
ページの高さも、カンプより720px足りません。
一番上の大きな写真の組み方が、カンプと違っていました。
画像はすべて仮のままです。
動画の枠、社名の大きな英字、フッターは、そもそも作られていませんでした。
なぜ目で見比べずに、機械で測ることにしたのか？
先にAIでの自動コーディングに取り組んでいる会社が、そうしていたからです。
事例を調べると、画面を画像で撮ってカンプと重ね、違いの割合で合否を決めていました。
合格の線は、違う点が10%以下にしました。
先に取り組んでいる会社の1社が使っている値を、そのまま借りています。
目で見て合っているつもりでも違う、ということは独学の頃にもありました。
パソコンでは完璧に見えたのに、タブレットの表示で課題に落ちています。
直したら、どこまで縮んだのか？
5.1%まで縮みました。
直したのは、一番上の写真の組み方、ヘッダーの重ね方、写真の配置、背景のグラデーションの角度などです。
仮だった画像も、Figmaから本物を取り込みました。
足りなかった動画の枠やフッターも作りました。
ページの高さは、カンプとの差が1pxになりました。
ここまでにかかったのは、約40分です。
途中で一度、9.7%という数字が出ています。
ところが撮った画像では、ページの下の方の写真が空白でした。
画面に入るまで読み込まない作りの画像を、読み込む前に撮っていたのです。
写真がない分、違いが小さく出ていました。
1画面ずつ下へ送り、読み込ませてから撮るように直しました。
これが、測る側の1回目のまちがいです。
ページ全体で合格なら、それで終わりでいいのか？
終わりではありませんでした。
ページを7つの区画に分けて測り直したら、一番上の区画だけが10.5%で不合格でした。
ページ全体では5.1%で合格です。
ほかの区画のずれが小さいので、平均すると隠れてしまっていました。
一番上の区画の違いを画像で見ていて、測る側の2回目のまちがいが見つかりました。
カンプは幅1440pxなのに、実装の方は1425pxで撮られていたのです。
スクロールバーのための15pxの溝が、撮影用のブラウザでも確保されていました。
さきほどの5.1%も、この状態で測った数字です。
一番上の区画では、英字の見出しの「g」の下も切れていました。
はみ出した部分を隠す指定が、文字の下まで切っていたのです。
隠す指定を外し、行の高さをカンプの80pxに合わせました。
溝も外して測り直した結果がこちらです。
| 区画 | 違う点の割合 |
|---|---|
| 一番上（大きな写真と英字） | 3.0% |
| 会社の紹介 | 0.6% |
| 事業内容 | 1.0% |
| 採用情報 | 3.9% |
| 会社概要 | 0.5% |
| お問い合わせ | 4.7% |
| フッター | 0.8% |
| ページ全体 | 3.1% |
7つの区画すべてが、10%の線を下回りました。
区画ごとの高さも、カンプと一致しています。
スマホ幅は、比べる相手になるスマホ用のカンプがないので、まだ測れていません。
測れていないものは、合格とは言えません。
測る仕組みは、何回まちがえたのか？
3回です。
1回目は写真を読み込む前に撮っていたこと、2回目は撮る幅が15px狭かったことでした。
どちらのときも、ページ全体の数字は合格の線を下回っていました。
3回目は、3.1%になったあと、ページに動きを足したときです。
ページの先頭へ戻す動きがなめらかすぎて、戻りきる前に撮っていました。
上に固定されるはずのヘッダーが、ページの途中に写っていました。
撮る前にすぐ先頭へ戻すように直すと、数字は前と同じに戻りました。
AIが書く時代に、コーディングの基礎は要るのか？
要ります。
合っているかを見分けるのに使うからです。
コーディングの仕事そのものは、AIでなくなっていくと思っています。
トップページを通して試して、この精度には驚きました。
4〜5ページのサイトなら、1週間ほどで終わりそうだというのが今の見込みです。
それでも、人が決めたことがありました。
合格の線を10%のままにすると決めたのは私です。
どこまでを許すかは、機械ではなく人が決めることでした。
「g」の欠けも、行の高さも、直したのはCSSの指定です。
HTMLとCSSが読めないと、何を直したのかも、どれが大きな違いなのかも判断できません。
Claude Codeを仕事に入れたい人向けに、最初の2ヶ月で任せたこと・任せなかったことをまとめています。
私は独学で基礎を身につけました。
時間はかかりました。
これから学ぶ人が、どこにお金を払えば遠回りを減らせるかは、スクールの比較記事にまとめています。
以上、Claude CodeでFigmaのカンプからコーディングして、56%のずれを3.1%まで縮めた記録でした。
