CSS Nite LP64「Coder's High 2019」フォローアップ（1）阿部文人さん、今聖菜さん | CSS Nite公式サイト

CSS Nite公式サイト - 2020年1月2日(木) 08:02

このページは、外部サイト CSS Nite公式サイトの情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は「CSS Nite LP64「Coder's High 2019」フォローアップ（1）阿部文人さん、今聖菜さん」からご覧ください。

2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、阿部文人（necco）、今聖菜（necco）さんの『ウェブデザイン・サイト制作におけるプロジェクト・タスク管理ワークフロー』セッションのスライドなどを公開します。

フォローアップ

セッション1を担当しましたneccoの阿部と今（こん）です。
デモがきちんとできずに本当にすみませんでした。キャプチャや動画などを用意しておくべきでした。デモがお見せできず全体でどういうフローで業務を行ってるか見えづらい部分もあったかと思いますが、今回のセッションではneccoのワークフローを通して何か一つでもみなさんのプロジェクトやタスク管理の改善につながればと思ってのセッションでした。
GTDの考え方や投稿先のチャンネルの整理、フォルダの整理などもメンバーの業務の中で繰り返し利用するものかなと思います。
すべてを取り入れることも不可能だと思いますし、お金がかかるツールの導入がそもそも難しいなどもあるかもしれませんが、
みなさんの改善のキッカケになれば嬉しいです。

質問Q. 阿部さんにお聞きしたいのですが、海外のトレンドは知るためにどのようなことをされているのでしょうか？情報収集をされているのであれば、情報源も教えていただきたいです。

TwitterやFacebookなどがメインです。詳しい人をフォローして気になるワードが出てきたら深堀りすることが多いです。あとはCSS Niteや各種カンファレンスイベントはよく参加しています。例えば最近ではheadless CMSの海外の状況は英語で検索したり、Youtubeで検索して動画みたりしました。

Q. #1のセッションでGitlabでデプロイした際にどこにアップロードされるのかもう一度教えてください！（なんとかプリファイと聞こえましたが…）

Netlifyという静的ファイルのホスティングサービスです。
デモではNuxt.jsをつかっていて、GitlabにPushしてプルリクをMasterBranchにマージするとCIが走って、Netlifyにデプロイされます。厳密にいうとローカルでNuxt generateして静的ファイルは作成せず、Netlifyでビルドコマンドを設定しておくとNetlifyが自動でNuxt generateしてくれてルートディレクトリに静的ファイルが展開されます。Kiteさんのセッションでもこの話はでてきていたので参考にしてもらえればと思います。

https://www.netlify.com/

Q. CaTの東京開催はないですか？

CaT東京開催、実は考えております。日程は未定ですが来年のどこかで行いたいと思います。そのときはぜひご参加ください。

Q.タスクの粒度はどんなルールなんだろう？

粒度は1日内では終わるようにしてます。例えばトップページデザインなどは1日で終わらないので、トップページメインビジュアル作成などにしたりします。大きすぎるタスクの場合は親にしてサブタスクを使う方法もあると思いますが、ボード表示ではタスクがすぐ見えなくなってしまうのでneccoではあまり利用していません。

Q.どんなに細かいことでもタスク化していますか？？slackの通知の量がえらいことになりませんか？

通知量はなるべく絞るように工夫してます。例えばAsanaではタスク追加時と完了時のみ通知するなど。
細かいタスクはtimes-abeなどのチャンネルをSlackにつくり、Asanaにもtimes-abeなどの個人用のようなプロジェクトをつくり連携して細かいタスクは処理してます。細かいタスクはいれるのが面倒ですが、タスクは入れると忘れることができるのがメリットだと思います。脳のスペースや心配を忘れるようなイメージです。GTDもその考え方が書かれていたりします。

Q.誰が責任を持ってタスクを追加するのか、最初に決めているのですか？Slackからの手動追加だと、タスク追加の重複やタスク追加漏れがありそう。

基本的にはメンバーが手動でおこなってますが、大きな案件が走るときなどはディレクターの私がいれて優先度を上下で入れ替えて、上からタスクを進行してもらうようにしてます。Slackからだけだとすぐ流れてしまうので基本的にはAsanaをボード表示してプロジェクトごとにタスクを管理しています。重複タスクは発生するときもあるので発見したらすぐに削除したりもします。

Q.開催趣旨から外れるかもしれないが、ツールの採用やワークフロー改善案を社内で通す秘訣を知りたい。弊社ではビジネスチャットの導入すらできない。

