発達ナビ運営支援サービス【スタイルガイド・UI】

はじめに

発達ナビ運営支援サービス内で用いられているスタイルガイドとその運用・およびUIについて紹介します。

コンセプト

• 親しみやすく、福祉っぽくないデザイン
• 指導員のような優しさ
• 業務が楽しくなる
• 新しい行動を引き出す

スタイルガイド

【WIP】esaにまとめたドキュメントたち

詳細ページは外部公開しておりません。
モードやレイアウト・コンポーネントについてのスタイルガイドを継ぎ足し継ぎ足し作ってきました。

実装方法

運営支援サービスではUIフレームワークである bootstrap + vue を用いています。
それらを僕の手で上書きしたものをデザインシステムとして用いており、基本的な実装のドキュメントはUIフレームワークのドキュメントのままになります。
https://bootstrap-vue.org/docs/components

運用

• 基本的に各チームは担当する機能についてドメインを理解した上でスタイルガイドベースにモックを作成します。
• 既存のスタイルガイドにない表現が必要な場合、モックを作成しレビューを行います。
• 新しくできたスタイルガイドを週次の定例で共有。
• 上記の定例では毎週十分かんすでにあるスタイルガイドについても周知しています。

UI

全体の設計について

大きい機能はハイコスト、ハイスキルが必要になるため、機能は小さく作るようになされています。
よって請求業務と言った明確なタスクがあるカテゴリーはそのタスクごとに機能が存在します。

モードについて

全体として、入力内容が請求に関わるので閲覧と編集のモードをを明確にわけ保存したことがわかるようにしています。
その上で使い勝手として

• 請求の課題にはタスクが明確に順序立って存在し業務は事業所ごとにあまり変わらないのでモーダルに作ります。
• 逆に運営や支援は事業所さんそれぞれの工夫が現れやすい特性がモードレスに作ることを気をつけています。

グローバルメニュー（タスクの取り扱い）

• 実装上タスクベースになる部分があるのでその分スムーズにタスクの切り替えを行えるようグローバルメニューのデザインをスマホのホーム画面に見立てデザインしました。
• カテゴリーは事業所さんのファイルの整理やカードソーティングを行った結果をもとに、探しやすいカテゴライズをしております。
• 各機能の中ではオブジェクトベースに一覧・参照のデザインにしています。
• ユーザーの役割による機能制限の表現がしやすい。

スケジューラ

• 事業所の一日の様々な業務の関心ごとの起点となる画面。
• 事業所のホワイトボードなどを参考にデザイン。
• オブジェクトベースにユーザーが好みに拡張できるような余地を残したデザイン。

台帳系

• シンプルな一覧と詳細の関係
• 閲覧と編集を明確に分けて入力が正しく保存されたことが確認できるようにしている。

請求系

• こちらもシンプルな一覧と詳細の関係
• 確定などの操作がそのまま行えるので閲覧と編集が混在した画面である。
• タスク・関心ごとに区切るのはその画面内に他のドメインの情報が煽れないためシンプルに作ることができる点で良いと考えています。

細かいポイント

• タスクのバケツリレーの中で、タスク同士の依存関係をはっきりわかるようにするデザインを心掛けている。
• 特に感情的な部分を責めるデザインと機能的なデザインの部分を明確に分けてビジュアルデザインに心を悩ます必要がないようにしている。