CSS Nite LP64

ウェブデザイン・サイト制作におけるプロジェクト・タスク管理
ワークフロー

Coder's High 2019

Fumito Abe & Seina Kon
2019.10.19
at TokyoToday’sHashtag＃cssniteContents

今日の内容

Total

25

About us

1. 自己紹介

About Company

2. 会社紹介Workflow&Task

3. プロジェクト・タスク管理ワークフロー
3 - 1 はじめに・neccoの考え方
3 - 2 neccoのワークフロー全体像
3 - 3 デモ3-4 まとめmin

1About us
自己紹介

東京都在住 / 東京都出身
2016年10月に株式会社neccoを創業。
4期目、社員5名+インターン1名。
2019年6月東京オフィスを開設
猫2匹と生活。
株式会社necco代表取締役主にブランドデザイン制作全体のディレクションから戦略、UX・情報設計、UIデザイン、フロントエンド実装を担当。

阿部 文人

クリエイティブディレクター / エンジニア@abefumito

・WordCampの登壇2回

・JP_Stripes Akita 運営 (2回目そろそろ)・JAWS-UG Tohoku 所属

・AlexaDay 2018 デザインをneccoが担当

東京都在住 / 秋田県秋田市出身
秋田県の美術短大卒業後、制作会社でデザイナーとして勤務。
2016年よりneccoに参画。
株式会社necco
デザイナー

今 聖菜
@konseina主にデザイン制作、グラフィック制作を担当。人の心をグッと動かすデザインを作るべく日々勉強・奮闘中。

2

About Company
会社紹介About Company
会社紹介

ブランドづくりのお手伝いを起点にデザインと ウェブサイト をつくっています🚩今日のゴールプロジェクト・タスク管理
ワークフロー改善のヒントに

3-1

Introduction
はじめに・neccoの考え方

=プロジェクト
目標を達成するための計画
出典wiki ped ia：https://ja.wikipedia.or g/wiki/プロジェクト

語源はラテン語=

Pro + Ject
前方（未来）に向かって投げかけること
出典wiki ped ia：https://ja.wikipedia.or g/wiki/プロジェクト

=

タスク計画を実現する個々の仕事
出典wiki ped ia：https://ja.wikipedia.or g/wiki/プロジェクト

プロジェクト・タスク管理
みなさんつらくないですか？

なぜツライ？
1

大きなタスクを分解できなくてツライ

2

タスクの粒度設定が難しくてツライ

3

タスクをいれるのが面倒すぎてツライ

4

タスクのステータス変更がツライ

5

タスクいれないほうが速くてツライneccoのワークフローの考え方
1

なるべく自動でタスクや進行を共有する

2

ツールはいいとこ取りで組み合わせて速く

3

チームの仕事効率化は全体最適を目指す

4

人が増えても対応できるよう仕組みにする

5

ワークフローは常に改善していく3-2

Workflow
neccoのワークフロー全体像

ウェブデザイン・サイトができるまで
1

顧客との打ち合わせ → 作るもの・方針決定

2

戦略・情報設計・サイトマップ作成&見積り

3

Figmaでワイヤー作成 → Figmaでデザイン

4

ウェブサイトのコーディング

5

検証・修正→公開

neccoのワークフロー
1

毎朝タスクを整理してGeekbotで日報作成

2

GmailやSlackからAsanaにタスクを追加

3

全プロジェクト・タスクをAsanaやesaで管理

4

Figmaでチームメンバーが同時にデザイン

5

コーディング後のデプロイ自動化＆自動通知

necco tool
Info Management

Contact for Clients

Workflow
Online Strage

Design

MTG Report

Messenger
PaperDropbox

Gmail

Project Management

DesignProject・IA

GoogleSpreadsheets

Chat・Notification

Task・Project

UI・WebIllust・GraphicSlack

Asana

Figma

Illustrator Photoshop

Schedule

Daily・Weekly
ReportStock Infoesa

GoogleCalendargeekbot

PhotoDevelopment

WebsiteCI
Version Control

Gitlab心安
ご
いさだく

ツール一覧はスプレッドシートで共有します。

necco tool
Info Management

Contact for Clients

Workflow
Online Strage

Design

MTG Report

Dropbox

毎朝Geekbotで日報作成
Messenger

Paper

Gmail

Project Management

DesignProject・IA

GoogleSpreadsheets

Chat・Notification

Task・Project

UI・WebIllust・Graphic

Slack

D AsanaM

Figma

Illustrator Photoshop

Schedule

Daily・Weekly
ReportStock Infoesa

GoogleCalendargeekbot

Photo

Development

WebsiteCI
Version Control

Gitlab

necco tool
Info Management

Contact for Clients

Workflow
Online Strage

Design

MTG Report

Messenger
Paper
Project・IAGoogle
Spreadsheets

Gmail

Project Management

タスク化

Dropbox

Design

通知とタスク化Chat・Notification

Task・Project

UI・WebIllust・Graphic

Slack

Asana

Figma

Illustrator Photoshop

Schedule

Daily・Weekly
ReportStock Info

Photo

SlackやGmailからAsanaにタスクを追加！
タスクをとにかくAsanaへ集約
esa

GoogleCalendargeekbot

Development

WebsiteCI
Version ControlGitlab

necco tool
Info Management

Contact for Clients

Workflow
Online Strage

Design

MTG Report

Asanaで全プロジェクトとタスクを管理
GTDを応用し、進行状況はSlackへ
Messenger

