働き方

3児の母が750km離れた案件をシームレスにこなすためのリモートワーク制作環境

こんにちは。ご無沙汰になりましたが小出です。

さて突然ですが、「働き方改革」だとか「クラウドで仕事」とか、「リモートワーク」なんていう言葉を昨今よく耳にするかと思います。
そして既に取り入れている方においては、やり方は千差万別、本当に様々だと思います。

これから取り入れてみたいという方にとっては、言葉ばかりが先に立ち、実際どのようになっているのか中身がイメージできない方もあるかと思います。

今日は、弊社でリモートワークをどんな感じにやっているのか?
ツールのご紹介交えて書いてみたいと思います!

会社とは750km離れています。一度も行ったことがありません。

私の住まいは、サッカーファンの方にはおなじみ、浦和レッズの本拠地、埼玉は浦和です。 そして、弊社関東拠点は大宮のコワーキングスペース「ナナエフ」になっています。「大宮サンセット」(by スピッツ)を歌いながら帰路につく日々です。いい曲ですよね。

ヒラメキカンパニーは、広島県府中市にあります。
Google Mapsによると、750km離れてるようです。ちなみに、わたしは広島には一度も行ったことはありません。
いつもハングアウトで瀬戸内の美しい風景を見ては、海無し県埼玉の私は指をくわえるばかりです。いつか行ってみたいですね・・・・

コミュニケーションツール

さて、まずは遠く離れているのでコミュニケーションツールから。

チャットワーク

これがないと始まらない!社内外の普段のコミュニケーションに使っています。

