Why I made it
仕事の情報を、作業の流れとしてつなぐ
個人事業や小規模な制作業務では、顧客情報は連絡帳、見積もりは表計算、タスクはメモ、納期はカレンダーというように、情報が分かれやすくなります。
SoloDeskでは「誰から依頼され、どの案件で、いくらを見積もり、何をいつまでに進めるか」を関連付けました。多機能に見せるだけでなく、登録したデータが各画面へ反映されることを実装の中心にしています。
- 想定利用者
- 個人事業者、個人制作者、小規模事業者
- 画面数
- ダッシュボードを含む10画面
- 保存
- IndexedDB。利用できない場合だけlocalStorageへ代替保存
- 外部送信
- なし
- 初期内容
- 機能を確認できる架空のサンプルデータ
Core workflow
顧客から納期・収支まで、同じデータを使う
顧客を追加すると案件の選択肢になり、案件を追加すると見積もりとタスクの関連先になります。案件予算は収支概算とレポートへ、案件・タスクの期限は納期カレンダーへ反映されます。
タスクは未着手、進行中、完了の3工程をボタンで移動できます。見積もりは項目、数量、単価、税率から再計算し、印刷画面からPDFとして保存できます。
- 顧客
- 名称、担当、連絡先、メモ、関連案件数
- 案件
- 顧客、状態、カテゴリ、予算、納期、進捗
- 見積もり
- 項目追加、数量・単価・税の計算、印刷・PDF保存
- タスク
- 案件、期限、優先度、工程移動
- 集計
- 案件状態、進捗、顧客別予算、費用、差引概算
Data ownership
利用者が、自分のデータを持ち出し、消せる
ブラウザー内保存だけで終わらせず、全データのJSONバックアップ、顧客・案件のCSV書き出し、バックアップの読み込みを用意しました。読み込みと全削除は、実行前に対象と影響を確認します。
これは操作と情報設計を示すデモであり、実在する顧客情報や機密情報の管理を目的とした本番サービスではありません。本番運用では、認証、権限、暗号化、サーバーバックアップ、監査履歴、法令・規約対応を追加で設計する必要があります。
- バックアップ
- 全データをJSONで書き出し・読み込み
- CSV
- 顧客一覧と案件一覧をUTF-8で書き出し
- 削除
- 個別削除、関連データ削除、全データ削除
- 入力安全
- 利用者入力はtextContentとフォーム値で扱い、innerHTMLへ渡さない
- 通信
- API、アクセス解析、外部ライブラリ、クラウド同期なし
Design intent
表計算の密度と、迷わない現在地を両立する
濃い緑の固定ナビゲーションと番号で10画面の位置を示し、数値は明朝体、操作や表はゴシック体に分けました。カードだけを繰り返さず、表、工程ボード、時間軸、棒グラフ、見積書という用途に合う表現を使い分けています。
画面幅が狭い場合はナビゲーションを開閉式にし、見積もり表など横幅が必要な部分だけを個別にスクロールできます。ページ全体の横スクロールは発生させません。
- 色
- 深緑、生成り、紙色、注意用の琥珀色と赤
- 現在地
- 番号、背景、左罫線、aria-currentで表示
- レスポンシブ
- 固定サイドバーから開閉メニューへ変更
- アクセシビリティ
- 見出し、ラベル、フォーカス、状態名、進捗の代替情報
- モーション
- 画面酔いを避け、状態更新に不要な動きを使わない
Actual screens
集計だけでなく、日々の作業と見積もりまで実画面で示す
ダッシュボード、工程管理、見積書作成という用途の異なる画面が、同じ登録データを使って連動します。
Continue exploring
別のWebツール作品も見る
保存方法や画面数ではなく、作業の目的と流れから必要な機能を組み立てています。