Paper

DropboxGmail

Project Management

DesignProject・IA

GoogleSpreadsheets

Chat・Notification

Task・Project

UI・WebIllust・Graphic

Slack

Asana

Figma

Illustrator Photoshop

Schedule

Daily・Weekly
ReportStock Infoesa

GoogleCalendargeekbot

Photo

Development

WebsiteCI
Version Control

Gitlab

=GTD
Getting Things DoneGTDとは？

個人用のワークフローの管理手法
出典wiki ped ia ：h ttps://ja.wikipedia.or g/wiki/Get ting̲Things̲Done

GTDの5ステップ
1

収集頭の中にある「やらなければならないこと」「気になっていること（問題）」を紙などに書き出す。作業中のメモ書きなども参照して、問題点を出していく。

2

処理

書き出した内容を、手順に添って、分類しリスト化する。

3

整理

リストを自身がスケジュール管理に使っているツールに入れ込む。

4

見直し

自分の状況や状態でそれらが可能かどうか見直し、検討する。

5

実行リストアップした「できること」を順次片付ける。

出典wiki ped ia ：h ttps://ja.wikipedia.or g/wiki/Get ting̲Things̲Done

Ice Box

To Do

収集

処理

整理

保留
見直し

Doing

Done

実行

完了

necco tool
Info Management

Contact for Clients

Workflow
Online Strage

Slackなどのフロー情報はストック型情報ツールで管理

MTG Report

Messenger

Paper

DropboxGmail

Project Management

DesignDesignProject・IA
Chat・Notification

Task・Project

UI・WebIllust・Graphic

Slack

Asana

Figma

Illustrator Photoshop

Schedule

Daily・Weekly
ReportGoogleSpreadsheets
Stock Infoesa

通知

GoogleCalendargeekbot

Photo

Development

WebsiteCI
Version Control

GitlabWorkflow

necco tool

Figmaで共同デザイン&バージョン管理&プロトタイプ

Info Management

Contact for Clients

Online Strage

MTG Report

Messenger

Paper

Figma上のコメントを通知

Project・IA

GoogleSpreadsheets

DesignChat・Notification

Task・Project

UI・WebIllust・Graphic

Slack

Asana

Figma

Illustrator Photoshop

Schedule

Daily・Weekly
ReportStock Infoesa

DropboxGmail

Project Management

Photo

コミット＆保存

Development

WebsiteプロトタイプをURLで共有
GoogleCalendar

DesignCI
Version Control

FigmaでエンジニアとSpecデータを共有
geekbot

Gitlab3-3

DEMOデモデモの流れ
1

CaTサイトのタイトル変更依頼をFigmaから

2

Slackの通知からAsanaでタスク化

3

Geekbotで日報作成をしてFigmaでデザイン開始

4

コーディングのタスクを追加

5

Figmaを確認してコーディングとデプロイ

3-4Conclusionまとめnecco tool
Info Management

Contact for Clients

Workflow
Online Strage

Design

MTG Report

Messenger
Paper

DropboxGmail

Project Management

DesignProject・IA

GoogleSpreadsheets

Chat・Notification

Task・Project

UI・WebIllust・GraphicSlack

Asana

Figma

Illustrator Photoshop

Schedule

Daily・Weekly
ReportStock Infoesa

GoogleCalendargeekbot

PhotoDevelopment

WebsiteCI
Version ControlGitlab

プロジェクト・タスク管理はツールだけの話ではない！
全社での導入が難しい！

新しいツールは使いづらい!!

繰り返す 仕事を改善すると効果が大きくなる
メンバーが繰り返す仕事を観察してみる🔍

し
返
繰り

プロジェクトが発生する場合どのデータがどこにあるかすぐわかるフォルダ分けをつくっておく

し
返
繰り

チャット上で重要な会話が発生

どの会話がどこにあるのかすぐわかるようにする新規案件

dev-[案件名]

情報共有

info-[design, dev, general]

自社関連

necco-[mtg, oﬃce, yoga]

運用案件

ope-[案件名]

分報

times-[メンバー名]

し
返
繰り

タスクが発生するGTDなどを応用してタスク管理手法をチームで統一

Ice Box
収集

To Do
処理
整理

保留

見直し

Doing

Done

実行完了

neccoのワークフローの考え方
1

なるべく自動でタスクや進行を共有する

2

ツールはいいとこ取りで組み合わせて速く

3

チームの仕事効率化は全体最適を目指す

4人が増えても対応できるよう仕組みにする

5

ワークフローは常に改善していく💡
少しでもワークフローを改善できそうなヒントはありましたか？

1日10分効率化できると毎月営業日22日として…

22日×10分 = 220分
12ヶ月×220分 = 2,640分
1ヶ月

1年2640分は 44時間
44時間=1.83日

仕事を毎日8時間するとなると…

5.5営業日毎日10分節約できれば年間1人（人日5万円だとして）27.5万円ちなみに本日ご紹介したツールの総額は年間1人…

15万円でした！

改善 と 工夫 を続けることが大事！
統合されたツールに変更？

自動化・仕組み化できそう本日お伝えしたneccoのプロジェクト・タスク管理
ワークフローが少しでもみなさんのお役に立てれば幸いです。

Thank you!
ご清聴ありがとうございました。
懇親会でもお気軽に話しかけてください！ご質問などもぜひ！

ひぜ

遊びに来てください！