LPコーディングの単価と納期｜「レスポンシブ無し」が意味することを、相場表と公式で確かめる

---

コーディングの副業を始めると、単価の幅に戸惑います。1ページ3万円という案件もあれば、10万円という案件もある。同じ「1ページ」なのに、3倍以上の差があります。

この差の説明として、よく「レスポンシブの有無」が挙げられます。それは一部として正しいのですが、それだけではありません。相場表の行には、含まれているものが違うという事情もあります。

この記事では、相場の読み方と、モバイル対応について公式が書いていることを確認します。扱うのは、相場表の行の違い、含まれるものの確認、公式の表現、構成方法の3種類、インデックスの対象、コンテンツを減らした場合、確認すべきこと、単価の説明、納期、受注時に決めること、想定モデル、つまずく場所です。

相場はクラウドワークスが発注側に公開しているページから、技術的な記述はGoogle検索セントラルの「モバイルサイトとモバイルファーストインデックスに関するおすすめの方法」を、取得して確認しました。いずれも変更されるので、実際の判断時は最新のページをご確認ください。

相場表に「レスポンシブ無し」という行がある

まず、相場の話から始めます。

公開されている行

クラウドワークスが発注側に示している相場には、こういう行があります。「サイトコーディング（レスポンシブ無し）30,000円〜（/ページ）7日前後」。

レスポンシブ無し、という条件が項目名の中に書かれています。つまり、有無で行が分かれているということです。

この行があること自体に意味があります。発注側に示す表に、その区分が載っている。つまり、レスポンシブ無しの案件も想定されているということです。

そして、7日前後という納期も書かれています。金額と期間がセットで示されている。片方だけを見て判断しないでください。

別の行と比べてみる

同じ表には、こういう行もあります。「デザイン・コーディング（長さ3000px程度）100,000円〜（/ページ）20日前後」。そして「デザイン・コーディング（TOP・下層の2ページ）200,000円〜 30日前後」。

数字だけ見ると、3万円と10万円で3倍以上の差があります。ですが、この2つを単純に比べてはいけません。

数字の印象は強く残ります。3万と10万を並べると、差だけが頭に入る。だから、比べる前に読むべき列があります。

項目名が違う

片方は「サイトコーディング」、もう片方は「デザイン・コーディング」です。後者には、デザインが含まれています。

つまり、差額の中にはデザインの費用も入っている。レスポンシブの有無だけで3倍になっているわけではありません。ここを誤解すると、見積もりの根拠がずれます。

デザインを含むかどうかは、作業量として大きな差です。構成を考え、配色を決め、素材を用意する。コーディングとは別の工程が丸ごと入っています。

見積もりを出すときも、同じ区別をしてください。コーディングのみか、デザインを含むか。項目名で区別を示すだけで、金額の説明が半分済みます。

単位も確認する

3万円の行にも10万円の行にも「（/ページ）」という単位が付いています。一方、20万円の行は「TOP・下層の2ページ」で、単位の表記がありません。

1ページあたりなのか、その一式なのか。これを取り違えると、見積もりが半分になったり倍になったりします。相場表を読むときは、金額より先に単位と項目名を見てください。

この確認は、記事15で扱った相場の読み方と同じです。単位を見落とすと、金額の意味が変わります。1枚あたりか、一式か。数字の横の小さな表記が決めています。

比べる前に、何が含まれているかを見る

相場表の読み方を、もう少し掘ります。

3つの列を順に見る

項目名、金額、納期。この順で読むと、誤読が減ります。

金額から見ると、印象が先に決まってしまう。項目名を読んでから金額を見ると、その金額が何に対するものかが分かった状態で判断できます。

慣れてくると、逆に読んでしまいます。目立つのは金額だからです。意識して順番を守ってください。読む順番を決めておくのが、いちばん簡単な対策です。

そして、読んだ内容はメモに残してください。相場は改定されます。いつ時点の相場かを控えておけば、後から説明できます。

括弧の中が条件になっている

「（レスポンシブ無し）」「（長さ3000px程度）」「（TOP・下層の2ページ）」。括弧の中に、その金額が成り立つ条件が書かれています。

括弧を読み飛ばすと、条件のない金額として頭に入ります。条文を読むときと同じで、括弧は条件です。他の記事でも繰り返している読み方です。

そして、括弧の中の言葉は、自分の見積もりにも使えます。同じ形で条件を書けば、相手も読み慣れています。発注側が見慣れた形式に合わせるのも、伝わりやすさの工夫です。

