ホームページ制作の工数とは？　費用が変動する理由と、追加費用が発生する仕組みを解説します！

こんにちは、F−standardの吉田です。

ホームページ制作の打ち合わせをしていると、お客様からよく、こんなご質問をいただきます。

「デザインを見てから費用の交渉はできないの？」

「ワイヤーフレームだけ見ても、出来上がりが想像できない…」

「そもそも”工数”って何ですか？」

実はこれ、昔の自分がまったく同じように感じていたこと でもあります。HP制作について勉強を始める前は、

「工数って何？」
「見た目が違うのに、どうして金額が同じなんだろう？」

と、正直よく分かっていませんでした。特に、初めてホームページ制作を依頼する方 にとっては、分からないことだらけで不安になりますよね。

ホームページは、

デザインや完成形が
納品されるまで、はっきり見えない

という特性があります。だからこそ、

「完成するまで見えないものにお金を払うって、ちょっと不安…」

と思うのは、ごく自然なことです。

では、なぜ制作会社はデザインを見てから金額を大きく調整できないのか？制作会社側には、デザイン確認後に金額を下げたり、大きく調整することが難しい理由があります。

そのカギになるのが、今回お話しする 「工数」 という考え方です。

今回は、その工数の考え方を、
例え話や図解も交えながら、なるべくわかりやすくお伝えしたいと思いますヽ(=´▽`=)ﾉ

そもそも「工数」とは？

ホームページ制作の工数は、完成した画面だけを見ても、分かりにくい部分が多い です。

たとえば、

• デザイン制作
• コーディング

といった作業は、成果物として目に見えます。でも実際の制作現場では、それ以外にも、

• 要件の整理
• 情報設計
• レイアウトの検討
• PC・スマホそれぞれの最適化
• テストや修正対応

といった、表には見えない工程 に多くの時間と専門性が使われています。

これらすべてを含めた作業量のことを、私たちは 「工数」 と呼んでいます。
そしてこの工数が、ホームページの品質を支えています。

ワイヤーフレームとは？（図解付きでわかりやすく）

ワイヤーフレーム（通称：ワイヤー）は、サイトの「間取り図」 のようなものです。

色や写真、装飾はまだ入らず、

• どこに
• どんな情報を
• どの順番で配置するか

を、線と文字で整理した設計図になります。

この段階では、

• 情報の優先順位
• ページ全体の流れ

を整えることが目的です。

ロゴ、メニュー、メインビジュアル、お知らせ、ABOUT（私たちについて）など、

「どんなコンテンツがあるのか」
「どこに配置されるのか」

を確認します。色や装飾、細かなデザインは、この時点ではほとんど入っていません。

家づくりに例えると…

• ワイヤー＝間取り図（ここにリビング、この部屋はこう使う）
• デザイン＝インテリアや配色の選定
• コーディング＝大工さんが実際に建てる作業

間取り図を決めても、まだ壁紙や家具は決まっていませんよね。ホームページも同じで、ワイヤー段階では見た目の細部はわかりません。

なぜ工数によって費用が変動するの？

よく、「ホームページの大幅な修正は、コーディングが始まってからだと難しい」と言われます。これは、コーディングが始まると見た目だけでなく、裏側の構造まで作り込まれる からです。

一方で、誤解されやすいのが「修正は最初から大変」というイメージです。

実は、修正が大変になる“タイミング”がある というのが正確な表現です。

ワイヤーやデザイン段階では、配置や文字を画面上で調整できるため、コーディング後の修正と比べると、作業量は大きくなりません。

(1) ワイヤー・デザイン段階の修正は、基本的に問題ありません！

ここで、制作の進め方についてひとつ安心していただきたい点があります。

ワイヤーフレームやデザイン段階での修正については、基本的に追加費用は発生しないケースがほとんどです。

この段階では、画面上で配置や見た目を調整しながら進められるため、

「もっとこうしたい」
「ここが分かりにくい」

といったご要望は、遠慮なくお伝えくださいね。

むしろ、デザイン確定前にしっかりすり合わせることで、後工程での手戻りを防ぐことができ、結果的に全体の工数を抑えることにつながります。

(2) コーディング開始後の変更は、実は大仕事

● 例：配置変更の場合

変更前

[画像] [テキスト]

変更後

[テキスト] [画像]

一見すると、「入れ替えるだけ」に見えますよね。でも実際には、

• PC・スマホ両方のレイアウト調整
• 余白や比率の再調整
• 他ページとの統一性チェック
• UIルールの再確認
• アニメーションの再設定
• コード構造の見直し

など、複数の工程をやり直す必要 が出てきます。

■ アニメーション変更も同じです

動きを少し変えるだけでも、

• タイミング
• スクロール量
• デバイスごとの挙動
• 他要素との兼ね合い

をすべて確認・調整します。

■ イベントの登場シーンに例えると…

登場演出を変えると、

• 音楽
• 照明
• 動線
• キャストの動き

全部見直しますよね。

Webのアニメーションも、実はそれと同じくらい裏側の調整があります。

ページ追加は、実はもっと工数がかかる工程

制作途中でよくいただくご要望に「このページを1つ追加したいです」というものがあります。

もちろん可能ですが、デザインとコーディングが始まってからの追加は特に大変です。

■ ページ追加で発生する作業例

• 新規ページのデザイン
• コーディング（PC・SP両方）
• ヘッダー（ナビ）へのリンク追加
• サイト全体の導線見直し
• UI の統一（色・余白・ボタンスタイルなど）
• パンくずの追加
• サイトマップの整合性調整
• アニメーション追加
• 他ページの軽微な改修

たった1ページの追加でも、実はサイト全体の調整が必要になるケースが多いのです。

■ 例え話：パズルの“1ピース追加”

「ここにもう1ピースだけ追加してよ！」と言われたら…

• 周りのピースも形を変える必要がある
• 全体の絵のバランスも変わる
• 配置も微調整しないとハマらない

Webサイトも同じで、新しい要素を入れるためには 周囲の構造を整える作業が発生します。

5. お客様と制作を気持ちよく進めるために

エフスタンダードでは、工数トラブルが起きないよう、次の点をとても大事にしています。

① 初期ヒアリングを丁寧にする

目的・優先度・サイトの使い方・将来像を深くヒアリングし、ワイヤー段階で“ズレのない設計”を目指します。

② ワイヤー段階でできるだけイメージしやすく

写真のラフ配置や参考デザインを共有するなど、完成の雰囲気が想像しやすい形に調整しています。

③ どこから追加費用になるか透明に説明

工数が増えそうな箇所や、追加になりやすい部分は事前にお伝えし安心していただけるよう努めています。

④ 内製チームだから柔軟で速い

ディレクション・デザイン・コーディングを社内で行っているため、細かい調整にもスムーズに対応できます。

6. まとめ：工数を知ると、制作の“見えない世界”がわかる

工数は、見えにくいからこそ誤解されやすい部分です。だからこそ、工数の仕組みを理解していただけると、

• なぜ費用が変動するのか
• どの作業が追加になるのか
• なぜデザイン変更が大変なのか
• なぜページ追加で工数が伸びるのか

こういったことがクリアになり、お客様と制作側のコミュニケーションがぐっと円滑になります。結果として、仕上がるサイトのクオリティも確実に上がります。

「これって追加費用になりますか？」
「この変更、どのくらい影響ありますか？」

そんな小さな疑問でも大丈夫です。

F-standardでは、目的や状況に合わせて、無理のない進め方をご提案 しています。少しでも気になることがあれば、どうぞお気軽にご相談ください！

エフスタンダードでは、お客様の目的や状況に合わせて、最適な制作方法をご提案しています。

最後までご覧いただき、ありがとうございました！