その他

言葉でカタチを作るデザイン術!eラーニングシステムLearnOのリブランディング景色

2023.11.24

eラーニングシステムLearnOのサービスをリリースして10年が経った、冬のはじめ。

チーフデザイナーは同プロジェクトで「もうサービスはリブランディングすべきかもね」と言われて、帰り道に少し白くなった息を見つけて、ついにその時がきたんだと噛みしめたそうです。

新築住宅でも10年がすぎれば外壁を塗り直し、水回りの部品を取り替えます。大事に使ってきた本革の鞄なら、専門家に頼んで修繕や交換をするでしょう。

10年間ずっと改善を続けてきたeラーニングシステムならなおさらのこと。毎週ルーティンワークのように機能を継ぎ足してきましたから、新しい部屋をつくろうにも増築する術がなくなっていました。

そしてリニューアルじゃなく、リブランディングというワードにこだわったわけ。

リ＋ブランディング、再びブランドを見直すということ。ほんのささいな違いかもしれませんが、私たちはeラーニングシステムLearnOというブランドをとても大切にしてきましたから、古き良きところを見極めることなしに前に進めなかったのです。

よし、やっていこう！そう決まってしまえば、足取りは軽く、気持ちは前のめり。鼻歌まじりに特別なプロジェクトがはじまったのは2020年1月のことでした。

ですが、すでにお察しのとおり、そこから現在まで3年の歳月が流れました。

言うは易く、行うは難し。この格言が重い鎖のようにズシリと両肩にのしかかるほど長い道のりでした。そんなにかかるとわかっていたら、踏みとどまったかもしれません。

まさか、手を動かしてデザインするより言葉でカタチを表現することに半分以上の時間を費やすとは思わず

まさか、あらゆる受講者や管理者のことを考えて画面設計に膨大な仮説を埋め込むことになるとは知らず

このSTORYでは、近くで見守ってきた1人のメンバーとしてデザイナーチームの奮闘を通して想いをカタチにしていくプロセスをお届けしていきます。

手を動かさず、話して話して話していく

リブランディングのプロジェクトではじめてデザインというプロセスに立ち会って分かったことがあります。それは、いきなりイラストや図形を描いたりしないものだということです。何かが降りてきてサササッと手を動かして描き上げる、というものではありませんでした。

リブランディングのプロジェクトがキックオフしてから、とにかく話して話して話していくのです。

ディレクターが過去の受講者や管理者の行動データ分析をプレゼンしてくれたら、それについて「このページの滞在時間が長いのはなぜなんだろうね」「本当はこのページからあのページにいくはずなのにデータに出てないね」「以前からここの操作で問い合わせ多かったよね」といった感じで疑問を並べていきます。

プランナーからLearnOの良さってなんだろうね？という問いが出されたら「とにかく普通のeラーニングにはもったいないぐらいの高機能じゃない」「操作性で質問がすごく少ないことかな」「カスタマーチームとエンジニアの連携でクイックレスポンスだと思う」と思いついたことを口にしていきます。

あげくデザイナー自身からLearnOを人間に例えるとどういう性格だろう？とはじめると、「野望はないが、小さな欲はいっぱいある」「心はふわふわしているだけど、地に足をつけて歩く」「好奇心は旺盛だけど、やりたいことが増えると爆発しちゃう」「ヘンゼルとグレーテルみたいにパンが落ちてないと歩けない」と想像を広げていくのです。

チーフデザイナー内部（うちべ）は、探りながら思い出します。

「デザイナーの二人でもかなり言語化を重ねたかな。一人で作るのではなくてチームで作るというところを広げたかったですね。デザイナーメンバーの能登からたくさん良いところを引き出したいなと考えていました」

「だから、アートディレクションチームの定例会議で毎週宿題を作って、持ち寄ってデザインの土台になる言語化を進めていました。いろいろ話していると、コンセプトのところで能登からドライブスルーやアトラクションのライドに乗っている感覚というワードが出てきました」

若手デザイナー能登（のと）は、少しはにかんで話し始めました。