納期の列も条件の一部

3万円の行は「7日前後」、10万円の行は「20日前後」。金額だけでなく、期間も違います。

同じ金額でも、7日でやるのと20日でやるのでは、条件がまったく違う。見積もりを出すときは、金額と納期をセットで出してください。

納期を短くするなら、金額を上げる理由になります。「3日でという条件でしたら、特急の扱いになります」。納期も条件の1つとして交渉の材料にできます。

そして、納期を守れるかを先に計算してください。受けてから気づくと、間に合いません。自分が1日に使える時間から逆算します。

自分の見積もりにも、条件を書く

相場表がそうしているように、自分の見積もりにも条件を書きます。「レスポンシブ対応を含む」「長さは3000pxまで」「修正は2回まで」。

条件のない金額を出すと、後から範囲が広がっても、金額を変えにくくなります。条件を書いておけば、超えたときに相談ができます。

条件は、多くても構いません。書きすぎて困ることはない。書かなかった項目だけが、後で問題になります。

条件を書く欄は、見積もりの下部にまとめてください。金額の近くに置くと、読みにくくなります。「前提条件」という見出しを立てるのが分かりやすい。

公式は「要件ではありませんが、非常に強く推奨」と書いている

技術側の一次情報を見ます。

モバイルファーストインデックスの説明

Google検索セントラルのページには、こうあります。「Googleのインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイトコンテンツを使用します。これをモバイルファーストインデックスと呼びます」。

インデックス登録とランキングにモバイル版のコンテンツが使われる、と書かれています。

この仕組みを知らずに作ると、判断の基準がありません。何を優先するかが決まらない。仕組みを1度読んでおくと、提案の軸ができます。

次の一文が、二段構えになっている

続けてこうあります。「モバイル版のページを用意することは、コンテンツをGoogleの検索結果に表示させるための要件ではありませんが、非常に強く推奨されています」。

前半は「要件ではありません」。後半は「非常に強く推奨されています」。この2つが1つの文に入っています。

条件つきの記述は、公式のドキュメントでよく出てきます。必須でも不要でもない、という書き方。この形を見たら、両方をセットで覚えてください。

片方だけを引くと、意味が変わる

「要件ではない」だけを取れば、モバイル対応は不要に聞こえます。「非常に強く推奨」だけを取れば、必須に聞こえる。どちらも、文の半分です。

正確に伝えるなら、両方を並べます。「要件ではないが、非常に強く推奨されている」。この形で相手に伝えれば、判断の材料になります。

そして、引用するときは文ごと引いてください。途中で切ると、別の意味になります。自分に都合のよい部分だけを引かない。これは情報を扱う基本です。

相場表と符合している

面白いのは、相場表に「レスポンシブ無し」という行が存在することです。要件ではないから、そういう案件も成立する。

ですが、非常に強く推奨されているものを外している、ということも同時に事実です。この両面を説明できるのが、作る側の役割になります。

2つの一次情報が、違う角度から同じ状況を示しています。相場には区分があり、公式には推奨がある。両方を知っていると、説明に厚みが出ます。

そして、どちらか一方だけを示すと偏ります。相場だけでは推奨の話が抜け、公式だけでは金額の話が抜ける。両方を並べて伝えてください。

構成方法は3つあると書かれている

ここが実務で効きます。

公式が挙げている3つ

同じページには、こうあります。「モバイルフレンドリーなサイトの構成方法は、次の3つから選ぶことができます」。そして、3つが並びます。

1つ目が「レスポンシブデザイン: ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚系ブラウザなど）に関係なく、同じURLで同じHTMLコードを配信しつつ、画面サイズに応じてコンテンツの表示方法を変更します」。

3つを覚えておくと、相手の話も理解しやすくなります。「別のURLで作っている」と言われても、何のことか分かる。用語が通じると、打ち合わせが速く進みます。

2つ目と3つ目

「動的な配信: デバイスに関係なく同じURLを使用します。この構成方法では、デバイスに応じて異なるバージョンのHTMLを配信するために、user-agent スニッフィングと Vary: user-agent HTTP レスポンス ヘッダーを利用します」。

そして「別個のURL: デバイスに応じて別個のURLで異なるHTMLを配信します」。モバイル対応イコールレスポンシブ、ではないということです。

