行先掲示板アプリのデザインカンプ
要件
就労移行支援の課題で作成した部署内の社員の勤怠状況や外出先を記入し管理するアプリケーション。社内の営業部から、社員の勤怠状況や外出先を会社PCおよびモバイルで閲覧・編集するアプリを作成してほしいと依頼されたという想定の課題。
2人のグループワークで作成、デザイン作成担当とコーディング・プログラミング担当に分担。自分はデザインを担当し、グループメンバーにコーディング仕様書とともにデザインカンプを提出。
レスポンシブデザインに対応。
ターゲット
営業部の部員
アプリケーションの仕様
- 営業部の部員の名前一覧があらかじめ設定されており（初期状態は10人）、名前は15文字まで設定可能
- 部員の部署移動に伴って、名前の新規追加や削除も可能
- リストには各部員の現在のステータス（在所・外出・退勤）と、外出の場合は出発時間と帰社時間、行先を表示
- リスト下のフォームから各部員のステータスや時間や行先を編集
- その他現在時刻、アプリ上部からフォームへ遷移するボタン、最新情報に更新するボタンなど設定
デザインのコンセプト
- アプリケーションの仕様に沿って、必要十分な機能を実装
- 社内で使用するアプリケーションのデザインのため、UXよりも使いやすさを重視
- レスポンシブ対応にあたって最小限のコーディングで済むようデザイン
使用ソフト
- Illustrator
- Photoshop
制作期間
7日程度
コメント
シンプルではあっても見やすさや使いやすさ、アクセシビリティを重視したデザインを意識しました。ステータスのアイコンではどのステータスか一目でわかるように色相の全く異なるシンプルな色を使用しました。コーダーにあまり負担をかけないよう、メディアクエリに伴うFlexboxの扱いの変更はなるべく最小限にとどめ、複雑なコーディングを必要とするデザインは採用しないようにしました。メンバーはプログラミング学習者でコーディングをあまり得手としていなかったため、知識の共有を行いました。