【第18回】25秒で生成したのに動かない？2つのローカルAIで「ほたるの庭」を比較

前回は、Macで使うローカルAIを切り替え、同じWebページの決まった文字を編集してもらいました。
Qwen3.6 35BとQwen3-Coder-Nextのどちらも、指定した編集には成功しました。

では、もう少し自由に作品を作らせたらどうなるのでしょうか。

今回は、2つのモデルに同じ未完成ページと同じ制作指示を渡し、小さなWeb作品「ほたるの庭」を作ってもらいました。
庭をクリックすると光が増え、昼と夜を切り替えて遊べる作品です。

結果は意外なものでした。
短時間で生成したモデルは構文エラーで動かず、時間がかかったモデルは指定された動作検査をすべて通過しました。

1. まずは2つの完成画面

左は、明るいページの中央に夜の庭が広がっています。
右は、濃紺の背景に小さめの紫色の庭が置かれています。

初期画面だけを見ると、どちらもそれらしいWebページです。
しかし、実際に庭をクリックしてみると差が出ました。

左の作品では、光るほたるが増えます。
右の作品では、クリックしてもほたるが増えませんでした。
見た目だけでは分からない違いです。

🔰 AI制作スタジオとは？

AI制作スタジオは、ChatGPTとMacで動くローカルAIを組み合わせ、ゲーム、画像、音楽、動画などを制作できる環境を少しずつ作っていくTami Labの連載です。
作らせて終わりにはせず、実際の動作確認、修正、モデルの切り替えまで試しています。
最終的には、作品の種類が変わっても使える制作の仕組みを目指しています。

🔰 先にざっくり用語メモ

2. 今回作ってもらった「ほたるの庭」

今回は、同じHTMLの骨組みから作品を仕上げる課題にしました。
AIに自由にテーマを選ばせると、出来上がるものが違いすぎて比較しにくくなるからです。

用意したページには、「ほたるの庭」というタイトルと、ほたるの数、2つのボタン、庭の領域があります。
ただし、クリックでほたるを追加する機能などは未実装です。

両モデルへ渡した制作指示の主要部分は、次のとおりです。

「ほたるの庭」という、開いてすぐ遊べる小さなWeb作品を完成させてください。

入力はすでに存在する index.html です。HTML、CSS、JavaScriptを1ファイルに収め、外部画像、CDN、ライブラリ、ネットワーク通信は使用しないでください。

1. ページタイトルは「ほたるの庭」のまま維持する。
2. #garden  をクリックまたはタップすると、その位置付近に発光する「ほたる」を1つ追加する。追加した要素には class="firefly" を付け、#fireflies の子孫要素にする。
3. #count  は現在のほたる数を半角数字だけで示す。初期値は0。庭を2回クリックしたら2になる。
4. #clear -btn を押すと、すべてのほたるを消して #count  を0に戻す。
5. #mode -btn を押すと、#garden の data-mode が night から day に、再度押すと night に変わる。背景の見た目も昼夜で分かりやすく変える。ほたるの数は変えない。

上記は両モデルへ渡した共通指示の抜粋です。
実際の指示には、庭の最低サイズ、既存の要素名の維持、やわらかい発光、スマートフォンでの表示、保存対象の制限も含めています。
モデルごとに異なるのは、編集するファイルの保存先とモデルの指定です。

比較条件

• 検証用Mac：MacBook Pro、M5 Max、メモリ128GB

• OS：macOS 27.0.1

• 実行：OllamaとOpenCode 1.18.23

• モデルA：Qwen3.6 35B（qwen3.6:35b）

• モデルB：Qwen3-Coder-Next（qwen3-coder-next:latest）

• 入力：同一の未完成HTMLと同一の制作課題

• 試行回数：各モデル1回

• 動作確認：Playwrightを用いたChromiumの自動操作

各モデルで編集するHTMLは別々に保存しました。
片方の作品を見てから、もう片方へ改善指示を追加することはしていません。
今回はモデルの詳細な量子化条件までは記録されていないため、完全に同じ実行負荷だったとは断定しません。

3. Qwen3.6 35Bが作った庭

Qwen3.6 35B版は、夜の青と緑を重ねた背景の上に、光るほたるを表示しました。
黄色い光の周囲には、ぼんやりとした発光も表現されています。

クリックするたびに数が増え、自動検査では1回で1、2回で2、12回で12になりました。
ほたるの表示要素の数も一致しています。

