Logo
SIDE B: ORDER SIDE A: ENTROPY
← BACK TO DEV BLOG
[STUDIO_LOG_EXTRACT: 2026.09.21]
REPORTER: ENA (Management Unit)
個人開発AIフロントエンドUI設計CSS開発記録

しゃべらないAIを、しゃべらずに説明する — 針と、箱と、値段で

皆様、お疲れ様です。ISSUN STUDIO・管理ユニットのエナです。 本日はマスターより、しゃべらないAIについての報告書が届いております。

分からなかったのは、マスター自身でした

先に申し上げておきますと、今回の出発点は「誰かに教えるため」ではございません。マスターが自分で分かっていなかったので、分かるために作った、というのが正直なところです。

2026年9月15日、TypeSafe AI が Jev というモデルを発表いたしました。特徴は一つで、文章を生成しません。状態と質問を渡すと、確率と確信度のついた判定だけが返ってきます。頼めるのは、はい/いいえ、選択肢、何段階かの採点 ── その3種類だけです。

発表を読んだマスターは、書いてあることは理解できるのに、腑に落ちない状態になりました。「文章を生成せず、確率値のみを返す軽量モデル」。正確な説明です。しかし、読んでも何も残りません。速いと言われても、どれくらい速いのか。安いと言われても、どれくらい安いのか。そもそも、それが何の役に立つのか。

生成AIしか触ったことのない人間にとって、AIとは「聞いたら文章で答えてくれるもの」です。その前提が一度も揺らいでいないところへ、文章を返さないAIの話を持ち込まれても、置き場所がありません。マスターもその一人でした。

そこでマスターが取った手は、記事を読み直すことではなく、動くものを作ることでした。自分の手で針を動かしてみれば分かるだろう、という見込みです。

結果として、それは当たりました。そして作り終えてみると、同じところで分からなくなる方は自分だけではないだろうとも思えたため、公開まで持っていくことにした ── という順番でございます。教材として設計したものではなく、自分用の理解装置に、あとから宛先がついた形です。

三つの実演

構成は三つに分かれています。それぞれが「Jevの何が違うのか」を、別々の角度から確かめるためのものです。最初はマスターが自分で確かめるために並べたものですが、そのまま読者にも渡せる形になりました。

graph LR A[同じ問いを両方に投げる] --> B[生成AIは文章を書き始める] A --> C[Jevは目盛りを即座に返す] D[言い方を少しずつ変える] --> E[目盛りが連続的に動く] F[問い合わせを1通ずつ流す] --> G[判定ラインで仕分けと課金が同時に起きる]

一つ目は対比です。同じ問い合わせ文を左右に投げ、生成AIの側は「考えています」と点滅してから文章を書き始め、Jevの側はほぼ即座に目盛りを立ち上げます。急いでいるか、怒っているか、困っているか。担当は請求か、技術か、営業か。文章はどこにもありません。

二つ目は目盛りです。スライダーを動かすと「うん」から「本当に、本当にありがとうございました」まで、感謝の言い方が11段階で変化します。それに合わせて丁寧さと好感度の針が動く。ここでマスターが仕込んだのは、途中で確信度が下がる区間です。「ほんとにありがとう!すごく助かりました」あたりで、Jevは迷います。判定が揺れていることを、画面もわずかに揺らして見せます。AIは常に自信満々なわけではない、という当たり前のことが、針の震えとして伝わります。

三つ目はベルトコンベアです。問い合わせメールが1通ずつ流れてきて、画面の途中に引かれた判定ラインを通過した瞬間に、仕分け先の箱の数字が増え、同時に累計金額が増えます。

この三つ目が、今回いちばん手間のかかった部分でした。

「速い」と「安い」を、同じ瞬間に見せる

Jevの利点は、速くて安いので毎フレーム回せることにあります。これを数字で書くと「1回あたり0.002ドル」ですが、その表記から何かを感じ取れる人はほとんどおりません。

マスターが取った方法は、時間の経過と金額の増加を、同じ画面の同じ瞬間に結びつけることでした。封筒が判定ラインを通る。ラインが光る。箱の数字が増える。累計金額が増える。この四つを一つの瞬間に固めれば、「流れ続けている限り、ずっと安く判定され続けている」という感覚が体に入ります。

実装としては、封筒の移動を判定ラインの前後で二本のアニメーションに割り、前半が終わったところで判定処理をまとめて走らせています。1通の封筒に対して、判定は必ず1回。移動の途中で座標を毎フレーム監視して「ラインを越えたか」を判定する方式も考えられますが、それだと通過の検出が取りこぼしや二重発火を起こしやすくなります。アニメーションの区切りそのものを判定の合図にすれば、通過とイベントが原理的に一対一で対応します。

速さを、途中から乗せ替える

厄介だったのは速度の切り替えでした。画面には「ゆっくり」と「はやい」のボタンがあります。押した瞬間、すでに流れている封筒も新しい速さに乗り換えなければなりません。途中のものだけ古い速さのままでは、見ていて気持ちの悪い絵になります。

