INDEX目次を開く ＋

「コーディングを副業にしたいけれど、何から学べばよいか分からない」「AIがコードを書ける時代に、HTMLやCSSを勉強する意味はあるの？」と迷う方も多いと思います。

結論から言うと、AIを使えば学習や制作の速度は上げられます。ただし、AIが出したコードの良し悪しを判断できないまま案件を受けるのは危険です。

未経験から目指すべきなのは、すべてを暗記することではありません。AIに助けてもらいながら、完成したページを自分で確認し、問題があれば直し、依頼者に説明できる状態になることです。

この記事では、未経験からコーディング副業の初案件へ進むまでを6段階に分け、各段階で自分が覚えること・AIに任せられること・次へ進む基準をまとめます。

未経験からコーディング副業を始める全体ロードマップ

最初に、全体の流れを確認しておきましょう。

  1. 作業環境と学習時間を用意する
  2. HTML・CSSとレスポンシブ対応を学ぶ
  3. JavaScriptとGitの最低限を覚える
  4. デザインから1ページを完成させる
  5. ポートフォリオを公開する
  6. 完了条件が明確な小さな案件へ応募する

学習期間は、毎週使える時間や過去の経験によって変わります。「3か月で稼ぐ」といった期限を先に置くより、各段階のできるようになったかを確認する基準で進める方が安全です。

また、最初からWordPressへの組み込み、複雑なJavaScript、デザイン制作、SEO対策まで全部を引き受ける必要はありません。まずは支給されたデザインをHTML・CSSで再現し、スマホでも崩れない1ページを完成・公開できる状態を目指します。

ステップ1：作業環境と学習時間を用意する

コーディング副業はスマホだけでは完結しません。最初に次の環境を用意します。

  • パソコン
  • コードエディタ
  • ChromeやSafariなど複数のブラウザ
  • ファイルを保存・整理するフォルダ
  • 週に何時間使えるかを記録する予定表

高性能なパソコンを最初から購入する必要はありません。HTML・CSS・JavaScriptの学習であれば、コードエディタとブラウザが無理なく動くパソコンから始められます。

大切なのは、機材よりも継続できる作業時間です。「空いた時間に勉強する」ではなく、平日は30分、休日は2時間など、生活に合わせて先に枠を確保します。

子育て中に在宅でコーディング副業を続ける考え方では、細切れ時間と集中時間の分け方、家庭と両立するための作業範囲について詳しく紹介しています。

この段階でAIに頼めること

  • パソコンのOSに合った環境構築手順を整理する
  • エラー文の意味を初心者向けに説明してもらう
  • 1週間分の学習計画を、使える時間に合わせて作る

AIへ質問するときは、OS、使っているエディタ、表示されたエラーを省略しないことが重要です。個人情報や仕事の機密情報は入力しないようにしてください。

次へ進む基準

  • index.htmlとstyle.cssを作成できる
  • HTMLファイルをブラウザで開ける
  • ファイルを自分で保存し、再び開ける
  • 1週間に使える学習時間を把握できている

ステップ2：HTML・CSSとスマホ対応を学ぶ

最初に学ぶのは、Webページの構造を作るHTMLと、見た目を整えるCSSです。MDNのLearn web developmentには、環境準備からHTML・CSS・JavaScriptまで順番に学べる教材があります。

HTMLでは、少なくとも次の要素を自分で使えるようにします。

  • 見出しと文章
  • リンクと画像
  • 箇条書き
  • header、main、section、footerなどの意味を持つ要素
  • フォームの基本

CSSでは、次の項目を優先します。

  • 余白、文字、背景、線の指定
  • FlexboxとGridによる配置
  • 要素の幅と高さ
  • メディアクエリによるスマホ対応
  • ホバーやフォーカス時の表示

教材を読むだけではなく、プロフィールページ、店舗紹介、イベント告知など、短いページを実際に作って確認しましょう。

AIは「答えを出す人」ではなく家庭教師として使う

未経験の段階で完成コードを一度に生成させると、動かなかったときに原因を探せません。次のように、範囲を小さくして質問します。

このHTMLとCSSがスマホ幅で横にはみ出します。
原因の候補を3つ挙げ、確認する順番を説明してください。
修正コードを出す前に、どの指定が問題か教えてください。