現在は代表をしていますので、メンバーと相談しつつプロジェクト単位での導入を行って、全プロジェクトに適用する流れをとっています。
前職、前前職では、費用、導入メリット、導入方法などを資料でまとめて上長などに提案したり、小さな案件に導入してもらい、使いたいと声を上げてくれる、仲間を増やしたりしています。

Q.Asanaを導入するまでにどのような意思決定があったのかお伺いしたいです

下記のツイートにも記載しましたが、私のタスク管理は多くの変遷と挫折の連続でした。
紙からはじまり、RedmineやBacklogも試したりしましたがどうしても合いませんでした。
またデザインとエンジニアリングをどちらもやりますし、チームメンバーもデザイナー、エンジニア、ライターのメンバーがいるため一つの職種のみが使いやすい、受託案件に合いそうにないものは継続して利用できていませんでした。

Asanaはタスクを4つの表示方法で切り替えができることと、プロジェクトをすぐまたいで表示できる、自分のタスクをプロジェクトをまたいで表示できる。などの機能があり、いままで利用していたものはそれができたものがありませんでした。
特にneccoではボード表示や、カレンダー表示が多用されています。
https://twitter.com/abefumito/status/1185442687769444352?s=20

Q.全体最適化の部分を具体的に知りたい

誰か一人のタスク管理がうまくいく、誰か一人が使いやすい、誰か一人が大きな声を上げたから導入しない。などは全てneccoでは採用せず、プロジェクトがうまく行くようになるか？チーム全体としてはスピードがあがる、効率化につながるか？最後にはお客さまのためになるか？などの本来の目的のためにワークフローだけでなく全体最適化を図ってます。

Q.「全員でデザイン」とおっしゃっていましたが、エンジニアさんもデザインするのでしょうか

エンジニアも参考サイトを用意してFigmaにはったり、画像を書き出したり、テキストを修正したり、デザイナーがどうしても時間がとれないときなど部分的にFigmaでデザインを提案してもらったりしてます。その際もFigmaの同時編集機能はともて便利で、neccoでも利用しています。

Q.CIツールは何を使っていますか？’

現在はGitlabのCIを利用しています。プロジェクトによってはCircle CIなども利用しています。

Q.新人教育はしてますでしょうか？もししていたら、使うツールやカリキュラム、フローを教えてください。

入社した際に利用するツールや、拡張機能などは一式esaにまとめていて、それを見てもらってます。
necco独自のワークフローに対しての教育などのカリキュラムは用意してません。
ただデザイナーやエンジニアには#info-design-studyや#info-dev-studyなどの情報共有Slackチャンネルを用意しているので、入社時に時間が空いてしまったりする場合をそのSlackチャンネルを読み進めてもらってりしています。

Q.XDやSketchは使わないのですか？ Figmaにしている理由を知りたいです。

Figma導入前はSketch + Zepline（プロトタイプ&Spec） + Abstract（バージョン管理）を利用していました。ずっと考えていたこともありますが、どうしてもデザイナーだけファイル管理に追われていることが納得ができず一度上記のエンジニア的な管理で落ち着きましたが動作が不安定で遅く大きな不満がありました。

Figmaに変えたことで全員同時にデザインができすぐにプロトタイプをエンジニアに共有ができます。また同時編集ができオンライン上でデザインしている状態のためデザインファイルのやりとり、バージョン管理などから開放されました。

XDに同時編集機能が来る日も近いそうなのでその時はIllustratorやPhotoshopなどとの連携も考えてXDをメインのウェブデザインツールにするかもしれません。

Q.ツールの使い方などはどうやっておぼえるんでしょうか。

Asanaであれば公式サイトの動画などがあるので見たりしてます。あとは利用方法などで検索してメンバーの情報共有しつつ、日々使い方を改善しています。

Q.なぜGTDの考え方を採用したのでしょうか？

10年前になるのですが。。。タスク管理が不得意でかつストレスすぎていろいろ探した結果GTDに行き着きました。

Q.他のワークフローの考え方も検討されたりしましたか？

現在のワークフローはずっと改善を続けてきたものではありますが、ずっと他の良いやり方は模索しています。
自動化関連は常に考えてます。ZapierやIFTTTなどのレシピみたりするとこんな自動化できるのか！など参考になります。

Q.デプロイがGitでできない案件等はどうされてますか？（そもそもそういう案件はやらない？？）

テストサイトは弊社で用意してGit管理、自動デプロイしていますが、本番環境へのアップロードがSFTPなどの案件がいくつかあります。先方のサーバ環境の問題や移行ができない場合です。
新規の案件では基本は受けないか、サーバの変更、導入してもらうなどを提案したりしてます。非効率で、人的ミスも多く、確認の工数もかかってしまうためその分費用をいただくことになってしまうためです。

