研修管理システム「manaable（マナブル）」UI・グッズデザイン

Creative Direction

ご要望や仕様の整理を行い、大規模プロジェクトを密に連携しながらすすめました

manaable株式会社さまが運営する研修DXプラットフォーム「manaable（マナブル）」の受講者画面UIデザインとフロントエンドコーディングのフルリニューアルのご依頼をいただきました。

manableはご依頼前からすでに多くの人が利用しているサービスでしたので、お客さまからお問い合わせをいただき、ご要望や仕様の整理、ヒアリングや言語化を重ねながらすすめました。

既存のリニューアルとあわせて新規機能も追加されていくため新規機能も既存機能も含まれた状態のUIデザインを作成。遷移なども複雑化しすぎないようにFigmaで全体を見渡しながらデザインを行い不要なアクションやページ、要素を極力減らすようにして制作しています。

ご依頼からリリースまで約1年ほどを要した大きなプロジェクトになりましたが順調にサービス登録者数が増え2023年10月に100万人を突破しました。新しいデザインを利用した企業さまからの良いお声も多くいただきβ版でテストや修正を重ねてからのパブリックリリースとなりました。

neccoにとってフルリニューアルのサービスUIデザインとフロントエンドコーディングでしたがmanableさま開発チームと定例ミーティングなどを通して密に連携を重ね着実に大きく長いプロジェクトを前進していくことができました。

manaableさまと利用者の企業さまにも好評だったこともあり続けてグッズやTシャツのデザインもご依頼いただきneccoにてデザインを制作させていただきました。

UI Design

学びを可視化する
研修管理システムを目指して

manaabeは研修の受講から参加者や支払いの管理、受講後のアンケートなど研修に関わる業務の一元管理を可能にするサービスです。

ストレスなく研修を受講し、かつ自分自身の学びの状況を可視化できるようなサービスのデザインを目指しています。メニューの名称や動線から見直し、デザインリニューアルを行いました。

ホーム画面では受講や課題、アンケートの進捗や直近の受講予定を直感的にわかるようにグラフを利用。また、たくさんの情報を持つ研修情報は、表とカード、どちらの状態でも閲覧できるようにしています。

今後manaableさんたち自身でもデザインの展開や作成を行えるようにデザインシステムも作成。コンポーネントごとの目次を作成したり、パーツの命名ルール、運用の担当者ややり方なども明記し、デザイン作成後も運用がしやすいデザインシステムを作成しました。

Goods Design

manaableらしさを強化するグッズデザインを担当

ロゴやサービス全体の顔になっているブル先生のロゴマークを大きく使用して、manaableらしさを高める社員証・封筒・Tシャツのグッズデザインを行いました。教育の可能性を広めていくmanaableさんのアイデンティティを普段から意識できるようなデザインにしています。

Web App Development

Vue + Storybook

当プロジェクトのメインとなるアプリケーション開発は、マナブルさまの協力パートナーにて行われました。このため、現行プロジェクトでもメインのフレームワークとして採用されているVueフレームワークを採用し、円滑なコミュニケーションと共同作業を実現しました。

neccoの開発チームは、CSSスタイルの実装において中心的な役割を果たし、日本語アプリケーションを実装するうえでのデザイン品質や、デザインの統一性の向上に努めました。また、E2Eテストの作成を通じて、アプリケーションの品質確保のお手伝いも行いました。
Storybookを導入して実装されたコンポーネントを簡単に一覧表示できるようにし、デザイン実装済みのコンポーネントに関して開発者間で共通の理解を保てるようにしています。

Client Voice

よりわかりやすく、シンプルに。かつ、機能は損なわず。
受講者体験を明確に向上していただきました。

研修DXプラットフォーム「manaable」の受講者画面リニューアルプロジェクトにおいて、ご助力いただきまして誠にありがとうございました。

弊社のビジョンである「世界中の人々へ教育を」を実現するためには、よりわかりやすく、シンプルなUIが求められていました。旧UIでは、必要な機能を兼ね備えてはいるものの、受講者によって操作フローが異なり、マニュアルがないと利用が難しい、複雑という課題を抱えておりました。

課題解決のために、プロジェクトの初めから終わりまで、密接にコミュニケーションをとり、manaableのイメージに関する詳細な要件を把握していただきました。入念なヒアリングを進め、お客様の期待とビジョンを正確に理解し、それをデザインに反映していただきました。対応におけるスピード感と柔軟性に日々驚いておりました。

制作において、manaableのプロダクトサービスの世界観とブランディングを尊重しながらも、受講者にとってわかりやすく、使いやすいUIを設計することに焦点を当てていただきました。視覚的な要素やナビゲーションの改善を通じて、受講者体験を向上させ、プロダクトの魅力を最大限に引き出していただきました。

manaableは、複雑な仕様とクライアントごとの異なる表示設定が求められています。これに対処するために、柔軟で拡張可能な設計を行い、クライアントが個別の要件に合わせて表示を設定できるように工夫していただきました。

これらのアプローチにより、manaableの受講者画面は新しく生まれ変わり、クライアントと受講者の期待に応える高い満足度を達成しました。

クリエイティブに本気で取り組むneccoさんとお仕事させていただき、我々としても非常に勉強になりました。より良いUIにより、クライアントもエンド受講者も満足しております。今後ともよろしくお願いいたします。

manaable株式会社
プロダクトマネージャー 大山夢加