AIの回答を見たら、コードをそのまま貼るのではなく、一つずつ変更して表示の違いを確認します。

次へ進む基準

  • 見本を見ながら1ページの構造を作れる
  • パソコンとスマホの両方で大きく崩れない
  • ブラウザの開発者ツールで要素とCSSを確認できる
  • AIが提案したCSSについて、何を変えるコードか説明できる

ステップ3：JavaScriptとGitの最低限を覚える

HTMLとCSSだけでも静的なページは作れます。ただし実際の案件では、メニューの開閉、アコーディオン、タブ、スライダーなど、簡単な動きが必要になることがあります。

最初はJavaScriptを網羅的に学ぶのではなく、次の範囲から始めます。

  • 変数、配列、条件分岐、繰り返し
  • 関数
  • 要素の取得
  • クリックイベント
  • classの追加・削除

同時に、Gitでは「変更を記録し、失敗したときに戻せる」ことを最初の目標にします。

  • リポジトリを作る
  • 変更内容を確認する
  • コミットする
  • GitHubなどのリモートへ送る

Gitを使っていれば、AIによる修正が意図と違っても、変更前との差分を確認して戻しやすくなります。

AIに実装させるときの基本手順

  1. 実現したい動きを文章で伝える
  2. 使用しているHTMLとCSSを必要な範囲だけ渡す
  3. 変更するファイルと理由を説明させる
  4. コードを適用する前に差分を見る
  5. パソコン・スマホ・キーボード操作で確認する
  6. 問題があれば、再現手順とともに修正を依頼する

「動いたから完成」ではありません。AI生成コードには誤りや不要な処理が含まれる可能性があるため、自分でレビューとテストを行います。GitHubの公式ドキュメントでも、AIが生成したコードをレビューする手順が案内されています。

次へ進む基準

  • メニューやアコーディオンを自分で動作確認できる
  • エラーが出たファイルと行を調べられる
  • Gitで変更を記録し、差分を確認できる
  • AIのコードを削除・修正する判断ができる

ステップ4：デザインから1ページを完成させる

基礎を学んだら、ヘッダーからフッターまで揃った1ページを作ります。練習用のデザインや、自分で作った簡単なワイヤーフレームをもとに実装します。

最低限、次の要素を含めると実務に近い練習になります。

  • ヘッダーとスマホメニュー
  • メインビジュアル
  • 画像と文章を組み合わせた複数のセクション
  • ボタンや問い合わせへの導線
  • フッター

AIに任せやすい作業

  • HTMLのたたき台
  • 繰り返し部分のCSS
  • ブレークポイント別の修正案
  • アニメーションやメニュー処理の下書き
  • チェック項目の洗い出し

自分で確認すべき作業

  • デザインと表示が一致しているか
  • スマホで横にはみ出さないか
  • リンクやボタンを操作できるか
  • 画像の代替テキストや見出し順が適切か
  • 表示速度を落とす大きな画像や不要なコードがないか

AIへ丸ごと作らせる場合でも、セクション単位で実装・確認・コミットを繰り返します。一度に全部生成して最後に確認すると、問題が起きた場所を特定しにくくなります。

次へ進む基準

  • 見本から1ページを最後まで完成できる
  • 主要なスマホ幅とパソコン幅で確認できる
  • AIを使わずとも、HTMLの構造と主要なCSSを説明できる
  • 修正依頼を受けた場所を自分で特定できる

ステップ5：ポートフォリオとして公開する

ローカル環境で動くだけでは、依頼者に実力を見せられません。完成したページをURLで確認できる状態にします。

公開先には無料ホスティングとレンタルサーバーがあります。学習用の静的サイトなら無料サービスでも始められます。独自ドメイン、仕事用メール、WordPressへの拡張まで考える場合はレンタルサーバーが候補になります。

AIで作ったサイトの公開先を比較する記事と、HTMLサイトをエックスサーバーで公開する手順も参考にしてください。

ポートフォリオには、作品画像だけでなく次の内容も掲載します。

  • 制作したページのURL
  • 担当した範囲
  • 使用した技術
  • 制作期間
  • スマホ対応やアクセシビリティで工夫した点
  • AIを使用した範囲と、自分で確認した内容

