• Web

クロスリテイリング株式会社 様

制作領域:UI/UX|デザイン|フロントエンド|バックエンド|設計

複数ある既存の教材コンテンツサイトをフルスクラッチで制作し、一括管理化を実現しました。
会員ユーザー側も運営側もどちらも利用しやすいコンテンツへと改修させていただきました。

▼ご要望
運営されている教材コンテンツサイトにおいて、WordPressで複数の講師ごとにサイト構築されており、更新業務がまとめて行えない課題を抱えていらっしゃいました。
そこで更新業務を一本化できるよう、統合サイトを管理サイトと共に制作させていただきました。
制作時にWordPressを利用すると、バージョンアップでそれなりの工数がかかってしまうため、フルスクラッチにて制作いたしました。
クライアント様の方で複数ある既存サイトの教材コンテンツデータの移行期間を設けたいとの意向があり、その期間と合わせて同時制作させていただきました。

▼初期制作
事前に教材コンテンツサイトと管理サイトの情報設計とイメージするトンマナ資料をいただいていたため、それを最適なデザインに書き起こしていく作業となりました。

▼UIデザイン
教材コンテンツサイトは、レスポンシブでの制作で、TOPページで会員購入教材が一覧でわかるようになっています。教材を選択すると目次が表示され、教材コンテンツへと遷移します。

コンテンツページでは、動画やテキストが活きるように余計な装飾なくシンプルなフラットデザインになっています。
またコメント機能を有に設定しておくと、コンテンツページの下部に表示させることができます。こちらは会員と運営との1on1形式でやりとりができる仕様となっています。

管理サイトは、PCサイトのみの制作で、会員情報とコンテンツ情報の管理が行えます。主に一覧、登録、編集の画面で構成されており、選択確認時はモーダルを使用した設計となっています。

教材コンテンツ登録画面では、既に使い慣れているWordPressのようなUIデザインとなっています。

▼設計・開発
既存システムからのデータ連携を想定した実装設計を行いました。
上記のWordPressのような管理画面で編集されたhtmlのスタイル対応を行い、また既存サイトの会員情報と購入履歴情報の連携も行いました。

▼実装作業とコミュニケーション
実装は仕様・デザイン通りに仕上げる作業で、APIも少し使用しており、フロントエンドとバックエンドを連携しつつ行いました。
挙動のテスト確認はクライアント様とミスコミュニケーションのないように行い、修正はスピーディに対応いたしました。