はじめに
本報告書の目的
本報告書は、Web制作を学ぶ方が自分に合った学習サイトを選べるよう、主要な学習サービスを比較・分析したものです。各サイトの特徴、学習スタイル、使いやすさ、メリットや注意点を分かりやすくまとめました。
調査対象と範囲
対象はProgate、chot.design、サルワカ、Udemy、Schoo、SkillHub、CODEPREP、Cocoda!、SAMURAI TERAKOYAの9サービスです。初心者から中級者、フリーランス志望者までの学習ニーズを中心に評価しました。
想定読者
これからWeb制作を学ぶ方、独学でスキルを伸ばしたい方、学習サービスの乗り換えを考えている方を主な想定読者としています。具体例を交えて、実際の学習に役立つ情報を提供します。
読み方の案内
各章ではサービスごとに特徴と利用時のポイントを解説します。まずは第2章から順に読み、気になるサービスの章を詳しくご覧ください。
Progateの特徴と学習スタイル
サービス概要
Progateは初心者向けのオンライン学習サービスです。イラスト中心のスライドと、ブラウザ上で動くコード演習を組み合わせて学べます。HTML・CSS・JavaScriptなど、Web制作の基礎コースが充実しています。
学習の進め方
まずスライドで概念をつかみ、そのまま同じ画面でコードを書いて動かします。エディタや実行結果がすぐ確認できるため、知識と実践を素早く結び付けられます。レッスンは短めで区切られているので、隙間時間に進めやすいです。
メリット
- 視覚的に理解しやすいイラスト解説
- ブラウザだけで完結するので環境構築が不要
- 練習問題が段階的に用意されていることで達成感を得やすい
注意点
Progateは基礎に強みがありますが、複雑な実践課題や設計の深い学習は別の教材が必要になる場合があります。実務レベルを目指すときは、実際のプロジェクトでの経験を合わせてください。
学習のコツ
毎日少しずつ進め、学んだコードを自分で改変してみてください。例えば、HTMLの練習でボタンの色を変える、JavaScriptで簡単なアニメーションを追加するなど、手を動かすことで理解が深まります。
chot.designの特徴と利用のしやすさ
概要
chot.designは現役クリエイターが作った記事形式の学習コンテンツを無料で公開するサイトです。Webデザインの基礎からコーディング手順、実際の制作ノウハウまで幅広く扱っています。会員登録不要で、読みたい記事をそのまま開いて学べます。
特徴
- 現場目線のカリキュラム：実務で使う手順や考え方を具体例で学べます。たとえばワイヤーフレーム作成→HTML構造→CSS設計という流れが分かります。
- 記事中心の構成：一つの記事が短めで、自分のペースで進められます。チュートリアル形式の作例も豊富です。
- 無料で手軽：会員登録が不要なので、気になる記事をすぐ試せます。
利用のしやすさ
- 検索とタグで目的の記事にたどり着きやすいです。初心者向けは「はじめて」や「基礎」といったタグを探すとよいでしょう。
- 記事に図やコード例が多く、手を動かしながら理解しやすい構成です。例をそのままコピーして自分の環境で試せます。
学習の進め方（具体例）
- 基礎記事でHTML/CSSの構造を把握します。
- チュートリアルの作例を模写して手を動かします。
- ブラウザの検証ツールでコードを確認し、調整します。
注意点と補助策
記事は解説型でインタラクティブな実行環境を内蔵しないことが多いです。実際に動かすにはCodePenやローカル環境を併用すると学習効果が高まります。また、個別の質問サポートは限定的なので、分からない点は他の学習サービスやコミュニティで補うと良いです。
サルワカの特徴と学習の柔軟性
概要
サルワカは「誰でもわかる」を掲げ、図解を中心に学習内容を伝えます。言葉だけで説明するより視覚で理解しやすく、プログラミング未経験者でも入りやすい構成です。
図解で理解しやすい教材
コードの流れや仕組みをイラストや図で示します。例えば、関数の呼び出しやデータのやり取りを矢印や色分けで示すため、頭の中で整理しやすくなります。
レッスン番号に沿った学習
教材はレッスン番号で整理されており、順番に学ぶことが可能です。基礎から応用へ段階的に進められるため、初めて学ぶ人に向いています。
必要な部分だけ使える柔軟さ
経験者や復習したい人は、レッスン番号を頼りに必要な章だけ参照できます。全体を通す必要はなく、短時間で欲しい知識に到達できます。
学習の進め方（例）
- 初心者：レッスン1→順に学ぶ。図を見ながら手を動かすと理解が深まります。
- 経験者：目次で必要なトピックを選び、該当ページだけ読む。
利用時のポイント
図解は理解を助けますが、実際に手を動かすことが大事です。例題を写すだけで終わらせず、少し改変して試すと定着します。
Udemyの特徴とメリット・注意点
概要
Udemyは買い切り型で10万以上の講座が並ぶオンライン学習プラットフォームです。講師は企業研修の講師や現役エンジニア、フリーランスなどさまざまで、自分のペースで学べます。レビューやサンプル動画で雰囲気を確かめられます。
特徴
- 買い切り（セールで割引が頻繁）で何度でも視聴できます。
- 講師のスタイルやレベルが多様で選択肢が豊富です。
メリット
- 自分の予定に合わせて学べます。通勤時間や休日に少しずつ進められます。
- 実務に直結した講座が多く、具体的なコードやデザイン例を見て学べます。
- ユーザーレビューや再生時間、サンプルで質を事前に確認できます。
注意点
- コースの質が講師ごとにばらつきます。高評価でも自分の目的に合うとは限りません。
- 最新の情報が反映されていない講座もあります。内容の更新日を確認してください。
購入前のチェックポイント
- 目次、対象レベル、レビューの具体例、更新日を確認する。無料プレビューを必ず視聴する。
- 講師のプロフィールや他コースの評価も参考にする。
学習のコツ
- 学んだことを小さな成果物（ミニプロジェクト）で試すと定着します。講座のコードを手を動かして写すだけでなく、少し改変してみてください。
Schooの特徴と学習環境
概要
Schooは無料で5,000本以上の動画と生放送授業を提供し、毎日新しいレッスンが配信されます。講師や他の受講生とリアルタイムでつながれるため、学習の継続に役立ちます。Webデザイン関連は学部ごとに整理され、初心者から実務者まで幅広く学べます。
強みと向いている人
- ライブ授業で質問や議論をしたい人に向きます。
- まず広く学んで興味のある分野を絞りたい人に適します。
- 無料で始められるので学習習慣を作りたい人におすすめです。
学び方のポイント
- 週に決まった時間を確保してライブ視聴を習慣化してください。
- チャットで質問したり、講師の言葉をメモすると理解が深まります。
- 講座はシリーズで並んでいることが多いので、順に受講すると学びやすいです。
注意点と補足
- 一部の機能や見逃し配信は有料プランでの提供が多いです。
- ライブ時間は確認しておき、都合が合わないときはアーカイブ視聴で補ってください。
実践例
Webデザインを学ぶなら、基礎→レイアウト→実践ワークショップの順で受講し、小さなポートフォリオを作りながら学ぶと理解が深まります。
SkillHubの特徴と学習内容
概要
SkillHubはフリーランス独立や転職を目指す人向けに設計された学習サービスです。無料で13講座・91レッスンを動画形式で提供し、実務に直結するスキルを短期間で身につけられます。
主な学習内容
- HTML・CSSコーディング：基本タグやレイアウト、レスポンシブ対応など、制作で使う実践的な手順を学べます。例：簡単な企業サイトのコーディング。
- Illustratorの使い方：ロゴ作成やバナー制作など、デザインの入門から実務で使えるテクニックまで扱います。
- Web制作ノウハウ：ワークフロー、納品時の注意点、クライアント対応など現場で役立つ知識を学べます。
学習の進め方の例
- HTML・CSSの基礎を動画で理解します。
- 実際に模写や簡単なサイトを作って練習します（ポートフォリオ用の1ページ）。
- Illustrator講座でビジュアル要素を作り、コーディングと組み合わせます。
無料コンテンツの活用法
短めのレッスンを繰り返し視聴し、手を動かすことを優先します。課題を自分で設定して実践することで転職・独立に直結する成果が出ます。
向いている人・注意点
向いている人：短期間で実務レベルのスキルを身につけたい人、ポートフォリオを作りたい人。注意点：動画中心のため疑問は自分で解決する力が求められます。質問サポートの有無は確認してください。
CODEPREPの特徴と実践的アプローチ
概要
CODEPREPは手を動かしながら学ぶことに特化した学習サイトです。特にWebデザインやコーディングの基礎を、実際の作業と同時に身につけたい方に向いています。
学習の特徴
- ブラウザ上でコードを書き、即時に動作を確認できます。
- 理論より演習重視の構成で、短い課題を繰り返して習得します。
- 解説・サンプルコードがセットになっているため、学びやすいです。
実践的なカリキュラム例
- HTMLでページ構成を作る
- CSSでレイアウト（Flexbox／Grid）を調整する
- レスポンシブ対応の実装
- JavaScriptで簡単な動的挙動を追加
- 最終的にポートフォリオ用の1ページを制作
メリット
- 手を動かすことで理解が深まります。即時フィードバックにより修正も早く行えます。
- 実務で使う技術が多く含まれるため、学んだ内容をそのまま仕事に活かしやすいです。
注意点と使い方のコツ
- 解説を読むだけで終わらせず、自分で一度ゼロから実装してください。
- エラーが出たらログや開発者ツールで原因を確認すると学びが早まります。
- 小さな作品を数多く作る習慣をつけると効果的です。
Cocoda!の特徴と学習効果
概要
Cocoda!はWebデザインの基礎から実践までを丁寧に学べる学習サイトです。初心者向けの解説と実際に手を動かす演習が組み合わさり、デザインの考え方と表現力を同時に伸ばせます。
特徴
- 実践中心のカリキュラム：ワイヤーフレームやモック作成など、実務に近い課題が多いです。
- 視覚的な学び：画面構成や配色の例を見ながら学べ、感覚を養いやすいです。
- フィードバック機能：作品に対する評価や改善点が得られる場合があり、学習の方向性が分かりやすいです。
学習効果
実際に手を動かすため、知識が定着しやすいです。レイアウトや配色の選び方、ユーザー視点での設計が身につき、ポートフォリオ作成にも直結します。
学習の進め方
- 基礎講座で用語とツールを確認する
- 課題に取り組み、完成物を作る
- フィードバックを受けて改善し、別の課題に応用する
このサイクルを繰り返すと短期間で力がつきます。
注意点
- 自習が中心のためモチベーション管理が必要です。- 課題レベルは上級に進むと実務寄りになります。習熟度に応じてペースを調整してください。
SAMURAI TERAKOYAの特徴とサポート体制
概要
SAMURAI TERAKOYAは登録無料で100種類以上の教材を提供する学習サービスです。Webデザインの基礎から、PhotoshopやAdobe XDを使った実践的な制作まで学べます。実案件を想定した課題で、実務に近いスキルが身につきます。
教材と学習内容
・基礎：HTML/CSSの基礎やデザイン原則をやさしく解説します。
・デザインツール：Photoshop、Adobe XDの操作手順と実例を掲載します。
・実践課題：クライアントワークを想定した演習で、制作の流れを体験できます。
サポート体制
・Q&A掲示板：回答率100％をうたっており、疑問は速やかに解消できます。
・オンラインレッスン：講師による個別レビューやフィードバックを受けられます。ポートフォリオ添削やコードレビューも可能です。
利用の流れ
登録（無料）→教材選択→学習→疑問は掲示板で質問→必要に応じてオンラインレッスンを予約、という流れで進めます。
向いている人
独学で進めたいが手厚いサポートも欲しい人、実務に近い課題でスキルを伸ばしたい人に向いています。学習時間を確保し、実際に手を動かす姿勢が重要です。