AIを使ったことを隠すよりも、どこまで効率化し、どのように品質を担保したかを説明できる方が信頼につながります。

次へ進む基準

  • 第三者がURLから作品を確認できる
  • パソコンと実機のスマホで最終確認している
  • 制作範囲と工夫した点を文章で説明できる
  • 問い合わせ先を用意している

ステップ6：完了条件が明確な小さな案件から始める

最初からWebサイト一式を請け負う必要はありません。未経験者は、作業量と完成条件が見えやすい仕事から始めます。

  • デザイン確定済みの下層ページ1枚
  • 既存ページのスマホ表示修正
  • テキストや画像の差し替え
  • HTMLメールやバナー周辺の実装
  • 既存サイトへの小さなパーツ追加

応募前には、納期だけでなく次の条件を確認します。

  • デザインと素材は支給されるか
  • 対応するブラウザと画面幅
  • JavaScriptやWordPress作業の有無
  • 修正回数
  • 納品形式
  • 公開作業や公開後対応の有無

AIがあるから短納期でも大丈夫、と考えるのは危険です。確認や修正の時間、子どもの体調不良など予定外の時間も見込み、使える時間をすべて納期で埋めないようにします。

AIを使っても省略してはいけない品質チェック

AIを使うほど、最後の確認は重要になります。納品前に少なくとも次を確認してください。

  • パソコンとスマホでレイアウトが崩れていない
  • 横スクロールが発生していない
  • すべてのリンクとボタンが動作する
  • キーボードでも主要な操作ができる
  • 画像に適切な代替テキストがある
  • 見出しの順番が不自然になっていない
  • コンソールにエラーが出ていない
  • 不要な外部ライブラリやコードを含んでいない
  • 依頼者の機密情報をAIへ送っていない
  • 使用する素材やコードのライセンスを確認した

分からない項目が残っている場合は、案件へ応募する前に練習作品で確認します。AIは調査や修正を助けてくれますが、納品物の責任を負うのは制作者です。

未経験者がAIを使うときのよくある失敗

最初から完成サイトを丸ごと生成する

一度に多くのコードを生成すると、どの部分が何をしているのか分からなくなります。セクション単位で作り、動作確認してから次へ進みましょう。

エラー文を読まず、修正だけを繰り返させる

AIが修正を重ねるほど、別の場所に問題が増える場合があります。エラー文、発生手順、期待する動作を伝え、原因を説明させます。

見た目だけで完成と判断する

パソコンで見た目が整っていても、スマホ、キーボード操作、読み込み速度などに問題が残る可能性があります。表示と操作の両方を確認します。

AIを使った時間だけで見積もる

初回の生成時間が短くても、確認、修正、依頼者とのやり取り、納品準備には時間がかかります。見積もりには、コードを書く時間ではなく作業全体を含めます。

未経験から案件へ応募する前のチェックリスト

次の項目にすべて答えられるか確認します。

  • HTML・CSSで1ページを完成できる
  • スマホ対応を自分で確認・修正できる
  • 簡単なJavaScriptの動きを確認できる
  • Gitで変更履歴を残せる
  • 制作物をURLで見せられる
  • AIが生成したコードの役割を説明できる
  • 作業範囲、納期、修正回数を確認できる
  • 分からない仕事を断る判断ができる

チェックが付かない項目は、案件で覚えるのではなく練習作品で補います。すべての技術を習得する必要はありませんが、受ける仕事の範囲については自分で品質を判断できる状態が必要です。

まとめ：AIで近道はできるが、確認する力は省略できない

未経験からコーディング副業を始める流れは、次のとおりです。

  1. 作業環境と時間を用意する
  2. HTML・CSSとスマホ対応を学ぶ
  3. JavaScriptとGitの最低限を覚える
  4. デザインから1ページを完成させる
  5. ポートフォリオを公開する
  6. 小さな案件から始める

AIは、分からない部分の説明、コードのたたき台、エラー原因の整理、品質チェックの洗い出しに活用できます。一方で、表示確認、修正、説明、納品判断は自分で行います。

「AIなしですべて書けるようになってから」ではなく、AIを使いながらも、自分で確認できる範囲を少しずつ広げることが、現在の現実的なロードマップです。