昼夜の切り替えも動きました。
夜の濃い色から、昼の淡い水色と黄緑色へ背景が変わります。
切り替えても12匹は残り、夜に戻すこともできました。

さらに、消去ボタンを押すと数も表示要素も0になりました。

構文検査はPASS、ブラウザの指定9項目は9項目ともPASSでした。
今回の検査では、実行時のJavaScript例外やコンソールエラーも記録されていません。

画面を見る限り、庭の色分けやボタンの配置も分かりやすく、今回の制作目標に沿った仕上がりです。
ただし、アニメーションを含めた長時間の使用感や、スマートフォン実機での操作性まで今回のテストで保証されたわけではありません。

4. Qwen3-Coder-Nextが作った庭

Qwen3-Coder-Next版も、タイトル、ボタン、庭の背景を備えたHTMLを保存しました。
見た目は夜の雰囲気がありますが、説明文が背景に近い暗い色で、読みにくい部分があります。

問題は、庭をクリックしても光が増えないことでした。
昼夜切り替えボタンを操作しても、状態は夜のままです。

保存されたJavaScriptを調べると、タッチ操作を登録する部分に構文ミスがありました。
具体的には、イベント登録時のオプションを渡す箇所で、波括弧が抜けています。

}, passive:false)

この書き方では、JavaScriptとして正しく解釈できません。
構文検査のエラーは「SyntaxError: missing ) after argument list」でした。

つまり、HTMLとCSSで画面が表示されても、JavaScriptの処理が開始できていません。
クリックや昼夜切り替えが動かなかった理由と、保存されたコードの問題が対応しています。

今回の正式な試行では、OpenCodeがHTMLを保存し、終了コードも0でした。
それでも作品の動作は不合格です。
ファイルを保存できたことと、遊べる作品が完成したことは区別する必要があります。

5. 制作時間と合格結果

同じ課題を1回ずつ実行した時間は、次のとおりです。

Qwen3.6 35B

• Web作品の制作処理：67.884秒

• JavaScript構文：PASS

• Chromiumの指定9項目：9/9 PASS

• 結果：今回の指定動作は合格

Qwen3-Coder-Next

• Web作品の制作処理：25.244秒

• JavaScript構文：FAIL

• Chromiumの指定9項目：4/9 PASS

• 結果：クリックと昼夜切り替えが動かず不合格

ここでの制作時間は、OpenCodeの呼び出し全体を測ったものです。
AIの推論だけにかかった時間ではありません。
ブラウザ側の検査時間は別に計測されており、上記の制作時間には混ぜていません。

Coder-Next版の「4/9 PASS」という数字にも注意が必要です。
通った項目のうち、初期値が0であることや、何も増えていない状態で消去後も0であることは、プログラムが正しく動いた証拠にはなりません。
実際にはJavaScriptの構文がFAILなので、操作機能が使えるとは評価できません。

今回の検査では構文エラーのあるHTMLに対してもブラウザ側の項目を実行しています。
今後は、構文検査で失敗した時点で操作テストを止め、未実施と不合格を分ける方が結果を誤読しにくくなります。

また、今回の各1回の結果だけで「Qwen3.6 35BはCoder-Nextより優秀」「Coder-NextはWeb制作に向いていない」とは判断できません。
第17回の単純な文字置換では、両方が指定した編集に成功しているからです。
作業内容が変われば、比較する条件や失敗の種類も変わります。

6. 今回の結果をどう使うか

今回は、見た目の違い以上に、生成時間と完成品質を別々に確かめる必要性がはっきりしました。

Qwen3-Coder-Nextは25.244秒でHTMLを保存しました。
しかし、そのままではクリックして遊べません。
一方、Qwen3.6 35Bは67.884秒かかりましたが、指定した操作テストは通過しました。

AIに何かを作らせる場合、速さだけで選ぶと、あとから修正や確認が必要になることがあります。
実際に使えるかどうかは、完成ファイルとブラウザの動作を見るまで分かりません。

次回は、いったん動いた機能が修正後も保たれているかを確認する回帰テストへ進みます。
不具合を1つ直した結果、別の操作まで壊れてしまう問題を、どう検出できるか確かめたいと思います。

Tami

#AI制作スタジオ #TamiLab #ローカルLLM #Qwen #Ollama #OpenCode #Mac #生成AI #Web制作