関連記事
【開発実況シリーズ】Web日報登録システムを作る「#1 企画編」
2020.11.15
2021.03.14
【開発実況シリーズ】Web日報登録システムを作る「#2 画面設計編」
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第2回ということで、前回の続きを進めていきたいと思います。
今回は 「#2 画面設計編」です。
Todoリストを確認
まずは、Todoリストを確認しておきましょう。
前回は、Webアプリの「企画」と「機能設計」が完了しましたね。
今回から設計フェーズということで、Web日報登録システムの画面設計を進めていきましょう！
画面設計とは？
前回、Webアプリの機能構成として、こんな感じで「社員側」と「管理者側」に分けて必要機能を洗い出しました。
この機能を実現するためには「具体的にどんな画面（UI）が必要か」ということを考えていくのが画面設計です。
自分1人で作る場合、画面設計は手書きでも全然良いんですが、今回はプロトタイピングツールを使って作っていきましょう。
AdobeのXDというツールを使います。
無料で使えるので皆さんも良かったら使ってみてください。
今回のアプリは「社員側」と「管理者側」という2種類の機能区分があるので、画面設計もそれぞれ分けて考えます。
まずは社員側の画面から考えていきます。
なお、今回のWeb日報登録システムは、リモートワーク環境で使用することを想定して、リモートで自分の業務時間を登録、報告出来るアプリという想定にしています。
社員側の画面設計
社員側は、まずログインが出来て、業務時間が登録出来、登録した内容が月別に確認出来れば良いので、必要なのは、①ログイン画面、②日報登録画面、③月別リスト画面ですね。
ログインは、社員番号とパスワードで行うようにしましょう。
日報登録は、出勤時間、退勤時間、休憩時間と、自由入力で業務内容を登録出来るようにします。
月別リストは、こんな感じで一覧表示出来れば良いですね。
さらに使いやすいように調整していく
別の月にも表示切り替え出来るように、プルダウンリストを付けておきましょう。
打刻は1クリックで出来た方が便利ですね。
日付も表示させておきましょう。
月別リストには登録内容が表示され、編集ボタンをクリックすると、編集も行えます。
この辺りは、まずは自己責任で行うようなゆるめの仕様にしておきましょう。使ってみて問題があるようなら、例えば登録後の編集は管理者しか行えないような仕様にしても良いですね。
打刻画面はシンプルなので、月別リストの上にモーダルで表示しても良いかもしれないですね。
ログインすると、今月の月別リストが表示され、未打刻の場合はモーダルも自動表示。
モーダルはバツで閉じられるようにしておきます。
こんな感じで、画面設計をする際は作ったワイヤーフレームを見ながら実際にアプリを使っていることを想像して、画面の構成や画面遷移を考えていくと良いです。
社員側は大体こんな感じでOKですね。
管理者側の画面設計
続いて、管理者側も考えていきましょう。
管理者側も専用のログイン画面を用意して、
ログインすると社員選択を行うための社員一覧を表示します。
社員名をクリックすると、その人の月別リストが表示されるといった流れですね。
この画面は社員側と同じで良いので、これで完了です。
管理者は、かなりスピーディに終わりました。
このように共通化出来る部分は同じような画面設計にしておくと、設計時も開発時にも工数削減が出来ます。
コメントを長く入力された場合、一覧画面上で全て表示するのは難しいので、長い場合は「...」で表示してモーダルかツールチップで全体を表示させるようにしましょう。
画面設計は、ざっとこんな感じですね。
設計確認
機能要件が全て実装されているかどうか最終チェックします。
社員ログインがあり
業務時間（出勤、退勤、休憩時間）、業務内容（自由入力）が登録出来
月別一覧表示が行える。
管理者側は、ログインがあり
社員選択から
月別一覧表示が行える。
大丈夫そうですね。
機能設計には書いていませんでしたが、社員側、管理者側ともに登録データの編集機能も付けました。機能設計もアップデートしておきましょう。
管理者機能については、例えば社員の勤怠の承認を行ったり、基準時間を超過して働いている社員のアラートを出すなど、より便利にするための機能はいくつもありますが、今回はシンプルなアプリということで、まずはこれで作っていきます。
では、これで画面設計は完了です。
受託開発の場合は、ここで一度クライアントに画面設計を提出して、問題がないかどうか見てもらいます。問題がなければ、次のフェーズに進む、といった流れですね。
出来たものをいきなり見せるのではなく、頻繁に情報共有しながら進めるのが、開発プロジェクトの成功の秘訣です。
次回予告
ということで、今回は「画面設計」が完了しました。
最後にTodoを確認しておきましょう！
画面設計が完了したので、設計フェーズの前半戦は完了です。
次回は、設計フェーズの後半戦「データベース設計」を進めていきたいと思います。
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
