オンライン講座サイトの配色はどう決める？学習を邪魔しない色選び
オンライン講座サイトでは、受講中に教材を落ち着いて読めることが大切です。動画、説明文、レッスン一覧、学習の進み具合、次のレッスンへ進むボタンを同じ画面に置くと、色の使いすぎが学習内容から注意をそらすことがあります。ここでは表計算の入門講座を例に、学ぶ内容を主役にした配色の決め方を考えます。
「教材を読む」「現在地を知る」「次へ進む」で色の役割を分ける
最初に、教材の本文と動画を最優先にします。文章を読む領域は明るい単色の背景にし、濃い文字色を使います。説明文や動画の周囲に多くの装飾色を置かず、見出しの大きさ、段落間の余白、図解の配置で内容を整理すると、重要な情報が埋もれにくくなります。
レッスン一覧は本文とは別の面にまとめ、現在取り組んでいる回を見つけやすくします。ただし、淡い背景色を変えるだけでは「今どこを学んでいるか」が伝わりにくい場合があります。「学習中」という文字と目印になる線を組み合わせ、完了した回は「受講済み」、まだの回は「未着手」と明示しましょう。
次へ進むボタンには一つの強調色を決めます。このように重要な操作を目立たせる色をアクセントカラーと呼びます。レッスン見出しも補足文も同じ強調色で埋めず、操作をする場所に優先して使うと役割を保ちやすくなります。
表計算の入門講座を6色で組み立てる
全8回の表計算講座を受講する画面を想定します。HEXコードは、「#」と6桁の英数字で画面上の色を指定する表記です。各色を次の役割に割り当てます。
- 画面全体：ごく薄い青灰 #F4F7F9 — 教材の外側の背景。
- 教材を読む面：白 #FFFFFF — 動画下の説明文、例題、手順。
- 本文・見出し：濃い青灰 #253541 — レッスン名、説明、重要な注意書き。
- 補足文字：落ち着いた青灰 #506371 — 所要時間や補足説明。
- 操作・進捗の色：深い青 #185B7A — 「次のレッスンへ」、進捗バーの進んだ部分、現在地の線。
- レッスン一覧の面：淡い青 #E3EFF6 — 左側の一覧や進捗バーの背景。
例えば「第4回 表の並べ替え」の教材を#FFFFFFの面に表示し、本文を#253541、所要時間を#506371にします。レッスン一覧は#E3EFF6に置き、第4回の項目に#185B7Aの縦線と「学習中」の文字を付けます。第1〜3回には「受講済み」、第5回以降には「未着手」を表示します。これらは画面設計を説明するための架空の講座内容です。
進み具合は「全8回のうち3回完了」と文字でも書き、#E3EFF6のバーを#185B7Aで一部塗ります。塗り色とバーの背景は約6.37:1のコントラスト比です。次へ進むボタンも#185B7Aを背景に、文字は#FFFFFFにします。進捗や現在地を色だけで判断させないことが重要です。
コントラスト比は、隣接する2色の明るさの差を示す数値です。教材の本文#253541と白い面#FFFFFFは約12.62:1、補足文字#506371と白い面は約6.24:1、ボタンの白文字#FFFFFFと深い青#185B7Aは約7.46:1です。いずれもWCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAが通常サイズの文字に求める4.5:1以上を満たします。淡い青#E3EFF6と白い教材面は約1.17:1と差が小さいため、その色の違いだけを区切りの目印にはしません。
長時間の学習と操作状態を考えて調整する
動画や図解に装飾色を重ねすぎない。動画の字幕や教材内のグラフには独自の色があります。外側の背景やナビゲーションを目立たせすぎず、まず字幕と実際の映像の重なる部分で文字が読めるか確認します。白い文字なら、どんな映像の上でも読みやすいとは限りません。
理解度チェックの正誤は色と文章の両方で示す。「正解」「もう一度確認しましょう」などの説明を加え、赤や緑の色だけに依存しないようにします。進捗が止まっている場合も、バーの色だけでなく、完了数や次に取り組む内容を表示します。
スマートフォンでは教材と操作の距離を確かめる。レッスン一覧を折りたたむ場合でも「第4回／全8回」などの現在地を残します。ボタンの文字と背景、操作できる部分の輪郭、キーボードで現在選んでいる箇所を示す枠（フォーカス表示）は、それぞれ隣接する色で確認してください。色を増やすより、読める教材と迷わない操作を優先することが、学習を邪魔しない配色につながります。