この2つは、サーバー側の設定が関わります。コーディングだけでは完結しません。自分の作業範囲を超える場合があるので、確認が必要です。

公式が勧めているのはどれか

3つを挙げたうえで、こう書かれています。「Googleでは、実装と維持が最も簡単なデザインパターンとしてレスポンシブ ウェブデザインをおすすめしています」。

理由として挙げられているのが「実装と維持が最も簡単」という点です。効果が高いから、ではなく、簡単だから。この理由の書かれ方も、そのまま読んでください。

理由が「簡単だから」であることは、提案にも使えます。「維持のしやすさから、この方法をご提案します」。作った後のことまで考えた提案として伝わります。

ガイドの適用範囲も書かれている

さらに、こうあります。「このガイドの内容は、動的な配信と別個のURLの各構成方法にのみあてはまります」。

つまり、そのページのおすすめの方法は、レスポンシブ以外の2つに向けて書かれている部分がある、ということです。読むときは、自分がどの構成かを先に決めてください。

ドキュメントを読むときは、適用範囲の記述を探してください。「この内容は〜にあてはまります」という一文。自分に関係ない部分を読んで悩む時間が減ります。

インデックスに使われるのは、どちらか

見積もりの説明に使える記述です。

公式の記述

こうあります。「モバイルサイトに表示されるコンテンツのみがインデックス登録に使用されます」。

「のみ」という言葉が使われています。パソコン版にあってモバイル版にないものは、この記述の対象外になります。

「のみ」という限定は、条文でも公式ドキュメントでも強い表現です。他のものは対象外だという意味になります。この語を見たら、範囲が閉じていると考えてください。

そして、この記述は設計の前に読むべきものです。作った後に知ると、直す作業になります。構成を決める前に、一度読んでおいてください。

同じコンテンツにすることが勧められている

続けてこうあります。「モバイルサイトにパソコンサイトと同じコンテンツを含めます。モバイルサイトのコンテンツがパソコンサイトよりも少ない場合、モバイルサイトを更新して、主要なコンテンツをパソコンサイトと同等にすることをご検討ください」。

同じにする、ではなく「同等にすることをご検討ください」という書き方です。条件の強さも、そのまま読み取ってください。

「ご検討ください」という語尾は、義務ではありません。ですが、勧められていることは事実です。語尾の強さを、そのまま相手に伝えてください。

見え方は変えてよいと書かれている

ここが重要です。「モバイル版に異なるデザインを使用することで、ユーザー エクスペリエンスが向上します（コンテンツをアコーディオンやタブに移動するなど）。ただし、サイトのインデックス登録はモバイルサイト経由であるため、コンテンツはパソコンサイトと同等にします」。

デザインを変えることはむしろ向上につながると書かれています。変えてはいけないのは、コンテンツの量のほうです。

この記述は、提案の幅を広げます。デザインを変えること自体は、向上につながると書かれている。パソコン版をそのまま縮小する必要はありません。

だから、モバイルで「省く」提案には注意する

画面が狭いから、この説明は省きましょう。よくある提案ですが、公式の記述とは方向が違います。

省くのではなく、折りたたむ、タブにする、という方法が例として挙げられています。この違いを説明できると、提案の質が変わります。

そして、省くかどうかは相手が決めることです。こちらは、公式の記述を伝えるところまで。判断と確認を分ける姿勢は、どの分野でも同じです。

そして、提案するなら代替案とセットで出してください。「省くのではなく、折りたたむ形をご提案します」。否定だけでは、話が進みません。

モバイルで減らすと、どうなると書かれているか

さらに踏み込んだ記述があります。

量を減らした場合についての記述

こうあります。「モバイルページのコンテンツをパソコン用ページよりも意図的に少なくしている場合、サイトでモバイルファーストインデックスを有効にしているとGoogleがページから取得できる情報が以前よりも減るため、ある程度のトラフィック減少が予」想される、という趣旨の記述が続きます。

「意図的に少なくしている場合」という条件つきで書かれています。

この記述は、意図的に減らした場合について書かれています。結果として減った場合とは、書き分けられている可能性があります。条件の言葉を飛ばさずに読んでください。

そして、この記述は設計の前に読むべきものです。作った後に知ると、直す作業になります。構成を決める前に、一度読んでおいてください。

「情報が減る」という因果が説明されている

取得できる情報が減る、という理由が明示されています。結果だけでなく、なぜそうなるかが書かれている。