「学びをくり返し、サイクルが大事という話が出ていたので、それを言語化しやすいモチーフはないかと考えていました。ドライブスルーや回転寿司、アトラクションのライドという回るものをとにかく集めていた記憶があります。最初から最後までサイクルというものをすごく意識してワイヤーフレームを作り、デザインを続けました」

思いつく限りの疑問をテーブルに並べるだけで、あっという間に半年が過ぎていました。そこでようやくコンセプトをどうするかという話に入っていきます。

動き続けることで、自分の進むべき道が拓けるように

チーフデザイナーの内部は、たっぷり話し合いを続けていたからこそビビビッとくる文章が目に飛び込んできたといいます。イギリスの詩人ロバート・ルイス・スティーヴンソンが残した一節「希望を持ちつつ旅するのは、そこに行き着くことよりも楽しい」がきっかけになりました。

「学ぶということは結果を出すことだけが大事じゃない。学んでいく道すがら、小さな発見をしたり、日記を書いたり、星空を見上げたり、そんなふうにプロセスを楽しめれば最高なんじゃない」

やがてパールのネックレスのように、コンセプトが言葉と言葉でつながりました。

「ポジティブだけど肩の力が抜けていて、動き続けることで自分の進むべき道が拓けて、視野が広がったときの解放感を味わえる。ドライブスルーやアトラクションのライドのように楽しいところに連れてってくれるワクワクがあるように」

融点に達したひらめきはあふれて止まず、キャッチフレーズや絵本にまで及びました。ノートには「まいとし学ぶ、まいにち学ぶ、まいかい学ぶ。くりかえす学びをクラウドでスムーズに」とキャッチフレーズが走り書きで残されています。

ここまでくれば一つ峠を超えて、いよいよデザインの下地を決めるトーン＆マナー、配色、ロゴ、キャラクターに踏み込んでいきました。

さりげなく品がある、直感でわかる日本の質感を求めて

ある会議でデザイナーが力強く発した言葉が印象に残っています。

「毎日学ぶのだから、普段づかいで飽きがこないものだけれど、マットで単純すぎるのは違う。目を引くデザインだと味付けが濃すぎるし。さりげなく上品じゃないと。日本のデザイナーとして良さを出すならやっぱり質感にこだわりたい。世界のどこに出しても直感でわかるような日本の良さをにじませたいんです」

一つヒントになったのはJapan’s Authentic Luxuryを略したJAXUARYという定義でした。日本の素晴らしさを言葉にしていて、クラフトマンシップ、感性、信頼、本来感、唯一無二、美、日常的な上質さ、神話・歴史、幸運・僥倖、利他というキーワードからトーンの骨格ができていきました。

画面の配色はそれに沿うように、日本古来の色をモチーフにして優しいトーン、ニュアンスカラー、繊細なグラデーションを探し求めます。さらに、LearnOのブランドカラーは差し色でいれながら、ユニバーサルに通用する色調にまで心を配っていきます。

ロゴを表す言葉は珍しく早く生まれて「黄金比、伸縮しそう、変化してとどまらない、線対称じゃない、今にも動き出しそう」となりましたが、最終的にデザインとして決まるまでにアイデアは100案を超えました。10案出して、2、3案をピックアップして方向性を絞り込む。それを何度もくりかえして、最後に2次元のアウトプットだけど未来への伸びやかさを表現しようと3次元に見える奥行きがつけられました。

チーフデザイナーの内部が率直な気持ちを打ち明けてくれました。

「ロゴのリブランディングって、割とシンプルになるんですよね。すごくそぎ落とされる。最近いろんなデバイスで見られるのでシンプルになっていくんだけど、でもシンプルなだけでいいのかなというのはずっとありました」

「シンプルさに新しさ、スタイリッシュさも必要だけど、それ以上のものを詰め込みたいなと。そうすると、サービスに動く要素を付けたから、ちょっと飛び出す感じかなと思いました。未来を感じてもらえる、といったら飛び出して立体的になったんです。サービスとしてもより立体的な価値を感じてもらいたくて」

