クライアントとのコミュニケーション 第1回 コミュニケーションツール

第1回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。

発行

  • 中村 享介
  • 高津戸 壮
  • 小山田 晃浩
  • 外村 和仁
  • 外村 奈津子
  • 山田 順久
  • 小原 司
  • 山田 敬美
  • 坂巻 翔大郎
クライアントとのコミュニケーション シリーズの記事一覧

はじめに

このシリーズには、ピクセルグリッドのスタッフに、普段、クライアントとどのようなコミュニケーションを取っているか、じっくり話してもらった座談会を、ほぼ完全なかたちで収録しました。

CodeGridだから読める、ちょっとオフレコな話も順次公開していきますので、どうぞお楽しみに。

さて、第1回目は普段のコミュニケーションを、どのようなツールを使って取っているのか、またそれにはどんなメリットがあるのかを話しています。

参加者は次の通り、ピクセルグリッドのエンジニア7名、デザイナー1名です。

受けられない案件ってどういうもの?

——まず案件を受注するまで、どんなぐあいにやり取りしているのかについて聞きたいです。以前、CodeGridの記事にもなりましたが、ピクセルグリッドって、問い合わせの窓口としては、電話を使わないですよね*。

*注:電話を使わない

代表取締役の中村が執筆した記事「ピクセルグリッドの仕事術:電話のない会社」に電話を使わない理由や、メリットが書かれています。

高津戸:お問い合わせフォームから声がかかることは多いですよね。

坂巻:メインはお問い合わせフォームですよね。たまに個別にエンジニアに声がかかることもあるんじゃないですか?

高津戸:うーん、お問い合わせフォームが4割くらいですかね。

坂巻:残りの6割は?

高津戸:残りはすでに一度、ピクセルグリッドに仕事を出したことのあるところからですね。でも、ピクセルグリッドは、ほかの会社に比べると、お問い合わせフォーム経由の割合が多いような気はなんとなくしますね。

坂巻:けっこうお断りする割合が多いって話を聞きましたけど。

高津戸:お断りすることは多いです。

坂巻:それがすごいなあと思ってます。仕事は、ほぼ受けてしまう制作会社もあるのに。

高津戸:会社の初期の段階では受け過ぎてたこともありました。でも少し前までは、CodeGridの記事を書いていたり、別の大きな案件が入っていたりして、受けられなかったんですよ。HTMLやCSSのコードの実装を受けられるのが、僕と、よもつ(小山田のこと)くらいだったので、実は、そんなにキャパシティはなくて、できないんです。

——受けないではなくて、受けられないってことですか?

高津戸:そうです。今は、あまりにもスケジュールが短いものは実質、受けられないことが多いです。それから、そもそもピクセルグリッドは『JavaScriptヘビー』なものが得意なので、WordPressやMovable TypeなんかのCMSでサイトを作るとか、単なるキャンペーンサイトを作る案件なども、お断りせざるを得ないことが多いです。

坂巻:ピクセルグリッドじゃなくてもできるサイトはやらないってことですか?

高津戸:そういう側面もありますね。でも、一番大きな理由としては、実際、WordPressで構築するサイトは、それほど多くの実績があるわけではないからなんです。そういう案件ならば、ピクセルグリッドでない方がいいのかなあと思うんですよ。

小原:あと、一切営業活動してないですよね。

高津戸:そうですね。これはピクセルグリッドが特殊だと思うんですけれど、みんなもともと、CSS Niteで登壇させてもらったり、書籍や雑誌に寄稿していたりした人が、親しくしているうちに集まって会社になったようなものなんです。だから、その対外的活動が、実質的な営業活動だったりするんですよね。

山田 敬美:ピクセルグリッドは、当初から営業活動はなかったんですか?

高津戸:ああ、当初は僕と享介さん(社長の中村)だけだったんですけど、その頃は人の繋がりで仕事がきてました。僕は会社に勤めて、その後フリーランスになって、ピクセルグリッドにきているので、前の会社で一緒だった人に声をかけて仕事をもらったり。享介さんも同様に以前からの知り合いに声をかけて、受託の仕事をもらったりしてました。最初はヤバかったです(笑)。お金が減る一方で。

——ということは、お問い合わせフォームからくる4割のお客さんっていうのは、ほぼ新規の方なんですか?

高津戸:新規はかなり多いですけど、以前イベントや勉強会で会った方からもいただきます。その場合はメールだったりもしますけど、それが4割という感じですね。あとは、以前仕事をさせていただいたところからですかね。

——スケジュールが極端に短かったり、ピクセルグリッドよりもたぶんその案件を得意としてしている会社さんが多いだろうな、と思うものはお断りしているということですが、そのお断りのときに注意していることってありますか?