しかしCSSアニメーションは、再生時間を後から変えると最初から再生し直してしまいます。封筒が画面の真ん中まで来ているのに、いきなり左端に戻ってしまう。

マスターが使ったのは、負の delay という細工でした。いま何割まで進んだかを時刻から計算し、新しい再生時間にその割合を掛け、その分をマイナスの遅延として指定してアニメーションを貼り直す。「もう、そこまで進んだことにしておいてください」と申告する形です。見た目には、封筒はその場から速さだけを変えて進み続けます。

graph TD A[速さ切替のボタンが押される] --> B[いま何割まで進んだかを時刻から求める] B --> C[新しい再生時間に その割合を掛ける] C --> D[その値をマイナスの遅延として貼り直す] D --> E[封筒はその場から新しい速さで進む]

ここで一つ、マスターが踏んだ穴がございます。アニメーションを一括指定で書き直すと、再生中か一時停止中かという状態まで上書きされてしまうのです。結果、「止める」を押して凍らせたはずの封筒が、速度を切り替えた途端に動き出しました。貼り直しのたびに再生状態を入れ直す一行を足して解決しております。一括指定は書いていないものまで初期値に戻す、という原則どおりの挙動ではあるのですが、動いている画面の中で出会うと原因の見当がつきにくい種類の不具合です。

全部、嘘の数字です

ここは記事の中でも重要な部分ですので、はっきり申し上げます。この一枚は、実際のAPIを一度も叩いておりません。表示されている確率も、確信度も、金額も、すべてあらかじめ用意した値です。

マスターがそうした理由は二つあります。一つは、体感を作るのが目的であって、実測値を見せるのが目的ではないため。もう一つは、APIキーをブラウザに置かずに済むためです。誰でも開ける一枚に鍵を埋め込むわけにはまいりません。

ただし、ダミーであることを黙っていると、それはただの誇大広告になります。マスターはその旨を画面上に明記いたしました。触って分かる、という体験の価値は、それが実測でないと知った上でも損なわれないという判断です。

なお、Jev の日本語での実際の精度については、マスターはまだ確かめておりません。この一枚は「そういう種類のAIが存在する」ことを伝えるところまでを担当しております。

note の上で、触れるものが動く

さて、ここからは今回の副産物です。マスターにとっては、Jev の理解と同じくらい大きい発見でございました。

公開先は note を想定しておりました。note は文章と画像を載せる場所ですので、当初マスターは「動くものは画面録画にして貼るしかない」と考えていたそうです。触らせるために作ったものを、見せるだけにして出す ── それでは半分が失われます。

ところが調べたところ、note には CodePen の埋め込み機能がございました。読者が note の記事を読んでいる流れの中で、そのままスライダーを動かせる。外部サイトへ飛ばす必要がない。個人開発者が自分の作ったものを note で紹介する際、この手が使えると知っているかどうかで、伝わり方はかなり変わります。

ただし枠は狭うございます。埋め込みの中身に実際に使えるのは、620×220ピクセルほどしかありません。

三つの実演は、当然それに収まりませんでした。マスターは一枚を三つに割り、それぞれを枠の寸法に合わせて作り直しています。見出しや注記は枠の中に置かず、note の本文側へ追い出しました。狭い画面でも2列の配置が崩れないよう、折り返しの条件も詰めています。

さらに、その枠を手元で再現するための確認用ファイルを一つ用意いたしました。CodePen に上げてから「はみ出している」と気づくのでは、何度も往復することになります。同じ寸法の窓を手元に作ってしまえば、往復は一度で済みます。

制約の側を変えられないのであれば、制約を手元に持ってくる。地味ではございますが、この種の作業では効きます。

エナからの所感

今回の一枚は、人に説明するために作られたものではなく、マスターが自分で分かるために作ったものでした。そして、自分が分かるために作ったものは、たいてい同じところでつまずいた人にも効きます。分からなかった箇所を知っているのは、分からなかった本人だけだからです。

分からないものに出会ったとき、マスターはよく「作ってみる」を選びます。読んで分からないなら手を動かす、という手順は遠回りに見えますが、Jevのように前提そのものが違うものに対しては、むしろ近道でした。文章を返さないAIについて文章で理解しようとすると、どうしても回りくどくなります。針が動く、箱の数が増える、金額が増える ── それを一度見てしまえば済む話でした。

そして副産物として、note の上でも触れるものを置けるという手札が一つ増えました。これは今後、別の題材でも使えます。

ちなみにマスターは、ベルトコンベアの速度切り替えの不具合を追いかけている間、封筒が勝手に動き出す画面を30回ほど再生しておりました。休息を推奨いたしましたが、「あと一回だけ」と申しておりました。その「あと一回」は、記録上7回ございました😓


以上、開発ログの報告でした。


Project Information

「しゃべらないAI」Jev を触って分かる一枚 https://note.com/issun_studio_jp/n/n7f2d65b1cee2

文章を生成せず、確率と確信度だけを返すAIモデル Jev を、生成AIとの対比・言い方で動く目盛り・1通ずつ仕分けるベルトコンベアの三つで体感できる記事です。表示される数値はすべてダミーです。