サービスの当初からモチーフだったカタツムリ。このキャラクターに新しく名前をつけて、サービスのナビゲーション役をしてもらうことになりました。「ちょっと前を歩いてくれる、毎日一歩ずつ、くいしんぼう、菜食主義だから殻は緑色、スクーターぐらいスピードが出る」とはなんとも愛らしいユニークな性格です。

管理者と受講者、立場が違えば欲しい情報は違っている

eラーニングシステムは、管理する側と受講する側で利用する目的が違います。

管理する側はできるだけ簡単に教材やテストを登録したいし、受講者の様子を網羅的に把握して、状況によってリマインドのメールでフォローしたい。受講する側は、ログインしたらすぐに何をすればいいか分かりたいし、スライドや動画をスムーズに見られて、テストやアンケートをして自分の状況を確認したい。

ですからデザインする手間は2倍以上かかるのですが、目的の違う管理者と受講者の画面をきちんと分けて情報設計する道を選びました。

コロナ禍でオンライン教育が普及したとはいえ、まだまだはじめてeラーニングを導入される企業が多くあります。いきなりeラーニングを導入する担当者に任命されて、手探りで比較検討して、渡された管理画面にログインした時を想像すれば絞り込むことは明確でした。

チーフデザイナーの内部が、設計の意図を教えてくれました。

「最初に始める時の流れがすごく難しい。そこは問い合わせが多い場所だとカスタマーサポートから聞いていたので、流れるように入ってほしかったんですね」

「今回ホーム画面に最初にガイドを入れて、ステップが分かるものをはさむことで唐突感を減らしました。いきなり受講者の新規登録から始めるんじゃなくて、全体的にどう使うのかを自然と伝えることをすごく意識しましたね」

管理者が最も手間をかける画面はある程度決まってきます。受講者を登録する、講座を登録する、スライドや動画をアップロードする、テストやアンケートの設問を作る、受講完了の判定を設定する、ログデータを確認する、という操作です。

1画面ごとにやるべき作業が多すぎれば混乱しますし、かといってできる機能を減らせば不満が残ります。そのあたりのさじ加減を見ながら、管理画面の方針を決めました。

「管理者はやる作業が多いのだから全画面表示にし、今後の拡張性を考えて左側にメニューを階層化、操作するすべての画面上部に説明文を入れて、一覧でリストされる情報に強弱をつけて、間違ってはいけない操作にはモーダル（画面上部にアラートとして浮いてくる表現）にしてうっかりミスを減らしてあげたい」

しっかり言葉にできたことを確認して、ようやく管理画面のデザインに着手。HTMLのコーディングを経てエンジニアがシステムに組み込んで一般公開するまで1年以上がかかりました。

e ラーニングシステム「LearnO」 10周年記念、ご愛顧感謝管理画面を大幅リブランディング！

PR TIMES

あらゆるパターンを想定し、優先度にグラデーションをつける

3,800社、月間60万人以上が使うサービスともなると、年齢や性別、国、言語までかなりばらつきがあります。当然ITリテラシーが高い人もいれば低い人もいます。それでもできる限り満足度を高めようとするなら、自ずとあらゆるパターンを想定して考える量が格段に増えていきます。

デザイナー能登は、慎重に言葉を選びながら答えてくれました。

「もともとLearnOは、かなり情報量が多いページばかりなんです。パッと見で講座とコースの違いが分からなくて考えてしまったり。これまでなんとなく引っかかっていたところを洗い出していって、結果的に上から下に1本でつながって降りていくイメージにして、セクションできちんと分けて組み立てなおしました」

「それでもやっぱりマイページ、講座ページは情報量が多いから、いろんな最新情報を吸収しながらプロトタイプを説明して、プロジェクトで何度も玉砕しました（苦笑）。今でも難しかったと思っています」

チーフデザイナーの内部がそっと継ぎ足します。

「LearnOはたくさん機能のオプションを選べます。あとテストのパターン、受講ステータスのパターン、いろんなバリエーションがあるのでどうなっても崩れないようにする難しさですか。情報量もすごく多いので、必ずファーストビューで、最初に来た時に必ず見せたいものをどう配置するか」

