CV BlockStudio — Modular Computer Vision Platform ブロックベースのモジュール方式を採用した、直感的なコンピュータビジョン学習プラットフォームです。Web上で画像処理、顔検出、オブジェクト追跡などのパイプラインをパズルのように組み立てて、対応するPython(OpenCV/MediaPipe)コードを自動生成・実行できます。 日本語版デモ 英語版デモ 中国語版 (中文) デモ
Lesson 1: アフォーダンスとマッピング体験実験 電球とスイッチのインタラクティブなインターフェースを通じて、アフォーダンスとマッピングの概念を体験します。不適切なマッピング(Bad Mapping)と改善されたマッピング(Good Mapping)を比較し、直感的な操作設計の重要性を学びます。電気迷宮デモも含まれています。 Google Colab を開く
Lesson 2: フィッツの法則 — クリック実験セッション 画面上のターゲットをクリックする実験を通じて、フィッツの法則(ターゲットの大きさと距離が操作時間に与える影響)を検証します。実験後にデータを解析・可視化し、フィッツの法則が成立しているかをグラフで確認できます。 Google Colab を開く
Lesson 3: ヒックの法則 — 選択反応時間実験 画面上にランダムに表示される単語を選択するゲーム形式の実験です。選択肢の数が反応時間に与える影響を測定し、ヒックの法則(選択肢が増えると意思決定時間が対数的に増加する)を体験的に理解します。 Google Colab を開く
Lesson 4 (1/2): 画像暗号化ツール - 使いにくいUI設計の実例 (Bad UI) 意図的に認知負荷を高め、フィッツの法則・ヒックの法則に違反した、操作しにくいユーザーインターフェースの実例です。講義での問題点発見演習に使用します。 デモを開く
Lesson 4 (2/2): 画像暗号化ツール - 改善された良いUI設計の実例 (Good UI) 上記の悪いUI設計を、UIデザインの基本原則に従って整理・改善した、直感的で操作しやすいユーザーインターフェースの実例です。 デモを開く
Lesson 5: ニールセンの10原則 — 体験コード ニールセンのユーザビリティ10原則それぞれについて、「悪い例」と「良い例」のインタラクティブなコードをペアで体験できるノートブックです。各原則を実際のUI上で比較しながら、ユーザビリティ評価の基礎を学びます。 Google Colab を開く