この構造を知っていると、説明もできます。「モバイルで省くと、取得できる情報が減ると公式に書かれています」。理由つきで伝えられます。

理由が書かれている記述は、覚えやすくもあります。結論だけより、仕組みごと覚えるほうが応用が効く。似た場面でも、同じ理屈で考えられます。

そして、この説明は相手にも伝わりやすい。検索に出る情報が減る、という話だからです。技術用語を使わずに説明できます。

他の項目も並んでいる

同じページには、他の注意点も列挙されています。「モバイルサイトとパソコンサイトで同じ robots meta タグを使用します」「モバイルページで nofollow タグを使用しないでください」「画像に対して、サポートされている形式とタグを使用します」。

見落としやすい設定が、項目として並べられています。チェックリストとして使える形です。

この一覧は、納品前の確認にそのまま使えます。項目を写して、チェックリストにする。自分で考えるより、公式の一覧を使うほうが抜けません。

画像についての記述もある

「画像がない」という問題について、原因と修正方法が示されています。「パソコン用ページにある重要な画像のうち、モバイルページに含まれていないものがあります」が原因として挙げられています。

画像もコンテンツの一部として扱われている。モバイルで画像を省く設計は、この記述に関わります。

画像は容量の問題で省かれやすい部分です。表示速度のために減らす、という判断をすることがある。減らすなら、何を減らすかを相手と決めてください。

だから「レスポンシブ無し」の意味を確認する

実務に落とします。

3つの可能性がある

相手が「レスポンシブ無しで」と言ったとき、意味は1つではありません。

1つ目、モバイル対応をしない。2つ目、別の構成方法（動的な配信や別個のURL）を使う。3つ目、そもそも用語を正確に使っていない。どれなのかで、作業量も金額も変わります。

3つ目が、実はいちばん多い。用語をなんとなく使っている場合です。だから、用語で聞き返すと話が噛み合いません。

そして、どれであっても作業量が変わります。だから、見積もりの前に確認する必要がある。金額を出してから確認すると、出し直しになります。

聞き方を決めておく

確認のメッセージはこれで足ります。「スマートフォンでの表示は、どのような形をご希望でしょうか」。

用語で聞くのではなく、結果で聞くのがコツです。相手が用語を正確に使っていない場合でも、意図が分かります。

そして、選択肢を添えるとさらに答えやすくなります。「パソコンと同じ表示でよいか、スマホ用に並び替えるか」。選べる形にすると、返事が早く返ってきます。

そして、答えは見積もりに反映してください。聞いただけで終わらせない。確認したことが条件として書かれていて、初めて意味を持ちます。

情報を渡してから、判断してもらう

モバイル対応をしない、という答えなら、公式の記述を伝えます。

「モバイル版のページは、検索結果に表示させるための要件ではないものの、非常に強く推奨されていると公式に書かれています」。そのうえで、判断は相手に委ねます。これは他の回でも繰り返している姿勢です。

伝えるのは1度で足ります。繰り返すと、押しつけになります。伝えた記録が残っていれば、役割は果たしています。

そして、判断の結果はどちらでも構いません。対応しないと決めるのも、立派な判断です。こちらの役割は、判断材料を渡すところまでです。

決まったことを、見積もりに書く

「レスポンシブ対応を含みません」と見積もりに明記します。後から「スマホで崩れている」と言われないためです。

含まないことを書いておくのが、含むことを書くのと同じくらい大事です。書いていないものは、含まれていると思われます。

そして、含まない項目は箇条書きにしてください。文章の中に埋めると、読み飛ばされます。「含まれないもの」という見出しを立てるのが確実です。

そして、納品時にも一度触れてください。「お打ち合わせのとおり、スマートフォン向けの調整は含んでおりません」。納品の時点で確認しておけば、後から言われません。

単価の差を、どう説明するか

金額の話を、根拠を持ってする方法です。

作業量の差を分解する

レスポンシブ対応を含めると、画面幅ごとの確認、要素の並び替え、画像の切り替え、実機での確認が加わります。

これらを項目として書き出すと、金額の差が作業の差として見えます。「レスポンシブは大変なので」ではなく、何が増えるのかを示してください。

書き出す項目は5つ程度で足ります。多すぎると、かえって読まれません。増える工程のうち、大きいものだけを挙げてください。

そして、項目は相手が分かる言葉で書いてください。技術用語で書くと、多いか少ないかも判断できません。「画面幅ごとの調整」のように、何をするかが分かる名前にします。

