運営21年目の大リニューアル ～改修秘話をデザイナー視点でご紹介～

こんにちは！
CMS課の山﨑と申します。

私は、CMS課でWEBデザイン業務をメインで担当し、その他にも動画編集や宣伝で使用するチラシ等のデザイン（DTP）も手がけています。

CMS課では、とある経済団体のeラーニングサイトを2005年から運営させていただき、受講いただいている皆様を支える学習の場として運営を継続し、今年で21年目を迎えました。

今回は、私たちCMS課が長年運営してきたeラーニングサイトのリニューアルに関して「デザイナー視点」で取り組んだプロセスとその工夫についてご紹介します。

長寿サイトだからこそ直面する課題

私が本サイトの担当者の1人として着任したのは2021年。
すでに運営を続けて16年が経過していました。

当時はコンテンツの提供に比重を置いた運営をしていたため、ユーザーの使いやすさという観点の設計が弱く、慣れ親しんだ人にとっては使いやすいかもしれませんが、初めて利用する人には少しハードルが高いと感じるサイトという印象でした。

しかしながら、年度計画に基づいた運営体制のため予算面から大規模改修は難しい状況…。

それでもメンバー全員が「より良いサイトをつくりたい！」という同じ思いで、できる範囲の改修を一緒に進めながら運営してきました。

転機は「IEサポート終了」

本サイトでは2022年1月時点でもIEの利用者が一定数存在しており、この状態がリニューアルを難しくしていた要因の一つでした。「IEだけ表示が崩れる」ことも多く、IEをサポートし続けることは、更新作業の手間とデザインの制約を意味していたのです。

ところが、2022年、インターネット・エクスプローラー（IE）のサポートが終了。
このニュースは、私たちにとって大きなチャンスとなりました。

私はこの機会を逃すまいと「IEのサポート終了を機に、eラーニングサイトのデザインを一新しましょう！」と、現行サイトの課題点を整理して、リニューアル計画をプレゼンしました。そしてついに上長を含めたメンバー全員に納得をいただくことができ、2022年にeラーニングサイトの大幅リニューアルが決定したのです。

---

テスト結果や受講進捗の表示が、システムと密接に連携している部分があったため、意見を交わしながら計画を進め、クライアントに対しても、IE終了に向けた改修項目として正式に提案されることになりました。

全員で決めたデザインコンセプト

リニューアルに伴い、まずは本サイトに最適なビジュアルと機能を盛り込んだたたき台を制作して、メンバーと何度も協議しながら、丁寧に要件定義を行っていきました。

メンバー全員が「良いサイトにしていきたい！」という熱い気持ちを持っていたからこそ建設的な意見が沢山出てきて、要件定義にはかなりの時間を使いました。しかしながら、今振り返るとこの協議がなければ良い形まで持っていけなかったと思います。

そして全員で決めたリニューアルのコンセプトは

その実現のために、以下3点を軸に設計を進めることにしました。

視覚的に見やすいデザインで滞在時間を伸ばす

分かりやすい導線でストレスを軽減し離脱を防ぐ

動画コンテンツの活用で学習意欲を高める

直面した3つの大きな課題

その後の協議では、リニューアルにおける課題が「レスポンシブデザインの対応」「システムとデザインの連動」「ビジュアル設計」 の3つであると判明。
「このサイトはどのような形であるべきか？」という根本的なことに本気で向き合いながらひとつひとつ解決していきました。

レスポンシブへの対応

本サイトは長年にわたり大きなデザイン変更ができなかった背景もあり、表示崩れが発生している部分もいくつかある状態でした。
現代ではモバイルファースト設計が標準のため、優先的に修正を進めました。

システムとデザインの連動

進捗表示やテスト結果などは、システムと強く連動する設計のため、デザイン変更がそのままシステムの改修を伴う場面もありました。
誤った設計はサイト全体の不具合に繋がるリスクがあるため、システム担当と密に連携しながら慎重に進めました。

