ITラーニング企業向け:学習塾管理者用生徒情報管理ツールのUI/UXデザイン
(受託案件:制作期間2023年8月~2024年3月)


デザインプレヴュー:https://xd.adobe.com/view/3c670c34-2a58-40fd-bd91-4a8c27d92e2c-6934/
エンド企業様PR:https://prtimes.jp/main/html/rd/p/000000096.000042400.html

プロジェクト概要:
 ●内容:
学習管理システム(LMS)および学習履歴データベース(LRS)と連携した、学習塾管理者向け生徒情報管理ツールのUI/UXデザインを担当しました。

デザインの詳細:
 ●主な作業:
  ●キービジュアルデザイン
  ●UI/UXデザイン
  ●アイコンデザイン
  ●モックアップ制作
  ●開発用URLの作成

 ● デザインのポイント:
  ● 教育分野のデジタルトランスフォーメーション(DX)を推進する新規事業として、学習塾向け指導パッケージの一環である本ツールのデザインを担当しました。
  ● LMSやLRSと連携し、以下の機能を管理者が円滑に操作できるUI/UXを目指しました:
   ●生徒の登録・削除
   ●学習進捗の確認
   ●テスト結果の閲覧
   ●アカウント管理
   ●クラスやコース情報の管理

 ● 連携する生徒向け学習ツール:
  ●短時間の映像授業による学習インプット
  ●Webテストによる学習アウトプット
  ●即時のオンライン質問対応
  ●コーチングメソッドと進路指導データの提供
  ●模擬試験による中期的な進捗確認
  ●ICTを活用した大学・入試情報の提供

デザインガイドラインと技術的考慮
 ● 基準と環境:
  クライアント企業の仕様策定基準、開発環境、デザインガイドラインに従い、ブランドイメージや他のWebアプリケーションとの統一性を重視しました。
 ● デザイン手法:
  ● 各機能ページごとに、メニューやボタンの操作、情報入力時のUI/UXデザインを作成しました。
  ● 装飾を最小限に抑えたフラットデザインを基本とし、一部のUIにはマテリアルデザインを採用してユーザビリティの向上を図りました。
 ● 技術的配慮:
  開発にはCSSフレームワークのVuetifyが使用されており、エンジニアが混乱しないようなUIデザインを心掛けました。

プロジェクト進行とコミュニケーション
 ● 制限事項:
   開発・本番環境へのアクセス権限がなかったため、データの関連性や画面遷移、実際の動作については、プロジェクトリーダーやフロントエンドエンジニア、クライアントとの会議を通じて理解を深めました。
 ● ユーザー体験の重視:
   学習塾管理者のユーザー体験を最優先に考え、動的な画面UIに対する要望を積極的に取り入れました。

使用ツール:
 ●Adobe Illustrator
 ●Adobe Photoshop
 ●Adobe XD



ITラーニング企業向け:学習塾管理者用生徒学習コーチングツールUIUXデザイン
(受託案件:制作期間2023年8月~2024年3月)

デザインプレヴュー:
https://xd.adobe.com/view/26a3a445-2b50-4a70-a3fc-857cbfa54371-73f0/
エンド企業様PR:https://prtimes.jp/main/html/rd/p/000000096.000042400.html
対応内容:
 ●キービジュアルデザイン
 ●UIUXデザイン
 ●アイコンデザイン
 ●モックアップ制作
 ●開発用URL作成

プロジェクト背景とデザインのポイント:
本プロジェクトでは、教育DXの新規事業として、学習塾向け指導パッケージのUI/UXデザインを担当しました。このパッケージは、LMSやLRSと連携し、塾管理者が生徒の学習をコーチング・管理するためのツールです。
デザインにあたっては、以下の点に注意しました:
 ● ブランディングと統一性: 仕様策定基準、開発環境、デザインガイドラインに従い、ブランドイメージと他のWebアプリケーションとの統一感を重視しました。
 ● ユーザビリティの向上: 「ログイン」「エラー」「受講コース」「学習内容」「学習進捗」「指導状況」「サービス登録状況」「単元別習熟度」「学習達成度」「コース別正答率」など、多岐にわたる情報を管理する各ページで、メニューやボタンの操作性、情報入力時の使いやすさを追求しました。
 ● デザイン手法: 装飾を最小限に抑えたフラットデザインを基本とし、一部のUIにはマテリアルデザインの手法も取り入れ、視覚的な明確さと操作性を両立させました。
 ● 開発環境への配慮: 開発・実装にはCSSフレームワークのVuetifyが使用されており、エンジニアが混乱しないよう、Vuetifyのコンポーネントやスタイルガイドラインに沿ったUIデザインを心がけました。

プロジェクト進行上の工夫:
開発・本番環境へのアクセス権限がなかったため、各データや項目の関連性、画面遷移、実際の動作については、プロジェクトリーダーやフロントエンドエンジニアからの説明、顧客との会議内容をもとに理解を深めました。これにより、学習塾管理者のユーザー体験を常に意識し、動的画面UIの要望を的確に反映しました。

デザインの特徴:
システムの特性を表現するキービジュアルを作成し、各ページは情報量が多いため、ユーザーの操作導線や使いやすさを考慮しました。特に、生徒のコーチングを担当する管理者の体験を重視し、適切なナビゲーションとカラーバランスを意識したUI/UXデザインを提供しました。

使用ツール:
 ●Adobe Illustrator
 ●Adobe Photoshop
 ●Adobe XD





▶ITラーニング企業向け:学習塾管理者用受験学習コーチングツールキービジュアルデザイン
(受託案件:制作期間2023年8月~2024年3月)

担当業務:
 ●キービジュアルデザイン
 ●UIデザイン

