Webサイトへのアクセス数やユーザーからの評価を上げるためには、UI/UXの最適化が必須です。
しかし、「Webサイトでどう表現すればターゲットに響くのか分からない」「具体的にどこから手をつければ良いか判断が難しい」とお悩みの方も多いでしょう。

本記事では、NTT東日本が提供するeラーニングプラットフォーム「ひかりクラウド スマートスタディ」のサービスサイトリニューアル事例をご紹介します。
具体的な改善ポイントとその背景にある思考プロセスを詳しく解説します。

NTT東日本では、プラットフォーム型のeラーニング「ひかりクラウド スマートスタディ」を提供しています。

eラーニング教材(テキスト・動画・テストなど)をアップロードすることで、社外にオンライン研修用のコンテンツを配信できます。

ＮＴＴ東日本のeラーニングサービスを知る

1.UI/UXとは？

「UI」と「UX」は並列で考えられることが多く、どちらもユーザーに製品やサービスをよりよく知ってもらうために大切な要素です。
改めて、それぞれがどのような意味と役割を担っているかをご紹介します。

UIとは

UIは「ユーザーインターフェース」の略称で、Webサイトやアプリケーションにおけるデザイン、配置、操作性を表す言葉です。ユーザーと製品やサービスとの接点となるのがUIであり、サイト・アプリ内のバナーやアイコン、クリックボタンなども含まれます。ユーザーにとって利便性や視認性が高いサイト・アプリを「UIが良い」と評価することがあります。

UXとは

UXは「ユーザーエクスペリエンス」の略称で、ユーザーが製品やサービスを利用したときの体験を表します。Webサイトやアプリケーションを利用して製品を購入したり、会員登録をしたりすることもUXのひとつです。「また次回も利用したい」「次は問い合わせをしてみたい」などのユーザーの感情的な反応もUXに含まれます。

UIとUXの関係性

UIはWebサイトやアプリ内のデザインやクリックボタンなど、ユーザーが直接触る部分を指すのに対し、UXはユーザーがUIを通して体験すること全体を表しています。
つまり、UIはUXの中に含まれていると言えます。ユーザーからの「使いやすい」「また利用したい」「購入したい」など好感触な感想を得るためには、利便性や効率性などを考えてUI設計と向上を検討することが必要です。

2.UI/UXの課題実例

NTT東日本が提供するeラーニングプラットフォーム「ひかりクラウド スマートスタディ」のリニューアル前のサービスサイトにはさまざまな課題がありました。

実際に直面していたUI/UXの3つの課題をご紹介します。

課題1：ユーザーを迷わせてしまう複数のゴール

リニューアル前のサイトには多くの情報を掲載しており、お客さまが本当に求める情報にたどり着きにくいという課題を抱えていました。

• サービストップ
• コンテンツ
• 入門FAQ
• ご利用中の方へ

といった複数のメニューが並んでおり、一見すると親切な設計に見えます。

しかし、サービス導入を検討しているお客さまにとって、「次にどこを見れば良いのか」「どのボタンを押せば知りたい情報にたどり着けるのか」が分かりにくく、行動を迷わせてしまう可能性がありました。
Webサイトにおけるゴール（コンバージョン）が複数存在し、力が分散してしまっている状態でした。

課題2：サービスの強みが伝わりにくいコンセプト設計

リニューアル前のサイトでは、本サービスを「研修でも、情報共有でも使えるeラーニングプラットフォーム」と表現していました。多機能で汎用性が高いことを伝えようとするあまり、逆に「誰のための、どのような課題を解決するサービスなのか」という核心部分が曖昧になっていました。 結果として、サービスの本来の強みやコンセプトがお客さまに伝わらず、訴求力が十分に発揮できていない状態でした。

課題3：一方的な機能紹介と利用シーンの抽象的な表現

サービスの機能紹介のページでは、搭載されている機能の一覧を羅列する形になっていました。しかしこれだけではお客さまが「その機能を使って自分の会社の課題をどう解決できるのか」を具体的にイメージすることは困難です。 また、利用シーンの紹介においても、「複数拠点への情報配信を一括管理」（上記画像内の赤枠参照）といった表現は、具体的さに欠けていました。
『情報配信』が具体的に何を指すのか、それによってどのようなメリットが生まれるのかが分かりづらく、お客さま一人ひとりのお悩みと結びつけて考えることが難しい状態でした。

3.サイトリニューアルの進め方と4つの改善ポイント