中村:嫌な感じにならないようにしてます。

高津戸:『また機会があればお問い合わせください』かな。

中村:そうそう。『また機会があれば』は必ず入れます。

高津戸:でも、金曜日に問い合わせがきて『月曜日までに』というようなお問い合わせには、単に『できません』とお断りすることもあります(笑)。

中村:そういうお問い合わせは、メールに気づいていればすぐお返事するんですけど、金曜日の夜中にいただいていたりすると、気づかないこともあるんですよ。特に、土日外出していたりする場合。すると、『月曜までに』と言われているけれども、月曜日にお断りのお返事をしたりすることはあります。

電話の依頼とメールの依頼

——常にギリギリのスケジュールで動き、深夜にガンガン活動するクライアントとは、結果的にご縁がないんですね。

中村:まあ、そうかもしれません。でも、そういう急な仕事を受けるのが得意な会社もあるようですよ。特急でやってくれるけれども、ものすごく高いっていうところはあるみたいです。

高津戸:そうですね。

坂巻:そういうところの仕上がりがちょっと怖い気もするけど(笑)。

中村:普段はヒーローみたいにずっと待機してて、急ぎの案件がきたら、ものすごい力を発揮する(笑)。

全員:(笑)

——受注が決まるまではメールでやり取りすることが多いんですか?

中村:だいたいそうですけど、知り合い経由のはFacebookとか別のチャンネルできたりしますね。会社の電話にくる新規のクライアントからのお仕事の相談は、ほぼお受けすることはないです。電話番号のところに『ここではお仕事の話は受けません。メールでお願いします』って明記しているのに、それでも電話をいただくんですよね。

——『仕事の話は受けない』っていうところに、あえて電話をするというのは……。

中村:そう、ちょっと相性悪そうですよね。そういうクライアントは、文章を読みもしないってことなので……。だいたい、そういうふうに新規のクライアントで、わざわざ電話でご相談をいただくのは、スケジュールに余裕のない急ぎの案件をやっている制作会社さんが多いんです。

——ああ、なるほど。

中村:メールでいただく場合は、案件自体が長期に渡るもので、スケジュールにもある程度余裕があって、予算もあり、もろもろちゃんと考えているものが多いです。だから、そもそも電話でお話をいただくものを全部お断りしても、なんとかなるんです。

小原:急いでると電話は早いですからね。強制的に対応させて、その場で返答をもらおうとすることができるから粘れるんですよね、相手の時間に割り込んで。

中村:そういうクライアントは案件が始まっても、おそらく、そういう仕事スタイルじゃないかと思うのです。

高津戸:まあ実際に受注が決まって、プロジェクトが始まってからなら、電話での連絡もしょっちゅうありますけどね。

中村:そう、プロジェクトが始まってからの電話連絡はあるよね。連絡が早いし。だから、必ずしも『電話はダメ』っていう話ではないんです。

高津戸:まあ、電話が窓口じゃないから、いちいちオフィスにいて電話をとらなきゃならないってことがないのはいいんですけど(笑)。

——そうやって、問い合わせを受ける段階で、クライアントとの「相性のよさ」がわかるようになっているんですね。

中村:うん、そうですね。相性ですね。

高津戸:ピクセルグリッドはそんなに大きな会社じゃないし、秘書みたいな人もいないので、まあメールでいいんじゃないかという気はします。

受注後のコミュニケーション

——案件を受注してからのコミュニケーションはどうでしょうか?

中村:必ずではないんですが、Besecamp*でやり取りができるといちばん案件がスムーズに進んでいるかなと思います。

*注:Basecamp

Basecamp」とはCodeGridで数回紹介しているプロジェクトマネジメントツール。ディスカッション、ToDo、カレンダー、ファイルアーカイブなどの機能が、コンパクトにまとまっています。Web、スマートフォン、メールベースでのやり取りが可能。

坂巻:僕はBesecampを使ったことがなかったので、すごく新鮮でした。受託の案件をあまりやっていなかったので、まったくそういうの使ったことなかったんですよ。個人的にRedmine*を使ってたくらいで。

*注:Redmine

Redmine」とは、Basecampと同じプロジェクトマネジメントツールの一種です。

高津戸:へー、そうなんですね。

小原:Redmineも会社全体で使っていたんじゃなくて、自分で使ってたんだ。

坂巻:僕と僕の作業に関わる人に使ってもらってたって感じですね。Excelなどでいろいろなことを管理するのが面倒だったので。クライアントと直接連絡を取ることはなかったです。