ご依頼背景とデザイン上のポイント:
本プロジェクトでは、教育のデジタルトランスフォーメーション(DX)を推進する新規事業として、学習管理システム(LMS)や学習履歴データベース(LRS)と連携した学習塾管理者向けの受験学習コーチングツールのキービジュアルデザインを担当しました。このツールは、学習者の進捗状況、確認テストや模擬試験の成績、正答・誤答データを専任の担任が管理し、単元別の習熟度に基づいて志望校に合わせた弱点克服を支援するものです。また、管理者と生徒の双方が情報を閲覧できる特徴を持っています。これらの特性を踏まえ、コーチと生徒が共に学ぶ姿をイメージしたデザインを作成しました。

使用ツール:
 ●Adobe Illustrator
 ●Adobe Photoshop
 ●Adobe XD




ITラーニング企業向け:学習塾管理者用タブレットアプリのUI/UXデザイン
(受託案件:制作期間2023年8月~2024年3月)

エンド企業様PR:https://prtimes.jp/main/html/rd/p/000000096.000042400.html

対応内容:
 ●UIUXデザイン
 ●モックアップ制作

プロジェクト背景とデザインのポイント:
本プロジェクトでは、教育分野のデジタルトランスフォーメーション(DX)を推進する新規事業として、学習塾向けの指導パッケージを開発しました。このパッケージは、学習管理システム(LMS)や学習履歴データベース(LRS)と連携し、学習塾の管理者が生徒の学習情報を効率的に管理できるタブレット用アプリです。

各生徒がデバイスを通じて受講した映像授業、テスト、講座の受講履歴などを一元管理し、以下の機能を提供します:
 ●生徒情報の管理
 ●学習進捗状況の把握
 ●生徒対応に対する評価
 ●グループやクラスの設定
 ●運営組織の管理
 ●生徒の学習記録情報の管理

デザインにおいては、塾内でタブレットを使用する管理者の操作性を最優先に考慮しました。各機能ページごとに、メニューやボタンの配置、情報入力時のユーザーインターフェース(UI)とユーザーエクスペリエンス(UX)を設計し、装飾的要素を極力排除してユーザビリティの向上に努めました。また、タブレット特有の操作感や導線を意識し、視認性と分かりやすさを重視したナビゲーションを設計しました。さらに、先行してデザインされていた生徒向けツールのUIとの統一感やブランドイメージの整合性にも配慮しています。

使用ツール:
 ●Figma
 ●Adobe Illustrator
 ●Adobe XD



ITラーニング企業向け:学習塾管理者用タブレットアプリのUI/UXデザイン
(受託案件:制作期間2023年8月~2024年3月)

エンド企業様PR:https://prtimes.jp/main/html/rd/p/000000096.000042400.html
対応内容:
 ●UIUXデザイン
 ●モックアップ制作

プロジェクト背景とデザインのポイント:
本プロジェクトでは、教育分野のデジタルトランスフォーメーション(DX)を推進する新規事業として、学習塾向けの指導パッケージを開発しました。このパッケージは、学習管理システム(LMS)や学習履歴データベース(LRS)と連携し、学習塾の管理者が生徒の学習情報をタブレットで効率的に管理できるツールです。

各生徒が受講した映像授業、テスト、講座の受講履歴などを一元管理し、以下の機能を提供します:
 ●生徒情報の管理
 ●学習進捗状況の把握
 ●生徒対応に対する評価
 ●グループやクラスの設定
 ●運営組織の管理
 ●生徒の学習記録の管理

デザインにおいては、塾内でタブレットを使用する管理者の操作性を最優先に考慮しました。各機能ページでは、メニューやボタンの配置、情報入力時のユーザーインターフェース(UI)を直感的で使いやすく設計しています。装飾的な要素は最小限に抑え、ユーザビリティの向上に注力しました。また、タブレット特有の操作感や導線を考慮し、視認性と分かりやすいナビゲーションを心がけています。さらに、先行してデザインされていた生徒向けツールのUIとの統一感やブランドイメージの整合性にも配慮しました。

使用ツール:
 ●Figma
 ●Adobe Illustrator
 ●Adobe XD



ITラーニング企業向け:学習塾管理者用タブレットアプリのUI/UXデザイン
(受託案件:制作期間2023年8月~2024年3月)


エンド企業様PR:https://prtimes.jp/main/html/rd/p/000000096.000042400.html


対応内容:
 ●UIUXデザイン
 ●モックアップ制作

ロジェクト背景とデザインのポイント:
本プロジェクトでは、教育分野のデジタルトランスフォーメーション(DX)を推進する新規事業として、学習塾向けの指導パッケージを開発しました。このパッケージは、学習管理システム(LMS)や学習履歴データベース(LRS)と連携し、学習塾の管理者が生徒の学習情報をタブレットで効率的に管理できるツールです。

各生徒が受講した映像授業、テスト、講座の受講履歴などを一元管理し、以下の機能を提供します:
 ●生徒情報の管理
 ●学習進捗状況の把握
 ●生徒対応に対する評価
 ●グループやクラスの設定
 ●運営組織の管理
 ●生徒の学習記録の管理

デザインにおいては、塾内でタブレットを使用する管理者の操作性を最優先に考慮しました。各機能ページでは、メニューやボタンの配置、情報入力時のユーザーインターフェース(UI)を直感的で使いやすく設計しています。装飾的な要素は最小限に抑え、ユーザビリティの向上に注力しました。また、タブレット特有の操作感や導線を考慮し、視認性と分かりやすいナビゲーションを心がけています。さらに、先行してデザインされていた生徒向けツールのUIとの統一感やブランドイメージの整合性にも配慮しました。

使用ツール:
 ●Figma
 ●Adobe Illustrator
 ●Adobe XD
Back to Top