2021/11/07 (更新日: 2022/10/19)

【初心者向け】Webデザインを無料で独学するのに便利な5つのサービス

Webデザイン初心者です「副業でWebデザインを始めたいのですが、スクールに通わず独学で学びたいと思っています。理由は基本的にお金の問題です…正直そこまでお金をかけることができません。無料で学べる学習方法を知りたいです」このような悩みが出てきました。

今回は、このようなお悩みを解決するための、お手伝いをします。

本記事の内容

無料でWebデザインが独学できるサービス 5選
独学に役立つ無料Webデザインサービスの効果的な使い方

この記事を読むメリット

無料でWebデザインを独学する方法が分かる
無料サイトを活用した効果的な学習方法が分かる

この記事を書いている僕は、2020年9月から副業を始めました。現在は本業と両立し、Webデザイナーとして活動しています。

そんな僕は、副業を始めた当初、Webライターやブログもやっていたことから、そちらにお金を使っていたこともあり、Webデザインにまでお金を回せる余裕がありませんでした。そのため独学でスキルを習得し、稼げるようになろうと行動をしていました。

しかし、独学は甘さが出てしまい、全く稼ぐことができませんでした。理由は「他にやらないといけないことがあるから今日はデザインの勉強はできない…」そんな考えが続き、気がつけば半年以上全く学習を進めることができていませんでした。

「他にやることがあるし、今は勉強できなくても仕方ないか…暇な時を見つけよう…」

このように考えていました。この経験から僕が思うことは「Webデザインにせよなんにせよ、よほどの環境を整えないと独学では厳しい」ということでした。

しかし、独学でも時間を作り、Webデザインだけに集中できるのであればスキルの習得は可能です。また「独学に自信がないから…」という気持ちでいきなりスクールを検討するのも実は少し違います。

では、具体的にどうすればいいのかなどを含めて対処法を解説していきます。

具体的には、スクールに通わなくてもご紹介する5つの学習サービスを利用すればある程度のデザインスキルをつけることもできます。

日々どのようにしてWebデザインのスキル習得をすればいいのかをシェアしていきます。参考になると嬉しいです。

結論

Webデザインの基礎的な知識・技術を独学したいなら、無料で利用できるサイトがおすすめ

上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀りします。

本記事の動画解説版

無料でWebデザインが独学できるサービス 5選

「無料でWebデザインを独学したいが、良いサービスはどれなのか分からない…」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

progate
ドットインストール
CODEPREP
SKILL HUB
Adobe Creative Cloud

本テーマを読むメリットはこちら

独学をする時に役立つ無料サービスを知ることができる

こちらのテーマでは、Webデザインが無料で学習できるサービスを5つご紹介します。それぞれ特徴が異なるので、あなたの学習スタイルに適したサービスを探し、利用することをおすすめします。

progate

こちらのパートでは、progateについて詳しく解説していきます。「progate」があなたに向いているサービスなのか、そうではないのか、ザックリとした感覚がつかめるはずです。

progateは、シンプルなスライドと実際にWebブラウザでコードを入力してプログラミング技術を学習できるサービスです。各言語は「初級」「中級」「上級」などコースに分かれており、無料版ではこれらの一部を学習することができます。

デザインで必要なコーディングスキル（HTML・CSS3など）を直感的に学ぶことができ、独学でWebデザインを学ぶ人にとってかなり役立つサービスです。ゲーム要素もあり、コースをクリアするごとにレベルアップします。ランキングでどのくらい学習したか全国と競うことができるため、モチベーションを高く維持できる魅力もあります。

どんな人に向いているのか

progateは、全くプログラミングに触れたことが無い方におすすめのサービスです。かなり初歩的な内容を解説した教材や、用語の解説など一から知識や技術を学ぶことができます。

どの様な効果が得られるのか

