Each language version is independently generated for its own context, not a direct translation.
この論文「DOne」は、**「デザイン画像をそのままコードに変える技術」**の新しい画期的な方法を紹介しています。
これまでの技術では、画像を見てコードを作る際に「全体像はわかるけど、細かい部分はボヤけてしまう」あるいは「細かい部分は合うけど、全体の配置が崩れてしまう」というジレンマがありました。これを**「全体と細部の両立」**という課題と呼んでいます。
DOne は、この問題を**「料理のレシピ作り」**に例えると非常にわかりやすくなります。
🍳 従来の方法：「一発で料理を作る」
これまでの AI は、料理の完成写真（デザイン画像）を見て、いきなり「さあ、全部作れ！」と指示を出していました。
- 問題点： 料理人（AI）が一度に全ての工程（野菜切り、火入れ、盛り付け）を頭の中で同時に行おうとするため、**「肉の切り方が雑」になったり、「皿の配置が歪」**になったりして、完成品が写真と全然違うものになってしまうことがありました。
🍳 DOne の方法：「工程を分けて、プロに任せる」
DOne は、この作業を**「3 つのステップ」**に分け、それぞれの専門家に任せることで、完璧な料理（コード）を作ります。
1. 下ごしらえ（レイアウト分割）
まず、完成写真を見て**「どこに何が入っているか」**を大まかに区切ります。
- アナロジー： 料理の「献立表」や「配置図」を作る作業です。「ここはスープのエリア、ここはメインディッシュのエリア」と、大きな枠組みだけを決めます。
- DOne の特徴： 従来の「適当に切り取る」方法ではなく、AI が学習して「ここはヘッダー、ここはサイドバー」と意味を理解して区切ります。これにより、全体の構造が崩れるのを防ぎます。
2. 材料の選定（要素の検索）
次に、写真の中の**「小さな部品」**（アイコン、ロゴ、ボタンなど）を正確に探して取り出します。
- アナロジー： 冷蔵庫から「ネギ」「トマト」「チーズ」を正確に見つけて、包丁で切っておく作業です。
- DOne の特徴： 従来の AI は「小さなネギ」を見逃して「適当な緑の紙」を貼ったりしましたが、DOne は**「極端に細長いもの」や「密集した小さなもの」**も逃さず見つけ出し、正しい素材を用意します。
3. 調理と盛り付け（コード生成）
最後に、先ほど作った「配置図」と「用意した材料」を渡して、**「指示通りに組み立てる」**作業を行います。
- アナロジー： 「まずスープをここに置き、次にメインをここに配置し、最後にネギを散らして」という**具体的なレシピ（スキーマ）**に従って、料理を完成させる作業です。
- DOne の特徴： AI が「なんとなく」作らず、**「配置図と材料リスト」**という確かな指針を持ってコードを書くため、写真と見比べても「あれ？ここ違う？」というズレがほとんどなくなります。
🌟 なぜこれがすごいのか？
この方法を採用した結果、以下のような素晴らしい効果が得られました。
- 見た目が本物そっくり： 人間が評価しても、元のデザインとほぼ同じレベルの美しさを再現できました。
- 作業が 3 倍速く： 開発者が手作業で直す時間が大幅に減り、生産性が劇的に向上しました。
- 新しい基準の登場： 研究のために、より複雑で本格的な「テスト用デザイン画像（HiFi2Code）」という新しい教材も作られました。
まとめ
DOne は、**「全体を把握する頭脳」と「細部を拾う目」と「指示通りに作る手」**を分業させることで、AI がデザイン画像からコードを作る際の「ボヤけ」や「崩れ」を完全に解決した画期的な技術です。
これにより、デザイナーが描いた美しいデザインを、エンジニアが手作業で一つ一つ直す必要がなくなり、「デザインから Web サイトまで」が瞬時につながる未来が近づいたと言えます。