モールス符号学習 UX と二分木(decoding tree)可視化の先行事例

一言まとめ

モールス学習サイトは「ドット/ダッシュで分岐する二分木を辿る可視化型」「絵文字ニーモニックのフラッシュカード型」「Farnsworth 法の音感訓練型」に分かれ、音感訓練派は視覚ツリーを明示的に避ける。日本語圏は合調語法(語呂合わせ)が主流で、和文モールスは国際モールスとは別個の木を成す。

作成 · 更新 · #uiux#morse#learning#visualization
目次 5 sections
  1. 01 二分木を辿る可視化型
  2. 02 フラッシュカード型・音感訓練型
  3. 03 日本語圏の特徴
  4. 04 製品化事例が見つけにくい角度
  5. 05 更新履歴

調査時点: 2026-04。

二分木を辿る可視化型#

  • Morse.Cool: ドット / ダッシュのボタンでルートから葉までナビゲートする完全インタラクティブな木。“Decode Mode” と “Explore Mode” の 2 モード。音声同期や枝全体の強調は公式記述にない
  • MorseXpress: ドット / ダッシュ / Reset のボタン。選択文字への経路をハイライトし、A〜Z・0〜9 からの逆引きで経路を表示する。“Play” で音声再生(木のハイライトとの同期は不明)
  • 多くの参照サイト(PDF・JPG・GIF)は静的な参照図にとどまる

フラッシュカード型・音感訓練型#

  • Google Morse Learn: 全 26 文字に絵文字ニーモニックを割り当てる方式で、二分木は使わない。表示が「絵文字付き → 絵文字なし、数秒後にキュー → キューなしでジターのみ」とアダプティブにフェードするが、フェードのトリガー条件(試行数・正答率)は非公開。Phaser.js 実装、Gboard 連携
  • Morse Code Ninja: Farnsworth 法(文字速度 20 wpm・実効 10 wpm のように、文字間スペースを引き伸ばす)を中心に据える。高頻度文字(T, A, E, N, O, I, S の順)から始め、「動画紹介 → 同一文字 3 回 → 単一 1 回 → 2〜3 文字混合 → 単語」の 5 段階。視覚ツリーとニーモニックを明示的に禁止し、高速移行の妨げになると主張する。挙げられる学習の摩擦は書き写し学習・低速学習・過度な練習・プラトー

視覚ツリー派と音感訓練派は設計思想が対立しており、どちらを採るかで UI が根本から変わる。

日本語圏の特徴#

  • 合調語法(語呂合わせ。A →「アレー」、M →「メーデー」など)が主流で、筆記試験対策向け。音感法への移行が推奨される
  • 和文モールスは 48 の基本かなに濁音・半濁音を含み、各かなが 2〜5 要素のドット・ダッシュ列を持つ。国際モールス(ラテン 26 字と数字記号、深さ 2〜4)とは構造的に別の独立した木で、拡張ではない
  • インタラクティブな和文の木の学習ツールはほぼなく、ipusiron の MorseTree Visualizer(英字のみ、経路のリアルタイムハイライト、音声なし)が近い例

製品化事例が見つけにくい角度#

調査範囲では製品としての実装が確認しにくかった方向(不在の断定ではない)。

  • 3D ツリー、音声に同期してノードが時間展開するアニメーション
  • ラジアル / 円形レイアウト(概念記事はあるが製品は乏しい)
  • 学習者がノードを組み立てる構築型、ツリーと他メタファーの複合、AR / 空間
  • 触覚フィードバック。振動による受動学習の有効性は研究で示されている(ACM TAP 2020、Georgia Tech の Passive Haptic Learning)が、「振動 = ノード移動」として設計した製品は見当たらない
  • マルチプレイヤーの協同ナビゲーション
  • アクセシビリティファースト(ARIA の tree widget パターン自体は W3C で定義済み)

更新履歴#

  • 2026-04-25: 初版(ローカル調査ノート)
  • 2026-10-17: Wiki へ移植、概念ページとして再構成

出典

  1. https://morse.cool/tree
  2. https://morsexpress.com/morse-code-decoding-tree/
  3. https://experiments.withgoogle.com/morse-learn
  4. https://github.com/googlecreativelab/morse-learn
  5. https://morsecode.ninja/advice/
  6. https://www.qcq.co.jp/link/arekore/morse.html
  7. https://github.com/ipusiron/morse-tree-visualizer
  8. https://dl.acm.org/doi/10.1145/3402935

同じトピック — UI/UX