相場表の行を示す

クラウドワークスが発注側に公開している相場に、「サイトコーディング（レスポンシブ無し）30,000円〜（/ページ）」という行があります。

発注側向けに公開されている情報なので、示しても角が立ちません。「発注側のページにもこの区分があります」と言えます。

ただし、相場は金額の根拠そのものではありません。自分の作業時間が根拠です。相場は、その金額が妥当な範囲にあることを示す材料として使います。

そして、相場を示すのは説明の補強としてです。相場が安ければ自分も下げる、という話ではありません。自分の時間と作業量から出した金額が先にあります。

デザインが含まれるかを、必ず分ける

先に見たとおり、相場表の10万円の行にはデザインが含まれています。

だから、コーディングだけの案件で10万円を根拠にするのは正確ではありません。自分の見積もりでも、デザインを含むかどうかを分けて書いてください。含むなら、その分を別項目にします。

デザインを含む場合は、確認の回数も増えます。方向性の確認、配色の確認、細部の確認。工程が増えるので、納期も別に考えてください。

そして、支給されたデザインに問題があった場合の扱いも決めてください。寸法が合わない、素材が足りない。こちらで補う作業は、追加として扱います。

時間で説明する

最終的には、時間で説明するのがいちばん通じます。「レスポンシブ対応を含めると、確認の工程が約4時間増えます」。

金額を先に言うより、工程と時間を示してから金額を出すほうが、納得を得やすい。これは他の分野でも同じです。

そして、時間の根拠は自分の記録から出します。過去の案件で何時間かかったか。記録がないと、時間で説明できません。毎回、実際にかかった時間を残しておいてください。

そして、時間を示すと納期の説明にもなります。作業時間と納期の関係が伝わる。金額と納期を同時に納得してもらえます。

納期の考え方

相場表には納期も書かれています。

公開されている納期

「サイトコーディング（レスポンシブ無し）」は「7日前後」、「デザイン・コーディング（長さ3000px程度）」は「20日前後」、「デザイン・コーディング（TOP・下層の2ページ）」は「30日前後」とされています。

いずれも「前後」という言葉が付いています。幅のある表現です。

「前後」と書かれているのは、条件によって変わるからです。ページの内容、素材の状態、修正の回数。自分の見積もりでも、幅を持たせるか条件を書くかしてください。

実作業時間と、納期は別

7日前後という納期は、7日間ずっと作業するという意味ではありません。確認の往復、素材の受け取り待ち、修正の時間が入ります。

副業なら、平日に使える時間は限られます。実作業が10時間でも、納期は7日必要になる。この違いを分けて考えてください。

この2つを混同すると、無理な納期を約束します。10時間だから3日で、と考えてしまう。副業なら、1日に使える時間は2時間程度かもしれません。先に、自分の可処分時間を確認してください。

素材の受け取りが遅れる前提で組む

いちばん遅れる原因は、素材です。画像、原稿、ロゴのデータ。

だから、「素材のご提供から起算して7営業日」という書き方にしてください。起算点を決めておけば、遅れの原因が明確になります。

そして、必要な素材は一覧にして先に送ってください。何が要るかが分からないと、相手も用意できません。リストを渡すだけで、受け取りが早くなります。

そして、素材が揃うまでにできる作業は進めておいてください。構成の設計、共通部分の実装。待っている時間を使えると、納期に余裕が出ます。

修正の回数も納期に関わる

修正が2回か5回かで、期間は変わります。回数を決めておくと、納期の見通しも立ちます。

修正の範囲を決める話は動画編集の修正対応の回でも扱っています。分野は違っても、考え方は同じです。

回数を決めるときは、何を1回と数えるかも決めてください。まとめて指示されたものは1回、というように。数え方が曖昧だと、回数を決めた意味がなくなります。

そして、修正の受付期限も決めておいてください。納品から何日以内か。期限がないと、数か月後に連絡が来ることがあります。

受注時に決める5項目

コーディングの案件で、着手前に決めることです。

• モバイル対応の形：どの構成方法か、あるいは対応しないか
• 対応する画面幅：どの幅まで確認するか
• 対応するブラウザ：どれで確認するか
• デザインの有無：デザインから作るのか、支給されるのか
• 修正の回数と起算点：何回までか、納期はいつから数えるか

2つ目を数字で決める

「スマホ対応」だけでは、範囲が決まりません。確認する幅を、数字で決めてください。

