「プロジェクト管理ツール　プロジェクト管理　WEB　APP」

 

グローバルゴリラー李です！

 

12月から一人でプロジェクトを管理するweb appを作ることになりました。せっかく貴重な経験をさせていただくため、記事に残しておこうかなと思います。まだ未完成ですので、これからたくさん便利な機能をどんどん入れていきたいと思います！

 

少し前までは、手帳やExcelを使って仕事内容を管理していましたが、案件が多すぎて、操作が面倒くさい、共有が難しいなどで、管理が難しくなっている人も多いのではないでしょうか。こうした状況に陥る前に、仕事の管理を目的に作られたアプリケーションである「プロジェクト管理ツール」の導入を検討してみてください。

 

今回作ったシステムについてご説明します。

 

プロジェクト管理ツールとは？

まずURLを入れ、ENTERを押すと下記のような看板ページが最初に表示されます。

自分のタスクが分かりやすく表示されますので、今日一日の作業は明確化になりますよね。

まだ未実装ですが、この画面でチームメンバーを選べるプルダウンが用意できれば、プロジェクトの管理者の方も自分のチーム内のメンバーの作業状況を把握しやすいと思います。

 

プロジェクト管理ツールのデザイン

一番工夫したのがデザインです。色の選定やレイアウトの配置はいろいろ考えました。

実際にお客様でこのプロジェクト管理ツールを導入してくださっても、使用してくださる方が使いにくかったり、抵抗意識を持たれたりするのは残念でなりません。そのため、作業が楽しくなるデザインが一番大事だなと思い、こだわらせていただきました。

 

スケジュールの管理

左のサイドメニューにあるスケジュールボタンを押しますと、下記の画面になります。

この画面では自分が担当しているすべてのプロジェクトを示してくれますので、作業の全体を把握しやすくなります。

 

次に、まず例として、今回一番目のプロジェクトを選択して、案件の詳細をご覧いただきます。

タスクバーは左右移動、ドラッグもできますので、楽しく作業しながら効率も上げることができるかと思います。

この他にも、タスクの詳細内容を閲覧したい、編集したい、新しいタスクを追加したいなどさまざまな要望があるかと思いますので、右クリックでタスクを操作することもできるようになっています。

デザインはこんな感じです。項目とかは例として作ったのですが、実際はお客様の要望に合わせて作らせていただきますので、中身の項目が少ないとかは気になさらないでください。

 

ちなみに、ポップアップを透明にした理由は、タスクを編集する際に他のタスク状況を確認しつつ可能にするためです。

 

画面のデザインはざっくりとこんな感じです。

 

作成してみての感想

今回のタスクバーはsvgタグで作っていて、自分も初めてでしたが、普通のdivタグより効率し、スピードも上がりました。

ぜひこのプロジェクト管理ツールを使用して、御社の従業員の方のタスク管理の視覚化と共有を通して、事業効率に貢献できたら幸いです。