地域のICT委員として、子どもたちにAIを体験してもらうためのデモシステムを制作しました。今回は「すきなくだものアンケート」をテーマに、手書きの文字をAIが読み取って自動で集計する仕組みを2パターン用意しています。
どんなことができるの？
子どもたちが紙に「なまえ」と「すきなくだもの」を手書きで書いて、スマホのカメラで撮影して送信すると、AIが手書き文字を読み取り、自動でランキングやグラフにまとめてくれます。
手書き文字の読み取りには、Anthropic社のClaude（AI）のVision機能を使っています。子どもの崩れた文字でも、かなりの精度で認識してくれます。
パターンB（基本版）
まずはシンプルな構成として「パターンB」を作りました。
主な機能：
- スマホで手書き写真を撮影 → AIが名前と果物を読み取り
- 手入力での回答にも対応（AIが使えない場合の代替）
- 全員の回答がサーバーに集約され、リアルタイムでランキング表示
- 管理者パスワードでデータリセット可能
デモURL：
パターンC（フル機能版）
パターンBをベースに、教室でのプレゼン向け機能を追加した「パターンC」も制作しました。
追加された機能：
- プロジェクター用表示画面 — 教室の大画面に映す専用ページ。ダーク背景に大きなランキングバーがアニメーションで動きます
- QRコード表示 — 子どもたちがすぐにアクセスできるよう、画面上にQRコードを常時表示
- 効果音 — 回答送信時や新しい回答が届いたときにチャイム音が鳴ります
- テーマ切り替え — 「すきなくだもの」だけでなく、「すきな給食」「すきな教科」にワンタッチで変更可能。AIの読み取りプロンプトも自動で切り替わります
- Excelダウンロード — 集計結果をExcelファイルとしてダウンロード可能
- 写真ギャラリー — みんなの手書き画像を一覧表示
デモURL： https://futurama.blog/ict-demo/ict-demo-c/
プロジェクター表示： https://futurama.blog/ict-demo/ict-demo-c/display.html
技術的な構成
サーバーはXserver（レンタルサーバー）を使い、以下のような構成で動いています。
- フロントエンド： HTML + CSS + JavaScript（単一ファイル）
- バックエンド： PHP（api.php 1ファイル）
- AI： Anthropic Claude Sonnet 4（Vision API で手書き画像を読み取り）
- データ保存： サーバー上のJSONファイル（データベース不要）
特別なフレームワークやデータベースは使っておらず、PHPファイルとHTMLファイルをサーバーに置くだけで動く、非常にシンプルな構成です。
制作にあたって
このシステムの設計・コーディングは、Anthropic社のAIアシスタント「Claude」との対話で進めました。要件を伝えると、コードの生成からデバッグ、デプロイの手順案内まで一貫してサポートしてくれたので、短期間で形にすることができました。
AIを「使う側」のデモであると同時に、AIと「一緒に作る」という体験でもあり、ICT活用の可能性を感じるプロジェクトになりました。
注意事項
本デモは外部のAI API（Anthropic社）を利用しています。API提供元の都合やコストの関係により、予告なくデモを停止・削除する場合があります。アクセスいただいた際に利用できない場合は申し訳ありません。ご了承ください。
手入力タブはAI APIを使わず動作しますので、APIが停止している場合でもお試しいただけます。
