- CODING FACTORY TOPICS
- Vol.121 2018年11月号
ここ２年くらいの間で、制作の現場にどんな変化があったのかを洗い出し、考察をしてみました。
インプットシートの活用で制作をスムーズに
コーディングファクトリー（以下CF）では、昨年7～8月にかけて、『速く正確なWeb制作のために現場で本当に必要なことは何か？』というセミナーを開催しました。
セミナーでは、Webの制作現場を取り巻く環境の目まぐるしい変化、制作内容の多様化、それによる役割の細分化・分業化といった複雑な状況にどのように対処していけばよいか、をテーマにひとつの提案をしました。それが「インプットシート」の活用です。
プロジェクトで最も重要なことは、クライアントの実現したい要件（上流工程のアウトプット）と、その実装に必要な情報（下流工程のインプット）が、各工程で適切に紐づくこと。
インプットシートは、そのために必要な確認すべき仕様や素材、情報を洗い出した、言わばカルテのようなものです。シートの項目に沿って、仕様の確認や認識の擦りあわせができれば、誰もが迷うことなく、安全に制作を進めることができるのではないか、と考えたのです。
実際に、セミナーにご参加いただいた方からも、その効果について嬉しいご報告をいただいています。「何はともあれ、インプットが肝」このインプットシートがあれば、八割方のことは解決するのではないか、と思っていました。
予定工数と予算／予定工数と実績工数が合わない
しかし、それでも概算見積りの予定工数とお客さまのご予算が合わない案件や、予定工数と実際に制作がはじまってからの実績工数が合わない案件が、間々発生しました。
ヒヤリングはしっかりできているはずなのに、当初の想定と実際の着地点がなぜ大幅にずれてしまうのか。なぜ予算と合わないのか。
その疑問を解消すべく、今現場では何が起こっているのか、制作現場の変化を洗い出し精査し、中でも特に制作工数に影響が出る項目を表にしました。
| レスポンシブ（RWD）制作初期 （2014～2016） |
現在 （2017～2018） |
カテゴリ | おおよその追加工数 |
|---|---|---|---|
| SPとPCの切替は、リロード時の挙動のみの保証で十分だった。 | ブラウザをリサイズした際、SPとPCのレイアウトが崩れないリキッドレイアウトのサイトが多い。 | 仕様 | 1時間～ |
| SPとPCのRWDの場合、タブレット対応はあまり行っていなかった。 | SPとPCのRWDの場合でも、タブレットでPCレイアウトが収まるのが一般的な仕様。 | 仕様 | 2時間 |
| RWD制作初期は、複雑なレイアウトの案件がなかった。 | ブラウザがサポートするCSSやJSの拡大、UI/UXの成熟で、複雑なレイアウトの実現が求められる。 | デザイン | 1.2倍 |
| アニメーションやパララックス（視差効果）の実装は少なかった。 | 部分的にアニメーションや視差効果を実装することがよくある。 | デザイン | 2時間～ |
| ユーザーの環境にないであろうフォントは、テキスト画像で対応。 | Webフォントの実装が多い。テキストはデバイスフォントで実装。 | フォント | 1.2倍 |
| フォントサイズは、pxや%での指定が多い。 | vwなどビューポートの幅に合わせてフォントサイズを変える仕様も増えてきた。 | フォント | 2時間～ |
| PhotoshopかIllustratorでの入稿がほとんど。IllustratorはPSDに変換して対応。時々Fireworks（PNG）がある。 | 左記に加え、Sketch、XDでの入稿が増えてきた。 | ツール | 1.2倍※ |
| タスクランナー、プリプロセッサ、テンプレートエンジンは使用していなかった。 | gulp、Sass、gitはほぼ利用する。EJSやpugを使う案件が時々ある。またクライアントの制作環境を引き継いで対応することがある。 | ツール | 1人日～ |
| コーディングガイドラインはCFのガイドラインを使用することが多い。 | BEMやFLOCCS、SMACCS、OOCSSなど、CSS設計や独自のガイドラインを指定されることが多い。 | 仕様 | 1人日～ |
| 高解像度（Retina）対応はSPのみ行っていた。 | PCモニターのスペック向上で、PCでも高解像度対応を求められることがある。 | 仕様 | 1.2倍 |
| アクセシビリティの対応はなかった。 | アクセシビリティ適合レベルA、AA、AAAの対応を求められることがある。 | 仕様 | 2倍 |
| 入稿～納品まで、制作フロー（主にウォーターフォール）から大きく外れることはない。 | 案件ごとに制作フローが大きく異なる。 | 仕様 | 1.5倍 |
| 仕様やデザインがコーディング着手時に確定している。 | 仕様が未確定で、プロトタイプ作成後に、デザインを変更・調整しながらすすめることがある。 | 仕様 | 2倍 |
洗い出し精査から見えてきたこと
各項目を眺めてみて、以下の3つのポイントが見えてきました。
（１）変数の多さ（主に、ツール・仕様）と、落とし込みまでのプロセスの変化
Webサイトの目的は単なる情報発信だけではなくなり、機能・規模が多種多様になってきました。それによって、仕様もさまざまになり、開発内容にあわせたツールも数多く出現してきました。そんな中で、個々のサイト制作に最適なツールの選定や仕様の策定をするためには、テクニカルな知見やスキルだけでなくつくりたいもの・やりたいことが何なのかというニーズの理解と、数多くの可能性の中から最適な構成を組み合わせて提案・調整するテクニカルディレクションの稼働と落とし込みまで、そのコミュニケーションが重要になっており、実際そこに多くの工数が割かています。
（２）デザインの再現・調整の変化
CSS3＋Webフォントの普及によって、画像切り出しではなく、CSSでデザイン再現できる領域が広がりました。また、UI/UXの成熟によって、複雑なRWDのレイアウトの画面が増えてきました。
レイアウトをCSSで細かに調整することになったので、RWD初期に比べて2割くらい制作工数が膨らんでいます。それにより、CSS制作に高いスキルが求められるようになりました。
（３）デザイン・仕様書だけでキャッチアップしにくいものが増えたことによる、制作フローの変化
（２）のようにスタティックな表示だけでなく、モーションやインタラクティブな機能実装、さまざまな画面幅やデバイスに合わせて表示が最適化されるようなつくりになってきました。
モーションはデザインや仕様書で正確な動きのイメージを伝達しにくく、機能実装や画面幅による最適化表示は、仕様が複雑になってきていて、作りながらお客さまの考えるイメージとすり合わせて調整していく必要があります。
さらに、作ったものを実際にさまざまな画面幅や条件で表示検証してみると、詳細な仕様が詰められていなかった点や不具合があぶりだされてきます。それらをひとつひとつ調整しながら完成度を上げていきます。
RWD初期までのウォーターフォール型（上流過程できっちり仕様を固めて、制作現場はその仕様通りに実装を進めていく）制作フローではなく、上流で基本仕様は詰めつつ、詳細は作りながらすり合わせ・調整をしながらFIXしていくような、ビルドアップ的な制作進行が主流になってきています。
RWD初期に比べて、高いフロントエンドのスキルが求められているのはもちろんのことなのですが、提案調整をしながら制作を進めていくテクニカルディレクションスキルやコミュニケーションスキルも必要（必須と言っても過言ではない）になってきた印象があります。
このように、実制作工数だけでなく検証工数やコミュニケーション工数も膨らんでいることや、スケジュールという面でも完成までの時間がかかっていることがわかりました。
今後の課題
図1：制作フロー例
まず、役割が分業化・細分化して専門性が求められている一方で、最適な提案や実装調整を行うためには、担当している専門分野の情報だけではなく、プロジェクト全体像も俯瞰して把握しておく必要があるという点。
もうひとつは、分業化・細分化した関連セクションと連携をとるために、コミュニケーションが多く必要になっているのに、それに対するスキルや工数が評価されにくい、つまり、やりにくさは認識しやすいが、やりやすさは認識しにくい、という点です。
制作内容の複雑化・多様化、役割の細分化・分業化・専門化が進んできたからこそ、
- ①専門性をより深め充実すること
- ②プロジェクト全体を俯瞰し、プロジェクトの流れや各領域の状況を理解すること
- ③コミュニケーション力＝専門領域とプロジェクト内の関連領域をつなげ、まとめる力
この3つの要素とそのバランスが重要なことがわかりました。（図１参照）
それぞれの要素自体は基本的なことではありますが、どれかひとつが欠けても、プロジェクトは上手く進みません。それらがバランスよくできるようになるほど、『速く正確で効率よくニーズに最適なWeb制作』に繋がるのだと思いました。
これらを念頭におきつつ、「工数の見える化」「サービスの仕組」「スキルアップ教育」等々について今一度見直し、サービスの改革を進めていきたいと思います。
