マナビタ!マイページ

介護事業者に向けた職員育成のための動画研修サービスサイト

介護事業者向けの動画研修サイト「マナビタ!」。そのメインサービスであるマイページサイト構築の案件です。プロジェクトリーダーとしてディレクション、システム要件定義、デザイン、フロントエンド開発などを全般的に担当。1次公開後は、新機能の開発や運用サポートなども担いました。

目的

  • サービス利用者の増加
  • サービス利用者の利用継続
  • ブランドイメージの向上

施策概要

  • サービスサイト構築(スクラッチ開発)
  • 継続的なサイト改修・機能追加

依頼主

株式会社オーボックス

公開

2016年12月

プロジェクト期間

2016年9月〜2018年2月(約1年6ヶ月)

対応デバイス

PC, スマートフォン, タブレット

備考

サイトの1次公開完了後は継続的な機能追加や改修を実施

プロデュース

コロニーインタラクティブ(同社在籍時のプロジェクト)

My role

私の役割・主に担当したこと

  • 情報収集・リサーチ
  • Web戦略立案
  • 情報設計
  • システム要件定義
  • 仕様策定・仕様書作成
  • プロトタイピング
  • アートディレクション
  • デザイン
  • テクニカルディレクション
  • コーディング(HTML・LESS・JavaScript・PHP)
  • プロジェクト管理
  • 運用サポート

Challenge

挑戦したこと

  • PC操作にあまり慣れていない利用者がメインのターゲットということで、言葉づかいや導線などのわかりやすさを重視して制作しました。
  • ディレクション・要件定義・プロトタイピング・デザイン・フロントエンド開発などは基本的に私1人で完結させることで、設計意図を丁寧にフロントエンドに反映しつつ効率的にプロジェクトを進めました。
  • 約180ページで統一したデザインルール維持するためのコーディング設計が必要でした。そこでMindBEMdingという命名規則を用いて、拡張しやすいソースコード構造を設計していきました。

Detail

成果物・制作工程

PC操作に不慣れなかたに向けたデザイン

PC操作にあまり慣れていない利用者がメインのターゲットになるということで、わかりやすさや使いやすさを重視して各画面を設計しました。

マナビタ!は5種類のユーザー権限があり、多機能なシステムです。機能が多いことはわかりにくさにもつながるため、多機能であることをわかりやすく伝えるための工夫が必要でした。

基本的な設計方針としては「各機能を小さな単位に分割して、ページ遷移をなるべくシンプルにしよう」と考えました。その理由は「機能を分割して整理し、機能ごとの操作手順を減らして学習負荷を下げること」が、わかりやすさにつながると考えたためです。

さらにサイト全体で統一したデザインルールを用いることで、ボタンや入力フォームなどのUIの挙動(UIがどのように機能するか)を予測しやすくしました。

使いやすさ向上のためのUIデザイン例

使いやすさを高めるためには、UI要素それぞれに細かなデザイン調整が必須だと考えます。以下は使いやすいUIを設計するうえで実施した具体例です。

わかりにくい初期仕様を整理して再設計

私がプロジェクトに参加した時には、バックエンド開発のエンジニアに作成していただいた初期の仕様書が存在しており、システム仕様の骨組みは大まかに定まっていました。

ですが仕様書を確認したところ、実際にUI(ユーザーインターフェイス)として実装する際の不明点や改善すべき点が数多く存在していました。以下の5項目はその一例です。

印刷用ページの制作

「講義一覧ページ」は印刷に対応させる必要があり、印刷用のページも制作しました。

印刷用の「講義一覧ページ」はA4用紙への印刷に最適化したレイアウトとして設計し、コーディング時に要素の幅や文字サイズを調整しながら制作を進めました。

エンプティステート画面のデザイン

エンプティステート(Empty state)画面とは、「データがまだ存在しない状態」の画面のことです。

例えば研修計画の画面で研修計画が1件も登録されていない状態は、「データがまだ存在しない状態」です。この時、画面に何も表示されなければ利用者は何をしたら良いかわからず、UIとして使いにくい状態です。

その状態を改善するためにエンプティステート画面を制作し、「データがまだ存在しないこと」と「この画面で何をしたら良いか」を明確にします。これによって使いやすさが向上すると考えます。

以下はデータがまだ存在しない状態のエンプティステート画面です。

プロトタイピング

各ページごとのワイヤーフレームができあがった段階で、ProttやinVisionといったプロトタイピングツールを用いてプロトタイプ(画面遷移確認用の試作品)を制作しました。

プロトタイピングツールを使用することで、画面間の移動(リンク動作)を実際の操作感に近い状態で検証できます。

これによって画面遷移で違和感を感じる箇所や使いにくいと感じる箇所を洗い出すことができ、使いやすさの向上につながりました。

約180ページでデザインを統一するソースコード設計

マナビタは段階的な公開を経て約180ページのサイトに成長したのですが、フロントエンド開発(コーディング)において統一したデザインルールを運用するための、「再利用と拡張がしやすいソースコード構造」の設計が必要でした。

なぜならソースコードの再利用性や拡張性は、デザインの再現性や開発効率、改修や運用のしやすさなど、長期的なサービス品質を左右する要因になるからです。

以下はソースコードの拡張性向上や効率化のために実践したことです。

デバッグの円滑化

バックエンド開発が一通り完了した時点で、バックエンドのデバッグも担当しました。

デバッグで発見した不具合はGoogleスプレッドシートでバックエンドエンジニアに共有し、修正状況を一覧できるようにすることで、デバッグを円滑に進められるようにしています。

プロジェクト進行の立て直し

私がプロジェクトに参加した時点で本来の20〜30%程度の進捗率となっており、公開予定から遅れているという課題がありました。

遅れている状況を改善するために、プロジェクト進行の改善を試みます。

まずはプロジェクトの関連情報を一元管理するために、Googleスプレッドシートにページ単位まで詳細に記載したディレクトリ構成表(詳細サイトマップ)を作成し、ページごとに各担当者の進捗状況をすぐに確認できるようにしました。

仕様書の運用効率化

マナビタの1次公開完了後は、2次開発として新機能の開発を進めることになりました。

1次開発以前の仕様書はPowerPointで作成されたもので、何か編集があった際にアップデートや全体共有に時間がかかるという課題がありました。

そこで2次開発以降の仕様書はGoogleドキュメントで作成し、アップデートや共有が素早くおこなえるようにしました。具体的には以下の方法です。

  • © o-box,inc