弊社では案件ごとに、グループを作り、社内制作メンバーだけの場合もありますが、お客様と社内メンバーでグループを作り「また聞き」によるスピードダウンを防いでいます。
お客様のご要望を伺い、どのくらいの工数がかかるのか、それを成し遂げるためにはどんなプロセスが必要か、そもそもそれは出来るのか出来ないのか、制作側にしか判断がつかないときもありますね。その部分においても大変有効です。
制作現場では、制作側は通常、お客様と繋がることができないことも多いと思います。
やはり、お客様と直接お話ができる制作環境というのは、モチベーション向上にも繋がり、単純に嬉しいものです!
また、「そんなつもりではなかった」、「伝えたと思っていたのに伝わっていなかった」など、伝言ゲームによる意思の相違も防ぎます。・・・これ・・・、制作の最終段階で起こると炎上しますよね!長いweb制作人生で、そういうシーンに過去何度か遭遇しました・・(ブルッ

また案件によっては外部パートナー(カメラマンやライターなど)制作チームでグループを作り、コミュニケーションのシームレス化・制作のスピード化を図ります。

ちなみにチャットワークにはタスクツールもありますが、少し機能がシンプルなため、タスクはBacklogで管理しています。

それと、結構重めのデータでもサクッと送り合うことが出来て便利です。
(1ファイル最大5GBまでで、複数のファイルを一度にアップが可能)
会話の流れの中で原稿を受け取ったり画面キャプチャを送りあったりということに使うことが多いです。
少量であれば素材画像の受け渡しなどにも使います。(大量になるとBoxの方が便利です)

独特の動く絵文字も楽しく、制作現場が和みます。

G Suiteの「Google ハングアウト」「Google Hungout Meets」

G Suiteは旧称 Google Apps for Workです。余談ですが、私は前の名前の方がわかりやすくて好きでした(苦笑)。

G Suiteの中には、「Gmail」「Google ドライブ」「Google ドキュメント(文書・スプレッドシート・プレゼンテーション・フォーム)」「Google サイト」「Googleカレンダー」「Google+ ハングアウト」「Google+」「Google Apps Vault」などの機能がありますが、主にコミュニケーションツールとして「Google ハングアウト」「Google Hungout Meets」を使っています。具体的には、ビデオ会議ですね。互いの画面を共有しながらここをああしよう、こうしよう、とやることも多いです。

また、やはり750kmも物理的に離れていると、ほとんど実際には会いません。関係を良好に保つためにも、顔を合わせることは大変重要です。

※旧名 Google Docs & Spreadsheets

スケジュール共有

G Suiteの「Googleカレンダー」

言わずと知れた「Googleカレンダー」です。スケジュールの共有にはやはりダントツ便利ですね。
「Googleカレンダー」に自分のほぼ全ての予定を入れて(プライベートも!)共有しています。
スケジュール共有をしておくと、突然のビデオ会議を開きたい時等に役立ちます。制作中に突然相談・確認したい時など、ありますよね。
あとは先方とのアポの予定などもわかるので、カレンダーを見るだけで、制作におけるマイルストーンを意識することができます。
また、わたしは子供の用事で出入りが多いため、予定を共有しておくと安心です。

ちなみに案件ベースでの細かいスケジュールには、Backlogを使っています。

プライベートの予定を共有することには、賛否両論、嫌いな方もおられるかもしれませんが、弊社では便利に働いています。
「長男誕生日」などと予定にあると、話のタネにもなりますし、今日はお邪魔してはいけないな〜という風に働きますよね。
同じオフィスにいれば、そういう話もするかと思います。「お子さんお誕生日なんですね!おめでとうございます」のような会話は、普通にありますね。
物理的に離れている分、ここのあたりにも大きな意味を感じています。

データ共有

Box

企業向けセキュアなファイル共有クラウドサービスで、世界で6万6千社以上に愛用されているツールです。
顧客ごとにフォルダを作成し、その中で各々サーバー情報等を厳重に管理しています。
また、同時編集(リアルタイム編集)が可能な「Box Notes」では、議事録に使ったり、また、アクセス解析レポートを残しておく時に使います。
似たようなサービスがあるなか、何故「Box Notes」なのかその理由は、iPhoneでアプリを通してサクッと確認したり更新できるところ、また、表を入れる時には自動で決め打ちで幅100%!、画像も幅100%!と、考える必要がないところでしょうか。
自由度が高いと、色々凝ってしまい、時間が取られますね! 実際どうでもいいんです、こういうときの画像のサイズとか。(笑)
用途を考えて至ってシンプルに作られているのが「Box Notes」の良いところです。

G Suite

先にご紹介したG Suiteの機能のうち、「Google ドキュメント」を主に使っています。
その中でもとりわけ、「スプレッドシート形式のドキュメント」の出番が格段に多いですね。
制作案件のサイトマップでの進行管理や、修正管理表などに使います。
「Google ドライブ」としての機能(データのストレージと共有)は、以前は使っていましたが、現在はBoxに移行しています。

タスク管理・ソース管理

Backlog

案件ごとのタスク管理にはBacklogを使用しています。タスク管理ツールは色々ありますが、WikiとGitが使えるところがやはり便利です。
親課題・子課題を設定して、タスク同士に関係性を持たせておくと、ガントチャートが生成され、美しくタスクが見える化します。
優先度の設定や、工数記録も重要です。
予定工数を見積もっても実際の工数はオーバーしたり、逆もありますね。コストを意識して動くことができることと、作業見積もり力が養われます。

Sourcetree

制作環境がMacなので、ソース管理はSourcetreeを使っています。そしてBacklogのGitに投げています。
コミットごとにBacklogへ連携しているので、どのタスクでどの変更があったのか、backlog側から一目瞭然です。

制作ツール

Cacoo

もっとサクッと概念図やワイヤーフレームを作るときなどに使います。共有できるところが便利なところです。

制作ツールおまけ(興味のある方だけお読みください)

クラウドツールではないので、こちらに他ツールをご紹介します。

Adobe Xd

主にワイヤーフレームの制作に使用しています。これもファイル共有できるようになったり同時編集(リアルタイム編集)できるようになったら最強ですね。

Adobe Illustrator / Photoshop

グラフィックを作るときはもっぱら、Illustrator、Photoshopです。
近年、モバイル端末の普及で、なるべく画像を使わず表現するWebの世界ですが、それでもやはりきちんとグラフィックを作ったサイトは違う!と感じています。
書き出し設定もどんどん進化していますので、個人的には軽くて魅力的で伝わるグラフィックをもっと取り入れたいところです。

Th-MakerX

画像リサイズ・軽量化ツールです。ウィンドウにそのまま画像をドロップするだけで、あらかじめ設定したサイズ・画質に書き出してくれます。Boxで素材画像を受け取ったらここにポン!です。

ImageOptim

さらなる画像軽量化にはずっとこれを使っています。画像に付随するメタデータを取り去り、非可逆圧縮でぎゅっと小さくなります。Th-MakerXでリサイズした画像をここにポン!です。
ブログを書かれたりする方は、ぜひ上のTh-MakerXと共にお使いになると、サイトのパフォーマンスが上がり、おすすめです!

Coda2 + Codekit

もともとは、FTPクライアントであるTransmitを愛用していたので、Panic syncが便利そうだな、ということで、Coda2をコーディングに使っています。UIも好きなので、愛しています。
Coda2とCodekitの組み合わせで作っていくことが多いです。 このPanic syncも便利で、端末が変わっても同期してくれているので、1台のPCにへばりつかなくても大丈夫です。
ソース管理がめんどうなのでよっぽどのことがないとあまりやりませんが、CodaはiPhoneアプリもありますので、出先でコード書き換えも可能です。

Visual Studio Code + gulp

が、最近、Visual Studio Code + gulpに切り替えました。(既存のサイトを移行中)
Visual Studio Codeは、軽くサクサク動き使いやすいですね!検索まわりのUIが気に入っています。さらに制作環境が効率化しスピードアップ!していく気しかしません。

まとめ

いかがでしたでしょうか?
実際、埼玉で周囲の人に「広島の会社で広島の案件をこなしている」と伝えると、「へぇ〜?どうやって??」という反応をいただくことが多いです。
まだまだリモートワークは一部の世界なのかもしれませんが、少しでもどなたかのご参考になれば幸いです。

ひとまず、弊社でのツールの2018年夏現在の組み合わせと使い方はこんな感じで、物理的な距離を気にすることなく(というか、正確には、「気になる」ので、クラウドの良いとこ取りでカバーして!)仕事ができています。

もし、クラウドによる業務効率化について気になることがありましたら、ぜひともお気軽にご連絡ください。各種クラウド導入支援を承っております!

まあ、それにしても、このような便利な時代ではありますが、広島には本当に実際に行ってみたいものです。瀬戸内の風景をPC画面ではなくこの目で見てみたいなぁ・・・・島々を渡ってみたいなぁ・・・と遠い目をする小出でした。
ごきげんよう!