——ピクセルグリッドでは営業がいないので、エンジニアが直接クライアントと連絡をとるわけですよね。

高津戸:もはや当たり前のことなんですけど(笑)、メールだとやはり量が多くて、見逃したりするんですよ。でも、プロジェクトマネジメントのツールを使うと、プロジェクトごとにログが保存されているので、「あのときやったのはなんだっけ?」とか、「誰にメールを出せばいいんだっけ?」みたいのも全部わかるから便利です。

中村:あとクライアントから送られてきた添付ファイルどこいったっけ?っていうのもないです。Besecampにファイルがアップされていると、探す必要もなくなるし……。

高津戸:あー、そうですね。

中村:途中からプロジェクトに入ってきた人がいても、Basecampに入ってもらえれば、これまでのやり取りはこうなっていて、各ファイルはここにあって……という具合に、すぐに把握できるようになっていますね。

プロジェクトごとにディスカッション、ToDo、ファイル、テキストドキュメントなどが一覧できる。

——Besecampにはクライアントも入っているんですか?

中村:はい。クライアントも招待して、そこにすべてのやり取りが書かれているようにすると、いちばんやりやすいです。

——エンジニアもクライアントもBasecampを見て確認したりするんですね。

中村・高津戸:そうですね。

——そういうツールって、クライアントにとっては、使うの難しかったりしませんか?

中村:そうでもないですよ。

小原:ログを見るだけなら、ぜんぜん難しくないです。

高津戸:Basecampに書き込みすると、メールが飛ぶんです。そのメールに、普通に返信すれば、自動的にWeb上のBasecampにも反映されるんですよ。

中村:そうそう。Webに書き込みやファイルアップロードしなくても、メールベースのやり取りでBasecampにそれがログとして残るんです。

山田 敬美:えっ! メールに返信したら、サイトに書き込まれるんですか。知らなかった(笑)!

全員:(笑)

Basecampはどうやって使う?

——もうちょっとBasecampの使い方を具体的に聞きたいんですけど、Basecampにはどういう項目立てをして管理しているんですか?

中村:掲示板に近いので、スレッドを立て、そこにログが追加されていくという感じですね。僕が便利だなと思って、よく立てているのが「デザイン進行状況」っていうスレッドです。そこにデザイン関連のやり取りや、素材をまとめていくんです。そうすると、デザインの変遷が時系列に並ぶ。あとは、プロジェクトごとに関連する資料のファイルってたくさんあると思うんです。例えば、クライアントがスケジュールをExcelで管理していたら、「スケジュール」っていうスレッドを作って、そこにExcelファイルを集めていくと便利です。

高津戸:そのスレッドを誰かが更新すると、全員にメールが飛ぶっていう仕組みなので、掲示板みたいな、そういう感覚ですね。

小原:それから平行して、いくつかの話題について担当者間で議論している場合には、スレッドごとに分けておいて、その話題に関係ない人には、コメントが書き込まれた更新のメールが飛ばないように設定することもできるんですよ。こうすると、自分に関係のないメールを読む時間も省けるんです。例えば、クライアントに提示する前の内部的議論もBasecampの上でするけれども、それはクライアントには送らないでおいて、詳細が決まった時点で、別のスレッドを立てて、クライアントに提示するっていう使い方もできます。

——クライアント側でも内部でいろいろ担当者が分かれていることもあったりするんですよね。

高津戸:そうです。そうです。

中村:担当が分かれているってことは、実務も分かれているはずなので。

小原:例えば、プロジェクトに先方の社長と、窓口となっている実務担当の方が入っているとすると、契約関係の更新は、社長と、実務担当の人、双方に飛ぶ。けれども、実務での細かい話のメールは、社長へは飛ばさないとかね。

中村:そうそう。でも社長もBasecampのサイトにアクセスすれば、やり取りのすべては見られる状態にはなってます。

高津戸:あとはToDoリストが作れるとか、そういったちょっとした便利な機能の詰め合わせになってます。

いくつかの項目を立て、ToDoリストを作成することができる。

——実際のミーティングの議事録なんかも?

高津戸:ああ、そういうのもありますね。

中村:そうですね。

小原:実際の経験では、APIの仕様のシェアが便利でした。とある案件で、先方がサーバーのAPIの仕様書を持ってないということで、こちらでよもつ(小山田)さんができる限り仕様を調べたドキュメントがあったんです。それをBasecampで残してもらえると、あとからプロジェクトに入ったほかちゃん(外村)が、それを見るだけで、このAPIの仕様だけでは足りないと、不足点がすぐわかったりしました。

働き方を支えてくれるコミュニケーションツール

