ディレクション
投稿日:

Web制作会社との付き合い方 ─ コーディング会社の営業が見た”良い関係づくり”の本質

株式会社ファストコーディングで営業を担当しています長谷川と申します。お客様とお話ししていて気づいたことや、フロントエンド開発・コーディング制作界隈で最近流行っていることを書いていこうと思っております。どうぞ宜しくお願いします。

「制作会社を変えたい」という相談が増えている

最近、こんなご相談をいただくことが増えました。

「今のWeb制作会社に不満があるわけではないのですが、もう少しうまく付き合える方法ってないでしょうか」

実際には、「変えたい」の前段階の相談です。不満が言語化できるほど明確ではないが、なんとなくしっくりこない。修正依頼を出しても思った通りにならない。レスポンスが遅い気がする。でも、制作会社を変えるのはリスクが大きいからできれば避けたい。

私は営業として、発注する側と制作する側の両方の事情を見てきました。その経験から言えることは、制作会社との関係がうまくいかない原因の多くは、技術力の問題ではなく「コミュニケーションの構造」にあるということです。

しかも、フロントエンド制作の現場では「デザインカンプに書いていない情報」が非常に多い。そこがズレの温床になっています。今回は、制作会社との付き合い方について、コーディング会社の営業視点からお話しします。

「丸投げ」が失敗する構造的な理由

お客様からよくこう言われます。

「プロなんだから、任せておけばいいものができるでしょう?」

お気持ちはよくわかります。ただ、Web制作は建築と似ていて、「住む人の生活パターン」がわからないと良い家は建てられません。

丸投げが失敗しやすいのは、以下のような構造が原因です。

丸投げの項目制作会社が判断すること起きやすい問題
ターゲット制作会社の想定で決める実際の顧客層とズレる
優先順位制作会社の判断で決める事業として重要な情報が埋もれる
文章の方向性ライターの裁量で決める社内で「うちの言い方じゃない」と差し戻し
デザインのトーンデザイナーの解釈で決める「イメージと違う」で何度もやり直し

逆に言えば、「ターゲットはこういう人」「一番伝えたいのはこれ」「文章のトーンはこの既存ページに合わせて」という情報を事前に伝えるだけで、制作物のクオリティは大きく変わります。

フロントエンド制作会社だからわかる”指示漏れ”の実態

ここからは、コーディング会社の営業として日々目にしている、もう少し踏み込んだ話をします。

デザインカンプは静止画です。しかし、Webサイトは動きます。ブラウザの幅が変わります。ユーザーがマウスを乗せます。タップします。スクロールします。この「動く部分」の指示が、カンプには書かれていないことが非常に多いのです。

弊社のコーダーに聞くと、「カンプに指定がなくて自分で判断している」項目として、以下のようなものが挙がります。

カンプに書かれていないことコーダーが判断していることズレが起きやすい場面
768px〜1024pxの表示タブレット幅でのレイアウト崩れの調整「スマホとPCしかカンプがない」と言われる
ホバー時の挙動ボタンやリンクのhover色・アニメーション「なんか安っぽい」とフィードバックが来る
フォーカス時のスタイルキーボード操作時の枠線・ハイライトアクセシビリティ対応で後から追加要請
テキストが長い場合の折り返し2行になったときの行間、3行の場合の省略実データを入れると崩れて差し戻し
アニメーションの速度・イージングトランジションの秒数、ease-in-outかlinearか「もうちょっとゆっくり」の繰り返し
Figmaの影とブラウザの影の差box-shadowの値をブラウザで目視調整「カンプ通りに作ったのに違う」と言われる

これらはデザイナーの怠慢ではありません。Figmaという静止画ツールでは指定しにくい情報だからです。

お客様にお伝えしているのは、「デザインカンプは設計図の7割です。残り3割はコーダーが判断しています。その3割を事前に決めておくと、やり直しが激減します」ということです。

デザイントークンの共有が効果的

最近増えているのが、デザイントークン(色・フォント・余白・角丸などのルール一覧)を制作会社に共有するケースです。Figmaのスタイルガイドをそのまま渡していただくだけでも効果があります。

たとえば「見出しのfont-sizeは32px、本文は16px、行間は1.8」「ボタンの角丸は8px」「メインカラーは#2563eb、テキストは#111827」のように。これがあると、カンプに指定がない箇所でもコーダーが一貫した判断を下せます。