progateを利用することで、Webデザインに必要な「HTML・CSS3」「javaScript」「jQuery」といったコーディングスキルを身に付けることができます。また、自身のパソコンでコーディングできる環境の準備まで学べるため、実際にWebサイトを作れるようになるでしょう。

無料でできる範囲

progateの無料版では、18のレッスンを受講することができます。期間といった制限も無いので、自身のペースで学習を進めることが可能です。例えば「HTML」のレッスンの場合、HTMLとは何か、コードの書き方など基本的な内容を学ぶことができます。

有料になるといくらで何ができるのか

progateの有料版は月額1,078円（税込み）で利用でき、全82のレッスンを受講することができます。先ほどの「HTML」のレッスンなら、コードの書き方だけでなく、画像の表示や位置の設定、スマホやiPadによって画面サイズを自動変更する技術、など応用的な知識や技術を学ぶことが可能です。

【無料版】の登録はこちらから

ドットインストール

こちらのパートでは、ドットインストールについて詳しく解説していきます。「ドットインストール」が、自分に向いているサービスなのか、そうではないのか、ザックリとした感覚がつかめるはずです。

ドットインストールは、動画をメインとした学習サイトで、約3分の動画を見ながら手を動かし、知識を深めることができる便利なサービスです。

無料版と有料版があり、無料版ではHTMLやCSSの基礎知識を学ぶことができるため、独学を始めたばかりの人には最適です。有料版になると、レスポンシブやWebデザインの応用技術を学べるので、ステップアップしたい方は有料版を利用しましょう。

スマホからも利用でき、隙間時間を活用した学習ができるので、時間を有効活用したい方はぜひ利用しましょう。

どんな人に向いているのか

ドットインストールは動画に沿ってプログラミングを学べるため、テキストでの勉強が苦手な方におすすめです。動画の真似をしながらコードを書くので、直感的に理解しやすい仕組みになっています。ただ、ドットインストールではコードを書く環境構築を行うため、自身で動画を見ながら準備を行う必要がある点で、ほんの少しだけ難易度が高くなるでしょう。

どの様な効果が得られるのか

progateと同じように、Webデザインのコーディングに必要な「HTML・CSS」「javaScript」「jQuery」を学ぶことができます。実際に手を動かして学ぶため、知識を蓄えるよりは実践的な技術を身に付けられるイメージでしょう。

無料でできる範囲

ドットインストールでは、全6,735本ある動画のうち約370本の動画を無料で視聴できます。内容は、環境構築の手順やHTML/CSS3/javaScriptの基本的な知識やコードの書き方などです。Webデザインの入門としては十分な内容を学べるでしょう。

有料になるといくらで何ができるのか

有料版では全動画の視聴が可能になります。サイドバーの位置設定やメニューバーの種類変更、レスポンシブデザインの適用方法など、必要なコーディングスキルをまんべんなく学ぶことができます。

【無料版】の登録はこちらから

CODEPREP

こちらのパートでは、CODEPREPについて詳しく解説していきます。「CODEPREP」が、自分に向いているサービスなのか、そうではないのか、ザックリとした感覚がつかめるはずです。

CODEPREPは、progateと似たタイプのサービスで、ブラウザのみでプログラミングを学習できます。ブラウザ上で実際にアプリ作成ができるため、知識だけでなく実践的なスキルまで磨くことが可能です。CODEPREPでは、ブックと呼ばれるコンテンツがあり、HTML・CSS3などあなた自身が学習したい内容を選ぶことができます。

穴埋め形式の問題によりポイントに絞った学習ができるだけでなく、経験値や照合などのゲーム要素があるので、モチベーションの維持もしやすいです。仲間と交流しながら学習を進められる点は魅力でしょう。

どんな人に向いているのか

穴埋め問題など、テスト形式で着実に知識を身に付けられるため、都度実力を知りたい方にはおすすめなサービスです。また、ゲーム要素もあり、楽しく交流しながら学習したい方にも向いているでしょう。

どの様な効果が得られるのか

