無料サイトだけでWebデザインの基礎を身につけ、フリーランス案件獲得まで進んだ独学者は少なくありません。本記事では、初心者が最初に使うべき無料学習サイトの選び方から、HTML/CSS・Figmaの学習順序、ポートフォリオ制作までを順を追って解説します。
▶ 3日で初案件PR
この記事でわかること
Webデザインの独学は、無料サイトを「入門・基礎固め・復習」の3段階で使い分けることで、学習コストをかけずに実務レベルへ近づけます。まずHTML/CSSの基礎を1サイトで一通り終わらせ、次にFigmaのデザインツール操作へ進む順番が、初心者が最も挫折しにくい構成です。学習サイトの無料範囲は事前に確認してから登録し、手を動かす模写練習と組み合わせることで、受け身の視聴だけで終わらない独学が実現します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
使いたい学習サイトの「無料で学べる範囲」を登録前に公式ページで確認してください。サービスによっては入門動画は無料でも、課題提出や質問機能は有料プランのみとなっていることが多くあります。この確認だけで、登録後に「思っていたより有料が多い」と感じる場面を大きく減らせます（所要時間：各サイト5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| どの無料サイトから始めるか迷っている | Webデザイン独学に使える無料サイトは目的別に5つで対応 | 5分 |
| HTML/CSSとFigmaどちらを先に学ぶか迷っている | 無料サイトで学ぶ順番は3ステップで決まる | 3分 |
| 学習が続かず挫折しそう | 独学で挫折しない学習の続け方は5つの工夫で整える | 4分 |
| ポートフォリオをどう作るか分からない | ポートフォリオは模写3作品からフリーランス案件獲得へつなぐ | 4分 |
| 無料サイトだけでフリーランスになれるか知りたい | まとめ:Webデザイン独学の無料サイトは入口として十分活用できる | 2分 |
Webデザイン独学に使える無料サイトは目的別に5つで対応
無料のWebデザイン学習サイトは、探し始めると10サイト以上すぐに見つかります。目的別に5つのカテゴリに分けると選びやすくなります。
HTML/CSS入門に使う：Progateとドットインストール
Progateはスライド形式の解説と、ブラウザ上でコードを書いて動かせる演習がセットになった学習サービスです。無料コンテンツでHTML/CSSの基礎一通りを学べるため、「コードを書いたことがない」段階から始める場合の最初の1サービスとして使いやすい構成です。有料プランへの移行でより多くのコース・課題にアクセスできますが、まず無料範囲で基礎の流れをつかむ使い方が現実的です（Progate公式）。
ドットインストールは1本3分前後の短い動画で構成されており、「通勤中に1本だけ見る」という使い方に向いています。HTMLとCSSの基礎コースは無料で視聴でき、Progateと並行して「文字で読んで、動画でも確認する」補完の使い方が有効です（ドットインストール公式）。
Progateを一度やったけど分からなくなって止まった、という経験は珍しくありません。そのときは同じ章をドットインストールの動画で見直すと、詰まった箇所が別の説明で理解できることがあります。
Figmaとデザインツール操作に使う：chot.designとSkillhub
chot.designはWebデザイン・コーディング・デザインツール操作のショート講座を多数提供する無料サービスです。Figmaの基本操作からバナー制作の手順まで、実務に近い作業単位で学べる講座が揃っており、Webデザインに特化したサービスとして複数の学習サイト比較記事で繰り返し紹介されています（chot.design公式）。
Skillhubは無料講座でHTML/CSS・Figma・WordPress・AI×Web制作などのテーマを扱っており、独学の入口として使いやすいサービスです。「まず無料で試して合わなければ切り替える」判断がしやすい構成で、登録してから講座の進め方を確認する使い方に向いています（Skillhub公式）。
ビジネス・マーケティング基礎を並行して学ぶ：Schoo
Schooは生放送と録画授業を組み合わせたオンライン学習サービスで、デザイン以外にビジネス・マーケティング・ライティングの講座も無料で受講できます。フリーランスとしてWebデザインの仕事を取っていくには、デザインスキルだけでなく「クライアントに提案する力」「サイトの目的を理解する力」も必要になる場面が増えます。Schooはその周辺知識を無料で補える点で、デザイン系サービスと使い分ける価値があります（Schoo公式）。
CHECK
▶ 今すぐやること: 上記5サービスの公式ページを開き、無料で学べる講座のタイトル一覧を確認する（各5分・合計25分）
Q: 無料サイトだけで、実務で使えるレベルまで到達できますか？
A： HTML/CSSとFigmaの基礎操作は無料サイトで一通り学べます。ただし、実務で使えるレベルには「学んだ内容で実際に制作する」工程が欠かせません。無料サイトで基礎を身につけたあと、架空案件でのサイト制作やバナー模写を繰り返すことで、スキルが実務に近づきます。
Q： 複数のサービスを同時に使うのと、1つに絞るのはどちらが効果的ですか？
A： 学習の初期段階では1サービスに絞って一通り終わらせる方が、学習の流れが途切れにくくなります。HTML/CSS入門をProgateで一周したあと、FigmaはChot.designに切り替えるという「フェーズごとに1サービス」の使い方が実用的です。
要点整理
| サービス | 主な学習内容 | 無料範囲の特徴 |
| Progate | HTML/CSS入門 | 演習付きで基礎を一周できる |
| ドットインストール | HTML/CSS補完 | 3分動画で隙間時間に活用しやすい |
| chot.design | Figma・バナー制作 | 実務に近い作業単位で学べる |
| Skillhub | HTML/CSS・Figma・WordPress | 複数テーマを無料で試しやすい |
| Schoo | ビジネス・マーケティング | デザイン周辺知識を無料で補える |
無料サイトで学ぶ順番は3ステップで決まる
Webデザインの独学は学習の順番が決まれば動き出せます。
ステップ1：HTML/CSSの基礎を1サービスで一通り終わらせる
最初にやることはHTML/CSSの基礎です。Webデザインの仕事では、デザインデータをブラウザで表示するためのコードを書く場面があります。コーディングを完全に外注するとしても、「HTMLの構造を読めること」「CSSで何ができるかを理解していること」はクライアントとのやりとりで必要になることがあります。
ProgateのHTML&CSS入門コースを無料範囲で一通り終わらせることを最初のゴールに設定してください。この段階では「全部を理解すること」より「一周することで流れをつかむ」ことを目的にする方が、途中で詰まって止まるリスクを減らせます。
一周目は「何も分からなくて当然」という状態で進めて問題ありません。「display: flex をいつ使うのか全然わからない」と感じながら進めた人が、制作練習を繰り返すうちに自然と使えるようになることは珍しくありません。
ステップ2：Figmaの基本操作をchot.designで学ぶ
HTML/CSSの基礎一周が終わったら、次にFigmaのデザインツール操作へ進みます。Figmaの無料プランはフォルダ管理や共有機能に一部制限がありますが、個人での学習・制作には無料プランで十分対応できます（Figma公式）。
chot.designのFigma講座はショート動画形式で、テキスト・フレーム・コンポーネントなどの基本操作を実際に手を動かしながら覚えられます。「動画を見るだけ」で終わらず、必ず自分で操作しながら進めることが、ツール習熟を早める上でのポイントです。
Figmaはチュートリアル動画を3本見ただけでは操作を覚えられず、実際にバナーを1枚作ってみて初めて「ショートカットの意味」が分かってくることが多くあります。
ステップ3：WordPressの基礎とサイト公開の流れを確認する
Figmaで簡単なデザインが作れるようになったら、WordPressの基礎とサイト公開の流れを把握します。フリーランスのWebデザイン案件では、WordPressを使った制作・修正依頼が一定数あります。Skillhubの無料WordPressコースで基本操作を確認したあと、WordPress.org公式ドキュメントでテーマ・プラグインの仕組みを補足するのが現実的な進め方です。
Q： Figmaを学ぶ前に、Photoshopを先に覚えるべきですか？
A： Figmaを先に学ぶ方が実務に直結しやすいです。Webデザインの案件では、Figmaを使ったデザインデータのやりとりが増えており、Photoshopは画像加工や印刷物に強みがあります。まずFigmaで画面設計を一通りできるようにしてから、必要に応じてPhotoshopを追加で学ぶ順番が実用的です。
Q： 3ステップをどのくらいの期間で終わらせる目安ですか？
A： 1日30分の学習を継続した場合、ステップ1（HTML/CSS一周）に3〜4週間、ステップ2（Figma基礎操作）に2〜3週間、ステップ3（WordPress概要把握）に1〜2週間が目安です。合計2〜3か月で3ステップが終わる計算ですが、制作練習を並行する分だけ期間は延びます。
確認事項
| ステップ | やること | 目安期間 |
| 1 | ProgateでHTML/CSS入門を一周する | 3〜4週間 |
| 2 | chot.designでFigmaの基本操作を習得する | 2〜3週間 |
| 3 | SkillhubでWordPressの基礎を把握する | 1〜2週間 |
独学で挫折しない学習の続け方は5つの工夫で整える
独学で一番多い問題は、スキル習得の前に「続かなくなること」です。これは怠慢ではなく、学習設計の問題である場合が多くあります。
工夫1：毎日30分の固定ルールで「今日はやるかどうか」の判断をなくす
「今日は時間があるから2時間やる、明日は疲れたからやらない」という学習ペースは、習慣として定着しにくい傾向があります。1日30分を固定の時間帯に学習する、という単純なルールの方が、週単位での学習量を安定させやすくなります。
「30分やったか」だけを判断基準にすると、内容の理解が追いつかない日でも「30分は座った」という達成感が生まれ、翌日も続けやすくなります。「今日は気が乗らないから」と判断する場面そのものをなくすのが目的です。
毎日やると決めたのに3日坊主になった経験は多くの人が持っています。その場合は「4日目から再開するだけ」と捉え直すと、再開のハードルが下がります。
工夫2：学習サイトの進捗機能を使って「今日どこまで進んだか」を可視化する
ProgateやSkillhubは、コースの完了率やポイントを記録する進捗管理機能を持っています。「今日は3レッスン進んだ」という事実が数値で残ると、翌日の学習に向けたモチベーションが継続しやすくなります。
進捗機能が使えるサービスを選ぶ際には、「記録が残ること」だけでなく「どのコースが終わってどのコースが残っているかを一目で確認できること」まで確認する方が、学習計画を立てやすくなります。
工夫3：「視聴する」ではなく「手を動かして作る」時間を必ず設ける
動画や解説を見るだけで学習を終わらせると、「分かった気」になって実際には手が動かないという状態になりやすくなります。学習時間の半分以上を「実際にファイルを開いて何かを作る」時間にすることが、スキル習得を早める上でのポイントです。
chot.designの講座は「見ながら手を動かす」構成が多く、視聴と制作を切り離しにくい設計になっています。この形式に慣れてから、Figmaを開いてゼロから何かを作る練習へ移行する流れが現実的です。
工夫4：詰まったら「公式ドキュメント」に戻る習慣を作る
学習サイトの解説で理解できなかった部分は、MDN Web Docs（HTML・CSS公式リファレンス）で調べると、具体的な仕様と例が確認できます。「学習サイトの解説 → 公式ドキュメントで確認 → 自分のコードに適用」という流れを習慣にすると、サービスの解説の分かりにくさで詰まりにくくなります。
Figmaの場合はFigmaヘルプセンターに操作説明が詳細にあり、chot.designの講座で分からなかった操作を確認する補完として使えます。
工夫5：週1回、学んだことをメモとして残す
毎週末に「今週学んだこと3つ」をテキストファイルやNotionにメモする習慣は、記憶の整理に使える他に、後から見返したときに「自分がこれだけ進んでいる」という実感を確認できます。このメモが後のポートフォリオ作成時に、「どんな学習をしてきたか」を説明する文章の下書きにもなります。
CHECK
▶ 今すぐやること: 今日から30分単位で学習時間を設定し、ProgateまたはSkillhubの最初のコースを開始する（設定5分＋学習30分）
Q: 独学中に疑問が出たとき、どこで質問できますか？
A： まずMDN Web Docsなどの公式ドキュメントを確認し、それでも解決しない場合はX（旧Twitter）やDiscordのWebデザイン学習コミュニティで質問する方法があります。有料プランへの移行で質問機能が使えるサービスもあるため、疑問が多くなってきた段階で費用対効果を判断するのが現実的です。
Q： 学習が続かない場合、スクールへの切り替えを検討すべきですか？
A： 独学で続かない原因が「一人では質問できない」「学習の進め方が分からない」であれば、スクールを検討する意味はあります。ただし、費用が数十万円規模になることが多いため、まず無料サイトで1〜2か月試してから判断してください。
覚えておくこと
| 工夫 | 目的 | 実行タイミング |
| 毎日30分の固定ルール | 判断コストをなくす | 今日から |
| 進捗機能の活用 | 達成感の可視化 | サービス登録時 |
| 手を動かす時間の確保 | 「分かった気」を防ぐ | 毎回の学習時 |
| 公式ドキュメントの参照 | 詰まりを解消する | 疑問が出たとき |
| 週1回のメモ | 記憶の整理と進捗確認 | 毎週末 |
PR提供: 日本デザインスクール（デザスク）
独学の進め方を3つの状況で診断する
自分の今の状況に合わせた進め方を確認します。
Q1: Webデザインの学習を始めたことがありますか？
はじめての場合はQ2へ進みます。一度始めたが続かなかった場合はQ3へ進みます。
Q2: HTML/CSSのコードを書いたことがありますか？
書いたことがない場合は結果Aです。少しある場合は結果Bです。
Q3: 止まった理由は何ですか？
内容が分からなくなった場合は結果Cです。続かなくなった（忙しくなった・飽きた）場合は結果Dです。
結果A：まずProgateのHTML入門から1ステップずつ進める
コードを書いたことがない場合は、Progateのブラウザ上での演習形式が最初の1サービスとして使いやすい設計です。無料コースを一通り終わらせることを最初のゴールに設定し、完全な理解は二周目以降に持ち越す方針で進めます。
結果B：chot.designでFigmaの基礎操作へ進む
HTML/CSSの基礎が少しある場合は、Figmaのデザインツール操作へ移行する段階です。chot.designのFigma入門講座から始め、バナーを1枚作ることを最初の制作ゴールに設定します。
結果C：ドットインストールで同じ内容を動画で見直す
内容が分からなくなって止まった場合は、同じテーマをドットインストールの短い動画で見直すと、別の説明で理解できる場合があります。「最初のサービスで分からなければ終わり」ではなく、「複数の説明を使い分けて理解を補完する」という考え方が独学の継続に使えます。
結果D：毎日30分の固定ルールで再開する
続かなくなった場合は、学習量を増やすよりも「30分という短い固定時間を毎日必ず確保する」仕組みに切り替えます。サービスをやり直すのではなく、止まった箇所から再開するだけで構いません。
Q： 仕事しながら独学する場合、週に何時間の学習時間が必要ですか？
A： 週3〜4時間（1日30分×7日）を目安に考えると、3か月で学習の基礎段階を一通り終わらせられる計算です。週10時間以上確保できる場合は制作練習を早めに組み込めますが、まず「毎日続く量」から始める方が長期的な学習量は安定します。
Q： スマートフォンだけでWebデザインの独学はできますか？
A： コーディングの実習はパソコン環境が前提になるため、スマートフォンのみでの独学は現実的ではありません。Figmaのデスクトップアプリも、PC環境での利用が実務に近い操作感を得られます。学習を始める段階でPCを用意することを前提に考えるのが実用的です。
ポイント
| 診断結果 | 次にやること |
| 結果A（未経験） | ProgateのHTML入門を一周する |
| 結果B（基礎少しあり） | chot.designのFigma入門を開始する |
| 結果C（内容で詰まった） | ドットインストールで同じ章を見直す |
| 結果D（続かなかった） | 30分固定ルールで止まった箇所から再開する |
ポートフォリオは模写3作品からフリーランス案件獲得へつなぐ
実案件がない段階でポートフォリオを作る場合、「模写 → 架空案件 → 実際の制作」の順番が現実的です。
模写から始めてWebデザインの型を身につける
模写とは、既存のWebサイトやバナーを見ながら、同じレイアウト・デザインをFigmaまたはコードで再現する練習です。「0から考えてデザインする力」より先に「プロのデザインを読み解く力」を身につけるための手法で、独学の初期段階に特に有効です。
最初の模写対象はバナー1枚から始めるのが現実的です。LPや企業トップページの模写はデザインの要素が多く、最初に手をつけると「どこから始めるか分からない」という状態になりやすくなります。
バナー模写を3〜5枚終えたあと、シンプルな1ページのLPに移行します。この段階でFigmaのコンポーネントやグリッドの使い方が実感として身についてきます。LP模写が詰まったときは、chot.designのLP制作講座に戻って該当ページの構造を確認する方法があります。
フリーランスとしてWebデザイナーの仕事を受注していくには、模写練習を通じて実務レベルのスキルを身につけることが不可欠です。
架空案件でデザインの意思決定を練習する
模写で型を身につけたら、目的と制約を自分で設定した架空案件を制作します。「個人経営の整体院のWebサイトをリニューアルする、予算はなく、スマートフォン表示を優先する」という設定で制作すると、「なぜこのレイアウトにするか」という判断が必要になり、実案件に近い思考の練習ができます。
架空案件のテーマは実在する業種から選び、同業種の実際のWebサイトを5〜10件調べてからデザインを始める方が、リアリティのある制作になります。このプロセス自体が、後にクライアントへのヒアリングや提案に使える経験になります。
制作物の見せ方まで意識してポートフォリオに整理する
制作物が3〜5件たまったら、ポートフォリオとして整理します。制作物を並べるだけでなく、「どんな目的で作ったか」「どんな判断をしたか」「制作時に苦労した点と対応」の3点を添えると、案件獲得の際に作業の意図を説明できる資料になります。
フリーランスとしてWebデザインの仕事を受ける場合、クラウドソーシングのプロフィールページにポートフォリオを掲載することが一般的です。「ポートフォリオを見せてください」と求められる前にプロフィールページから確認できる状態にしておく方が、案件獲得の機会を逃しにくくなります。独学でWebデザインを学びフリーランスになれるか不安だったが、学習サイトで基礎を身につけてクラウドソーシングで小さな案件から始めることで経験を積めた、という声もあります。
CHECK
▶ 今すぐやること: バナー模写の練習対象を1つ選び、Figmaで新規ファイルを作成して模写を開始する（選定5分＋制作60〜90分）
Q: ポートフォリオは何作品あれば案件獲得に使えますか？
A： 最低3作品を目安にすることが多くあります。ただし数よりも「目的と制作意図が説明できる作品があるか」の方が重要で、10作品あっても同じバナーの模写ばかりでは実務対応力を示しにくくなります。1ページのLP、多ページのサイト、ツール操作（Figmaのコンポーネント活用等）と種類を分けた3作品の方が、案件の幅を広げやすくなります。
Q： ポートフォリオはどこで公開すればよいですか？
A： Figmaの共有リンク、Notion、GitHub Pagesなど、無料で公開できる手段が複数あります。クラウドソーシング（ランサーズ・クラウドワークス等）のプロフィールに直接リンクを載せる形が、案件獲得の文脈では最もアクセスされやすい配置です。
押さえておきたい点
| フェーズ | やること | 作品数の目安 |
| 模写 | バナー1枚→シンプルなLP | 3〜5枚 |
| 架空案件 | 業種設定＋デザイン制作 | 1〜2件 |
| ポートフォリオ整理 | 目的・判断・苦労点を添えて公開 | 3件（種類を分ける） |
Webデザイン独学の無料サイトは入口として十分活用できる
無料の学習サイトは、Webデザインの基礎を学ぶ入口として十分機能します。HTML/CSS入門にProgateとドットインストール、Figma操作にchot.designとSkillhub、ビジネス周辺知識にSchooと、目的別に使い分けることで学習の効率が上がります。独学の壁は「サービスの質」より「継続できるかどうか」の場面が多く、毎日30分の固定学習ルールと手を動かす模写練習を組み合わせることが、フリーランス案件獲得へつながるスキル習得の現実的な進め方です。
Progateを開いてHTML入門の最初のスライドを読むことが、実質的な一歩目です。模写から架空案件、ポートフォリオへとつなげていく過程で「分からない」「詰まる」場面は必ず来ますが、それは独学が進んでいる証拠でもあります。フリーランスとして案件を獲得するには、営業活動と実績づくりを並行して進めることが重要です。
| 状況 | 次の一歩 | 所要時間 |
| まだ何も始めていない | ProgateでHTML入門の無料コースを開始する | 30分 |
| HTML/CSSを一周済み | chot.designのFigma入門講座を開始する | 30分 |
| Figmaの基礎操作を習得済み | バナー模写を1枚作ってFigmaで保存する | 60〜90分 |
| 模写が3〜5枚たまった | 架空案件のテーマを決めてFigmaで新規制作を始める | 90〜120分 |
| 制作物が3〜5件たまった | ポートフォリオをクラウドソーシングのプロフィールに掲載する | 60分 |
Webデザイン独学の無料サイトに関するよくある質問
Q: 無料サイトだけでフリーランスのWebデザイナーになれますか？
A： 無料サイトで基礎スキルを身につけることは可能です。ただし、フリーランスとして仕事を継続するには、学習だけでなく「制作実績を積む」「案件を取る」というステップが必要です。無料サイトで学んだ知識をもとに架空案件を制作し、ポートフォリオを整えてクラウドソーシングで小さな案件から始めるという流れが、現実的な入口になります。
Q： Webデザインの独学にかかる費用の目安はどのくらいですか？
A： 無料サイトだけを使う場合、学習サービス自体の費用はかかりません。Figmaは無料プランで学習・制作が可能で、WordPressを試す場合はレンタルサーバーの費用（月数百円〜）が必要になります。Adobe PhotoshopやIllustratorを追加するとサブスクリプション費用（月数千円〜）が発生しますが、フリーランス開始段階ではFigmaと無料サービスだけで案件を受け始めることは可能です。
Q： Webデザインとコーディングは両方学ぶ必要がありますか？
A： 仕事の受け方によって判断が変わります。「デザインデータを作ってコーディングは外注」という働き方であれば、FigmaとWebデザインの基礎に集中することも選択肢です。「デザインからコーディングまで一貫して担当する」場合は、HTML/CSS・WordPressまでを一通り学ぶ方が案件の幅が広がります。まずFigmaでのデザインを一本立ちさせてから、コーディングを追加するかどうかを判断する順番が実用的です。