業務用アプリや操作解説動画を作る中で、「伝わるUI」と「伝わらないUI」の違いを痛感する場面があります。
その差を分ける要因のひとつが、情報の“粒度と量”の設計です。
特に動画やアプリ内でのテロップ（説明文）においては、「1行20字・3行以内」という制限が、単なるルールではなく、UIを機能させるための設計指針になります。
1. なぜ「1行20字・3行以内」が適切なのか？
1.認知負荷に基づく根拠（ワーキングメモリの限界）
人間の短期記憶（ワーキングメモリ）は約7±2チャンク（ミラーの法則）
約60字（20字×3行）は、意味の塊としてちょうど処理しやすい量
長文は記憶に残らず、読解の途中で離脱されやすい
2.視線移動と視認性（視線工学・タイポグラフィ）
人の視線は、1秒間に3〜5回“飛び跳ねる”動きをする（サッカード）
20字以内の行長は自然な視線移動に合い、負荷が小さい
3行を超えると“読了感”が得にくく、操作や判断のテンポが乱れる
3.UIとしての役割：「理解させること」だけではなく「迷わせないため」にある
UIにおける文言の目的は、読ませて理解させることよりも「迷わせないこと」の観点を注視
最短で意味が通り、判断につながるテキストが求められる
「読む→理解→行動」までを1～2秒で完了させるためには、短さと明確さが不可欠
4.業界基準の一致
NetflixやOOONAなどの日本語字幕制作ガイドでは、1行13〜15文字・2行以内が標準とされており、現場での読みやすさ・処理のしやすさを前提に設定
2. UIは“見た目”ではなく“流れを止めないための設計”
多くの人が、UIを「見た目のデザイン」と捉えがちですが、実際のUI設計で重視すべきは、“行動の流れを止めないこと”です。
長い説明や詰め込まれた文字は、ユーザーの行動の流れを断ち、「何をすればいいかわからない」という迷いを生み、操作の途中で諦められてしまう原因になります。
テロップやガイドは読むだけではなく「流れを支えるため」にある。
この認識が、UIを設計する上での大前提になります。
■3.実務での実践と効果──「短くすること」で操作が変わる
私は実際に、教育系アプリの操作解説動画や業務システムの説明UIにおいて、
この「1行20字・3行以内」のルールを設けて画面設計を行っています。
● 背景と設計意図：
操作動画は、画面キャプチャ・サイドスーパー・補足など複数の情報要素が同時に存在するため、テロップのスペースには限界があります。
この中でテロップを長くすると、画面が窮屈に見える／視線の行き場がなくなる／読みにくくなるという問題が生じます。
● 実践内容：
・テロップは1行20字・3行以内を基本とし、説明のために余る文字は補足として小さい文字で記載
・長くなる説明は画面やアニメーションで伝える方法を検討
・どうしても収まらなければ、画面を分割して対応
● 効果として得られたこと：
・画面の視認性と余白のバランスが向上
・読む際の心理的抵抗感が減り、短い時間で読まなければいけない中での焦燥感も軽減
・説明の読み飛ばしが減少
テロップをUIとして捉えて短くすることは「情報を削る」のではなく、情報の“伝達効率”を高めるための設計だと再確認しました。
4. “短くしても伝わる”への挑戦
テロップを作る中で、
「誤解を避けるためには、できるだけ具体的に説明したい」という欲求が生まれ文章が長くなることもあります。
しかし、そういったときには
・同じ意味で言い換える
・補足情報として小さく添える（1行30字・2行以内）
・動きや構造で補完する
という視点でテロップを再設計することで、結果的にユーザーの迷いや焦りが減り、読み飛ばしも少なくなります。
まとめ
「1行20字・3行以内」というルールは、単なる見た目の美しさではなく、
ユーザーの理解速度・操作判断・安心感に関わるUI設計の要です。
これは、認知科学・視線設計・業界ガイドラインの裏付けを元に具現化することで、実際の現場での「見やすさ・伝わりやすさ・操作のしやすさ」を改善します。
ぜひ、自分が制作する資料や動画、アプリUIの中で、情報の“短さ”がどこまでユーザー体験に影響しているかUIの観点として「読む」だけではなく「迷わない」ことが設計できているかを見直すきっかけにしてみてください。
参考サイト
ウェブ制作者のためのJIS X 8341-3:2010対応講座: アクセシビリティ･サポーテッド情報とアクセシブルなFlash･PDFおよび動画の実装方法
https://x.gd/YkHIc
Netflix日本語タイムドテキストスタイルガイド
https://partnerhelp.netflixstudios.com/hc/en-us/articles/215767517-Japanese-Timed-Text-Style-Guide?utm_source=chatgpt.com
魔法の数字7プラスマイナス2
https://en.wikipedia.org/wiki/The_Magical_Number_Seven%2C_Plus_or_Minus_Two?utm_source=chatgpt.com
情報をチャンク化することで記憶力が向上する仕組み
https://www.verywellmind.com/chunking-how-can-this-technique-improve-your-memory-2794969?utm_source=chatgpt.com