介護事業者に向けた職員育成のための動画研修サービスサイト
介護事業者向けの動画研修サイト「マナビタ!」。そのメインサービスであるサービスサイト(サイト内名称はマイページ)構築プロジェクトです。プロジェクトリーダーとしてディレクション、システム要件定義、デザイン、フロントエンド開発などを全般的に担当。1次公開後は、新機能の開発や運用サポートなども担いました。
株式会社オーボックス
2016年12月
2016年9月〜2018年2月(約1年6ヶ月)
PC, スマートフォン, タブレット
サイトの1次公開完了後は継続的な機能追加や改修を実施
役割・主に担当したこと
挑戦したこと
PC操作にあまり慣れていない利用者がメインのターゲットになるということで、わかりやすさや使いやすさを重視して各画面を設計しました。マナビタ!は5種類のユーザー権限があり、多機能なシステムです。機能が多いことはわかりにくさにもつながるため、機能を整理してわかりやすく伝えるための工夫が必要でした。
基本的な設計方針としては「各機能を小さな単位に分割して、ページ遷移をなるべくシンプルにしよう」と考えました。なせなら機能を分割して整理し、機能ごとの操作手順を減らして学習負荷を下げることが、わかりやすさにつながると考えたためです。
さらにサイト全体で統一したデザインルールを用いることで、ボタンや入力フォームなど、ユーザーが1度触れた(学習した)操作方法を他のページで活かせるように工夫しました。
使いやすさを高めるためには、UI要素それぞれに細かなデザイン調整が必須だと考えます。以下は使いやすいUIを設計するうえで実施した具体例です。
フォーム画面で「入力必須の情報」が未入力の場合に表示されるエラーメッセージは、利用者が「何をどのように直せば良いか」がわかりやすい文章表現を心がけました。
「公開中・非公開」や「登録・編集」などのアイコン下部に機能の説明文を表示しています。説明文は表示しないほうが洗練された印象になるのですが、わかりやすさを優先してアイコンに説明文をそえて情報を認識しやすくしています。
アラート画面はブラウザ標準のUIでは表現できることが少なく、わかりにくい状態でした。表現力を上げるためにJavaScriptライブラリのSweetAlertをカスタマイズして実装。これによってアイコン表示や文字調整ができるようになり、アラート内容がわかりやすくなりました。
適性テスト受検者の状態を認識しやすくするために、受験状況や合否判定状況ごとにアイコンを表示しています(表示している職員情報は架空のものです)。
プロジェクトに参加したときには、バックエンド開発のエンジニアに作成していただいた初期の仕様書が存在しており、システム仕様の骨組みは大まかに定まっていました。仕様書を確認したところ、ユーザーインターフェイスとして実装する際の不明点や改善すべき点が数多く存在していると感じました。以下はその一例です。
この状況を良くするために仕様書を読み込み、改善点を洗い出します。その改善点を元に依頼主やバックエンドエンジニアに改善提案をおこない、実際の利用シーンに沿った機能になるようにシステム仕様の調整から進めました。
「ビジュアルデザインを始める前」に「仕様を再設計」することで、UIデザインの完成形イメージが明確になり開発が進めやすくなりました。結果として品質向上と開発速度向上につながりました。以下は制作したUIの一例です。
利用者が操作マニュアルを読まなくても、何をしたら良いか理解しやすいように補足文言を用意して、わかりやすく表現しています。
要素に対して適切なUIを採用しました。例えば、要素数が定まっている「権限」ではラジオボタンを用い、要素数が定まっていない(増える可能性がある)「施設グループ」ではセレクトボックスを用いています。
要素の順序を入れ替えるUIは、ドラッグ&ドロップで直感的に操作できるようにしました。使いやすいUIを実装するために各所でjQuery(JavaScriptライブラリ)を活用しています。
UIを設計する際は「必要なのに不足している要素」や「不要なのに存在している要素」を探して整理します。必要な要素に絞って設計することで、使いやすくなると考えるためです。洗い出した改善点は全てGoogleスプレッドシートに記入して管理し、確認漏れを可能な限り減らすように努めました。
「講義一覧ページ」は印刷に対応させる必要があり、印刷用のページも制作しました。印刷用の「講義一覧ページ」はA4用紙への印刷に最適化したレイアウトとして設計し、コーディング時に要素の幅や文字サイズを調整しながら制作を進めました。
コーディングが一通り完了した後に印刷テストをおこなったところ、OSやブラウザ仕様の違いによって印刷のされ方が異なってしまうという課題が見つかりました。解決のためにブラウザごとの仕様やバグ情報を調べて繰り返し調整することで、主要ブラウザで安定したレイアウトの印刷ができるようになりました。
エンプティステート(Empty state)画面とは、「データがまだ存在しない状態」の画面のことです。例えば研修計画の画面で研修計画が1件も登録されていない状態は、「データがまだ存在しない状態」です。このとき、画面に何も表示されなければ利用者は何をしたら良いかわからず、UI(ユーザーインターフェイス)として使いにくい状態です。
その状態を改善するためにエンプティステート画面を制作し、「データがまだ存在しないこと」と「この画面で何をしたら良いか」を明確にします。これによってユーザーが次の行動をとるきっかけができて、より使いやすくなると考えます。以下はデータがまだ存在しない状態のエンプティステート画面です。
機能によって使用方法が変わるため、「利用者が次に何をしたら良いのか」がわかりやすくなるように意識して文章を設計しました。
デザインやプロトタイプ制作前の工程として、情報設計やシステム要件定義、仕様策定などがあります。システム要件定義や仕様策定の際には、利用者のサービス利用シーンを想像しながら紙にフロー図を書き、サービス利用の流れに問題がないか検証しました。
※ 2次開発以降では、情報設計に加えてシステム要件定義と仕様策定も担当しています。
認識合わせ用の資料のためラフな状態ですが、図で表すことで理解しやすくなり、改善点も見つかりやすくなります(具体的な内容についてはぼかしをかけています。以降の資料も同様)。
各ページごとのワイヤーフレームができあがった段階で、ProttやinVisionといったプロトタイピングツールを用いてプロトタイプ(画面遷移確認用の試作品)を制作しました。
プロトタイピングツールを使用することで、画面間の移動(リンク動作)を実際の操作感に近い状態で検証できます。これにより画面遷移で違和感や使いにくいさを感じる箇所を洗い出すことができ、使いやすさの向上につながりました。
Prottによるプロトタイプです。ワイヤーフレームの段階で画面ごとのリンクをつなぎ、プロトタイプとして画面遷移の検証や認識合わせに使用しました。ワイヤーフレームやデザインデータはIllustratorで制作し、書き出した画像をProttにアップロードしてリンクをつなげます。
inVisionによるプロトタイプです。基本的な機能はProttと同様ですが、inVisionの動作の快適性とコメント機能の使いやすさを魅力に感じ、このプロジェクトの中盤以降ではinVisionを活用しました。
品質向上以外のメリットは、依頼主やバックエンドエンジニアにプロトタイプ(画面遷移)を共有することで、認識合わせがしやすくなることです。さらにバックエンド開発における懸念事項の事前確認にも役立ち、プロジェクトを円滑に進める1つの要因になりました。
マナビタは段階的な公開を経て約180ページのサイトに成長したのですが、フロントエンド開発(コーディング)において統一したデザインルールを運用するための、「再利用と拡張がしやすいソースコード構造」の設計が必要でした。
なぜならソースコードの再利用性や拡張性は、デザインの再現性や開発効率、改修や運用のしやすさなど、長期的なサービス品質を左右する要因になるからです。以下はソースコードの拡張性向上や効率化のために実践したことです。
これらによってUIパーツを効率的に再利用できるようになり、全ページで統一したデザインルール運用を実現しました。開発効率や改修速度も上がり、結果として品質向上につながりました。
MindBEMdingの命名規則を基本としたソースコードの一例です。専門的な内容となりますが、機能ごとのまとまりやUIパーツ(部品)はサイトの各所で再利用できるようにコンポーネント化(機能ごとに部品化)してソースコードを設計しました。コンポーネントの使用場所によって状態を変化させるためのモディファイアクラス(画像の例ではis-requiredが該当)を用意することで、ページやパーツごとに適した詳細なレイアウト調整ができるようにしています。
LESSファイルや共通変数のイメージ画像です。こちらはマナビタサイトのLESSファイルではなく、自身のポートフォリオサイトのSass(LESSと同様のCSSを効率的に管理するための動的スタイルシート言語)ファイルの途中経過をキャプチャしたものです。
バックエンド開発が一通り完了した時点で、バックエンドのデバッグも担当しました。デバッグで発見した不具合はGoogleスプレッドシートでバックエンドエンジニアに共有し、修正状況を一覧できるようにすることで、デバッグを円滑に進められるようにしています。
バックエンドのデバッグは、システム実装後の開発環境とフロントエンド環境を照らし合わせて確認しながら進めました。
不具合を発見した際は、デバッグの精度を高めるために、不具合の状態をなるべく画像や動画で伝えるようにしています。例えば複数の画面を遷移した状況でのみ発生する不具合は、「その不具合が発生するまでの過程が重要になる」ため、スクリーンキャプチャー動画で共有しました。
※ 不具合状態はMonosnapというキャプチャーアプリを使用して、画像や動画で共有しました。
プロジェクトに参加した時点で本来の20〜30%程度の進捗率となっており、公開予定から遅れているという課題がありました。遅れている状況を改善するために、プロジェクト進行の改善を試みます。
まずはプロジェクトの関連情報を一元管理するために、Googleスプレッドシートにページ単位まで詳細に記載したディレクトリ構成表(詳細サイトマップ)を作成し、ページごとに各担当者の進捗状況をすぐに確認できるようにしました。
ディレクトリ構成表はブラウザの表示確認チェックシートの機能を兼ね備えており、フロントエンド側の表示チェックに活用しています(バックエンド側も含めた詳細なデバッグシートは別途存在します)。
Googleスプレッドシートにスケジュール表を作成し、バックエンドエンジニアや依頼主と共有しました。適宜進捗を確認しながら、可能な限りスケジュール通りに進行できるようにしました。
以下は開発フローにおいて、効率的に進めるために取り入れた方法や良かった点です。
ありがたいことに、デザインやプロトタイプに対する依頼主からの返答がとても速く、デザインからフロントエンド実装までをスムーズに進められました。
マナビタの1次公開完了後は、2次開発として新機能の開発を進めることになりました。1次開発以前の仕様書はPowerPointで作成されたもので、何か編集があった際にアップデートや全体共有に時間がかかるという課題がありました。
そこで2次開発以降の仕様書はGoogleドキュメントで作成し、アップデートや共有が素早くおこなえるようにしました。具体的には以下の方法です。
結果として関係者全員への共有スピードが上がり、プロジェクト進行が効率的になったと実感しました。依頼主からも好評で、ありがたいことに「他のプロジェクトにも参加してほしい」という要望をいただけました。
動画マーケティングエージェンシーのコーポレートサイト
クラウド録画サービスのプロモーションサイト
eスポーツに特化したメディアサイト・ロゴデザイン
レコード音楽の世界観でベアブリックの魅力を伝えるプロモーションサイト
アメリカンコミックの世界観でベアブリックの魅力を伝えるプロモーションサイト
介護事業者に向けた職員育成のための動画研修サービスサイト
実験的なロゴデザイン
スマートフォン向け放送局のサービスサイト運用・ページ制作
タイポグラフィ作品
実験的グラフィック
ビットキャッシュの新規ユーザー向けプロモーションページ
アーティストのコラボレーション商品を販売するブランドサイト