Webデザインを独学で始めると、まず教材選びでつまずきます。検索すればいくつも学習サイトが出てきますが、それぞれ何が学べて、どこまで無料で使えるのかがわからないまま、とりあえず登録して放置している。そんな状態になっている方も多いのではないでしょうか。
練習サイトは「基礎を学ぶもの」「手を動かす課題があるもの」「参考デザインを探すもの」「リファレンスとして引くもの」の4種類に分けられ、役割の違うものを組み合わせて使うのが効率的な進め方です。
この記事では、目的別におすすめの学習サイトを紹介しつつ、それぞれの料金体系と向いている段階を整理します。すべてに手を出すのではなく、自分の今の段階に合うものを2〜3つ選んで使い込んでください。
学習サイトは役割で分けて考える
4つの役割
まずは全体像です。同じ「学習サイト」でも、担っている役割はまったく異なります。
| 役割 | 使う場面 | 代表例 |
|---|---|---|
| 基礎を学ぶ | まったくの初期 | Progate、ドットインストール |
| 課題で手を動かす | 文法を一周した後 | Codejump、CSSの学習ゲーム |
| 参考を探す | 制作に取りかかる前 | SANKOU!などのギャラリーサイト |
| 調べる | 詰まったとき | MDN Web Docs |
学習が続かない方の多くは、基礎を学ぶサイトだけを何周もしていて、課題で手を動かす段階に進めていません。順番を意識してください。
学習サイトと並行して、HTMLとCSSの入門書を1冊手元に置いておくと、画面の外でも復習しやすくなります。
基礎を学ぶのに向いているサイト
Progate
ブラウザ上でスライドを読み、その場でコードを書いて動かせる学習サービスです。環境構築が不要なため、最初の一歩としては扱いやすい設計になっています。HTML／CSSのほか、JavaScriptやGitのコースも用意されています。
個人向けの有料プランは、基礎学習向けの「プラスプラン」と、実務で求められる範囲まで広げた「プロプラン」の2種類が用意されています。無料の範囲でも各コースの冒頭部分は受講できるため、まずはそこから触ってみてください。月額と12ヶ月分をまとめて支払う場合とで料金が変わり、改定されることもあるため、詳細はProgate公式サイトの料金ページでご確認ください。
ドットインストール
3分前後の短い動画で解説が進む学習サービスです。手を動かしながら見るというより、全体像を素早くつかむのに向いています。無料で視聴できるレッスンもあり、プレミアムに登録すると視聴できる本数が大きく増えます。
プレミアムプランは月額1,480円（税込）で、12ヶ月分をまとめて支払うと月あたり1,080円（税込）になる料金設定です。最新の条件はドットインストールの料金ページで確認してください。
ProgateとドットインストールはどちらもHTML／CSSの入門を扱っており、両方に課金する必要はありません。文字を読んで進めるのが得意ならProgate、動画で流れをつかみたいならドットインストール、という基準で選んでください。
手を動かす課題があるサイト
Codejump
模写コーディング用の教材を公開しているサイトです。以前はCodeStepという名称で運営されていました。完成見本と素材が用意されており、それを見ながら自分で組んでいく形式です。実務に近いデザインカンプからのコーディング課題も含まれています。
入門から上級まで難易度が分かれているため、自分の段階に合わせて選べます。文法を一周した直後に取り組むと、知識が実際に使える形に変わっていく感覚が得られます。課題の一覧はCodejumpのサイトで確認できます。
CSSのレイアウトをゲームで学ぶ
Flexboxの記述をカエルを動かしながら覚えるFlexbox Froggyというブラウザゲームがあります。同じ開発元からCSS Gridを学ぶGrid Gardenも公開されており、どちらも日本語表示に対応しています。
FlexboxとGridは、文法だけを読んでもなかなか手に馴染みません。ゲーム形式で数十問こなすと、プロパティと挙動の対応が身体で覚えられます。所要時間も1時間程度なので、息抜きを兼ねて取り組むのに向いています。
CodePenで実験する
ブラウザ上でHTML、CSS、JavaScriptを書いて即座に結果を確認できるサービスです。ローカル環境を用意せずに試せるため、「このCSSプロパティはどう効くのか」を確かめる作業に便利です。
他の人が公開した作品を読めるのも利点です。気になる表現を見つけたらコードを開いて、どう実装されているかを追ってみてください。
参考デザインを探すサイト
SANKOU!
国内のWebサイトを集めたギャラリーサイトです。業種やデザインのテイスト、レイアウトの種類で絞り込めるため、「飲食店の落ち着いた雰囲気のサイト」といった探し方ができます。
制作に取りかかる前に、目的の近いサイトを10件ほど眺めてから手を動かすと、方向性が定まりやすくなります。掲載サイト数も多く、探し始めの入口として扱いやすい存在です。
MUUUUU.ORG
デザイン性の高いWebサイトを日々紹介しているギャラリーサイトです。業種、配色、サイトの種類、デザインの傾向、動きの種類といった複数の軸で絞り込めるため、探している方向性が決まっているときに使いやすい構成になっています。
Figma Community
Figmaのコミュニティには、他のユーザーが公開したデザインファイルが多数並んでいます。完成したファイルの中身を開いて、レイヤーの分け方やコンポーネントの作り方を見られるのは、書籍では得にくい学びです。無料で複製して中身を確認できるファイルも多く公開されています。
詰まったときに引くサイト
MDN Web Docs
HTML、CSS、JavaScriptの仕様がまとまったリファレンスです。日本語版も整備されています。個人ブログの解説は古い記述が残っていることがあるため、プロパティの正確な挙動を確認したいときは、まずMDNを見る習慣をつけると誤った知識を覚えずに済みます。
使い方としては、通読するのではなく辞書のように引くのが正解です。MDN Web Docsをブックマークしておいてください。
検索で上位に出てくる技術記事の中には、数年前の書き方のまま更新されていないものがあります。CSSやJavaScriptの仕様は変化するため、記事の公開日を確認し、疑わしい場合は公式のリファレンスで裏を取る習慣をつけてください。
段階別の組み合わせ方
まったくの初期（1〜2ヶ月目）
入門サイトを1つ選び、HTML／CSSのコースを一周します。この段階では暗記しようとせず、「こういう書き方があるらしい」という程度の理解で先へ進んでください。並行してFlexboxの学習ゲームに触れておくと、後が楽になります。
基礎を一周した後（3〜4ヶ月目）
模写コーディングの課題に取り組む時期です。文法を覚えているかどうかではなく、調べながら形にできるかどうかが問われます。詰まるたびにMDNで確認する流れを作ってください。
模写を数本終えた後（5ヶ月目以降）
ギャラリーサイトで参考を集めながら、自分で要件を設定したオリジナル制作に入ります。ポートフォリオに載せられるのは、この段階で作った作品だけです。模写の成果物は既存のデザインを写したものなので、実績として掲載するのは避け、掲載する場合も学習目的の模写である旨を明記するのが無難です。オリジナル制作へ移る時期を意識しておきましょう。
挫折しやすいポイントと対策
教材を一周しただけで止まる
入門サイトを終えた直後は、何も作れない自分に落ち込みます。これは当たり前の状態です。文法を知っていることと、それを使って形にできることは別の能力だからです。ここで教材をもう一周するのではなく、簡単な課題に進んでください。
調べ方がわからない
「思ったように表示されない」という状況で、何を検索すればいいのかがわからず手が止まることがあります。まずは開発者ツールで該当要素を選び、どのCSSが効いているかを確認してください。原因の箇所が特定できれば、検索する言葉も見つかります。
比較して落ち込む
SNSには短期間で高い成果を出した話が並びますが、そこに映るのは結果だけです。学習の速度は、確保できる時間と前提知識によって大きく変わります。他人の進度ではなく、1ヶ月前の自分と比べる基準に切り替えると、続けやすくなります。
アウトプットの場がない
作ったものを誰にも見せないままだと、手応えが得られません。学習の記録を残す場を1つ用意し、作ったものと気づきを短く書いておくと、後から自分の成長を確認できます。就職や案件獲得の場面でも、その記録が説明の材料になります。
学習を続けるための環境
画面の広さが学習速度に効く
学習サイトの解説を見ながらコードを書く作業では、ウィンドウの切り替えが頻繁に発生します。ノートPC1台だけだと、行ったり来たりの操作で集中が途切れがちです。
24インチ前後のフルHDモニターを1枚追加し、左に教材、右にエディタという配置にすると、学習の効率がはっきり変わります。学習のために大きな投資をする必要はありませんが、この1点だけは早めに手当てする価値があります。
手元の環境
長時間タイピングを続けるなら、テンキーレスのメカニカルキーボードや静音マウスといった入力機器が疲労を左右します。動画教材を音声で聞くなら、ノイズキャンセリング機能付きのイヤホンがあると、生活音の中でも集中しやすくなります。
紙で整理する
学んだ内容を頭の中だけで整理しようとすると、抜けが出ます。方眼ノートにレイアウトの構造を手で描いてみると、画面上では気づかなかった規則性が見えることがあります。
よくある質問
Q. 無料のサイトだけで学習できますか
可能です。ドットインストールの無料レッスン、Codejumpの課題、MDNのリファレンス、CSSの学習ゲームを組み合わせれば、費用をかけずに基礎から模写まで進められます。有料プランは「解説の網羅性」や「質問できる環境」に対する費用と考えてください。
Q. 何ヶ月くらいで仕事を受けられますか
学習に充てられる時間によって大きく変わるため、一概には言えません。1日2〜3時間を確保できる場合、基礎から模写、オリジナル制作まで半年前後を見込む方が多いようです。焦って営業を始めるより、ポートフォリオを整えてから動くほうが結果的に早く進みます。
Q. スクールに通う必要はありますか
独学で進められるなら不要です。スクールの価値は、質問できる相手がいることと、締切のある環境に身を置けることにあります。独学で3ヶ月続かなかった経験があるなら、環境にお金を払う判断も合理的です。
Q. 複数のサイトを同時に使っても大丈夫ですか
役割が違うものなら問題ありません。ただし、同じ役割のサイトを並行するのは避けてください。入門サイトを2つ同時に進めると、どちらも中途半端なまま終わりがちです。
Q. デザインツールの練習はどこですればいいですか
Figmaは無料で使い始められるため、まずは実際に触るのが早道です。公式のチュートリアルに加え、コミュニティで公開されているファイルを開いて構造を確認すると、独学でも実務的な作り方に近づけます。
まとめ
Webデザインの練習サイトは、基礎を学ぶもの、課題で手を動かすもの、参考を探すもの、調べるものの4つに整理できます。入門サイトを1つ選んで一周し、模写課題で手を動かし、詰まったらMDNで確認する。この流れが独学の基本形です。
料金は改定されることがあるため、登録前には各サービスの公式ページで現在の条件を確認してください。無料で使える範囲も広いので、まずは費用をかけずに始めて、続けられる手応えが得られてから有料プランを検討する順序をおすすめします。