そして、決めた幅の外で崩れた場合の扱いも書いておきます。すべての端末で完全に同じ、は現実的ではありません。

そして、確認に使う端末も決めておくと親切です。「この幅で、この端末で確認します」。手元にない端末での崩れまでは保証できません。

そして、決めた幅は自分でも確認してください。決めただけで確認しないと、意味がありません。確認の手順として書いておくのが確実です。

3つ目も、必ず数字か名前で

ブラウザの種類とバージョン。「主要なブラウザ」では範囲が決まりません。

古いブラウザへの対応は、作業量が大きく変わる部分です。対応する範囲を明記して、それ以外は別途と書いてください。

そして、対応範囲外で問題が出た場合の扱いも書いてください。別途のご相談とさせていただきます。範囲を決めただけでは、外れたときの扱いが決まりません。

そして、相手の環境も聞いておいてください。相手が確認に使うブラウザ。そこで崩れると、まず指摘されます。

4つ目が金額の根幹

デザインから作るのか、支給されたデザインを実装するのか。相場表でも、この2つは別の行になっていました。

ここを曖昧にしたまま金額を出すと、後で大きくずれます。最初に確認する項目です。

デザインが支給される場合は、その形式も確認してください。編集できるデータか、画像だけか。画像だけだと、寸法や余白を自分で判断することになります。

そして、デザインを含む場合は納期も別に考えてください。確認の往復が増えるからです。実装だけの納期で受けると、間に合いません。

書面に残す

5項目とも、着手前にメッセージで送ります。箇条書きで1通です。

そして、この5項目を出すこと自体が、慣れている人として伝わります。案件が取りやすくなる効果もあります。

そして、この5項目は使い回せます。案件ごとに変えるのは、中身の数字だけ。テンプレートにしておけば、送るのに5分もかかりません。

そして、返信をもらってから着手してください。特に画面幅とブラウザは、後から変えられません。作り直しになる項目は、先に確定させます。

1ページあたりの想定モデル

作業時間に公的な統計はありません。以下は、支給されたデザインをコーディングする場合を置いた本メディアの想定モデルで、統計ではありません。

合計7時間と13時間30分

レスポンシブ無しが420分で7時間。ありが810分で13時間30分です。差は6時間30分。

作業時間としては約1.9倍になります。これが、金額の差を説明する根拠になります。

差の内訳を見てください。画面幅ごとの調整が120分、確認が90分増えています。作る時間より、調整と確認のほうが増える構造です。

そして、この時間は慣れた人の目安です。初めての構成なら、さらに時間がかかります。自分の記録と比べて、調整してください。

3万円なら、時間あたり約3,674円

レスポンシブ無しで30,000円（税抜）を受けたとします。税込33,000円からシステム利用料と消費税が引かれて手取りは25,740円。7時間で割ると、時間あたり約3,677円です。

悪い条件ではありません。ただし、レスポンシブを無料で追加すると13時間30分になり、時間あたり約1,906円に下がります。この計算を持っていれば、断る理由も説明できます。

この計算は、案件を選ぶときにも使えます。金額を、見込みの作業時間で割ってみる。金額の大小ではなく、時間あたりで比べてください。

だから、後から追加させない

「ついでにスマホ対応もお願いします」。この一言で、時間単価が半分になります。

含まないと書いておけば、追加のご依頼として承ります、と返せます。断るのではなく、別の見積もりにするだけです。

そして、追加の見積もりは早めに出してください。作業を始めてから出すと、断りにくくなります。依頼を受けた時点で、金額と納期を返す。

そして、追加の依頼自体は歓迎してよいものです。継続につながるからです。無料で受けることだけを避けてください。

2件目以降は短くなる

同じ構成のページを続けて作るなら、設計は使い回せます。13時間30分が9時間程度に縮むでしょう。

複数ページをまとめて受けるほうが、条件が良くなる構造です。1ページだけの案件より、複数ページの案件を狙ってください。

そして、使い回せる形で作っておいてください。共通の部品を分けておく。1件目の作り方が、2件目以降の速度を決めます。

そして、複数ページの案件では、まとめた見積もりを出せます。1ページあたりを少し下げる代わりに、総額を確保する。相手にも利点があるので、提案が通りやすい。

つまずく場所は5つに決まっている

この分野でつまずくのは、ほぼ5つです。

1・金額だけを比べる

