何を試しているか

Claude Artifacts（Anthropic）と Gemini Canvas（Google）で、インタラクティブな教育・学習ビジュアライザーを 対話だけで生成 し、公開可能な単体ページとして配布する試作。HTML + JavaScript + Canvas/SVG/Web Audio の自己完結したミニアプリを、自然言語の指示と数往復のレビューだけで仕上げる速度と、両プラットフォームの特性差を検証している。

掲載している 5 試作は、2026 年 2 月の 早稲田塾 AI プログラム 2026 集中講座の中で、受講生に「AI と数往復話しただけで、これくらいのものは作れる」という事例として実演で見せたもの。教材として磨き込んだ完成品ではなく、講座中のデモから生まれた素材をそのまま Lab に置いている。

Claude Artifacts による試作

試作 00: Matrix Transform Visualizer

行列による線形変換をリアルタイムで可視化するツール。a, b, c, d をスライダーで動かすと、基底ベクトル ê₁, ê₂ と任意ベクトル Av の変換結果が即時に追従する。det(A) を表示し、面積拡大率も自動計算。

Matrix Transform Visualizer の画面。左に格子状のキャンバス、変換後ベクトル ê₁ ê₂ Av が緑・赤・黄で表示。右に変換行列 A の a/b/c/d スライダー、det(A) = 1.00、アニメーション再生ボタン
Matrix Transform Visualizer。線形変換の幾何学的意味を「いじりながら理解する」ためのツール。

→ 試作 00 を試す

試作 01: 三角関数ビジュアライザー

y = A × sin(Bθ + C) + D のパラメータ操作 + リサージュ図形のタブ切替。単位円上の角度動線と、対応する sin / cos / tan のグラフを同時に表示する。

三角関数ビジュアライザーの画面。中央に単位円、右に sin/cos/tan のグラフがオレンジと水色の曲線で表示。タブで『単位円 + グラフ』と『リサージュ図形』を切替可能、上部に『このコードは AI（Claude）が生成しました』バッジ
三角関数ビジュアライザー。単位円とグラフを同期させて、関数の振幅・周期・位相が変わる感覚を直感的に学べる。

→ 試作 01 を試す

Gemini Canvas による試作

Gemini Canvas で、より「物理現象に踏み込んだ」インタラクティブツールを生成。Web Audio API を使った音声合成と、Chart.js + MathJax を組み合わせた数式可視化の両方に対応できることを確認した。

試作 02: 正弦波 (Sine Wave) 実験室

y(t) = A × sin(2π × f × t) の振幅 A と周波数 f をスライダーで操作。Web Audio API で実際にサイン波を 音として再生 しつつ、AnalyserNode 経由で取得した波形を canvas にリアルタイム描画する。「式・音・波形」の 3 表現を同時に体感できる学習ツール。

正弦波実験室の画面。上に黒背景のオシロスコープに青い正弦波、その下に『現在の数式 y(t) = 0.50 × sin(2π × 440t)』、再生/停止ボタン、周波数スライダー (440 Hz)、振幅スライダー (50%)
正弦波実験室。式・音・波形の 3 表現を Web Audio API で同期させた学習ツール。Gemini Canvas 生成。

→ 試作 02 を試す（Gemini ログイン必須）

試作 03: 二次関数グラフシミュレーター

y = ax² + bx + c の係数 a, b, c をスライダーで操作。Chart.js で曲線を即時再描画し、MathJax で数式を組版表示する。中学・高校の関数学習で「係数を動かすと放物線がどう変わるか」を直感的に体験できる教材。

二次関数グラフシミュレーターの画面。左パネルに係数 a/b/c のスライダーと現在の数式 y=1x²、右パネルに大きな放物線グラフ (青) と原点を強調する太い軸線、上部に黒帯のヘッダ『二次関数グラフシミュレーター — Created by 茂出木謙太郎』
二次関数グラフシミュレーター。Chart.js + MathJax で「係数 → 形」の対応を即時可視化。Gemini Canvas 生成。

→ 試作 03 を試す（Gemini ログイン必須）

試作 04: 追いつき算シミュレーション（小学生算数教材）

「太郎くんが 75 m/分で出発、18 分後に途中で速度を 54 m/分に落とす。次郎くんは 18 分後に自転車（144 m/分）で追いかけ、3024 m 先のゴールへ向かう」という、典型的な 追いつき算 の問題を時刻スライダーで動かしながら可視化する教材。トラック上の 2 人のアイコンと、ダイヤグラム（時間-距離グラフ）が同期して動き、追い越し点（33 分・2160 m）が緑のドットで明示される。

追いつき算シミュレーターの画面。上部に経過時間 33.5 分のスライダーと太郎くん 2187m / 次郎くん 2232m の指標、中央に A 地点 (0m) - B 地点 (3024m) のトラックと追い越し地点 (2160m) のマーカー、下部に時間-距離ダイヤグラムで太郎の青い折れ線（18 分で傾きが緩やか化）と次郎のオレンジ折れ線（18 分から急傾斜）が交わる
追いつき算シミュレーター。スライダーで時刻を動かすと、トラック・速度表示・ダイヤグラム上の現在時刻ラインが同期する。Gemini Canvas 生成。

「速度が途中で変わる追いつき算」は文章題として子どもがつまずきやすい典型問題。式と図とアニメーションを同じ時刻軸で重ねて見せる ことで、なぜ 33 分で追いつくのかが触って確かめられる。

何が分かったか

  • 両プラットフォームとも 「教えるための小さな道具」を量産する用途 に強い。1 つのビジュアライザーをほぼ会話 1 セッションで完成可能
  • 自己完結した単一 HTML として配信されるため、ホスティング不要・サーバー不要。教材 URL として配るだけで動く
  • 数式・物理現象・音響などの視覚化は AI 生成と相性が良い（明確な仕様 + 既知のレンダリング技法）。一方、複雑な状態管理を伴う多画面アプリは現状向かない
  • 教える側にとって「プロンプトで教材を即起こせる」のは時間コストの圧縮効果が大きい。授業準備のあり方を変えうる
  • 公開 URL がそのまま教材になる構造は、教育機関の LMS への組み込みにも向く

Claude Artifacts と Gemini Canvas の比較メモ

両プラットフォームを 4 試作で行き来して感じた特性差:

項目Claude ArtifactsGemini Canvas
公開 URL の閲覧誰でも可（auth 不要）Google ログイン必須
デフォルトの見栄えダーク基調・コードよりのトーンTailwind を多用したライト基調
外部 CDN 連携tailwindcss / フォント等は通るChart.js / MathJax / Tailwind の併用も問題なし
Web Audio など high-API可（試したのは描画系のみ）動作確認済（正弦波の AudioContext）
反映の速さ・対話安定性1 セッション完結が滑らか多少のリトライで意図に到達

→ 配布前提（ログイン不要）なら Claude Artifacts、Google エコシステム前提（学校の Workspace 内など）なら Gemini Canvas、と使い分けが効く。

制限・位置づけ

  • これらは 教育用途の小規模試作 であり、商用配布・受託対応の対象ではない
  • AI 生成コードであるため長期保守は不向き（必要なら同条件で再生成する運用を想定）
  • 知見は自社の AI コンテンツ制作（/products/ai-content-production/）における 「AI 生成成果物のディレクション」 経験として蓄積している