こんにちは。前回は「完全初心者向け」のロードマップを紹介しましたが、今回は「HTMLとCSSの基礎は知ってるけど、実務はわからない」という初心者向けのロードマップです。
あなたはおそらく、Udemy や Progate で基礎を学んだけれど「実際の案件って、どう進めるの？」「コードってどこまで書くの？」「クライアントとのやり取りは？」といった疑問を持っているはずです。この記事では、そういった「実務的な流れ」を、ステップバイステップで解説します。
基礎知識がある分、完全初心者より進むのは早いです。適切に進めば、1～3ヶ月で初案件を獲得でき、3～4ヶ月で月5万稼ぐことは十分可能です。
【この記事で紹介する流れ】
- ステップ1：実務スキルの3つのギャップを埋める（2～3週間）
- ステップ2：実践的なポートフォリオを作る（3～4週間）
- ステップ3：案件獲得前の準備（営業・契約周り）（1～2週間）
- ステップ4：初案件を獲得して実績を作る（1ヶ月）
- ステップ5：案件をこなしながら単価を上げていく（継続）
ステップ1：実務スキルの3つのギャップを埋める（2～3週間）
1-1. ギャップ1「レスポンシブデザインの実務的な作り方」
基礎学習では、メディアクエリの書き方を学びました。ただし、実務ではもう一段階踏み込む必要があります。
何が違うのか
基礎学習：「メディアクエリを使ってスマートフォン対応しましょう」という簡単な例
実務：「iPhone 12、13、14、Galaxy、iPad、iPad Pro…複数デバイスに対応させる」という複雑な現実
実務では、単に「スマートフォンに対応」では不十分で、複数の画面サイズで見栄えが崩れないか確認する必要があります。
実務で必須の知識
ブレークポイントの選定：実は、メディアクエリのブレークポイント（例：768px、1024px）は、デバイス別に決まっています。以下の値がスタンダードです。
- 320px～480px：スマートフォン（小）
- 481px～768px：スマートフォン（大）・タブレット（小）
- 769px～1024px：タブレット（大）
- 1025px以上：デスクトップ
ただし、クライアントやプロジェクトによって異なるので、案件ごとに確認する必要があります。
モバイルファースト設計：実務では「モバイルファースト」という考え方が標準です。これは「スマートフォン版を先に作ってから、大きい画面に対応させる」という流れです。
基礎学習では「デスクトップ版を作ってから、スマートフォン対応」と習ったかもしれませんが、実務では逆です。理由は、モバイルユーザーが圧倒的に多いからです。
実務的な練習
既存のWebサイト（例：Twitter、Instagram、Amazon など）を、複数デバイス（iPhone、iPad、デスクトップ）で見てみてください。「この要素は、どう変わってるのか？」と分析することが、実務力を高めます。
1-2. ギャップ2「ブラウザの互換性対応」
実務では、単に「Chrome で見栄えが良い」では足りません。IE 11、Safari、Firefox などの別ブラウザでも、同じように表示される必要があります。
よくあるブラウザ互換性の問題
- IE 11 では、CSS Grid や Flexbox が完全に対応していない
- Safari では、特定の CSS プロパティが動作しない
- Firefox では、ブラウザのデフォルトスタイルが Chrome と異なる
実務での対策
CSS リセット・ノーマライズ：すべてのブラウザで同じ見栄えにするために、ブラウザのデフォルトスタイルを統一します。以下の2つの方法があります。
- CSS Reset：すべてのデフォルトスタイルを0にする方法
- Normalize.css：ブラウザ間の差を最小限に調整する方法
実務では、Normalize.css を使うことが多いです。
ベンダープレフィックス：古いブラウザに対応させるために、CSS に「-webkit-」「-moz-」といったプレフィックスをつける必要があります。
例）
/* 標準の書き方 */
transform: rotate(45deg);
/* ベンダープレフィックス付き（互換性のため） */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
ただし、最新の CSS なら不要な場合もあります。案件ごとに確認しましょう。
Can I Use で確認：「Can I Use」というサイトで、特定の CSS プロパティがどのブラウザで対応しているか確認できます。これが実務の必須ツールです。
1-3. ギャップ3「クライアントの要件を実装する実践力」
基礎学習では「このサイトを作りましょう」という、ゴールが明確な練習ばかりです。しかし、実務では「クライアントの曖昧な要望」を、形にする必要があります。
実務的なシナリオ
クライアント：「ボタンを目立つようにしてください」
あなた：「どのくらい目立つですか？色は？大きさは？」と確認する必要があります。
このように、クライアントの曖昧な要望を、明確な「仕様」に落とし込むスキルが、実務では最も重要です。
実務で必須のスキル
要件定義ヒアリング：クライアントに質問して、要件を明確にするスキルです。例えば：
- 「どんな人がこのサイトを見るのか？」（ターゲット）
- 「メインの目的は何か？」（コンバージョン）
- 「どのくらいの期間で完成させたいか？」（納期）
- 「予算はどのくらいか？」（単価）
これらを確認することで、「何を作るべきか」が明確になります。
デザインからコードへの落とし込み：クライアントが Figma や Adobe XD でデザインを作ってくれることもあります。その場合、デザインを見て「ここは何のカラーコード？」「この要素の大きさは？」と、正確に読み取る必要があります。
実装の優先順位をつける：全ての要件を一度に実装するのではなく「MVP（Minimum Viable Product）」という考え方が大事です。まず最小限の機能で完成させ、その後に追加機能を実装する流れです。
ステップ2：実践的なポートフォリオを作る（3～4週間）
2-1. 基礎知識ありの人向け・ポートフォリオの要件
完全初心者とは異なり、ここで求められるのは「実務的なクオリティ」です。
質より「実務性」を示す
3～5個の作品を用意することは変わりませんが、内容が異なります。
作品1：実務的な LP 制作
「架空のサービスのLP」ではなく、できれば「実在する企業のサイトを参考にした LP」を作るといいです。理由は、クライアントに「この人は、実務的なサイトの構造を理解している」と示せるからです。
具体的には：
- ヘッダー + ナビゲーション
- ヒーロー画像 + CTA ボタン
- 複数のセクション（3～5個）
- フッター
- スマートフォン・タブレット・デスクトップ対応
- CSS アニメーション（スクロール時にフェードイン、など）
作品1の要件：「実務的で、かつ工夫がある」サイト
作品2：企業のコーポレートサイト（5～10ページ）
以下の構成がおすすめです：
- トップページ
- サービス/プロダクト紹介ページ
- ブログ/ニュースページ
- お問い合わせページ（フォーム機能付き）
- プライバシーポリシーページ
ここで大事なのは「すべてのページが統一されたデザイン」であることです。ナビゲーションが各ページで同じ場所にあり、色使いも統一されている、といった「実務的な統一感」を示すことが重要です。
作品3：WordPress 案件シミュレーション
WordPress のテーマをカスタマイズして、ブログ機能付きのサイトを作ります。ここで示すべきは「コーディングだけじゃなく、CMS の使い方も理解している」ということです。
具体的には：
- WordPress テーマを選定・カスタマイズ
- カテゴリー・タグ機能を実装
- ブログ記事を5～10個作成
- プラグインの活用（SEO プラグイン、お問い合わせフォーム、など）
作品4・5：「工夫がある」作品
ここは完全初心者向けと変わりませんが、「実務的な工夫」を示しましょう。例えば：
- 複雑なアニメーション（Intersection Observer を使ったスクロールアニメーション）
- 複数言語対応
- アクセシビリティ対応（色盲対応など）
- パフォーマンス最適化（画像最適化、遅延読み込みなど）
2-2. ポートフォリオサイトの構成（実務的なバージョン）
ポートフォリオサイト自体も、実務的にします。
トップページ
- 簡潔な自己紹介（顔写真 + 一言）
- 得意分野・専門性の明記（例：「LP 制作に特化」「WordPress カスタマイズ」など）
- 実績数・経歴の簡潔な説明
- 「作品を見る」ボタン
作品ギャラリーページ
各作品に、以下を記載：
- サイト名
- 作成期間
- 使用技術（HTML、CSS、WordPress、など）
- 工夫した点（3～4個）
- スクリーンショット（デスクトップ・スマートフォン両方）
- 「サイトを見る」ボタン（作品へのリンク）
スキル一覧ページ
技術スキルだけでなく、以下も記載すると有効です：
- 開発スキル：HTML5、CSS3、JavaScript（基礎）、WordPress、など
- デザイン関連：レスポンシブデザイン、UI/UX、アクセシビリティ対応、など
- ツール：Visual Studio Code、Figma、Git、Chrome DevTools、など
- ビジネススキル：ヒアリング、納期管理、クライアント対応、など
実務では、純粋な技術スキルより「クライアント対応スキル」の方が重要です。それを示すことが大事です。
ブログページ（オプションだが、強力）
Web制作の知識をブログで発信すると、クライアントに「この人は、ちゃんと知識がある」と示せます。以下のような記事が効果的です：
- 「WordPress で よくあるセキュリティ対策」
- 「モバイルファースト設計の重要性」
- 「CSS アニメーションの実装方法」
- 「実務で役立つブラウザ互換性対策」
ブログがあるだけで、クライアントの信頼が大きく上がります。
お問い合わせページ
お問い合わせフォームを設置します。フォーム送信後、自動でメール通知が来る設定をしておくと、プロっぽいです。
2-3. ポートフォリオ制作時の注意点
完璧さより「更新の鮮度」
ポートフォリオは、完璧に完成させることより「定期的に更新する」ことが大事です。「最後の更新：2024年1月」なんて古い情報だと、クライアントに不信感を与えます。最低でも月1回は何か更新しましょう。
クライアント評価・推薦文を載せる
実績ができたら、クライアントに「推薦文を書いてくれませんか？」と依頼しましょう。「Aさんは、納期を守り、コミュニケーションが良かった」みたいな評価を載せることで、信頼度が大きく上がります。
価格表を載せてもいい
「LP 制作：○万円～」みたいに、おおよその価格を示しておくと、クライアントが問い合わせしやすくなります。
ステップ3：案件獲得前の準備（営業・契約周り）（1～2週間）
3-1. クラウドソーシングサイトの登録と最適化
ポートフォリオが完成したら、クラウドソーシングサイトに登録します。基礎知識ありの人なら、複数サイトに登録して、競争を避けるのが戦略です。
おすすめのサイト（実務初心者向け）
Coconala：小さな案件～中程度の案件が多い。初心者にはおすすめ。手数料は 25%。
Lancers（ランサーズ）：大手で案件数が多い。ただし競争が激しく、単価が下がりやすい。手数料は 10～20%。
CrowdWorks（クラウドワークス）：大手だが、初心者向けの小さな案件が多い。手数料は 20%。
MUSHA（ムシャ）：中級者向け。案件の質が高く、単価も良い傾向。登録に審査がある。
基礎知識ありなら、Coconala + MUSHA の組み合わせがおすすめです。Lancers や CrowdWorks は競争が激しいので、避ける方が無難です。
3-2. プロフィール最適化のコツ
クラウドソーシングサイトでのプロフィール作成は、極めて重要です。ここが「営業」の役割を果たします。
プロフィール写真
顔写真を使いましょう。実名である必要はありませんが、信頼度が大きく異なります。できれば、プロっぽい写真（自撮りよりプロに撮ってもらったもの）を使うと、クライアントからの問い合わせが増えます。
自己紹介文の構成
効果的な自己紹介文は、以下の構成です：
【現在の立場】
フリーランスの Web 制作者として、○年活動しています。
【専門分野】
LP 制作と WordPress を専門としており、
クライアントのビジネス目標を達成するサイト構築を得意としています。
【実績】
これまで○件の案件を完成させ、クライアント満足度は○%です。
【得意な作業】
- HTML/CSS コーディング
- WordPress カスタマイズ
- レスポンシブデザイン対応
- クライアント打ち合わせ・ヒアリング
【こだわり】
納期厳守、丁寧なコミュニケーション、クライアント満足度を最優先としています。
【対応言語】
日本語のみ
【対応時間帯】
平日 19:00～23:00、土日は相談
【問い合わせ前にご確認ください】
詳しくはポートフォリオ（URL）をご確認ください。
大事なポイント
- 短すぎず、長すぎず（150～300文字が目安）
- 専門性を明確に（「なんでもできます」NG）
- 得意な作業を具体的に列挙
- クライアントへのメッセージ（納期厳守、など）
- 対応時間を明記（副業なら、夜間・土日と明確に）
3-3. 契約前の注意点・ポイント
実務を始める前に、必ず確認すべきポイントです。
案件の詳細をしっかり確認
クラウドソーシングサイトの案件説明をよく読みましょう。特に：
- 「HTML/CSS のコーディングのみ」か「デザインから実装まで」か
- WordPress なら「テーマのカスタマイズのみ」か「プラグイン開発も」か
- クライアントが デザインを用意しているのか、自分で作る必要があるのか
これらが曖昧だと、納期に間に合わないことになります。
納期の余裕を持たせる
クライアントからの納期が「3週間」なら、自分の予定では「2週間で完成させる」くらいの余裕を持ちましょう。修正依頼が来る場合が多いからです。
修正回数の上限を決める
案件開始前に「修正は何回まで無料か」を明確にします。そうしないと、無限に修正依頼が来ることもあります。相場は「3回まで無料、以降は別途費用」くらいです。
報酬の支払い方法を確認
クラウドソーシングサイトによって支払いタイミングが異なります。例えば、「納品後、クライアント承認から7日後に支払い」など。キャッシュフローに注意しましょう。
ステップ4：初案件を獲得して実績を作る（1ヶ月）
4-1. 案件選びの戦略
基礎知識ありなら、単価より「実績作り」を優先します。ただし、自分のスキルより高度な案件は避けましょう。
案件選びの目安
単価相場
- LP 制作：5,000～15,000円
- WordPress 案件：3,000～10,000円
- 企業サイト制作（複数ページ）：10,000～50,000円
基礎知識ありなら、「LP 制作 10,000円」「WordPress 案件 5,000円」くらいが狙い目です。
案件の難易度を見極める
案件説明に以下のような言葉があると、初心者には難しいです：
- 「複雑なアニメーション実装」
- 「JavaScript の実装」
- 「SEO 対策」（SEO の知識が必要）
- 「API 連携」
- 「デザインから実装まで一括」
反対に、以下のような案件は、初心者向けです：
- 「デザインが完成しており、コーディングのみ」
- 「WordPress テーマのカスタマイズ」
- 「既存のサイトのスマートフォン対応」
- 「バグ修正」
4-2. 初案件の進め方
初めての案件は、以下の流れで進めます。
ステップA：クライアントへの提案文
案件に応募する際、提案文を書きます。効果的な提案文は以下の構成です：
【現在地の把握】
「この案件は、HTML/CSS のコーディングで、スマートフォン対応という理解です。」
（クライアントが言ったことを、自分の言葉で確認する）
【経験】
「私は○件の同様案件を完成させており、同じような作業は得意です。」
【工夫】
「ブラウザ互換性対応、レスポンシブデザイン対応など、細部にこだわります。」
【納期】
「○週間で完成させられます。」
【その他】
「ご不明な点があれば、いつでもお問い合わせください。」
大事なポイント
- テンプレート的な提案文は避ける（「このたびは案件をいただきありがとうございます」など、定型文は NG）
- クライアントの要件を「理解している」ことを示す
- 自分のスキルで対応できることを示す
- 質問や疑問があれば、提案段階で聞く
4-3. 受注後の進め方
案件を受けたら、以下の流れで進めます。
1. 詳細な要件確認（初日）
クライアントとチャットで、詳細を確認します：
- 「デザインはいつ送ってくれますか？」
- 「何個のページがありますか？」
- 「スマートフォンは、どのサイズまで対応ですか？」
- 「使用フォント、色指定はありますか？」
曖昧な部分があると、後で大変なので、ここで明確にします。
2. 開発環境の構築（1～2日）
以下を準備します：
- ローカル環境での制作（ファイル構成の決定）
- Git でバージョン管理（オプションだが、推奨）
- 作業ファイルの組織化
3. コーディング開始（○週間）
実装を進めます。ここで大事なのは：
- 定期的にクライアントに進捗報告（週1回程度）
- わからないことがあれば、早めにクライアントに相談
- 修正依頼が来たら、優先順位をつけて対応
4. テスト・修正（最終1～2週間）
完成後、以下をテストします：
- 複数ブラウザでの表示確認（Chrome、Safari、Firefox、IE）
- 複数デバイスでの表示確認（iPhone、iPad、Android、デスクトップ）
- リンク切れがないか確認
- 画像が正しく表示されているか確認
クライアントへ確認用 URL を共有し、修正依頼を待ちます。
5. 納品（修正完了後）
最終ファイルをクライアントに提出します。クラウドソーシングサイトで「納品」ボタンを押して、完了です。
4-4. 初案件でよくあるトラブルと対策
トラブル1：修正依頼が次々と来る
対策：案件開始前に「修正は3回まで」と明記する。それ以上の修正は「追加費用」と明確にする。
トラブル2：クライアントから何日も返信がない
対策：スケジュール表を作成し「○月○日までにご確認ください」と期限を設定する。
トラブル3：デザインが完成せず、コーディングが開始できない
対策：デザイン完成までの期限を、案件開始前に決めておく。
トラブル4：要件が途中で変わる
対策：「要件追加は別途費用」と明記しておく。スコープクリープ（仕事の範囲が勝手に増える）を防ぐ。
ステップ5：案件をこなしながら単価を上げていく（継続）
5-1. 実績を増やすペース
基礎知識ありなら、以下のペースが理想的です：
月1～2案件：本業との両立を考えると、これくらいが現実的です。
4ヶ月で4～8案件の実績を作ります。
単価の目安
- 1件目：5,000円（実績作り）
- 2～3件目：5,000～8,000円（評価をもらいながら少しずつ上げる）
- 4件目以降：8,000～15,000円（実績が出たので、単価交渉が可能に）
月5万稼ぐには「月5案件 × 10,000円」が理想的です。これは、おおよそ3～4ヶ月で実現可能です。
5-2. クライアント評価を最大化する
クラウドソーシングサイトでは「評価」が次の案件獲得に直結します。
評価を高くするコツ
- 納期を守る：最も重要。遅れるくらいなら、早めに完成させる
- こまめに報告：「進捗は○%です」など、定期的に連絡
- 修正に素早く対応：修正依頼が来たら、24時間以内に対応
- 丁寧なコミュニケーション：「かしこまりました」「確認いたします」など、敬語を使う
- ビジネス文書を整える：タイムシートや請求書をきちんと作成
5-3. 次のステップ：単価アップ・案件内容のレベルアップ
実績が増えてきたら、単価交渉を始めます。
単価交渉のタイミング
- 評価が4.8以上（5.0満点中）
- 実績が5件以上
- クライアントからの信頼度が高い
単価交渉の方法
クライアントとチャットで：
「これまで5件のプロジェクトをお引き受けし、ご満足いただけたようで嬉しいです。今後は、複雑な実装にも対応できるようになりました。次のプロジェクトから、単価を○円に設定させていただけますでしょうか？」
重要なのは「自分のスキルが上がった」ことを示すことです。
案件内容のレベルアップ
単価が上がったら、案件内容も難度を上げます：
- LP 制作から「複数ページのサイト制作」へ
- WordPress から「JavaScript を使った動的サイト」へ
- 「デザインから実装まで一括」という案件へ
月5万稼ぐまでの現実的なタイムライン
基礎知識ありなら、以下のタイムラインが現実的です。
月1：学習 + ポートフォリオ作成
実務ギャップの学習を完了し、ポートフォリオサイトをリリース。案件獲得の準備完了。
月2：初案件獲得
最初の案件（5,000～8,000円）を獲得。実績作りに注力。
月3：2～3件目の案件
実績が増えて、クライアント評価が高くなる。単価が 8,000円程度に上がり始める。
月4：複数案件の並行
月3～5件の案件をこなし、月20,000～30,000円程度の収入。
月5以降：月5万達成
実績が10件以上になり、単価が10,000～15,000円に。月5件の案件で月50,000円達成。
まとめ：HTML・CSS基礎知識ありの初心者が月5万稼ぐロードマップ
基礎知識がある分、完全初心者より進むのは格段に早いです。最も重要なのは「実務スキルのギャップ」を認識し、それを埋めることです。
重要なポイント：
- 実務スキルの3つのギャップを意識する：レスポンシブ、ブラウザ互換性、クライアント要件の実装
- ポートフォリオは「実務的なクオリティ」で：完璧さより、実務性と工夫を示す
- 最初は単価より実績を優先：良い評価をもらうことが、次の案件につながる
- クライアント対応が最も重要：技術スキルより「コミュニケーション」の方が、長期的には報酬を左右する
- 3～4ヶ月で月5万稼ぐことは十分可能：正しいステップで進めば、実現できる
基礎知識があるあなたなら、このロードマップに沿って進めば、確実に月5万の副業収入を得られます。
頑張ってください！