「優先度を付けるのがすごく悩ましい。これは1番大事だけど、2番目から5番目はどのグラデーションで置くのがいいんだろうかとか。場所もあれば、色合い、形、シチュエーションがあるので差分のあしらいがすごく難しいんです」

これまで受講者が利用する画面は左側に主要な情報、右側に補足の情報を置くという2カラム構成。それを新しい利用者の画面から1カラム構成に変更しました。情報量が多いのに、思い切って1カラムにするのは勇気のいることだったようです。

前述の能登が考え抜いたことを話してくれました。

「10年前と違いスマホでの利用が増えています。ですから、スマホで見られる情報量や視線移動から考え始めてパソコンでも違和感のない画面を考えて1カラム構成にたどりつきました。ですが、1カラムにしたことで膨大な情報をどう見やすくするかは結構苦しみましたね」

これまでのeラーニングシステムの画面を見返し、利用者が使う状況を想像し、初心者から熟達者までフォローできる仕組みにしたい。その着想がやがてメッセージとしてまとまりました。

「視線の移動を見直して迷子ゼロ、学びの習慣をサポートし、ぐるぐるサイクルを回し、メリハリと遊び心を出し、マイクロインタラクションという軽快な動きでアシストして、居心地の良い空間に」

最も情報量が多く、滞在時間が長い受講画面。動画やスライドといった教材で学び、テストを受けてアンケートに回答する。さらに受講者同士で質問や回答をして、次の講座へスムーズにナビゲーションする。組織ごとにその組み合わせが異なるので、想定されるパターンすべてで齟齬のないように組み上げていきます。

初めて導入された受講ログ画面。自分が受講した講座のダイジェストがグラフで表現されるだけでなく、すべてのアクティビティ（活動）を履歴として見られるようになりました。ここまで細かいデータは必要ないんじゃないかという議論がありながらも、将来を見据えて受講者の学びのために余白として追加されました。

実は、受講者の画面は管理者の画面と違って横幅の最大値が固定されています。これにも情報量をどう取り扱うかという根本的な思想が透けて見えます。

チーフデザイナー内部は、背景を教えてくれました。

「管理者は受講者全員、教材すべてを俯瞰でみなければならいのでやっぱり操作が断続的なんです。教材を登録したと思ったら、受講の状況を確認して、リマインドメールを送るといった感じ」

「だから、キャンバスはできるだけ大きくとって全画面にすると。それに対して受講者は、自分がやるべきことを確認し、講座やテストを受けて、結果を見るという一本の流れなんですね。だから、端末やブラウザによる差を少なくして、視線の移動を流れるように横幅を固定したんです」

何度も作ってはチームメンバーからフィードバックをもらう。公開する直前までエンジニアやディレクターとあるべき理想を目指して話し合っていた姿が印象的でした。

テストチームからフィードバックを経て、新しいスタート

不思議に思っていたのは、デザイナーの発するこだわりがすんなりとシステムとして組み込まれ、サービスとして表現されていったこと。デザイナーの目線からプロジェクトのメンバーであるエンジニアやディレクターはどのように映っていたのでしょうか。

デザイナー能登は、メモが書き込まれた資料を手に取りました。

「私はまだそこまでじっくりLearnOを使いこなせていなくて。逆に見落としを拾ってもらえている感じがしていました。ディレクターやエンジニアは日頃からたくさん事例を見ているし、だからこそ見れている部分がありましたね。気づけなかった視点、知らなかった視点があって、ああ、そうなんだと思って作れることがありました」

チーフデザイナーの内部も、手元の資料を見返して振り返ります。

「エンジニアはデータを扱うプロなので、ログデータをこういう見方が便利だよねという意見をもらったり。それでカタチにできたページも多いですね。基本的にダメと言われることはなくて、まあ、できますよと言います（笑）」

「会話していたら、技術的にこれもできちゃうんだとか、エンジニアの仕事が垣間見れたりします。そうすると、デザインを落とし込むときのヒントになるのでそれがすごく心強いですね」