相場表の「サイトコーディング」と「デザイン・コーディング」は、含まれるものが違います。前者はコーディングのみ、後者はデザインを含みます。

金額より先に、項目名と括弧と単位を読んでください。この順番で読めば、誤読は防げます。

この誤読は、自分の見積もりにも影響します。相場を根拠にした金額が、実際とずれる。根拠がずれていると、説明もできません。

そして、相場の数字をそのまま自分の金額にしないでください。相場は範囲を知るためのものです。自分の作業時間から出した金額が、根拠になります。

2・「レスポンシブ無し」を1つの意味で受け取る

公式は「モバイルフレンドリーなサイトの構成方法は、次の3つから選ぶことができます」としています。レスポンシブは3つのうちの1つです。

「スマートフォンでの表示は、どのような形をご希望でしょうか」と、結果で聞いてください。

そして、確認した結果は見積もりに書いてください。口頭で聞いただけでは、後から確認できません。聞いた内容を、条件として明記します。

そして、用語の意味がずれていた場合も、責めないでください。認識を合わせるだけの作業です。確認できた時点で、目的は達しています。

3・モバイルでコンテンツを省く

「モバイルサイトに表示されるコンテンツのみがインデックス登録に使用されます」と書かれています。そして、折りたたむ・タブにするという方法が例として示されています。

省くのではなく、見せ方を変える。この提案ができると、仕事の質が変わります。

折りたたみの実装は、追加の作業になります。その分も見積もりに入れてください。提案したことが、無料の作業にならないように。

そして、省くと決まった場合も記録に残してください。提案し、判断を仰いだという経緯。後から結果を問われたときの材料になります。

4・対応範囲を決めずに受ける

画面幅、ブラウザ、デザインの有無、修正の回数。これらを決めずに始めると、作業が際限なく増えます。

5項目を着手前に送るだけで、ほとんどの問題が防げます。

そして、範囲を決めると作業も速くなります。どこまでやるかが決まっていれば、迷いません。際限がない状態がいちばん時間を食います。

そして、範囲は増やすこともできます。追加の依頼として受ければよい。最初から広く受けるのではなく、狭く始めて広げる。

広く受けて削るのは、難しい。一度含めたものを外すのは、値下げに見えます。狭く始めて足すほうが、金額も上げやすくなります。

5・納期を実作業時間で考える

相場表の納期は「7日前後」「20日前後」と書かれています。実作業時間とは別の概念です。

素材の受け取り、確認の往復、修正。「素材のご提供から起算して」という書き方で、起算点を決めてください。

そして、余裕を持った納期を伝えてください。早く出せば喜ばれますが、遅れると信用を失います。非対称なので、余裕を持たせるほうが得です。

そして、遅れそうなときは早めに連絡してください。期限を過ぎてからでは、対応の余地がありません。見通しが立った時点で伝えます。

30代につながるのは、条件つきの数字を読む力

このメディアは、20代の副業を「30代に何が残るか」で選ぶ立場で書いています。この分野で残るのは、書き方の知識だけではありません。

数字には条件がついている、という前提

残るのは、金額を見たときに、それが何に対する金額かを先に確かめる習慣です。相場表の括弧も、単位も、納期も、すべて条件でした。

30代になると、予算や見積もりを扱う場面が増えます。条件を確かめてから数字を比べられる人は、判断を間違えません。

そして、条件を確かめる質問は、相手にも歓迎されます。正確に見積もろうとしている姿勢が伝わるからです。確認する人は、雑な仕事をしないと思われます。

そして、自分が数字を出すときも条件を書いてください。受け取る側も、条件を探しています。条件のない数字は、信用されにくい。

「要件ではないが、推奨される」を扱えること

今回の公式の記述は、必須でも不要でもありませんでした。この中間を、そのまま伝える技術が要ります。

必須だと言えば話は早いのですが、正確ではない。正確さを保ったまま、相手が判断できる形で伝える。これができる人は、信頼されます。

そして、この中間を扱えると、提案の幅も広がります。必須でないなら、やらない選択肢も示せる。選択肢を示せる人が、相談される人になります。

そして、この扱い方は情報の伝え方そのものです。正確さと分かりやすさを両立させる技術。どちらかを犠牲にしないで伝える練習になります。

含まないものを書く習慣

見積もりに書くべきは、含むものだけではありません。含まないものを書くことが、同じくらい大事です。

書いていないものは、含まれていると思われます。この前提を知っている人は、後から揉めません。