CODEPREPは、デザインスキルではなくコーディングスキルに特化したサービスです。そのため、HTML・CSS3やJavaScriptなど、プログラミング技術に焦点を当ててスキルアップができます。また、Webデザインに必要なWordPressに使用する「PHP」といった言語も学べるので、より専門的な技術を身に付けたい方におすすめです。

無料でできる範囲

CODEPREPでは、公開されているブック（学習コンテンツ）が全て無料で読むことができます。多くのブックが10分から30分で終わる量で、手軽にコーディングスキルを磨くことが可能です。現在、ブック数は140個ほどあるので、十分な知識を学ぶことができるでしょう。

有料になるといくらで何ができるのか

全て無料でサービスを利用できるため、有料版はありません。

【無料版】の登録はこちらから

SKILL HUB

こちらのパートでは、SKILL HUBについて詳しく解説していきます。「SKILL HUB」が、自分に向いているサービスなのか、そうではないのか、ザックリとした感覚がつかめるはずです。

SKILL HUBは、無料でWebデザイン・Web制作を学ぶことができるオンラインスクールです。特にフリーランスや起業に特化したスキルを習得できるため、独立を目指す方にはおすすめのサービスでしょう。

HTMLやCSSといったコーディングだけでなく、Illustratorなどのデザインスキルも学べるため、より実践的な知識や技術を身に付けることができます。

ただ、募集人数に限りがあるため、興味がある方は早めにレッスンへの応募をするようにしましょう。

どんな人に向いているのか

SKILL HUBは、ドットインストールと同じく動画形式でプログラミングを学習できるサービスです。講座ごとに動画が分かれており、1講座10分程度で視聴できます。じっくり解説を聞いて学習したい方におすすめでしょう。

どの様な効果が得られるのか

SKILL HUBはフリーランスに特化したカリキュラムが特徴で、Webデザインに必要やコーディングやデザインスキルだけでなく、マーケティング知識まで学ぶことができます。Webサイトがどのユーザーに閲覧されているのか、ユーザーの利便性が高いサイトか分析できる技術が身に付くため、一段上のWebデザイナーを目指せます。

無料でできる範囲

SKILL HUBでは、14講座・98レッスンの動画が無料で視聴できます。コーディングで必要なHTML・CSS3だけでなく、Photoshop・Illustratorといったデザインツールの使い方を学ぶことができる魅力があります。

有料になるといくらで何ができるのか

SKILL HUBはスクールでもあるため、有料にすると多数のコースから選択するようになります。

有料コースを選択すると、就職やフリーランス独立に向けてWebデザインの学習を行います。内容は「HTML・CSS」「Photoshop・Illustratorの使い方」「WordPressでのサイト制作スキル」など、ゼロからWebデザインができるスキルと知識を身に付けることが可能です。

【無料版】の登録はこちらから

Adobe Creative Cloud

こちらのパートでは、Adobe Creative Cloudについて詳しく解説していきます。「Adobe Creative Cloud」が、自分に向いているサービスなのか、そうではないのか、ザックリとした感覚がつかめるはずです。

Adobe Creative Cloudは、Illustratorなどを提供している「Adobe」が行っている基本操作のレクチャーサイトです。ツールの操作や機能の紹介、実際にデザインを行う上で必要な知識を学ぶことができます。

チュートリアルに沿って学習を進めるだけで、Illustratorなどを扱えるようになるので、初学者は1度やってみることをおすすめします。マニュアルなど、操作以外に困ったことがあれば相談できるので、学習以外でも利用する場面が多いでしょう。

どんな人に向いているのか

Adobe Creative Cloudでは、Photoshop・Illustratorの概要から基本的な操作を学習できるため、Webデザインの独学を始めたばかりや、これから始めようと検討している方におすすめのサービスです。

どの様な効果が得られるのか

