Web制作を副業にしようとHTMLの入門教材を開いた。ところが翌日はデザイン、その次はWordPressが気になり、勉強するものだけが増えていく。
教材を増やすほど安心するのに、完成品は増えません。AIは学習候補を出せますが、「何を作れたら仕事として受けるか」は自分で決める必要があります。
そこで、最初の目標は「小さな依頼を一つ、約束どおりに納品する」にします。月5万円を考えるのは、そのあとです。この目標なら、学ぶ技術とAIへ頼む作業を絞れます。
以下の週数は目安です。1〜2週目と書いた工程に1か月かかっても、完成条件に達するまで進めれば問題ありません。
売るものを一つ決める
Web制作の仕事は幅が広く、何でも引き受けると学ぶ範囲も納品条件も決まりません。学習を始める前に、次のような小さなサービスから一つ選びます。
- 既存ページの文章や画像を差し替える
- スマートフォン表示の崩れを直す
- 1ページの告知サイトを制作する
- 店舗サイトへ営業時間やメニューを追加する
- WordPressの記事入稿と装飾を代行する
「完成の条件を説明できるか」で選びます。
「ホームページを作ります」では、ページ数も原稿の有無もわかりません。「支給された原稿と写真を使い、スマートフォン対応の1ページを公開します」まで狭めれば、作業項目を洗い出せます。
初めて扱う領域を含む場合は、そのことを隠さず、練習制作を終えてから提案します。
1〜2週目：HTMLとCSSで、1ページを完成させる
最初の練習では、架空のカフェや地域のイベントなど、内容を想像しやすい題材で1ページを完成させます。
完成条件は次の5点です。
- 見出し、段落、画像、リンクをHTMLで組める
- CSSで余白、文字、色を調整できる
- スマートフォンでも横にはみ出さない
- 問い合わせ先や営業時間を読み間違えにくい
- 公開URLを第三者へ渡せる
AIには、エラーの説明やコード例の作成を頼めます。生成したコードの意味を確認せず貼ると、修正依頼を受けたときに手が止まります。
「この指定は何のためか」「消すとどこが変わるか」を一行ずつ確かめておけば、修正依頼にも自分で判断して対応できます。
HTMLやCSSの仕様は、MDNのウェブ開発学習ページで確認できます。
3〜4週目：同じページを、要望つきで作り直す
一度作ったページへ、架空の修正依頼を加えます。
・一番上に「9月3日から予約開始」と表示する
・料金を3種類に分ける
・電話ではなく、問い合わせフォームへ誘導する
・地図のリンクを追加する
・古いiPhoneでも読みにくくならないよう確認する実務では、既存のページを壊さず直す仕事もあります。変更前の状態を保存し、修正後にリンクと表示を確認するところまで練習します。
「見た目を良くして」では指示が曖昧です。AIには、変更箇所と残す部分を分けて伝えます。
Codexへ修正を頼みながら、このサイトを公開した流れは、制作の実践記録に残しました。
練習したページを案件応募で見せるなら、完成画面と一緒に担当範囲と修正記録を用意します。未経験から作るWeb制作ポートフォリオで、1サイトに載せる内容を確認できます。
5週目：サービスの範囲を文章にする
練習制作が終わったら、できることを依頼者に伝わる形で書き出します。販売ページには次の項目が必要です。
| 項目 | 書いておく内容 |
|---|---|
| 納品物 | 1ページ、画像3点まで、公開作業を含む、など |
| 依頼者に用意してもらうもの | 原稿、写真、ロゴ、ログイン情報の有無 |
| 修正回数 | 何回まで含むか、追加修正はどう扱うか |
| 納期 | 素材がそろってから何日か |
| 対応外 | ロゴ制作、撮影、文章作成、予約システムなど |
作業範囲を決めてから、必要時間と外部費用を見積もります。料金を先に決めると、作業が増えたときに追加費用を説明しづらくなります。
契約書と見積書のひな型も用意します。AIで下書きを作った場合も、自分で取引条件を読みます。不明点は専門家や公的な相談窓口へ確認してください。
6週目：知らない人に見てもらう
家族や友人に制作物のURLだけを渡し、次の三つを聞きます。
- 何のサイトか、最初の数秒でわかったか
- 次に押す場所で迷わなかったか
- スマートフォンで読みにくい場所はなかったか
「おしゃれ」「すごい」という感想は、修正箇所を示しません。迷った場所を聞けば、自分が省いた説明を特定できます。
指摘を受けたら、「問い合わせ先だと気づかなかったため、文言と位置を変える」のように原因を一文で書きます。AIへ修正を頼むときも、この原因をそのまま伝えます。
7週目以降：小さく提案し、納品まで記録する
クラウドソーシングのほか、知人の店舗や地域の活動でも依頼を探せます。以前の勤務先が手を付けられずにいた更新作業も候補です。
提案文には次を入れます。
- 募集内容のどこを読んだか
- 自分が対応できる範囲
- 似た練習制作のURL
- 作業前に確認したいこと
- 納期の考え方
AIで同じ提案文を大量に送ると、相手の依頼を読まずに応募したように見えます。誤字の確認や文章の整理には使えても、相手固有の事情まで自動では書けません。
案件の探し方と提案文の例は、Web制作副業で最初の1件を取る方法で扱っています。
納品前は「見た目」以外を確認する
初案件では、確認漏れが信用を傷つけます。
- 依頼者が指定した文章と数字が合っている
- すべてのリンクが開く
- フォームの送信先が正しい
- パソコンとスマートフォンで表示を確認した
- 画像の利用許可と出典を確認した
- アカウントやパスワードを安全な方法で受け渡した
- 納品後に誰が更新するか決めた
公開URLは自分で開きます。AIの回答だけで確認を終えず、固定したチェック項目を毎回同じ順番で見ます。
AIは、作業を早める道具として使う
AIには、次の作業を任せられます。
- エラーメッセージを日本語で整理する
- 修正方法の候補を出す
- 表示確認の項目を洗い出す
- 提案文のわかりにくい部分を指摘させる
- 納品手順をチェックリストにする
相手との約束、公開してよい情報、著作権、料金、納期は自分で決めます。公開してよいかどうかも、内容を理解したうえで自分が判断します。
独学を続けるか、質問できる環境を買うか。その判断材料は、Web制作の学習サービス・スクール比較で整理しています。
最初の目標を納品1回にする
月5万円を目標にする場合でも、最初から金額だけを追うと、できない仕事まで引き受けやすくなります。
まずは範囲を絞った制作物を1ページ完成させ、誰かに見てもらって直します。その後、小さな依頼を受け、決めた条件どおりに納品します。
そこで実際にかかった時間と困った点が、次の見積もりの材料になります。AIは、繰り返し作業や確認項目の整理に使ってください。