受講する方が画面を開いて知りたいのは、今なにをすればよいか、の 1 つです。その 1 つを大きく出し、残りの情報は消さずに、それが意味を持つ画面へ移しました。こうすれば、画面から情報を減らしても、必要な人は 1 つ先の画面で見られます。
2026 年 8 月 13 日、当社が作っている企業研修向けの e ラーニングで、受講する方のマイページを作り直しました。私が開発に出した指示は「受講者側のUIをシンプルにして」の 1 行です。UI は画面のことです。この記事は、そのときに何を測り、何を移し、何を触らなかったかの記録です。
機能は全部そろっているのに、今なにをすればよいかが埋もれていました
作り直す前に、マイページにあるものを数えました。講座のカードが 13 枚、リンクが 25 本、見出しが 14 個です。カード 1 枚には、10 種類の情報が載っていました。
- 標準学習時間と、教材の数
- 受講の状態
- 受講の期限と、残りの日数
- 進み具合の割合と、終えた教材の数、進み具合のバー
- 次に取り組む教材
- 修了の条件（2〜3 行）
- ボタン 2 つ
13 枚 × 10 種類で、130 の情報が並んでいたことになります。画面の上には、受講中 13 件・期限が近いもの 0 件・修了 0 件という集計の数字も 3 つ並んでいました。どの機能も間違ってはいません。ただ、受講する方が知りたい「今なにをすればよいか」は、130 の中に埋もれていました。
作り直す前
- 同じ大きさの講座のカードが 13 枚
- カード 1 枚に 10 種類の情報
- 修了の条件が、カードごとに 2〜3 行
- 上に、受講中・期限が近い・修了の件数のタイル
作り直した後
- 先頭の 1 件だけを「次に取り組むこと」として大きく出す
- ほかの講座は 1 行ずつの一覧
- 修了の条件は、講座の画面だけに出す
- 期限は、当てはまる行に印を付けて言葉で出す
2026 年 8 月 13 日の作り直しから
一覧の先頭の 1 件を、「次に取り組むこと」として大きく出しました
講座の並び順は、もともと正しく作ってありました。修了していない講座が先、その中で期限が近い順、最後は講座名の順です。そこで、並びは変えずに、先頭の 1 件だけを「次に取り組むこと」として大きく出しました。次に開く教材の名前と、その教材へ 1 回押せば入れるボタン「受講をはじめる」を置いています。
先頭に出した講座は、下の一覧には重ねて出しません。下の一覧の見出しは「ほかの受講中の講座（1 件）」のように、残りの件数を添えます。受講中の講座が 1 つも無いときは、「次に取り組むこと」を出さず、まだ講座が無いことを伝える表示にしました。
画面の役目を、次にすること（ネクストアクション）が分かることに絞る考え方は、経営ダッシュボードの設計でも使っています。見て終わりの画面を、行動を促す画面に改めた記録はダッシュボードの記事にあります。
修了の条件は、一覧から講座の画面へ移しました
「修了まで：全ての教材の完了（あと 64 件）」という文が、カードごとに 13 回並んでいました。13 回読んでも、次の行動は決まりません。修了の条件は、1 つの講座を開いたときにはじめて意味を持つ情報です。そこで、修了の条件は講座の画面だけに出すことにしました。講座の画面では、達成した条件も含めて全部を並べます。
移したことで、マイページを開くたびに講座の数だけ走っていた、修了しているかどうかの判定の計算も要らなくなりました。画面の情報を減らすと、裏側の仕事も減ることがあります。
期限は、当てはまる行に印を付けて出します
上に並んでいた 3 つの集計のタイルは、やめました。「期限が近いもの 1 件」と大きく出しても、どの講座がそうなのかは分からないからです。
代わりに、当てはまる行に「あと 3 日」のような印を付けました。件数は、一覧の見出しの横に「受講期限を過ぎたもの 1 件」「受講期限まで 7 日以内のもの 1 件」のように 1 行で添えます。期限を過ぎた講座には「受講期限を 5 日超過」と書き、色だけで状態を伝えないようにしています。
落とした情報の行き先を、表にしてから移しました
情報を減らすときに起きやすいのは、どこにも出なくなる情報ができることです。マイページから落とす情報は、1 つずつ行き先を決めてから移しました。
| マイページから落としたもの | 移した先 |
|---|---|
| 標準の学習時間・教材の数・終えた教材の数 | 講座の画面（進み具合の表示と、講座の情報の行） |
| 受講の状態 | 講座の画面（進み具合の右） |
| 修了の条件 | 講座の画面（達成したものも含めて全部） |
| 講座ごとの次の教材 | 先頭の 1 件だけ「次に取り組むこと」に。残りは講座の画面 |
| 「教材一覧」のボタン | 一覧の行そのものを押せば講座の画面へ |
| 修了証のダウンロード | 講座の画面（前からある入口） |
表にしておくと、作り直したあとの確かめも楽になります。講座の画面を開いて、表の右側の情報が全部出ているかを見ればよいからです。使う頻度で強弱を付けて並べ直した記録は、機能の分類を組み直した記事にあります。
触らなかったところも、理由と一緒に決めました
作り直しの範囲から、わざと外したものが 3 つあります。
| 触らなかったもの | 理由 |
|---|---|
| 動画の、どこからどこまで見たかの記録 | 受講した時間の証跡になる記録で、簡単にする必要がない |
| 課題の提出期限の表示と、期限を過ぎたら提出の欄を出さない分かれ道 | 簡単になるのは 2 行ほどで、壊したときの影響に見合わない |
| 確認テストの選択肢の並べ替え | 受講する方ごとの出題の順番で、表示の整理とは関係がない |
範囲を広げすぎないよう、得られる簡単さと、壊したときの影響を比べて、見合わないところは触らないと決めました。
作り直したあとに確かめたこと
作り直したあと、次のことを自動のテストで確かめました。「次に取り組むこと」がちょうど 1 枚だけ出ること。先頭に出した講座が下の一覧に重ならないこと。マイページから修了の条件の文が消え、講座の画面には全部出ること。期限を過ぎた講座・期限が近い講座・余裕のある講座で、それぞれ正しい言葉が出ること。受講中の講座が無いときの表示。それまでにあった自動のテストも、全部通ることを確かめています。
画面の幅は、スマートフォン（375px）・タブレット（768px）・パソコン（1280px）で、横に流れる部分が無いかを見ました。
減らす前に、画面を開いた人のしたいことを 1 つに決めます
- その画面を開いた人が、まず何をしたいのかを 1 つに決めた
- 今の画面にある情報・リンク・見出しの数を数えた
- 並び順が、見る人のしたいことに合っているかを確かめた
- 先頭に大きく出す 1 件と、一覧に回すものを分けた
- 落とす情報ごとに、移す先の画面を表にした
- 集計の数字は、当てはまる行に印を付ける形にできないかを考えた
- 状態を、色だけでなく言葉でも出した
- 触らない部分と、その理由を決めた
- スマートフォンの幅で、横に流れないかを見た
情報を詰め込んだ画面は、作った側から見ると、どれも外しにくく見えます。見る人の目的から、どの情報をどの画面に置くかを決める考え方を情報設計と呼びます。見る人が今すべきことを 1 つ決め、それ以外を 1 つ先の画面へ移す順番で考えると、どれを消すかで迷わずに済みます。
当社の e ラーニングは、研修の動画・テスト・課題から修了までの記録を 1 か所に残すために作っています。研修と受講の記録の進め方はリスキリング研修で、業務の数字を 1 画面にまとめる仕組みは経営ダッシュボードで扱っています。入力の側を軽くする考え方は、チャットで入力する形にした記事にあります。