無料でPhotoshop・Illustratorといった、Webデザインに必要なツールの使い方を学ぶことができます。動画で実際の操作を確認できるので、直感的に理解できるのも魅力でしょう。

無料でできる範囲

チュートリアルや入門編の学習コンテンツは全て無料で利用できます。基本的な使い方から、ツールを使うことで何ができるか、基本的な知識を学ぶことができるので、一度は利用することをおすすめします。

有料になるといくらで何ができるのか

全て無料でサービスを利用できるため、有料版はありません。

【無料版】の登録はこちらから

さまざまなサービスを活用することで、効率良くWebデザインの独学を行えますが、まず最初に取り組むべき内容など、独学を始めるときに意識したい学習のポイントがあるので、以下の記事で解説しました。興味のある方はぜひ参考にしてください。

こちらのテーマでは「無料でWebデザインが独学できるサービス 5選」について深掘り解説をしてきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】90分無料相談

独学に役立つ無料Webデザインサービスの効果的な使い方

「無料でWebデザインが独学できるサイトは分かったけど、活用方法が分からない…」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

ステップ1．全体像を簡単に確認
ステップ2．学習した内容を真似する
ステップ3．不足した知識・技術の補足
ステップ4．実際に作品を作ってみる

本テーマを読むメリットはこちら

無料サイトの効果的な活用方法が分かる
Webデザインの学習効果を高めることができる

こちらのテーマでは、先ほどご紹介した、無料で利用できるWebデザイン学習サイトの効果的な活用方法を解説します。やみくもに学習するよりも学習効率がグッと高まるので、気になる方は最後まで記事を読んで、実践してみましょう。

ステップ1．全体像を簡単に確認

こちらのパートでは、全体像を簡単に確認について解説します。ステップ1では、前テーマで紹介したサービスを活用し、Webデザインの全体像を確認することから始めます。

具体的な活用方法ですが、まずは土台となる「WEBリテラシー」「Photoshop・Illustratorの使い方」「初歩的なプログラミング技術」など、Webデザインに必要なスキル・知識を学習しましょう。

例えば、progateではWEBリテラシーを学べるレッスンを無料で受けることができます。インターネットの仕組みやWebサイトが表示される構造、Webサイトで表現できるものなど、詳しい内容を学ぶことが可能です。他にも、HTML・CSSのコードの書き方や機能といった基本的な知識も学べるので、積極的に利用することをおすすめします。

また、Adobe Creative Cloudでは「Photoshop・Illustratorの使い方」を無料で学習することが可能です。基本的な操作から扱える機能を知ることで、Webデザインに関する基礎が身に付きます。これらの知識・技術を身に付けることで、Webデザインを独学する上で必要な内容や学習の進め方を知ることができるでしょう。

Webデザインで最初に学習すべき項目は「【楽じゃない】Webデザインの独学でまず習得するべき項目 3選」の記事でご紹介していますので、これから独学を始める方はぜひ参考にしてください。

ステップ2．学習した内容を真似する

こちらのパートでは、技術を磨くための方法「模写」について解説します。各ステップ大切なことをポイントにまとめているので、ぜひ参考にしてください。

ステップ2では、コードをひたすら書くための工程「模写」を行っていきます。無料のWebデザイン学習サイトでは、実際にコードを書いて学習することが可能です。例えば、ドットインストールでは、動画内で解説しているコードを、自身のエディターに書くことで技術を学ぶことができます。

progateでは、ブラウザ上で指示された通りにコードを書くことで、プログラミング学習ができますが、指定されたコードを書くのが基本で、一からWebサイトを作る技術が身に付きにくいです。そのため、progateやドットインストールで基本的なコーディングスキルを学んだら、他のサイトを真似て模写するようにしましょう。

他のサイトのHTML・CSSは、Googleのブラウザの場合、右クリックをして「検証」のメニューを選択することでみることができます。気になったコードを見つけたら、自分なりに書いてみる、真似して技術を磨くなど、さまざまな活用方法があります。