小山田:テキストエディタとかでメモを取るじゃないですか、そうするといつのまにかゴミ箱に入っていたりするし(笑)……。

全員:(笑)

小山田:なので、プロジェクトに関連するものは、とりあえずBasecampに集約しておきます。そうしておけば、ほかの人も見られますし。すると、自分のマシンの中は、純粋に開発に使うリポジトリがあるだけというきれいな状態ですね。その他のスケジュール表とか、デザイン用の素材は、みんなBasecamp上にあるので、必要になったらダウンロードしてくればいい。プロジェクトが終わって、不要になったらローカルにあるものは、全部捨ててしまうこともできる。捨てたとしても、Basecampにはあるので、必要になったらまたダウンロードすればいいから。

——なるほど。

小山田:ほんとに、超きれいですよ。リポジトリ内のデータはGitのリモートにあるし、素材はBasecampにありますし。

山田 敬美:マシンにお茶こぼして、しばらく使えなくなっても、仕事のデータは大丈夫でした(笑)。

小山田:だから、たぶん、今みたいな『どこで仕事してもいいですよ』っていう働き方ができるのかなって思います。

アップロードされたファイル一覧があり、ここからダウンロードして共有することができる。

議事録やメモなどをまとめておくこともできる。

Basecampが使えない場合は?

高津戸:でも、大きな企業になると、取り決めでBasecampのような外部のサービスをプロジェクトで利用してはいけない、っていう規約もあったりします。そういうクライアントとは、基本、メールでやり取りしてます。

——対クライアントではメールでやり取りをし、内部的にはその情報をBasecampで共有するというパターンもありますか?

高津戸:ああ、そうですね。そういうパターンもあります。

中村:ありますね。それをクラウドNGのクライアントと共有することはないですけど。

——チャットでのやり取りはどうですか?

坂巻:僕、ここに入るまえは、クライアントとチャットでやり取りしているのかなあ、って思ってたんですよ。でも入社してみたら、チャットあまり使わないですよね。

外村:以外と少ないですよね。確かに。

中村:クライアントの社内文化にもよるので。

高津戸:クライアントの中でも、制作をヘビーにやっている方だと、Skypeなどのチャットは自然かなと思うんですけど、それ以外の人はあまり使わないからですね。

クライアントのリテラシーは大丈夫?

——ピクセルグリッドが受ける案件としては、プロダクトオーナーから発注を受けた同じ制作系の会社さんからの孫請けが多いのか、それともプロダクトオーナーからのダイレクトな発注が多いのか、どちらなんでしょう?

中村:両方ありますけど、最近はプロダクトオーナーからのダイレクトな発注の方が多いような気がする。

高津戸:仕事を受ける段階が何段階もあるので、いちばんのおおもとではないですが、比較的プロダクトオーナーに近いところからの発注が多いかもしれません。

——制作系だとそれなりにツールを使うリテラシーもエンジニアレベルだと思うのですが、プロダクトオーナーに近いと、ツールのリテラシーはそこまで高くないこともありそうです。そういった相手のリテラシーを考えて、Basecampを使っているんですか?

高津戸:いや、Besecampにとりあえず登録はしてもらっているけど、やり取りは結局、メールだけって場合もたまにあります(笑)。

小原:そもそも、相手のリテラシーを最初には考えていなくて、とりあえずBasecampに登録してくださいってお願いしていますね。

高津戸:まあ、それでもクライアントにメールは飛ぶので問題ないです。

小原:そうですよね。登録した後、クライアントが使うかどうかは、クライアント次第という部分はあるのかな。

中村:ピクセルグリッドのサイトって、専門用語をわざと使っていたりして、そういった知識がないと、お問い合わせまでたどり着きにくいんです。なので、サイトから直接問い合わせがくる場合は、すでにそれなりに業界のことがわかっていて、リテラシーが高い企業からの問い合わせがほとんどです。だからその点では、問題ないと思っています。

高津戸:ピクセルグリッドがJavaScriptが得意な会社だと認識してもらっているので、確かに、あまり技術的なことに詳しくないところからの発注ってこないです。開発を請け負った制作会社から、JavaScript部分だけの発注がくるというパターンが、けっこう多いですね。だから僕たちからすれば、仕事がやりやすい、ありがたいクライアントが多いです。

——なるほど。

中村:危険なのは、ある程度リテラシーが高い会社経由で話がきて、途中で、その紹介してくれた会社がプロジェクトから抜けて、ダイレクトにやり取りをすることになってしまった場合ですね。リテラシーが合わなくて困ることもありました(笑)。

(次回へつづく)

まとめ

第1回目はクライアントとのコミュニケーション方法や、ツールに焦点をしぼった話になりました。話に出てきたことを簡単にまとめておきます。

