Webデザインは、HTML/CSSの基礎からFigmaによるデザイン制作まで、無料の学習サービスだけで実務レベルに近いスキルを身につけられます。本記事では、完全無料と条件付き無料の違い、学習順序、教材の選び方を具体的に解説します。
▶ 3日で初案件PR
この記事でわかること
Webデザインを無料で学ぶ際に知っておきたい3点を先にまとめます。第一に、完全無料サービスと条件付き無料サービスの違いを事前に確認することで、想定外の課金を防げます。第二に、HTML/CSS→Figma→模写→実装→公開という5ステップの順序を守ることで、手戻りなくポートフォリオまで到達できます。第三に、無料ツールだけでポートフォリオ3点を公開し、3〜6か月で初案件に応募できる状態を作ることが現実的な目標です。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Webデザインの無料学習は、「完全無料サイト」と「条件付き無料スクール」を目的に応じて使い分けることで、無駄な課金を避けながら実践スキルを積めます。フリーランスを目指す場合は、HTML/CSS基礎→Figma→模写→ポートフォリオという順序で進めると、案件獲得に必要なスキルセットを体系的にカバーできます。
最初に確認すること
自分が使おうとしているサービスが「完全無料」か「条件付き無料」かを確認してください。サービス名だけで判断せず、公式ページの料金ページまたはFAQを1分かけて開き、無料範囲の上限（視聴可能本数・学習可能カリキュラム・期間制限・転職支援の有無）を確認します。この1ステップで、後から想定外の課金が発生するリスクを大きく減らせます。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| まず何から学ぶか決めたい | Webデザイン無料学習は5ステップで進める | 5分 |
| 無料サービスの違いを比べたい | 無料サービスは完全無料と条件付き無料の2種類 | 4分 |
| 今すぐ教材を選びたい | 用途別に選ぶ無料教材5選 | 5分 |
| 挫折しないか不安がある | 学習継続は3つの仕組みで支える | 4分 |
| ポートフォリオまで無料で作れるか知りたい | ポートフォリオは無料ツールで3点制作が目安 | 4分 |
Webデザイン無料学習は5ステップで進める
ステップを決めずに始めると、HTML/CSSを一通り終えた時点で「次に何をすればいいか分からない」状態に陥ります。フリーランス志向であれば、最終的に案件獲得できるポートフォリオが必要になるため、そこから逆算して学習順序を決めることで手戻りを最小化できます。
ステップ1は「HTML/CSS基礎」から入る理由
HTML/CSSを後回しにすると、デザインをコードに落とせない段階でポートフォリオ制作が止まるケースが実務でよく起こります。まずHTML/CSSの基礎をPrograteまたはドットインストールで2〜3週間かけて習得し、「自分でWebページを1枚作れる」状態を先につくります。この状態になると、Figmaで作ったデザインを実装する流れが体感できるため、以降の学習速度が上がります。
ProgateはHTML/CSS入門コースの初期段階を無料で学べます。ドットインストールは1本3分程度の動画を積み重ねる形式で、隙間時間に継続しやすい構成です。どちらか1つに絞り、基礎カリキュラムを完走することを優先します。2つを同時進行すると学習対象が分散して完走率が下がる傾向があります。
ステップ2はFigmaで実際に画面をつくる
HTML/CSSの基礎が身についたら、Figmaを使って実際に画面デザインを作ります。FigmaはPersonalプランが無料で利用でき、ファイル数に上限がありますが初学者の練習には十分な容量があります。プランや無料範囲は変更されることがあるため、事前にFigma公式料金ページで最新情報を確認してください。
最初は既存のWebサイトを模写することで、効率よくデザインの判断基準を身につけられます。模写対象は、シンプルな構造のコーポレートサイトや個人ポートフォリオサイト1〜2件から始めます。模写が終わったら、色・余白・フォントの1点だけ変えて「なぜ変えたか」を自分で説明できる状態を目指します。この言語化が、後でクライアントへの提案説明に直結します。
ステップ3はHTML/CSSでFigmaデザインを実装する
Figmaで作ったデザインを、実際にHTML/CSSでコーディングします。ここで初めてデザインとコーディングが連動する体験ができます。最初は完全に再現できなくても問題ありません。「ここのパディングをどうすれば再現できるか」という問いが生まれた時点で、W3SchoolsやサルワカでCSS仕様を調べる習慣がつき、リファレンスの使い方が身につきます。
実務では細部のズレに時間を取られることが多くあります。学習段階では「全体の構造を再現できたか」を優先し、細部の再現は2周目の課題とするとリズムよく進みます。
ステップ4はWordPressまたはポートフォリオサイトの公開
コーディングで1枚ページが作れたら、実際に外部公開します。GitHubPagesを使えば無料でWebページをホスティングでき、URLをそのままポートフォリオのリンクとして使えます。WordPressを学ぶ場合は、無料のローカル環境構築ツール（Local等）でまず手元で動かしてから公開する手順が一般的です。
公開した作品は、クラウドソーシングの応募文や直接営業のメールに貼り付けられる状態にしておいてください。フリーランス志向であれば、この時点でランサーズやクラウドワークスに登録し、どのような案件が出ているかを見ておくと、自分に不足しているスキルが見えやすくなります。
ステップ5は案件獲得に必要なスキルを補強する
「バナー制作」「LP制作」「WordPress案件」など、案件の種類によって求められるスキルが異なります。ステップ1〜4を終えた段階で、応募したい案件の要件を3〜5件確認し、不足しているスキルを特定してから補強するサービスを選ぶと効率よく進みます。IllustratorやJavaScriptが必要と分かった時点でSkillhubの無料コンテンツを参照するなど、目的が決まってから補助教材を追加する順序がおすすめです。
CHECK
▶ 今すぐやること: 応募したい案件を1件検索し、要件に書かれているスキルを書き出す（5分）
Q: 順序どおりに進まなくても大丈夫ですか？
A： 大丈夫ですが、ステップ1（HTML/CSS基礎）とステップ2（Figma）の順序は守ることをおすすめします。コーディングの感覚なしにデザインだけ先行すると、実装フェーズで詰まって再学習が必要になるケースが多くあります。
Q： 1ステップにどのくらい時間をかけるべきですか？
A： ステップ1は2〜3週間（1日1〜2時間）、ステップ2のFigma基礎は1〜2週間、ステップ3の実装練習は2〜4週間が現実的な幅です。「理解してから次へ」より「手を動かし続けながら理解を深める」方が挫折しにくくなります。
Q： 英語の教材は避けた方がいいですか？
A： W3SchoolsやGitHubは英語が中心ですが、コード自体は英語の読解力をほとんど必要としません。日本語教材でHTML/CSSの基礎が身につけば、コード部分は英語教材でも支障なく進められます。
無料サービスは完全無料と条件付き無料の2種類
「無料で学べる」と書かれているサービスの中身は大きく異なります。選ぶ前に種別を理解しておくと、後から「思っていたより範囲が狭かった」と感じる状況を避けられます。
完全無料サービスは継続費用ゼロで使える
完全無料サービスは、登録から学習完了まで費用が発生しないタイプです。代表的なものとして、chot.design、W3Schools、サルワカが挙げられます。chot.designはWebデザインの基礎から応用まで幅広くカバーしており、デザイン系の実践的な内容を無料で学べます。
完全無料サービスの注意点は、個別質問・添削・転職支援がないことです。学習コンテンツを見て手を動かす分には費用はかかりませんが、「自分の作ったものが正しい方向かどうか」を確認する手段は自分で用意する必要があります。Xやオンラインコミュニティでフィードバックをもらう流れを作っておくと、この課題をある程度補えます。
条件付き無料サービスは範囲と条件の確認が先決
条件付き無料サービスは、一部コンテンツのみ無料、または雇用保険受給者・求職者向けに費用が免除されるタイプです。Schooは無料会員でもライブ授業の一部を視聴できますが、録画授業の全視聴や質問機能は有料会員向けです。ハロートレーニング（公共職業訓練）は、求職者向けに無料または低額でWebデザインを含むコースを提供しており、雇用保険受給者が対象になるケースがあります。
「無料で学べる」と表示されているサービスが実際には転職エージェントとの連携を前提としているケース、または学習期間終了後に自動課金が始まるケースも存在します。申し込み前にキャンセルポリシーと課金開始条件を必ず確認してください。
2種類の選び方は学習目的で変わる
スキル習得のみを目的とする場合は、完全無料サービスを複数組み合わせて使う方法がコスト面で優れています。転職活動や就職を前提とする場合は、キャリア支援が条件に含まれる条件付き無料スクールを検討する価値があります。フリーランスとして案件を獲得したい場合は、転職支援よりも実際の制作物レビューや案件紹介に力を入れているサービスを選ぶ方が合っています。
| 目的 | 向いているタイプ | 主な選択肢 |
| スキル習得のみ | 完全無料サービス | chot.design、W3Schools、サルワカ |
| 転職・就職支援込み | 条件付き無料スクール | ハロートレーニング、GEEK JOB無料枠 |
| フリーランス案件獲得 | 実践重視の有料移行型 | Skillhub、Schoo有料プラン |
Q: 条件付き無料スクールは転職しないと使えませんか？
A： スクールによって異なります。ハロートレーニングは求職者向けですが、Schooは在職中の方でも無料会員として一部の授業を受けられます。申し込み前に受講条件を公式ページで確認してください。
Q： 無料サービスだけでフリーランスになれますか？
A： 完全無料サービスだけでHTML/CSS・Figmaの基礎スキルを身につけてポートフォリオを作ることは可能です。案件獲得後の単価交渉・クライアントとのやりとり・請求書対応などは学習サービスではカバーされないため、実際に案件を取りながら身につける部分が残ります。
Q： 学習期間の目安はどのくらいですか？
A： 1日1〜2時間学習した場合、ポートフォリオを1件公開できる状態に至るまで3〜6か月が現実的な幅です。学習時間の確保ができない週が続くと延びやすくなります。
自分の状況と学習目的を3分で診断する
どのサービスが自分に合っているかを選ぶ前に、現在地を確認しておくと教材選びで迷いにくくなります。以下の3問で自分のフェーズを判定してください。
Q1: Webデザインの学習経験はありますか？
HTML/CSSを触ったことがある場合はQ2へ進んでください。完全に初めての場合はResult Aです。
Q2: Figmaを使ったことがありますか？
Figmaで画面を作ったことがある場合はQ3へ進んでください。使ったことがない場合はResult Bです。
Q3: 公開済みのポートフォリオ作品がありますか？
URLを出せる作品が1点以上ある場合はResult Dです。ローカルのみまたは未制作の場合はResult Cです。
Result A: 完全初心者はHTML/CSS基礎から
PrograteかドットインストールでHTML/CSS入門コースを完走することを最初の目標にします。FigmaやWordPressは後回しにする方が迷いなく進めます。
Result B: コーディング経験者はFigma基礎を並行で
HTML/CSSの基礎があるなら、Figmaを使った模写練習を今すぐ始められます。Figma公式チュートリアルを1日30分かけて進めてください。
Result C: 実装済みの作品をGitHubで公開することを次の目標にする
作品はあるのに公開していない状態は、案件応募の機会損失につながります。GitHub Pages公式ドキュメントを参照し、まず1件のURLを取得することを今週の目標とします。
Result D: 案件の要件と自分のスキルのギャップを特定する段階
公開済みポートフォリオがあるなら、応募したいクラウドソーシングの案件要件を3件確認し、「自分が対応できる」「まだ対応できない」を仕分けします。不足スキルが明確になってから追加の学習サービスを選ぶと、無駄な学習を減らせます。フリーランスとしてWebデザインで案件を取るためには、ポートフォリオの作り方を参考にすると受注率の改善に役立ちます。
Q: HTMLを少し触ったことがあるくらいでResult A・Result Bのどちらですか？
A： 「自分でWebページを1枚作ったことがあるか」を基準にしてください。チュートリアルを見ながらコピーした経験はResult BよりもResult Aに近い状態です。Prograteのレベルチェック機能を試すと、自分の現在地を数分で確認できます。
Q： 社会人で学習時間が取りにくい場合はどうすればいいですか？
A： 1日15〜30分からでも継続できる教材を選ぶことが先決です。ドットインストールは1本3分程度の動画形式のため、通勤時間や昼休みに活用しやすくなっています。週末にまとめて学ぶ方法もありますが、平日に1本だけでも触る習慣がある方が挫折しにくい傾向があります。
Q： デザインセンスがないと感じていますが続けられますか？
A： Webデザインの実務で求められるのは、見た目の感性より「なぜこのレイアウトにするか」を説明できる論拠です。模写を20〜30件こなすうちに判断基準が形成されます。最初から独自デザインに挑戦しようとして詰まるケースは多くありますが、模写練習を積み重ねることでこの論拠が身につきます。
PR提供: 日本デザインスクール（デザスク）
用途別に選ぶ無料教材5選
無料教材はサービスによって得意分野が異なります。「何でも学べる1つのサービス」を探すより、用途ごとに使い分ける方が学習の密度が上がります。同時に3つ以上使い始めると管理が複雑になって途中で止まりやすくなるため、最初は1〜2サービスに絞り、完走してから次のサービスを追加する順序がおすすめです。
無料教材1：HTML/CSS基礎はPrograteとドットインストール
プログラミング学習の入口として広く使われている2サービスです。
【対象】: HTML/CSSを初めて学ぶ、またはもう一度基礎から整理したいフリーランス志望者
【手順】: Prograteに無料登録し、「HTML」コースの無料範囲を完走します（目安1〜2時間）。続いてドットインストールで「HTML入門」「CSS入門」を視聴し、手を動かしてコードを写経します（目安2〜3時間）。2つを終えた段階で、白紙から簡単なプロフィールページを1枚作ります（目安2〜3時間）。
【コツと理由】: 「Prograteで概念を理解→ドットインストールで再度手を動かす」という往復が定着を早めます。同じ内容を別教材で繰り返すことで、文法の「覚え方」から「使い方」に意識が移るためです。Prograteは無料範囲の終了後に有料サブスクリプションへの移行を促す画面が表示されるため、無料で学べる範囲を確認してから登録してください。
【注意点】: PrograteのHTML無料範囲を完走してからドットインストールに移る順序で進める方が確実です。「コードを書かずに動画だけ見る」学習は定着しにくいため、各動画の後に必ずコードを自分で書き直す操作を挟みます。
無料教材2：デザイン基礎はchot.design
Webデザインのデザイン面（レイアウト・配色・タイポグラフィ）に特化した無料学習サービスです（chot.design公式）。
【対象】: コーディング経験はあるが、デザインの判断基準が分からないフリーランス志望者
【手順】: chot.designに無料登録し、「デザインの基礎」カテゴリから順番に進めます（目安3〜4時間）。学んだレイアウトルールを1つ選び、Figmaで適用した画面を1枚作ります（目安1〜2時間）。作った画面を、学んだルールとともにXやSlackの勉強会コミュニティに投稿してフィードバックを得ます（目安30分）。
【コツと理由】: 実務では「なぜこの余白か」「なぜこのフォントサイズか」を説明できることの方が重要です。chot.designはその「なぜ」を言語化する練習に特化しており、「作って説明する」サイクルを回すことで、クライアント提案に使える言語化能力が育ちます。また、Webデザインの配色についての知識を組み合わせると、学んだレイアウトルールをより効果的に活用できます。
【注意点】: chot.designはデザイン理論に強い一方、HTML/CSSのコーディング演習は別サービスで補う必要があります。「chot.designだけでWebサイト制作ができるようになる」と思うと期待と実態がずれるため、ステップ1（HTML/CSS）と組み合わせて使います。
無料教材3：FigmaはチュートリアルとFigmaで練習する
Figmaには無料のPersonalプランがあり、公式チュートリアルも日本語で提供されています（Figma公式チュートリアル）。
【対象】: UIデザインを学びたい、またはFigmaを案件で使える状態にしたいフリーランス志望者
【手順】: Figma公式の「Design basics」チュートリアルを1回通してやり、基本操作を習得します（目安2〜3時間）。既存のWebサイト1件（シンプルなコーポレートサイト推奨）をFigmaで模写します（目安3〜5時間）。模写が終わったら、配色またはフォントを1箇所変えた「改善案」を作り、変更理由を1文で書きます（目安30〜60分）。
【コツと理由】: 模写が最も速く判断基準を養います。公式ドキュメントでは「Design basics」から入ることが推奨されていますが、実務では模写→改善提案のサイクルを早めに回す方が案件で使えるスキルに結びつきやすくなります。
【注意点】: FigmaのPersonalプランはドラフトファイル数に上限があります。練習ファイルが増えてきたら、完成した模写作品以外は定期的に削除するかエクスポートして整理します。プランの無料範囲は変更されることがあるため、Figma料金ページで最新情報を確認してください。
無料教材4：リファレンスはW3Schoolsとサルワカ
W3SchoolsとサルワカはHTML/CSS・JavaScriptの仕様を調べるためのリファレンスサイトです（W3Schools）（サルワカ）。
【対象】: コーディング中に「この書き方であっているか」と迷う場面が多いフリーランス志望者
【手順】: W3Schoolsをブックマークし、コーディング中に分からないプロパティが出たら都度検索します（随時）。サルワカでCSS FlexboxとGridの基礎記事を読み、レイアウトの仕組みを把握します（目安1〜2時間）。実装で詰まった箇所を1つ選び、W3Schoolsの「Try it Yourself」機能でコードを変えながら動作を確認します（随時）。
【コツと理由】: リファレンスとして使うサイトを2〜3本に絞ってブックマークしておくと、調べる時間の無駄を減らせます。W3Schoolsは英語ですが、コードのサンプルを見るだけなら英語読解力はほぼ不要です。
【注意点】: W3SchoolsのHTMLリファレンスには現在の実務では使われていない古い書き方も掲載されています。MDN Web Docsでも同様の記述か確認する習慣をつけると、誤った書き方をそのまま使い続けるリスクが減ります。
無料教材5：Schooのライブ授業でWebデザインの全体像をつかむ
Schooは無料会員でもライブ授業の一部を視聴できるサービスで、Webデザイン・UI/UX・ツール操作など幅広いテーマをカバーしています（Schoo公式）。
【対象】: 独学で方向性を迷っており、Webデザインの全体像を短時間でつかみたいフリーランス志望者
【手順】: Schooに無料登録し、「Webデザイン入門」または「Figma入門」のライブ授業スケジュールを確認します（目安10分）。視聴できるライブ授業に参加し、チャットで質問を投稿してみます（目安60〜90分）。授業で出てきたキーワードのうち、自分が知らなかったものを3つ書き出し、翌日以降の学習テーマとして設定します（目安15分）。
【コツと理由】: ライブ授業に参加することで、他の受講者の質問から「そういう疑問があるのか」「自分はすでにそこをクリアしている」という位置確認ができます。Schooは無料視聴範囲で録画授業の全視聴ができないため、ライブ参加をメインの使い方にする方が無料範囲を最大限活用できます。
【注意点】: Schooのライブ授業は時間帯が固定されており、生活リズムによっては視聴しにくいケースがあります。録画視聴は有料会員向けのため、無料会員のまま継続する場合は、視聴できなかった授業を後追いで学ぶ手段を別途用意する必要があります。
CHECK
▶ 今すぐやること: 自分の状況に最も近い無料教材を1つ選び、無料登録だけを完了させる（5分）
Q: SkillhubはWebデザインを無料で学べますか？
A： Skillhubは無料登録でHTML/CSS・WordPress・Illustratorなどの一部コンテンツを視聴できると紹介されています（Skillhub公式）。無料で学べる範囲は変更されることがあるため、登録前に公式ページで確認してください。
Q： YouTubeの無料動画でも学べますか？
A： 学べますが、体系的な順序で公開されているとは限らないため、「何を見ればいいか分からない」状態に陥ります。まずは本記事で紹介したサービスで基礎を固めてから、YouTubeを補助教材として活用する順序がおすすめです。
Q： 英語の教材（W3Schools、Figma公式）は英語力がないと無理ですか？
A： Figma公式チュートリアルは日本語対応しており、W3Schoolsはコードのサンプルを見るだけなら英語の読解力はほぼ不要です。コードは言語が違っても記号と構文で読めるため、英語を理由に避ける必要はありません。
学習継続は3つの仕組みで支える
Webデザインの独学で最もよく起こる問題は、「モチベーションが続かない」ではなく「次に何をすればいいか分からなくなる」という状態です。学習が止まった時点を振り返ると、教材を終えた直後や、ステップ間の移行タイミングで止まっているケースが多くあります。
仕組み1：学習記録を週単位でつける
「今日学んだこと」を1行でいいのでメモしておくと、翌日の学習をどこから再開すればいいかがすぐに分かります。NotionやGoogleスプレッドシートに「日付・学習内容・詰まった箇所」の3列を作るだけで十分です。細かい学習管理ツールを探してツール選びで時間を使うより、シンプルな記録を続けることを優先します。
週単位で記録を振り返ると、「この週はほとんど進んでいない」という事実が見えます。それを責めるためではなく、「次の週に何曜日の何時に学習時間を確保するか」を決め直すきっかけとして使います。作業効率を上げる方法を参考にすると、学習セッションそのものの生産性も改善できます。
仕組み2：コミュニティで作業の中間状態を公開する
「完成してから公開しよう」という気持ちは分かりますが、完成まで待っていると公開する機会がなかなか来ません。Figmaの模写中の画面でも、HTMLで作ったプロフィールページのコードでも、「作りかけの状態」をXやコミュニティに投稿してください。
完成物でなくても「これはどう思いますか」「ここで詰まっています」という形で投稿すると、経験者からアドバイスが来ることがあります。フィードバックがなくても、「公開した」という事実がその後の学習の動機になりやすくなります。
仕組み3：次のステップを「今日の学習を終えた時点」で決める
学習を終えた後に「次回何をするか」を決めずに閉じると、次に開いたときに「どこまで進んでいたか」の確認から始まり、最初の10〜15分を思い出しに使うことになります。学習を終える前に「次回はXXXのステップ3から始める」とメモしておくだけで、再開時のスタートが速くなります。この習慣はシンプルですが、継続率を安定させる効果があります。
Q： 毎日学習しないと遅れますか？
A： 毎日続けることが理想ですが、週3〜4日でも継続できる習慣の方が長期的に積み上がりやすくなります。「学習しない日が続いても再開できる仕組み」を持つことが核心です。
Q： 挫折したあと再開するコツはありますか？
A： 止まった箇所の1ステップ手前から始め、「できる状態を確認する」作業から入ると再開しやすくなります。止まった地点からそのまま再開しようとすると「あの頃の感覚が戻らない」と感じて再開が重くなります。
Q： オンラインコミュニティはどこがおすすめですか？
A： Xでのハッシュタグ学習（#100DaysOfCode等）や、Slackベースのウェブデザイン勉強会コミュニティが活用しやすいです。コミュニティの質はサービスによって異なるため、まず数日間様子を見てから参加度合いを決めると安心です。
ポートフォリオは無料ツールで3点制作が目安
案件応募の前提として求められることが多いのがポートフォリオです。「作品が十分にたまってから公開しよう」と考えると公開が遅くなりがちですが、フリーランス志向であれば3点を目安に早めに公開してください。
ポートフォリオの構成は「種類の異なる3点」を目標にする
1点目はHTMLとCSSで作ったコーポレートサイト風のページ、2点目はFigmaで作ったデザインカンプ（UIデザインの設計図）、3点目はWordPressを使って実装したサイトを、それぞれ別の制作物として揃えると、案件の種類に応じて対応できるスキルの幅を示せます。
まず1点目を公開し、応募しながらフィードバックをもらいつつ改善するサイクルを早めに作ることが重要です。「完璧な作品」を目指してなかなか公開できない状態は、案件獲得の機会損失につながります。フリーランスがポートフォリオで仕事につなげる方法も参考にして、掲載方法を工夫してみてください。
GitHubPagesとFigmaリンクで無料公開できる
HTMLとCSSで作った静的なWebページは、GitHubPagesを使えば無料でURLを取得して公開できます（GitHub Pages公式）。Figmaのデザインカンプは、共有リンク機能を使って閲覧URLを発行できます（Figma共有機能）。どちらも費用なしで外部公開でき、応募フォームやメールにそのままURLを貼り付けて使えます。
「最初のポートフォリオは模写したコーポレートサイト1件だったけど、それでも初案件が取れた」という経験を持つWebデザイナーもいます（SHElikes公式ブログ）。完成度より「URL付きで見せられる状態」であることの方が、応募段階では重要です。
無料の範囲でポートフォリオを作るときの注意点
模写練習で既存サイトをそのままポートフォリオとして公開することは著作権上の問題があります。模写はあくまで練習用とし、公開するポートフォリオには自分でデザインした「オリジナル要素を加えた作品」を掲載します。「このサイトを模写して、色とレイアウトを変えました」という説明ができる作品が、実際に案件に応募する際の適切な形です。著作権についての基礎知識を押さえておくと、ポートフォリオ公開時のリスクを減らせます。
WordPressを使った作品を公開するには、ホスティング費用が発生します。無料での学習段階はローカル環境で制作し、公開が必要になった段階で年間数千円程度のレンタルサーバーを検討する計画を立てておくとスムーズです。
Q： 模写作品はポートフォリオに入れてもいいですか？
A： 「参考にした既存サイト＋自分なりのアレンジを加えた作品」として説明できる場合は、学習成果の提示として活用できます。既存サイトのデザインをそのまま転用したものは著作権上の問題があるため、必ず自分のオリジナル要素を加えた形にします。
Q： ポートフォリオサイト自体を作るのが先ですか？
A： ポートフォリオサイトの制作に時間をかけすぎて作品掲載が後回しになるケースはよくあります。まずは作品を1点公開し、その後にポートフォリオまとめサイトを作る順序の方が実際の案件応募を早く始められます。
Q： デザインカンプとコーディング済みのページ、どちらをメインにすべきですか？
A： 目指す案件の種類によって変わります。デザイン制作メインの案件を狙う場合はFigmaのカンプ、コーディングメインの案件を狙う場合はHTML/CSS実装済みのページを中心に揃えます。両方を見せられると対応範囲の広さを示せるため、可能であれば両タイプを用意します。
Webデザイン勉強を無料で始めることに関するよくある質問
Q: 完全無料でWebデザインを仕事にできるレベルまで学べますか？
A： HTML/CSSの基礎・Figmaの基本操作・模写練習・ポートフォリオ公開は、完全無料のサービスだけで進められます。実務で必要な「クライアントとのやりとり」「単価交渉」「継続的な学習の軌道修正」は、実際に案件を取りながら身につける部分です。早めに実案件に触れることをおすすめします。
Q： スクールなしで独学できますか？
A： 独学で進められる方は多くいますが、「詰まった箇所を自分で調べて解決できるか」が鍵になります。検索しても解決できず1〜2時間止まることが頻繁に起こる場合は、質問できる環境（有料メンタリング・コミュニティ・スクール）を検討する価値があります。
Q： Webデザインを無料で学ぶのに向いていない人はいますか？
A： 「完成物を見せてもらわないと理解できない」「テキストや動画よりも実際に手を動かして人から教わる方が伸びる」と感じる方は、完全独学より講師が付く環境の方が効率よく進む場合があります。無料サービスで2〜3週間試してみて、学習が進んでいないと感じたら教材の形式を変えることを検討してください。