項目	一般的なサイト	ECサイト	学習・会員制サイト
更新頻度	低～中（必要なときのみ）	高（リアルタイム更新が多い）	中～高（新コンテンツ追加が頻繁）
主な更新内容	記事・会社情報	商品情報・キャンペーン	講座・教材・学習システム
SEO対策	記事の最適化	商品ページのSEO	講座ページのSEO
決済管理	なし（通常不要）	あり （多様な決済対応が必要）	あり（サブスク管理）
ユーザー管理	なし（閲覧型）	あり （会員購入履歴など）	あり（学習履歴・進捗履歴）
UI/UX最適化	低頻度	高頻度 （購入導線最適化）	中頻度（学習体験向上）
技術的な更新	CMSのバージョンアップ	決済・在庫管理の改善	LMS・動画配信の最適化
セキュリティ対策	中 （CMSの保守）	高（決済情報の保護が重要）	高（会員データ保護）

※当サイトは後者に分類されるため、単なるデザインリニューアルではなく、システムの安定性を保ちながら、より直感的なUI/UXへと改修する必要があります。
そのため、上長やシステム担当者と相談を重ねながら綿密な計画を立てていきました。

ビジュアル設計

他の学習サイトを参考にしつつ、
本サイトに最適な“学習意欲を刺激するビジュアル”とは何か？を模索。

地道な情報収集と試行錯誤で、最適な方向性を見出しました。

参考サイト	デザインの特徴	導線設計の特徴
①	シンプルで直感的なデザイン。カテゴリー別にコースが整理され、検索機能も充実している。	トップページにおすすめコースや新着コースが表示され、ユーザーの興味に応じたコンテンツにアクセスしやすい。
②	ライブ感を重視したデザイン。生放送中の授業が目立つように配置されている。	カレンダー形式で授業スケジュールを表示し、ユーザーが参加したい授業を簡単に見つけられる。
③	プロフェッショナルで洗練されたデザイン。大学や企業のロゴが配置され、信頼性を強調。	学位プログラムや専門コースへの導線が明確で、学習の進捗管理も容易。
④	アカデミックな雰囲気のデザイン。コースの詳細情報が豊富に掲載されている。	分野別や提供機関別にコースを検索でき、学習目的に応じたコース選択がしやすい。
⑤	日本語に特化したデザイン。国内の大学や企業の講座が中心。	新着講座や人気講座がトップページに表示され、目的の講座にスムーズにアクセス可能。

本サイトならではの着眼点

本サイトは、 IDを持つ限られたユーザーのみがアクセス可能なクローズドサイトです。

そのためSEO対策は必要なく「検索に出さない設計」が求められる珍しいケースです。

項目	一般的なWEBサイト	本サイト
SEO対策の必要性	○ あり（流入数増加のため）	なし（ログイン管理型サイト）
検索エンジン経由のアクセス	○ あり	なし
見せるべきユーザー	不特定多数	本サイト受講者
最適化すべき点	SEO対策（キーワードコンテンツ強化）	UX向上（ログイン・ナビゲーション・セキュリティ）

だからこそ重要なのが「ユーザー体験（UX）」を最適化。
通常のオープンなWEBサイトとは異なり「継続して学びたくなる導線設計」が特に重要です。

そのために、下記3つを特に意識して改修を進めていきました。

ログインページの使いやすさ

● ID・パスワードの管理の仕組みを明確にする

● 「ログインに失敗したときのガイド」をわかりやすく表示

研修ページのナビゲーション最適化

● 目的の研修に最短でアクセスできる設計

● 学習進捗をひと目で把握できるUI

セキュリティの強化

● 外部アクセスを制限し、セキュリティを確保

●　定期的なシステムアップデート

💡具体的な改修内容

ここでは、実際に対応した改修内容をお伝えしていきます。
デザインの理由や背景も合わせてお伝えしていきますので、読者のみなさまへの新しい知見になれば嬉しいです！

【TOPページ】直感的なコンテンツメニュー