知識を蓄えるだけでなく、自分のスキルとしてアウトプットすることで、より洗礼された技術を身に付けることができます。また、Webデザインに限りませんが、学習した内容は実際に活用しないと定着しないため、何度も復習することが大切です。

ステップ1が終わったら、実際にある作品を模写（見た目などを真似て、技術の使い方やデザイン法方法を学ぶこと）して、スキルアップを目指すのも良いでしょう。

ステップ3．不足した知識・技術の補足

こちらのパートでは、不足した技術の補足方法、利用すべきサービスなどを解説しています。各ステップ大切なことをポイントにまとめているので、参考にしてください。

無料でWebデザインを学習できるサービスでは、基礎的な知識・技術を学べますが、応用レベルのスキルを学びたい場合は、有料コースの利用も検討すると良いでしょう。細かい知識やテクニックは、知っているのと知らないのではかなり差が出ます。

ただ、progateやドットインストールは、ソフトウェア開発に使う専門的なプログラミング学習を想定したサイトであるため、有料版を利用するのはコスパが悪いです。まずは無料で利用できるCODEPREPやAdobe Creative CloudでWebデザインの知識と技術を学び、足りないと感じたら参考書を利用して知識の補足を行いましょう。

独学では、このように知識が足りないと感じたら、自分で調べて知識を増やしていきます。しかし、どうしても分からない・解決できないものも出てくるでしょう。「誰かに相談したい…。けど相談できる人がいない」と悩んでいる方は、「もくもく作業会」の利用がおすすめです。

もくもく作業会では、周りに一緒に勉強している人がいるため、適度な緊張感をもって勉強できるだけでなく、Webデザインに詳しい人がいたら質問することも可能です。調べても分からなかったことが一瞬で解決できることもあるので、興味のある方はネットで調べて自分に合った勉強会に参加しましょう。

また、僕の方でも完全無料で「もくもく作業会」を実施しています。どの勉強会が良いのか迷っている方は、一度利用することをおすすめします！

ステップ4．実際に作品を作ってみる

こちらのパートでは、無料Webサービスを活用して、実際にデザイン制作を行うべき理由から、どのように作品を作っていくのか解説しています。各ステップ大切なことをポイントにまとめているので、ぜひ参考にしてください。

このステップが1番重要で、実際にデザインを作成するようにしましょう。独学をする人の多くは、「学習サイトや参考書を見ながら作成はできるが、一から自分で作るのは全然できない」などの悩みが多いです。

積極的にデザインを作成し、自分が苦手としている部分、知識や技術が足りていない部分を把握し、課題を解消しながら学習を進めることで、質の高いスキルを身に付けることができます。例えば、Adobe Creative Cloudで「Photoshop・Illustrator」の使い方を学習したとします。細かいコーディングは後回しにして、大まかなレイアウトをツールを使って一から作成してみましょう。

自分がイメージした通りのデザインが作れたなら、より詳細なデザインを作ってみたり、レイアウトをコーディングに落としてみたりと、応用的な事に挑戦してみます。一方、イメージ通りのデザインができなかったなら、足りてない技術を再度学習し、ステップ3のように知識の補足を行います。

このように、Webサービスを活用して独学を進めることで、高い学習効果を得ることができます。しかし、Webデザインは独学でも十分にスキルを身に付けることができますが、上記のような手順を一人でこなすのは難しいと思います。

もし「自分一人でこなすのは不安」と感じているなら、スクールの利用がおすすめです。スクールではカリキュラムの準備から各自のレベル把握、苦手分野の対策などさまざまなサポートをしてくれます。

少しでも気になっている、興味を持っている方は以下の記事でおすすめスクールを3つに絞ってご紹介しています。参考程度にご覧いただけたらと思います。

こちらのテーマでは「独学に役立つ無料Webデザインサービスの効果的な使い方」について深掘り解説をしてきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】90分無料相談