ある案件で、お客様がFigmaのスタイルガイドを最初に共有してくれたことがありました。弊社のコーダーによると、そのプロジェクトでは修正の差し戻しが通常の3分の1以下だったとのことです。

成功する発注者の3つの特徴

特徴1:確認が早い

制作会社が最も困るのは「確認待ち」の状態が長く続くことです。フロントエンド制作では特に、ブラウザ確認のタイミングが重要です。コーディングが完了してからレビューまでの間が空くと、その間にデザインの修正が入り、コーディングのやり直しが発生する。「コーディング完了の連絡が来たら3営業日以内にブラウザで確認する」というルールを決めるだけで、手戻りは大幅に減ります。

特徴2:窓口が一本化されている

マーケティング部門と広報部門が、それぞれ別の要望を制作会社に直接伝えてしまう。「マーケティングからは動画を入れてと言われたが、広報からはページ軽量化を求められている」という状況です。

コーディングの現場では、これが直接影響します。動画を入れればページは重くなる。軽量化と両立するにはlazyloadやIntersection Observerでの遅延読み込みが必要ですが、それは追加の工数です。どちらの要望を優先するか決まっていないと、コーダーは手が止まります。

うまくいっているお客様は、社内の意見を集約してから制作会社に伝える窓口担当者が明確に決まっています。

特徴3:「なぜ」を共有している

「ここの色を青にしてください」だけだと、コーダーは言われた通りに変更するだけです。でも、「信頼感を出したいのでコーポレートカラーの青に揃えてください」と伝えれば、周辺のborder-colorやbox-shadowのトーンも含めて一貫した調整を自主的にしてくれます。

伝え方制作会社の動き結果
「ここを青にして」指示通り変更変更箇所のみ対応。周辺との整合性は取れない
「信頼感を出したいので青に」意図を理解して全体を調整border-color、hoverカラー含め一貫性のある仕上がりに
「競合A社のこのページのような雰囲気で」参考事例から方向性を判断共通認識を持ちやすく、やり直しが減る

やってしまいがちな失敗パターン

失敗1:見積もりの安さだけで選ぶ

コーディングの見積もりは、何を含んでいて何を含んでいないかが会社によって大きく異なります。弊社の見積もりには「クロスブラウザテスト」「レスポンシブ対応(3ブレイクポイント)」「アクセシビリティ基本対応」が含まれていますが、それが含まれていない会社もあります。安い見積もりで発注した後、「スマホで文字が小さい」「スクリーンリーダーで読めない」と追加費用が発生するケースは珍しくありません。

失敗2:制作途中でゴールを変える

コーディングの場合、途中からの追加は特に影響が大きいです。CMSのテンプレート構造やCSSの設計は、最初に決めた仕様に基づいて組まれています。ページが増えるだけなら比較的容易ですが、機能が変わると設計の根本から見直しが必要になることがあります。追加したい機能が出てきたら、「今回のリリースには含めず、フェーズ2として計画する」方がスムーズです。

失敗3:完成後に連絡しなくなる

フロントエンドの観点で言うと、完成後も以下のような「経年劣化」が起きます。

  • ブラウザのアップデートで表示が崩れる箇所が出る
  • CMSやプラグインのセキュリティアップデートが放置される
  • 新しく追加されたコンテンツが、元のデザインルールに沿っていない

長くうまく付き合えているお客様は、完成後も月1回程度の軽い改善提案のやりとりを続けています。接点を維持しておくことで、ブラウザアップデートによる表示崩れにも早期に対応できます。

まとめ

今回は、制作会社との付き合い方について、フロントエンド制作会社の営業としてお話ししました。特にフロントエンド制作では、「デザインカンプに書かれていない3割」の判断が品質を大きく左右します。その3割を事前に共有する意識があるだけで、成果物のクオリティは確実に変わります。

  1. カンプに書かれない情報(ホバー、レスポンシブ、アニメーション)を事前に共有する
  2. ブラウザ確認は早く返す。3営業日以内が目安
  3. 修正は「指示」ではなく「意図の共有」として出す

株式会社ファストコーディングでは、お客様との長期的なパートナーシップを大切にしています。「制作会社との付き合い方を見直したい」「コーディング品質を上げたい」という方は、お問い合わせフォームからお気軽にご連絡ください。