改修前は、テキストベースのコンテンツとメニューが並ぶ、少し寂しい内容でした。
改修後は、各コンテンツにイメージ写真を当て込みました。

これにより、直感的に目的としている講座やコンテンツに移動できるようになり、さらにユーザーが使いやすいTOPページに進化しました。

【TOPページ】受講進捗がひと目で確認できる円グラフ

改修前は、TOPページから何度かクリックをしてマイページに進んで…と学習状況の確認に手間がかかっていました。これを解決すべく、TOPページのファーストビューにユーザーの受講状況や小テストの進捗を円グラフで可視化。

この改修により、受講者がログインをしたタイミングで「どの講座が受講済みなのか」「あとどれくらいの講座が未受講なのか」 「全講座の何％受講しているのか」といった受講状況をTOPページで確認でき、ユーザー自身の進捗状況を把握する負担を軽減する仕様となりました。

利用者が期間をあけてログインをした場合にも進捗確認が容易にできるので、やる気を削がない仕様にもなっていると感じています。 

※画像はイメージです

【その他】ビジネス向けのキャラクターを採用

私はサイトのデザインをする上で人気（ひとけ）を作ることはとても重要だと考えています。
テキストばかりのページは見る気が起きませんし、無機質なサイトはどこか寂しく感じますよね。

そこで、シンプルかつビジネス向けのキャラクターを採用し、学習サイトのテイストに合うよう変更しました。

【その他】受講状況のビジュアル化

※画像はイメージです

【バナー】動画コンテンのバナーを魅力的に

当サイトでは、受講者皆様の職場や顧客先へ直接訪問し、実際に取り組んだプロジェクトや業務の様子を動画収録し、現場のリアルな姿を伝える事例動画コンテンツとして公開しています。

動画公開時にはバナーを表示して告知を行っていたのですが、以前の仕様では 「登録済みの背景画像＋フォームで入力したテキスト」 という非常にシンプルなデザインで、視覚的な魅力に欠け、思わずクリックしたくなるようなバナーとは言えませんでした。

これを、固定されていた背景画像の自由化。そして、フォームで入力していたテキストを画像として登録する仕様に変更しました。これによって、現場で実際に撮影した写真をバナーの背景にして、視認性と訴求力を向上させることも可能となります。

これにより、サイトに訪れた受講者に対して動画の雰囲気をより魅力的に伝えられるようになり、
多くの人の目に留まりやすく、動画視聴へとつながる環境を整えることができました。

---

いかがでしたでしょうか？

今回のリニューアルは、単なるデザイン変更ではなく、システムやUXの改修を含めた総合的なアプローチ が必要であることに加え、一般的なWEBデザインの概念とは異なり、SEOを考慮しない設計や、学習継続を促すUI設計 など、独自の視点が求められる非常に難しいものだったと感じております。
「WEBデザインは業界や目的によって大きく異なる」 ということを改めて実感する機会となりました。

振り返ってみると、バナーやコンテンツ制作の際も常にユーザー導線やユーザビリティを意識・検討し、その都度より良いUI/UXやリニューアルの可能性について思考を続けてきたので、今回やってきたリニューアルのチャンスは、デザイナーとしての「こだわり」が引き寄せた結果だったのかもしれません。

最後に

WEBサイト制作の概念やデザインの価値観 は、この20年で大きく変化しました。

かつては「情報を発信する場」としての側面が強かったWEBサイトも、
現在では「ユーザー体験を向上させるデザイン」が求められるようになっています。
CMS課のeラーニングサイトはまさにこの時代変化の流れの中にあり、もしかするとIEのサポート終了という機会がなければ、今でもそのままだったかもしれません。

私は、デザインは単なる見た目の変更ではなく「ユーザー体験を向上させるもの」だと考えています。

WEBサイトは、時代の流れに合わせて変化し続けるものだからこそ、
現在のトレンドとのズレや課題を把握し、より良いものにするために常に改善が必要です。
CMS課では、今後もビジュアルとコンテンツの両方を活かしたサイト運営を続けていきます！

以上、CMSの山﨑でした。