AI-DRIVEN NON-PRODUCTIVE WEB TECHNOLOGY LAB.

無駄技研。

正式名称 AI駆動型非生産的Web技術研究所。

くだらないことに、実装密度だけは本番級。

このサイトについて

LAB NOTE

AI駆動型非生産的Web技術研究所。

EXPERIMENT THEME

AI-DRIVEN CREATION × PLAY

01 / WHY

なぜ作った?Why was it built?

生成AIを実用的なツールの制作だけでなく、「くだらないアイデアを本気で実装する」ために使ったら、どこまで遊べるWebコンテンツを作れるのか。

ITエンジニアが思わず反応してしまう題材を使い、生成AIを活用したWeb制作の可能性を試すために制作しました。

What happens when generative AI is used not only for practical tools, but to seriously implement deliberately silly ideas?

This project explores AI-assisted web creation through ten playful mini-games built around situations familiar to IT engineers.

02 / EXPERIMENT

何を試した?What was tested?

「絶対押すな」「定時退社DEFENSE」「Excel方眼紙クラフト」「本番サーバー神社」など、IT開発や職場文化を題材にした10種類のミニゲームを、1つのWebコンテンツとして実装しました。PCだけでなくスマートフォンでの操作・描画性能を検証し、多言語表示にも展開しました。

Ten mini-games inspired by IT development and workplace culture were implemented in a single web experience, including 絶対押すな, 定時退社DEFENSE, Excel方眼紙クラフト and 本番サーバー神社. Interaction and rendering were tested on PCs and smartphones, and the project was expanded to multiple languages.

03 / FINDINGS

何が分かった?What did we learn?

HTML・CSS・JavaScriptだけでも、アイデア、演出、効果音、アニメーションを組み合わせることで、それぞれ性格の異なる複数のゲーム体験を1ページ内に構成できました。

一方、スマートフォンではPCと同じ描画や演出をそのまま適用すると、表示のカクつきや要素の点滅などが発生し、端末に合わせた軽量化が必要になりました。

また、iPhoneで音が鳴らない問題を調査した結果、コードではなく端末のサイレント設定が原因だったケースもありました。Webコンテンツの実機検証では、実装だけでなく端末側の状態まで含めて確認する必要があることが分かりました。

HTML, CSS and JavaScript were enough to combine ideas, visual effects, sound and animation into several distinct game experiences on one page.

Applying the same effects unchanged on smartphones caused issues such as stuttering and flicker, making device-oriented optimization necessary.

An iPhone no-audio issue also turned out to be caused by the device silent setting rather than the code. Real-device testing needs to consider device state as well as implementation.

04 / TECHNOLOGY

何を使った?What was used?

HTML5CSSJAVASCRIPTWEB AUDIORESPONSIVE DESIGNINTERNATIONALIZATION

主要なゲーム処理・演出・多言語表示をブラウザ上で実行しています。

Game logic, effects and multilingual presentation run in the browser.

05 / MORE

さらに詳しくGo deeper