LLMの仕組みを”触って”理解するページをAIに作らせる
生成AIを日常的に使う人が増えてきましたが、「中で何が起きているのか」まで理解して使っている人は多くありません。
私自身、temperature というつまみの意味を人に説明できるようになったのは、かなり後になってからでした。
そこで今回、LLM（大規模言語モデル）の仕組みを文章で読むのではなく、実際に触って理解できるWebページを作りました。
この記事では、そのページの紹介と、Claude Fable5を使った制作の手順、初心者に届けるためにやった工夫、そして実際にかかった費用までを説明します。
Claudeの有料プランを5か月ほど使い続けている私が、今回の実例を交えて初心者にもわかりやすく解説します。
一般の記事作成に比べての難しさは、AIに「何を作るか」を正確に伝える部分でしょう。
文章なら多少あいまいでも形になりますが、動くページとなるとそうはいきません。
ただ、最低限の段取りを押さえれば思ったより簡単にできますので、ぜひ試してみてください。
完成したページはこちらです。
https://m3-kawasaki.github.io/llm-explorable/
1. 作ったもの ─ 触ってわかる「LLMの仕組み」
作ったのは、ブラウザだけで動く1ページの教材です。
・全7章の縦スクロール構成
・スライダーやボタンを動かすと、その場で結果が変わる
・外部のサーバーやAPIを一切使わない
・インターネットにつながっていなくても動く
「AIが動いているページ」ではありません。
AIの動きを再現したシミュレーションが動いているページです。ここは後で詳しく触れます。
まずは何も読まずに、スライダーを動かしてみてください。
この記事の続きはそのあとで十分です。
2. なぜ「読む」ではなく「触る」なのか
LLMの解説記事は世の中に無数にあります。
それでもこのページを作ったのは、文章では絶対に伝わらないものが3つあると考えたからです。
temperature を上げると何が起きるのか
「temperature を上げると創造的になる」という説明をよく見かけます。
しかしこれは正確ではありません。
実際に起きているのは確率分布が平らになることだけです。
面白いのは、元の分布が極端に偏っている場合です。
ページ内で「日本の首都は」というプロンプトを選び、temperature を 1.6 まで上げてみてください。
それでも「東京」が98.5%のまま動きません。
一方で「今日の天気は」を選ぶと、少し上げただけで結果が散らばります。
この違いは、実際に動かさないと腑に落ちません。
左が temperature 0.5、右が 1.6。
温度を3倍以上にしても「東京」は89%のまま動きません。
同じ設定でも結果が毎回変わること
生成ボタンを何度か押すと、毎回違う文章ができあがります。
しかし temperature を 0 にすると、何度やっても完全に同じ文章になります。
AIの「気まぐれ」は不具合ではなく仕様である、ということが手を動かすと一瞬でわかります。
日本語がトークンを食うこと
同じ意味の日本語と英語を入力して、トークン数を比べられるようにしました。
私が試した文では日本語16トークンに対して英語11トークンでした。
日本語で使うと料金が高くつく理由が、数字として目に見えます。
3. ページの中身 ─ 7つの章
構成は次のとおりです。
それぞれの章に、触れる仕掛けを必ず1つ以上入れました。
- トークン化 — 好きな文章を入力すると、AIが見ている「トークン」という単位に分割されて表示されます。日本語と英語の比較プリセット付きです。
- 埋め込み — 単語が座標になる様子を散布図で示します。「王－男＋女＝女王」というベクトル演算も実際に計算しています。
- Attention — 「彼」「それ」といった言葉が文中の何を指しているのか、モデルがどこに注目しているかを色の濃さで表示します。
- 次トークン予測と temperature — このページの中心です。候補と確率が棒グラフで並び、スライダーを動かすと分布の形が変わります。
- サンプリング戦略 — greedy、top-k、top-p の違いを、切り捨てられる候補が目に見える形で比較します。
- 実際に生成してみる — 4章・5章の設定を引き継いで、1トークンずつ文章を伸ばしていきます。
- まとめ — なぜAIが自信満々に嘘をつくのかを、ここまでの内容から説明します。
4. 制作の手順 ─ 設計と実装を分ける
ここからが本題です。
今回もっとも効果があったのは、設計と実装を別々の作業に分けたことでした。
制作の流れ。青枠の2つは人間がやる部分で、ここを飛ばすとやり直しが増えます。
手順1：企画を絞り込む
最初は「AIで自動更新されるサイト」のような、何日もかけて育てる企画を考えていました。
しかし自分の生活を考えると続かないと判断し、一回で作り切れるものに方針を変えました。
ここで無理をしないことが大事です。作ったあと放置される仕組みは、作らないほうがましです。
手順2：仕様書を先に固める
いきなり「作って」と頼まず、まず実装仕様書をMarkdownで作りました。
書いたのは次のような内容です。
・全7章の構成と、各章で何を触らせるか
・使う色の具体的な値（ライトモードとダークモード両方）
・外部依存ゼロ、ブラウザの保存機能は使わない、といった制約
・完成後に自分で検証すべき項目のチェックリスト
この仕様書があると、実装を頼むときのやりとりが激減します。
追加の質問がほぼ発生しませんでした。
手順3：別セッションで実装させる
仕様書ができたら、新しく作業を開始して仕様書を添付し、実装を依頼します。
このとき次の2点を必ず指示しました。
数学は近似せず正確に実装すること
確率計算の部分をそれらしく見せるだけにされると、教材として意味がなくなります。
「ここは本物の計算にする」と明示しておくと、実際に正確な実装が返ってきます。
完成後、自分でブラウザを開いて検証すること
作らせるだけでなく、チェックリストを1項目ずつ確認させます。
この指示は後で効いてきますので、覚えておいてください。
5. 完成してからが本番だった
ページ自体は思ったより早く完成しました。
しかしそこからの作業のほうが長かったというのが正直なところです。
動くものができても、それは「作った本人が触れる状態」でしかありません。
初めて見る人が触れる状態にするには、別の作業が必要でした。
目的をはっきり示す画面を最初に置いた
完成したページを開いてまず気づいたのは、「これが何のためのページなのか」が分からないということでした。
作った本人は分かっていますが、初めて開いた人には分かりません。
そこで、開いた瞬間に全画面で表示される導入画面を作り、次の一文を置きました。
これは、AIを安心して使えるようになるために、画面の上で試せる7つの実験を使って、AIが文章を作るしくみを体験するためのアプリです。
「〇〇のために、〇〇を使って、〇〇をする」という形に当てはめて書いています。
この型に流し込むと、目的があいまいなままだと文章が書けません。
書けないということは、企画が固まっていないということです。
目的の言語化は、読者のためであると同時に、自分の企画を点検する作業でもありました。
その下に「どんな人に」「何をするか」「どれくらいの時間で」の3項目を並べ、大きな「はじめる」ボタンを置いています。
「壊れません」と先に言う
導入画面の次に、使い方を説明するセクションを作りました。
ここで一番気をつけたのは、操作の説明そのものではありません。
「壊れる心配はありません」と最初に書くことです。
パソコンに慣れていない方が触るとき、最大の障害は操作の難しさではなく「変なところを押して壊さないか」という不安です。
ここを先に打ち消しておかないと、そもそも触ってもらえません。
具体的には次のように書きました。
・どのボタンを押しても、何かがこわれることはありません
・入力した内容がどこかへ送信されることもありません
・おかしくなったと感じたら、ページを開き直せば元どおりになります
そのうえで「触れる場所は3種類だけ（ボタン・つまみ・入力らん）」と整理し、最初に試してほしい場所へのリンクを1つだけ置きました。
全部読まなくても、一番面白いところにたどり着けるようにするためです。
文字を大きくできるようにした
高齢の方に見せることを考えて、画面上部に文字サイズを変えるボタンを付けました。
押すたびに標準（16px）→ 大（19px）→ 特大（22px）と切り替わります。
実装で工夫したのは、CSSの寸法をすべて rem という単位で書いておくことです。
こうしておくと、1か所を変えるだけでページ全体の文字が一斉に大きくなります。
但し、注意点があります。文字を大きくすると、それまで収まっていたレイアウトが崩れることがあります。
ここは実際に試して確かめる必要がありました。
6. 検証で見つかった不具合 ─ 一番大事な一文が読めなかった
ここが今回、私が一番お伝えしたい部分です。
完成したページをブラウザで開き、チェックリストを1項目ずつ確認していきました。
パソコンの画面では何の問題もありません。
ところがスマートフォンの幅で確認したところ、導入画面の目的の一文が画面外にはみ出して読めない状態になっていました。
修正前。一番上まで戻しても、
目的の一文が画面外に出たまま到達できませんでした。
このページの存在理由そのものである一文が、いちばん読まれない場所にあったわけです。
原因はCSSの書き方でした。
画面の中央に内容を置くために align-items: center という指定を使っていたのですが、内容が画面の高さより大きいとき、上端がはみ出してスクロールでも到達できなくなるという、よく知られた挙動でした。
中央寄せの方法を変えることで解決しています。
修正後。同じ画面幅でも、
冒頭から読めるようになりました。
この不具合は、パソコンの画面だけを見ていたら絶対に気づけませんでした。
教訓としては次のようになります。
・画面の幅を変えて確認する。特にスマートフォンの幅は必ず見る
・文字を大きくした状態でも確認する。文字サイズを変えられるようにしたなら、その状態も検証対象です
・一番大事な要素から確認する。細かい部分より、目的の一文が読めるかを先に見るべきでした
あわせて、もうひとつ保険をかけました。
導入画面は「はじめる」を押さないと先へ進めない作りなので、JavaScriptが動かない環境では永久に進めないページになってしまいます。
そこで、そういう環境では導入画面を最初から表示しないようにしています。
「動くものができた」と「人に見せられる」の間には、まだ距離があります。
7. かかった費用は $8.21
Fable5の従量課金で実際にかかった費用は8ドル21セント、日本円で1,300円ほどでした。
想定していたよりかなり安く済んでいます。
ただし、費用まわりで引っかかりやすい落とし穴が2つありました。
これから同じことをする方は注意してください。
落とし穴1：利用クレジットのスイッチが初期状態でオフ
設定画面の「使用量」にある利用クレジットのスイッチは、最初はオフになっています。
この状態ではクレジットが1円も消費されませんが、実際には使用できません。
まずここをオンにする必要があります。
クレジットを使い切るまでの3つの関門。どれか1つでも引っかかると残高は減りません。
落とし穴2：月間利用上限の初期値が $20
残高がいくらあっても、この設定のままでは1か月に20ドルまでしか使えません。
残高に見合った金額へ引き上げておかないと、途中で止まります。
また、キャンペーンで付与されるプロモーションクレジットには有効期限があります。
私の場合は2つの期限に分かれていて、片方は1週間ほどで失効するものでした。
設定画面で内訳と期限を確認しておくことをお勧めします。
なお、消費は期限の近いクレジットから順に行われていました。
実際に使った後で残高の内訳を確認して、期限の近いほうが減っていることを確かめています。
この点は安心してよさそうです。
8. 迷ったら減らす ─ ファイル構成をやり直した話
制作の途中で、1つのHTMLファイルだったものを4つのファイルに分割しました。
・index.html（ページ本体）
・css/style.css（見た目）
・js/data.js（内容のデータ）
・js/app.js（動きの部分）
特に効果があったのは、データを独立したファイルに分けたことです。
プロンプトの分岐、単語の座標、注目度の数値をすべて data.js に集めたので、内容を変えたいときにプログラム部分を一切触らなくて済みます。
1つのファイルにまとめたHTMLは残さず削除しました。
理由は2つあります。
- 二重管理になる — 片方を直すたびに、もう片方を作り直す必要があります。忘れると中身がずれます
- どちらが最新か分からなくなる — 数か月後の自分が必ず迷います
Webで公開するだけなら、1ファイル版は無くても困りません。
「あると便利かもしれない」で残したものは、たいてい後で負担になります。
やむを得ず両方必要になる場面もありますが、状況次第ではあります。
ただ判断に迷ったら減らすほうが、後々ラクだというのが今回の実感でした。
まとめ
LLMの仕組みを触って理解できるページを作った手順と、そこで得た気づきを説明してきました。
要点を整理します。
・一回で作り切れる企画にする — 運用が必要な仕組みは、続かなければ意味がない
・仕様書を先に固める — やりとりが激減し、手戻りがなくなる
・数学は正確に、と明示する — それらしく見せるだけの実装を防ぐ
・目的を一文で書いてみる — 書けないなら、企画がまだ固まっていない
・「壊れません」を先に伝える — 初心者にとっての最大の障害は操作の難しさではなく不安
・必ず自分の目で確認する — 画面幅を変え、文字を大きくして、一番大事な要素から見る
・迷ったら減らす — 「あると便利かも」で残したものは後で負担になる
今回いちばんの学びは、AIに作らせて完成、ではなかったという点です。
動くものが出てきてからのほうが、考えることは多くありました。
目的をどう伝えるか、初めての人がどこでつまずくか、小さい画面で崩れていないか。この部分は人間が判断するしかありません。
逆に言えば、面倒な実装をAIに任せられるぶん、そちらに時間を使えるということでもあります。
今回はLLMをテーマにしましたが、この手順は触ったほうがわかるもの全般に応用できます。
ネットワークの仕組み、画像圧縮、暗号のしくみなど、動かすと腑に落ちる題材は身の回りにたくさんあります。
規模の大きなテーマに挑む場合は、章を分けて複数ページに分割したほうが良いでしょう。
逆に、伝えたいことが1つに絞れているなら、今回のようにファイル数個で十分です。
それぞれの状況や目的に応じ、最適な作り方を選択してください。
設計と実装を分けるという一点さえ押さえておけば、思っているよりずっと手軽に形になります。