まとめ

  • キャパシティが多くない場合は、自社が得意とする案件を受ける。
  • 問い合わせの段階でクライアントとの相性がわかることもある。
  • 受注後はクライアントとBasecampを中心にコミュニケーションを取り、プロジェクトに関わる資料や議事録、クライアントとのやり取りなどのログを一元管理する。
  • クライアントの事情に合わせて、メールでやり取りをするなど柔軟な運用をする。

次回は、案件を受注するまでに明らかにしておきたいポイントをテーマにお届けします。

中村 享介
PixelGrid Inc.
Jamstackエンジニア

2009年、JavaScriptの会社として株式会社ピクセルグリッドを設立。 多数のWebリニューアル、新規立ち上げを取り仕切った経験を持ち、情報設計、フロントエンド、クラウド活用、開発フローの効率化を得意とする。 Webをより発展させるため、新しくブラウザに実装された機能の活用事例を数多く生み出しつつ、日々、クラウドサービスを利用した効率のよい制作・開発手法の試行錯誤を続けている。現在の興味はWeb Componentsを使ったマークアップの改善とJamstack。 著書に『WebクリエイティブのためのDOM Scripting』(単著:毎日コミュニケーションズ、2007年)など。ここ数年は書籍の執筆をせず、フロントエンド技術情報メディア「CodeGrid」で精力的に執筆活動を行っている。

高津戸 壮
PixelGrid Inc.
テクニカルディレクター

Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。 著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社、2014年11月14日)がある。 CSS Nite 2011ベストセッションにおいて、全170セッションの中から、ベスト10セッションに、CSS Nite 2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。

小山田 晃浩
PixelGrid Inc.
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP(Developer Technologies)を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。

外村 和仁
フロントエンド・エンジニア

HTMLコーダー、JavaScriptプログラマ、PHP、Perlのプログラマといった職務を経験後、2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用、開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。2015年、退社。好きな言語はJavaScriptとRuby。 著書に『ノンプログラマのためのJavaScriptはじめの一歩』(単著:技術評論社、2012年11月7日)があり、共著も多数。このほか、WEB+DB PRESS、Software Designなどにも寄稿。

外村 奈津子
PixelGrid Inc.
編集

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。

山田 順久
フロントエンド・エンジニア

HTML・CSSのコーディング、後にJavaScriptの設計や実装を主業務として経験を積む。キャンペーンサイトやコーポレートサイトの、動きと操作性に工夫を凝らしたUI実装を多く手がけている。複雑なWebアプリケーション実装における、コンポーネント的な考え方を念頭においたJSの設計を得意とする。2021年、退社。 著書に『JavaScriptエンジニア養成読本』(共著:技術評論社、2014年12月11日)がある。

小原 司
PixelGrid Inc.
UIデザイナー

紙媒体をメインに制作しているデザイン事務所で広告デザインの基礎を学ぶ。2000年に独立。化粧品関連媒体の販促物を中心に、店頭グラフィック、パッケージ、POP、グッズ立案など多岐にわたるデザインを担当。2007年頃からWeb媒体へのデザインにも積極的に取り組み、クロスプラットフォームアプリのデザイン、画面設計、実装に携わる。2013年にピクセルグリッドに入社。現在では利用者にストレスを与えず迷わないユーザーインターフェースの設計とデザインに励んでいる。 著書に『ノンデザイナーズ・デザインブック[第4版]』(日本語版補足解説:マイナビ出版、2016年6月30日)などがある。また、マンセル色相環とムーン&スペンサー配色理論を採用した配色アプリ『HUE360』を1人でデザインから開発まで行い公開している。

山田 敬美
フロントエンド・エンジニア

Web制作会社、自社サービス運営会社などでサービス企画、マークアップ・エンジニアの経験を積むも、退職して1年間専門学校に通う。プログラミングの基礎を学んだのち、2013年4月、ピクセルグリッドのフロントエンド・エンジニアとして入社。CSSの設計を得意とするが、JavaScriptも好き。2019年、退社。 著書に『Sass入門 ~より効率的なCSSコーディング』(共著:技術評論社、2012年10月19日)や『CSS3デザインブック 仕事で絶対に使うプロのテクニック』(共著:MDN、2012年3月21日)などがある。

坂巻 翔大郎
PixelGrid Inc.
フロントエンド・エンジニア

大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。

Xにポストする Blueskyにポストする この記事の内容についての意見・感想を送る

全記事アクセス+月4回配信、月額880円(税込)

CodeGridを購読する

初めてお申し込みの方には、30日間無料でお使いいただけます