「え、うちのWeb制作ワークフロー無駄が多すぎ！？ Web制作実務を改善する未来のワークフロー」2015年4月10日開催 第８回東北セミナー 第2部 イベント報告
- 掲載日：2015年5月25日（月）
Webの進化にともない、Web制作の実務が10数年で大きく変化する一方、広告主側のワークフローはさほど変化していない。双方のギャップを埋め、より効率的に仕事を進めるためには、現状を理解することが必要だ。東北セミボラ第二部では、フリーランスでWebの制作や教育などに取り組む、こもりまさあき氏が「制作実務ワークフローの変化 ～効率化によってもたらされるメリット」と題して解説した。
大きく変化するWeb制作を取り巻く環境
こもり まさあき氏
この数年、Web制作を取り巻く環境は大きく変化している。まず、モバイルデバイスの台頭がその1つだ。Webサイトのモバイルアクセスが急増しており、スマートフォンやタブレットなどのスマートデバイスの種類も増え続け、いまやAndroidデバイスだけでも世界で1万8,000種類が存在している。Webの閲覧環境が多様化し、PCだけでなく、スマートデバイスから見ることが一般的になってきているのだ。また、同じ人がPCやスマートフォンなどの複数のデバイスを使って情報にアクセスすることも一般的となっている。
閲覧デバイスや接触ポイントが変わってくると、利用者の行動も変わってくる。モバイルが普及した今、コンテンツは屋内で消費されるとは限らない。いつでも、どこでも情報を検索できるため、利用者の状況に応じてコンテンツを出し分けていくことが重要となる。
これまでのWebは、いわば静的なカタログのようなものだったが、たとえば位置情報と組み合わせてユーザーがいる場所に応じた広告を出すなど、状況に合わせてコンテキストファーストで考えなければならないと、こもり氏は説明する。
これに対してWeb制作の現場では、デバイスの多様化による画面サイズや画像数の増加など、さまざまな対応が求められ、制作時間も増加してくることになる。加えて、リアルタイムなコンテンツ露出やビジネススピードへの対応が求められているのも現状だ。このような変化に対して、今までのやり方で対応できるかを考えなければならないと、こもり氏は従来のワークフローの問題点を指摘していく。
ワークフローを見直して関係者全員で意識を変える
一般的なWeb制作のワークフローとして、以下の図を示したこもり氏は、さまざまな会社や人とWeb制作を行う上では、決められたワークフローで作業せざるを得ない場合もあるが、個々の行程や全体の流れを見直すべき箇所があるはずだと説明する。 
「企画・情報構造設計・ワイヤーフレーム」「デザインラフ作成・確認」「モックアップ作成・確認」「実装・検証」の各工程で改善点があるという
制作現場では、「データが届いてない」「どれが最新ファイルかわからない」「作ったけど動作しない」「勝手にファイルを差し替えられた」などの問題が発生しがちだが、このような諸問題に対応するのは時間の無駄で、人が動けばコストがかかるとこもり氏は指摘する。
これらの問題は改善できる種類のもので、制作ワークフローを見直すことで対応コストを減らすことができる。たとえば、メールで複数の人間がデザインカンプをやり取りしていると、担当者の出張などで予定通りに進まない場合などがあるが、PCメールではなく、スマートフォンで確認できるような仕組みを考えれば、これらの時間のロスを防ぐことができる。これまで何の疑問も持たずに続けてきたフローにも改善の余地があり、新しいワークフローを考えて試す価値がある。
ワークフローを変えようとすると、「これまでコレでやってきたから」という意見がでてくることもあり、簡単には実行できないが、これらはサンクコスト（埋没費用）でしかない。制作内容が変化して便利になっているなかで、古いやり方にこだわり続けるとコスト高になるとこもり氏は説明を続ける。
また、複数の会社や人が関わるWeb制作においては、制作実務に携わる人だけでなく、プロジェクトに関わる全員が意識を変えなければ、古いやり方にこだわる一部の会社や人がボトルネックになってしまう。クライアントなども含めて、協力しなければならない。
ワークフローを効率化するサービス群
続いて、こもり氏はワークフローを効率化させる具体例を示していく。ワークフローの効率化といっても、既存のWebサービスを利用するだけでもある程度は改善できるため、構える必要はない。
たとえば、データ受け渡しの改善では、「Git」などのバージョン管理ツールを使えば、誤ってファイルを消去しても簡単に以前のバージョンへ戻すことが可能だ。Web制作だけでなく、職種を問わずにだれも恩恵を受けられる。
バージョン管理ツールの「Git」。GoogleやFacebookなどでも利用されている
「Git」はもともと技術者が利用していたものだが、ドキュメントを扱う上で非常に便利なので、現在はさまざまな人が使うようになっている。最初は面倒だといっていた人も、次第に手放せないツールだと感じるという。更新したファイルをボタン1つで転送する機能なども省力化につながり、デザイナーが多く利用する大容量ファイルなども利用できる。
進捗を見える化してコミュニケーションコストを削減
コミュニケーションコストを削減するためには、プロジェクト管理ツールやコミュニケーションツールの導入が有効だ。メールを送った、届いていないといったトラブルを回避し、プロジェクトに関連する情報やファイル、全体の進捗状況などをこれらのツールで見える化するのだ。
代表的なツールとして、国内サービスの「Backlog」をはじめ、制作側とクライアント側でアクセス権を設定できる「Basecamp」、デザイン制作に向いた「Brushup」などを紹介したこもり氏は、一概にどれが一番良いとはいえないが、プロジェクトや会社のやり方によって適したものを選ぶことができると説明する。
3000社以上が利用するプロジェクト管理ツール「Backlog」
また、チャット系のコミュニケーションツールとして、「ChatWork」「Slack」「Glip」なども紹介された。
これらのツールは無償版も提供されているため、実際に試用してから有償版に乗り換えるのがおすすめだという。 
PCブラウザのほか、スマートデバイスでも利用できる「ChatWork」
プロトタイプをリアルタイムに共有
これまで画像ファイルなどでやり取りしていたプロトタイピングも、オンラインのプロトタイピングツールを使いリアルタイムに共有することで、時間的なコストを削減できる。オンライン上であれば、同じファイルを見ながら直接修正指示をコメントで入力できるようになる。
代表的なツールとしては、「Invision」や「UXPin」が紹介された。
Invisionではデザインスケッチをオンラインで共有し、画面を見ながらフリーハンドで書き込んだりコメントしたりできる
共同作業を進めるための環境構築
同じ制作環境を共有できる仕組みを導入することも、業務効率化において重要だとこもり氏は続ける。バージョン違いが原因で発生する問題を防ぐことができるからだ。
プロジェクトスタート時の環境準備には手間がかかるが、たとえば、node.jsのパッケージ管理ツールである「npm」、Ruby用のパッケージ管理ツールの「Bundler」、サーバー環境を共有化できる「Vagrant」などを利用することで、個別のソフトウェアをインストールすることなく、同じ環境を構築できる。
プレビューやテスト環境を制作会社とクライアント企業、どちらが用意するかというのもありがちな問題だ。場合によっては、数週間の稟議を待つ必要もあるが、こうした状況を改善するには、クラウド系のサービスが有効利用できる。クラウドサービスであれば、数百円、数分のコストで環境を構築することも可能だ。必要がなくなればすぐに手放せるので、ホスティングを利用するよりも大幅にコスト削減できる。
手元で制作している環境をリモートで閲覧してもらうこともできる。テストサイトを立ち上げて作っている様子を、クライアントのオフィスから確認してもらうのだ。「BrowserSync」では、同じネットワーク上の端末でブラウザを同期して確認できるため、複数台のスマートフォンで同時にテストすることも可能だ。この他にも、ローカルサーバーのファイルに外部からセキュアに接続できる「ngrock」などを使えば、実際のファイルを確認してもらうこともできる。
また、クラウドサービスとしては「AWS」や「Microsoft Azure」などが代表的だが、こもり氏は「DigitalOcean」や、HTMLアプリケーションのテストに便利な「DIVSHOT」などのサービスも紹介した。
環境の変化をとらえれば仕事がしやすくなる
コラボレーションしやすい環境作りは、プロジェクトによって異なるため一概にベストな方法がどれかとはいえない。しかし、内々にこもりすぎた制作環境やワークフローを使っていては、外注などが行いにくくなってしまう。ときには間口を広げて外部サービスなどを有効活用し、柔軟かつストレスのないコラボレーションワークを行うことが重要になると、講演の最後、こもり氏は次のように話した。
「環境の変化を捉えて、未来に備える準備をしてもらいたい。既存のワークフロー上の無駄の多くは減らすことができる。最新のワークフローを使えば、仕事もスムーズになるので、面倒などと考えず、過去のサンクコストにこだわらずに新しいモノに取り組んでもらいたい」（こもり氏）
第８回東北セミナー 第1部レポート
(C)2015 Web Advertising Bureau. All rights reserved.
※このコンテンツを利用して直接の対価を得るのでなければ自由に利用いただいてかまいません。
この作品は クリエイティブ・コモンズ 表示 - 非営利 - 継承 2.1 日本 ライセンスの下に提供されています。