Figma からコードを書き出す機能もあり、AIにHTMLを書かせることもできます。それでもコーディングを専門の担当者に依頼する会社が多いのはなぜか、という話です。

見た目が合うことと、動くことは別

自動生成されたコードは、そのデザインを、その画面幅で再現します。多くの場合そこまでは合っています。

問題はその先です。

• 文字数が想定より増えたときに崩れないか
• 画面幅が中途半端なときにどうなるか
• 画像が読み込まれる前にレイアウトが動かないか
• 管理画面から更新したときに形が保たれるか
• 古い端末で表示が破綻しないか

デザインは1つの状態を描いたものですが、実際のサイトは中身が変わり続けます。その変化に耐える形で組むのが、コーディングの仕事の中身です。

自動生成されたコードの傾向

見た目は合っていても、次のような状態になっていることがあります。

• 位置を絶対値で指定していて、文字数が変わると重なる
• 要素がすべて div で、見出しやリストの構造が無い
• 同じ意味のスタイルが何十個も重複している
• 画像に代替テキストが無い
• 不要な入れ子が深く、後から直せない

3番目と5番目は、運用に入ってから効いてきます。少し直したいだけの依頼が、構造を読み解くところから始まることになり、時間がかかります。

構造の無いHTMLは、検索エンジンにも読み上げソフトにも内容が伝わりません。見た目は同じでも、伝わる情報量が違います。

デザイナーが兼ねる場合

小規模なサイトでは、デザイナーがそのまま実装まで行うこともあります。意図がそのまま反映されるという利点があります。

一方で、次のような場面では専門の担当者のほうが向いています。

• ページ数が多く、共通部品の設計が必要
• WordPressで更新できる範囲を作り込む
• 表示速度の要件がある
• 既存サイトの構造を引き継ぐ必要がある
• 短納期で並行して進める必要がある

分業が進んでいるのは、役割を分けたほうが速く、品質も安定するからです。デザインに集中してもらい、実装は実装の担当に回す。それぞれの作業量が減ります。

何を見て選ぶか

依頼先を選ぶとき、コードの品質は外からは見えません。代わりに次の点で判断できます。

1. 実績サイトのスマホ表示を実機で見る（崩れていないか）
2. 実績サイトの表示速度を測る
3. 見積りの範囲が具体的に書かれているか
4. デザインデータを渡したときの質問の内容（可変部分を聞いてくるか）

4番目が分かりやすい指標です。「お知らせのタイトルが長くなったときは折り返しますか、省略しますか」といった質問が来る相手は、運用後まで考えて組みます。何も聞かずに着手する相手は、デザインどおりに置くだけになりがちです。

自動生成をどう使うか

自動生成やAIを使わない、という話ではありません。実際、下書きとしては有効です。

• 静的なページのたたき台を作る
• 繰り返しの多い部分を量産する
• 書き方が分からない指定を調べる

出てきたものを人が構造から整え直す、という使い方であれば速くなります。そのまま納品すると、運用の段階で差が出ます。

どこまで頼むか

全部を外注する必要もありません。分け方の例を挙げます。

3番目と4番目は、費用を抑えつつ品質を担保する方法として現実的です。

ワプラボの場合

当社では、デザインデータをお預かりした段階で、可変する箇所と想定される状態を確認したうえで着手しています。文字数が増えた場合、項目が0件の場合まで含めて組みます。

自社で組まれたHTMLの確認や、一部だけの改修もお引き受けしています。全部を任せる前提でなくて構いませんので、範囲をご相談ください。