「ひかりクラウド スマートスタディ」のサイトリニューアルでは、サービスサイトの役割を再定義し、お客さまが本当に求める情報へスムーズにたどり着けるよう、UI/UXの観点から全面的に見直しを行いました。 先述している課題を解決するため、以下の4つのポイントに重点を置き、順序立てて改善を実施しました。

改善ポイント1：コンバージョン指標を「無料トライアル」に一本化

最初に着手したのは、サイトのゴール、すなわちコンバージョン指標の再定義です 。

「ひかりクラウド スマートスタディ」というサービスにとって、導入を決定する上で最も重要なプロセスは、お客さま自身に実際にサービスを体験していただき、その価値を実感してもらうことです。

そのため、コンバージョン指標を「2週間の無料トライアル申し込み」に定め、サイト全体の情報設計をこの一点に集中させることにしました。

リニューアル後のサイトでは、ファーストビュー（ユーザーがページを開いて最初に目にする画面）の最も目立つ位置に「無料で2週間トライアル」のボタンを配置。これにより、サイトを訪れたお客さまが迷うことなく、まず何をすべきかを直感的に理解できるように設計しました。
これまで複数あったお問い合わせ導線を絞り、お客さまのアクションを明確にガイドすることで、コンバージョンへの流れをスムーズにしています。

改善ポイント2：ターゲットと提供価値を明確に示す

次に、誰のためのサービスなのかを明確に打ち出すため、プロダクトのコンセプトと強みを全面的に押し出す構成に変更しました。

「はじめてのeラーニングなら NTT東日本の ひかりクラウド スマートスタディ」というキャッチコピーを大きく掲げ、「LMS（学習管理システム）の導入が初めてで、何から始めればいいか分からない」という潜在的なお客さまに対して、弊社が最適なパートナーであることを明確に伝えています。

さらに、ファーストビューには「ID数300,000突破」という具体的な実績と、「月額198円/ID～」という導入しやすい価格体系を明記しました。これにより、お客さまはサービスの信頼性とコスト感を瞬時に把握でき、安心して導入検討を進めていただけるようになりました。

改善ポイント3：お客さまの課題解決に寄り添う機能紹介へ

単なる機能の羅列だった機能紹介ページも、お客さまの視点に立って全面的に見直しました。

新しい機能紹介ページでは、「ドキュメント機能」であれば「独自ビューワーで資料をセキュアに配信」 、「ビデオ機能」であれば「倍速再生・途中再生ができる映像教材を配信」 といったように、各機能がお客さまのどのような課題を解決し、どのようなメリットをもたらすのかを具体的に記述しています。

これにより、お客さまは自社の状況と照らし合わせながら、「この機能を使えば、あの業務が効率化できるかもしれない」と、導入後の活用イメージを具体的に膨らませることができるようになりました。

改善ポイント4：利用シーンのリアリティを追求

抽象的で分かりにくかった利用シーンの紹介も、より具体的に、リアリティをもって感じられるように改善しました。

今回のリニューアルでは、「社員・スタッフへの集合研修をオンライン化」という具体的なケースを提示しています。その上で、「会場手配やスケジュール調整の時間軽減」「時間や場所を選ばずに効果的な研修を実現」「受講者の学習履歴の管理が容易」といった、導入によって得られる明確なメリットをリストアップしました。

このような具体的な利用シーンとメリットの提示により、お客さまは「自社でもこのように活用できそうだ」と、サービス導入後の成功イメージをより身近に感じられるようになります。

4.まとめ：UI/UX改善がもたらす価値

今回の「ひかりクラウド スマートスタディ」のサイトリニューアルは、単にデザインを新しくしただけではありません。サービスの提供価値を改めて見つめ直し、「お客さまが本当に知りたい情報は何か」「お客さまが最もスムーズに行動できる導線は何か」を徹底的に追求しました。

リニューアルによって、お客さまはサービスの価値を直感的に理解し、迷うことなく導入検討（無料トライアル）へと進めるようになりました。これは、UI/UXの改善が、お客さまとのより良いコミュニケーションを築き、ビジネスの成長を加速させる上でいかに重要であるかを示しています。

本記事でご紹介した改善アプローチや思考プロセスが、これから新たなビジネスを展開されようとしている担当者の皆さまにとって、少しでもお役に立てれば幸いです。

「ひかりクラウド スマートスタディ」は、初めてeラーニングを導入する企業さまを力強くサポートします。まずは2週間の無料トライアルで、その機能性と使いやすさをぜひご体感ください。

ひかりクラウド スマートスタディの詳細はこちら

• ひかりクラウド スマートスタディは、eラーニングプラットフォームのため学習コンテンツは含まれておりません。

関連サービス

資料ダウンロード

関連するコラム

• コラムをもっと読む