書き方は簡単です。「含まれないもの」という項目を1つ立てるだけ。これを書くだけで、後のやりとりが大きく減ります。

そして、含まない理由も一言添えると親切です。「今回の範囲外のため」。理由があると、追加の相談にもつながります。

まとめ

• 相場には「サイトコーディング（レスポンシブ無し）30,000円〜（/ページ）7日前後」という行がある（クラウドワークス）
• ただし「デザイン・コーディング（長さ3000px程度）100,000円〜（/ページ）20日前後」にはデザインが含まれる。差額の中にはデザインの費用も入っているので、単純に比べない
• 公式は「モバイル版のページを用意することは、コンテンツをGoogleの検索結果に表示させるための要件ではありませんが、非常に強く推奨されています」としている（Google検索セントラル）
• 構成方法は「次の3つから選ぶことができます」とされ、レスポンシブデザイン・動的な配信・別個のURLが挙げられている。公式は「実装と維持が最も簡単なデザインパターンとしてレスポンシブ ウェブデザインをおすすめしています」
• 「モバイルサイトに表示されるコンテンツのみがインデックス登録に使用されます」。ただし「モバイル版に異なるデザインを使用することで、ユーザー エクスペリエンスが向上します（コンテンツをアコーディオンやタブに移動するなど）」とも書かれており、変えてはいけないのはコンテンツの量のほう
• だから「スマートフォンでの表示は、どのような形をご希望でしょうか」と、用語ではなく結果で聞く
• 想定モデルでは、レスポンシブ無しが7時間、ありが13時間30分。約1.9倍。3万円なら時間あたり約3,677円だが、レスポンシブを無料で足すと約1,906円に下がる
• 受注時に決めるのは、モバイル対応の形・対応する画面幅・対応するブラウザ・デザインの有無・修正の回数と起算点の5項目

よくある質問（FAQ）

レスポンシブ対応は必須ではないのですか。

Google検索セントラルには「モバイル版のページを用意することは、コンテンツをGoogleの検索結果に表示させるための要件ではありませんが、非常に強く推奨されています」と書かれています。前半と後半をセットで読んでください。片方だけを取ると意味が変わります。また、モバイル対応の構成方法として公式が挙げているのはレスポンシブデザイン・動的な配信・別個のURLの3つで、レスポンシブはそのうちの1つです。公式は「実装と維持が最も簡単なデザインパターンとしてレスポンシブ ウェブデザインをおすすめしています」としています。

1ページ3万円と10万円の差は、レスポンシブの有無ですか。

それだけではありません。クラウドワークスが発注側に公開している相場では、3万円の行が「サイトコーディング（レスポンシブ無し）」、10万円の行が「デザイン・コーディング（長さ3000px程度）」となっており、後者にはデザインが含まれています。つまり、差額の中にはデザインの費用も入っています。相場表を読むときは、金額より先に項目名と括弧の中、そして単位を確認してください。「（/ページ）」という単位が付いている行と、付いていない行があります。

スマホでは情報量を減らしたい、と言われました。

公式には「モバイルサイトに表示されるコンテンツのみがインデックス登録に使用されます」と書かれています。一方で「モバイル版に異なるデザインを使用することで、ユーザー エクスペリエンスが向上します（コンテンツをアコーディオンやタブに移動するなど）。ただし、サイトのインデックス登録はモバイルサイト経由であるため、コンテンツはパソコンサイトと同等にします」ともあります。つまり、見せ方を変えることは例として挙げられていますが、コンテンツの量については同等にすることが勧められています。この違いを伝えたうえで、判断は相手に委ねてください。

納期はどう決めればよいですか。

相場表の納期は「7日前後」「20日前後」のように「前後」という表現です。そして、この期間は実作業時間とは別の概念で、素材の受け取り待ち、確認の往復、修正の時間が含まれます。副業なら平日に使える時間も限られるので、実作業が10時間でも納期は7日必要になることがあります。おすすめは「素材のご提供から起算して7営業日」という書き方です。起算点を決めておけば、遅れの原因も明確になります。

副業として始めるとき、確定申告や会社への影響はどうなりますか。

この記事ではコーディング案件の条件整理だけを扱っています。副業全般の論点は姉妹メディア「20代の放課後」で扱っています。確定申告と20万円ルール、副業の始め方を参照してください。コーディングの周辺では、WordPressのカスタマイズの回やノーコードのサイト制作の回もあわせてどうぞ。

---