Q.日報はあのあとどうやってどこにまとまるのでしょう？

デモができずすみませんでした。Slackに指定したチャンネルに自動投稿されます。neccoでは日報と週報でそれぞれ違う質問をつくって、#necco-daily-reportと#necco-weekly-reportのチャンネルにそれぞれ投稿されます。

下記に質問などはまとめましたので参考にしてください。
https://twitter.com/abefumito/status/1185425224285618178?s=20

Q.ツールが多いと新人が覚えるのが大変そうですね。教育とかに結構時間かけてる感じでしょうか？

使いやすいツールが多いのでいままで大変なことはなくあまり時間をかけずにスムーズに導入できてます。デザインやウェブ制作を行うメンバーのみということもあるかもしれません。上記でも触れていますが、ディレクションを行う私がデザインとエンジニアリングをどちらも行うため、どちらの職種にも適合しそうなものを採用していることもあると思います。

Q.CaTのネコをつくった方はどなたでしょうか？

一緒に登壇した今（こん）が制作しました。イベントのコンセプトを考えて、雪見大福のような鏡餅のような猫に仕上がってます。
よかったら下記ページ見てもらえればと思います。私も可愛くて大好きです。

CaT史上最大規模！初のエンジニア回となる「CaT vol.7 真夏のVue.js祭り」を開催しました！
https://necco.co/necco-note/2019/08/3041

【随時更新！】箱猫カレンダーを作りたい！necco主催イベントCaTのキャラクター『箱猫』グラフィックまとめ。
https://necco.co/necco-note/2019/03/1879

Q.現在決まった案件を、１〜２ヶ月後に走らせることが決まったとき、いつタスク管理ツールに入れるのが良いですか？（忘れないようにすぐ入れると、ずっと入れっぱなしになりそう…）

案件が決まって、お客さまとの会話が始まった時に下記を同時に作成してまず立ち上げます。
・Slackの新規案件チャンネル dev-[案件名]
・Asanaのプロジェクト
・スプレッドシートでテンプレート化しているもの（案件概要、会社概要、戦略、ブランドコンセプト）
などです。場合によってはお客さまのSlackチームを作成したり、Sharedチャンネルを立ち上げます。
そのあとに具体的なタスクはAsanaに入れたりしてます。ウェブサイト実装で必ず必要になるタスクなどは
Asanaテンプレートなどにまとめてますので必要な時にそれを入れたりしてスタックするのを避けるようにしてます。

Q.ワークフローの決定は誰が行いますか。反対意見はどう説得しますか。

最終決定は私が行っています。お客さまにも同じやり方などはメリットがありそうであればご提案したりしてます。
社内での反対意見はきちんとメリット、デメリット双方確認しつつ、全体最適できるものは話し合いつつ決定します。
前述の質問でも触れていますが、導入するメリット、費用、効果、デメリット、導入コストなどを資料でまとめて提案する、小さいプロジェクトでまず一回だけ導入してみる、使いたいと思ってもらえる仲間を増やす。などの対策で打開できることも多いと思います。

Q.タスクは子タスクで分割しますか？別タスクでたてますか？

別タスクでたてるようにしてます。サブタスクもいいのですが、粒度の問題やボードで見えなくなる問題が解消できないためです。

Q.あそこの仕様どうなったんだっけ？みたいなとき探しやすくする仕組みはありますか？

esaでプロジェクト別に開発環境やログイン情報、仕様などは整理してますのですぐ探せるようにしてます。
project/案件名/サーバー環境などで階層を作ってます。

お客さまからご提供いただいたものはDrop Boxで先方提供資料に格納したりしています。
フォルダ構造はこちらも参考にしてください。
https://twitter.com/abefumito/status/1185425224285618178?s=20

Q.新ツール導入時に、メンバーとどのような相談をするのか？

継続して気持ちよく利用できそうか？今までかかっていた時間は削減できそうか？動作がはやいか？などは各ツールに共通して、相談します。あとはそれぞれのツールの具体的なメリット、デメリットを相談します。

セッション内で紹介したもの

GTDやタスク管理については下記の本がおすすめです。
- ストレスフリーの仕事術

紹介したツールのまとめ

下記にツール一式と利用費をまとめたシートを作成しました。複製などしてご利用ください。年額払いにすると経理コストも下がるのでおすすめです。掲載費用は月額払いを掲載しています。
https://docs.google.com/spreadsheets/d/1_dsQqtWsOVImjlAUm1OEQI9clHsSJLX35ACiFLkQ758/edit?usp=sharing