Webデザイン（ホームページ制作）は、お金をかけずに無料で独学することが可能です。
この記事では、Web制作に興味がある方に向けて以下の疑問にお答えします。
私も2018年に無料で出来る勉強法を使って、Webデザインスキルを習得。カフェやアパレル、地元企業のホームページ制作の仕事が出来るようになりました。
Webデザインを勉強したい方の役に立てば幸いです。ぜひ最後までご覧ください。
【最短】副業で稼げるWebデザインスクール5社を比較｜ Web制作スキルがオンラインで身についておすすめ
【Webデザインを無料で独学する方法7選｜おすすめの学習サイトと本を紹介】
それでは、Webデザインのおすすめ独学方法をお伝えします。お金をかけずに独学する方法は以下の3つを活用することです。
Webデザインの勉強は本でやるよりも動画教材を使ってやる方がおすすめです。その理由はパソコン上の動きがわかるからです。
動画教材だと全て画面収録されており、講師と同じように動かせば問題なく進むことが可能。初めてWebデザインの勉強をする場合は動画教材を活用しましょう。
ある程度できるようになったら、デザインの参考として書籍を読んでみるのも良いと思います。
1、ドットインストール
「ドットインストール」はWebデザインを勉強する初心者から非常に人気の教材の1つです。
初心者向けの多くの動画教材を無料で見ることができ、中・上級者向けの教材に関しては有料のプランに申し込む必要があるというもの。
しかし、Webデザインの勉強（HTMLやCSS）に関しては、無料版だけでも十分に学ぶことができます。
まずは基本的な部分を学んでみて、さらにスキルを高めたい場合には月額課金をJavaScriptやJQueryを学んでみると良いでしょう。
私もWebデザインの基本を学ぶ上ではドットインストールにもっともお世話になりました。JavaScriptの勉強までいった段階で初めて課金をしたので、初期段階であれば完全に無料で勉強できます。
2、Udemy（ユーデミー）
もう1つの無料教材がUdemyです。Udemyは世界最大の動画学習プラットフォームとして、数多くの講座が用意されています。
Udemyは基本的に有料教材を購入する場なのですが、無料教材も配布されています。例えばWebデザインで検索し価格のタブから無料を選択すると、1000以上の無料教材が並んでいます。
これらは無料の会員登録をするだけで見られるようになりますので、「HTML入門」や「CSS入門」の無料教材で気になるものをみて勉強してみてください。
3、Progate（プロゲート）
「Progate」というWebサービスも初心者におすすめのサービスとしてよく紹介されています。
Webサイト上で問題を解く形式でWebデザインを学べるのが特徴です。
しかし、個人的にProgateはおすすめしません。テキストエディタを使わずにWeb上だけで進むので、まったく実践的ではないのです。
HTMLやCSS、その他のプログラミング言語は、すべてテキストエディタというアプリの上に入力していきます。
Progateではテキストエディタを使わないので、結局どうやったらWebサイトを作れるのか根本のところがわからないのです。
囲碁を覚えるために詰碁の本を読んでいるイメージ。碁盤を用意して1から教わらないと、囲碁ができるようにはなりません。Progateをするくらいならドットインストールの方が断然おすすめです。
4、CODEPREP（コードプレップ）
「CODEPRE」もProgate同様にWeb上でWebデザインを学べるサービスです。HTMLやCSSといった基本的nなスキルだけでなく、アコーディオンスイッチやトグルボタンなどの応用編も充実しています。
しかし、こちらもテキストエディタを使わずに作業を行うので、実践的ではありません。
Webデザインやプログラミングの勉強をするなら、初めにテキストエディタの使い方を教えてくれる教材を選んだ方が良いでしょう。
5、chot design（ちょっとデザイン）
「chot design」では、テキストベースでWebデザインの方法を学ぶことができます。わかりやすい表現で画像も多く使われており、初心者におすすめの教材です。
しかし、Webデザインのようなスキルを学ぶにあたってはテキストよりも動画の方がわかりやすいです。
基本はドットインストールのような動画で学習して、日頃の隙間時間などにこうしたサイトで復習をするような使い方がおすすめです。
6、YouTubeのおすすめチュートリアル動画
Webデザインの勉強には動画が良いとお伝えしました。動画といえばYouTubeですよね。YouTubeにもWebデザインのチュートリアルが数多く上がっており、もちろん全て無料で見ることができます。
しかし、世界中のWebデザイナーが自身のスキルを惜しみなく教えてくれているので、中級者以上にとっては勉強になる部分も非常に多いでしょう。
おすすめのYouTubeチャンネルは以下の3つです。
また、YouTubeにはコーディング以外にもデザインの考え方やAdobeソフト、プログラミング言語のチュートリアルも数多く上がっています。
必要に応じていろんなチュートリアルで勉強してみると良いでしょう。
7、Webデザインを学べるおすすめの本
Webデザインの本を読む目的は「模写対象を探すため」です。基礎的な知識を学ぶなら動画教材が一番です。なので、基本を習得するための本はここでは紹介しません。
様々なWebサイトがカタログのようにまとまっているのは本の良いところです。模写の対象を探すという目的では非常に使えます。
基礎を学んだ後に作業に慣れたりデザインの引き出しを増やすために活用してみましょう。おすすめの本は以下の3冊です。
これらの本は定期的に見返す価値もありますが、お金をかけたくなければ図書館で借りるのも手です。
近くの図書館に置いていない場合でも、リクエストをして入荷してもらうことができますので、活用してみてください。
また、模写対象を探すためには「Pinterest」というサイトを使うのもおすすめ。
Webデザインというワードで検索すると、日本中のみならず世界中のサイトが出てきます。その中からスキルアップに繋がりそうなサイトを見つけて、模写をしてみてください。
【Web制作スキルを独学する上で重要な3つのポイント】
Webデザインの独学方法をお伝えしてきました。この方法なら無料で勉強できてスキルを身につけられます。
慣れない英語、1つのミスで起こるエラーの数々、広すぎる勉強範囲。多くの人がチャレンジするも、稼ぐ前に挫折しているのも現実です。
Web制作スキルを身につけるためには重要なポイントが3つあります。
- わからないところをすぐに聞ける環境
- チュートリアルをこなすだけでなく自分なりのアレンジを試してみる
- 目標の設定や勉強時間の確保を含めた決意
初心者は頻繁にエラーでつまずきます。問題の解決には何時間もかかることも。しかし、そうした問題のほとんどは経験者に質問したら一瞬で解決するものばかりです。
勉強を効率的に進めるためにも、すぐに質問できる環境は非常に重要です。
また、チュートリアルばかりこなしていると、いざ自分でサイトを作ろうと思ったときに何のアイディアも出てきません。
チュートリアルで学んだTipsについて、自分なりにアレンジを加えてみていろんな挙動を体験しましょう。習ったままやってみるのではなく、自分で考えてコードを書いてみることで本当の自分の力になります。
3つ目に大事なポイントが決意です。
Webデザインのスキルを身につけるには最低でも1か月から3か月は集中して勉強する必要があります。その間、エラーの解決策がわからなかったり、自分には向いていないかもというネガティブな気分になる瞬間も訪れます。
そうした悩みは初心者なので当然です。それを当然と理解して進み続けることが重要です。
キツイ思いをしながらでも3か月は本気で頑張る。そう決意することがWebデザインを習得する一番の秘訣かもしれません。
【稼ぐことがゴールなら独学では無理｜質問し放題のオンラインスクールが初心者には最適】
Webデザインを勉強したいと思っている方の中には、副業にして稼ぎたいと思っている方もいらっしゃるでしょう。
稼げるようになることがゴールならば、正直独学はおすすめしません。独学が圧倒的に不利なポイントは「Web制作の仕事の進め方がわからないこと」です。
自分のサイトを作るだけなら誰にも迷惑がかかりません。独学で学んだ範囲で作れるものを作ってみれば良いでしょう。ですが、クライアントからお金をもらってサイトを制作する上ではあらゆる責任や業務が発生します。
Web制作会社に勤めていれば、そうした仕事の部分をOJTで学ぶことができます。しかし、独学だけだと実務の経験が圧倒的に不足するのです。
私も独学である程度のサイトが作れるようになったのはいいものの、その後の仕事の仕方が全くわかりませんでした。勉強中も何度も挫折しそうになりましたが、仕事が取れないことでもまた挫折しそうになったのです。
勉強したのに稼げなかったら意味がないですよね。
趣味で自分のサイトを作りたいという動機であれば問題はありませんが、Webデザインの仕事をしたいのであれば独学では難しいという現状があります。
そのもっとも近道となる方法はWebデザインスクールを受講することです。
Webデザインスクールの多くは稼げる人材になることをゴールとしており、そのための最短ルートとなるカリキュラムが組まれています。遠回りになるような無駄な勉強が不要なので、独学よりも効率的に勉強を進めることができます。
また、Webデザインスクールの中には、卒業後の案件紹介やサポートがあるところもあります。先ほどお伝えした独学で学べない部分もサポートがあるので安心です。Web制作の仕事に慣れるまでは、プロのサポートがあることは本当に心強いですよ。
スクールを受講することでどうしてもお金はかかってしまいます。ネット上には無料の教材も充実しているので、自分で勉強を進められる人には不要でしょう。
しかし、Webデザインをスキルをなるべく早く身につけて稼げるようになりたい方や、独学で稼げるようになるか不安な方にとっては、Webデザインスクールの受講は有意義な勉強方法です。
無料教材を使って独学しても、結局稼げない状態に陥る人は大勢います。確かにお金はかかっていないので損はしていないように思えます。
稼ぐことがゴールなら、一刻も早くスタートラインに立てた方が良いですよね。
稼げるWebデザイナーになるためのオンラインスクールは以下の記事でも紹介しています。初心者向けの無料体験や相談会も行われていますので、気になる方はチェックしてみてください。
【厳選】副業で稼げるWebデザインスクール5社を比較｜ Web制作スキルがオンラインで身についておすすめ
【Web制作の仕事をするためには何が必要？ 学ぶべきスキルを解説】
あなたはWebデザインについてどれくらい知っているでしょうか？
勉強を進める上では全体像を把握することが重要です。大きな目標を小さな目標に細分化し、着実にその目標をクリアしていくことでWebデザインスキルを習得できます。
まず初めに、Web制作の仕事に必要なスキルセットを解説します。これからどういう道のりでWebデザインスキルを身につけていくのか、イメージしながらご覧ください。
・Webデザインで稼ぐために学ぶべきスキル
Webデザインスキルというものは、実は様々なスキルから成り立っています。
| HTML | Webサイトの構造を入力する言語 |
| CSS | 構造に装飾を加える言語 |
| JavaScript | Webサイトに機能をつけるプログラミング言語 |
| jQuery | JavaScriptを簡単に使えるフレームワーク |
| Bootstrap | HTML、CSSを簡単に使えるフレームワーク |
| WordPress | Webサイトを簡単に作れるサービス |
| PHP | WordPressで使われるプログラミング言語 |
| adobe Photoshop | 画像編集ソフト |
| adobe Illustrator | デザイン制作ソフト |
| adobe XD | Webサイトのワイヤーフレーム作成ソフト |
| SEO | 検索エンジン最適化のノウハウ |
| セールスライティング | 商品を売れるようにするための文章術 |
この他にも、コードを入力するテキストエディタの使い方や、作ったWebサイトをインターネット上にアップロードする方法も覚える必要があります。
ホームページ制作はこうした様々なスキルを組み合わせて行います。これらを総称して「Webデザインスキル」と言うのです。
サッカーのスキルと言ったときにドリブルやシュート、パスやセンタリングなど様々なものがあるのと同じイメージです。
・Webデザインとプログラミングの違い
Webデザインと近いものとしてプログラミングというものがあります。
実はプログラミングでもHTMLやCSS、JavaScriptといったものを学ぶ必要があるので、違いがわからない方もいらっしゃるかもしれません。
プログラミングとWebデザインは「目的」「要所」「必要なスキル」の3つが異なります。
| プログラミング | ・アプリやWebサービスを作ること ・業務効率化や自動化のためのシステムを開発すること |
| Webデザイン | ・ホームページを作ること |
| プログラミング | 「この場合はこの動作を行う」といった自動化の仕組みを作ること |
| Webデザイン | クライアントの希望するデザインをヒアリングしてその通りのサイトを作ること |
| プログラミング | ・アプリやシステムの画面（UI）デザインスキル ・プログラミング言語の習得 |
| Webデザイン | ・Webサイトのデザインスキルプログラミング ・各種ツールを使ってデザインを形にするスキル |
このような違いがあります。簡単に言うと、Webデザインよりも難しいのがプログラミングと言うことです。
Webデザインを学ぶ上では、プログラミング言語の習得は基本的に必要ありません。プログラミング言語は初心者の多くが挫折するので、そこを避けて通れるのはメリットでしょう。
しかし、逆にデザインセンスは必要になります。いくらツールが使えてもダサいデザインしか作れなければ稼げなさそうですよね。
Webデザインの業界では、トップオブトップの人以外は基本的に誰かのデザインを真似てWeb制作を行っています。
そういう意味ではデザインセンスは不要とも言えますので、デザインに自信がない方でも大丈夫です。
・学習後の稼ぎ方と案件の取り方
Webデザインスキルを身につけたら、稼げるようになりたいですよね。Webデザインスキルには大きく分けて2つの稼ぎ方があります。
- 転職
- フリーランス（副業）
1つはWeb制作会社への就職または転職です。
企業やお店に向けてホームページの制作や作り替えの提案を行い、クライアントの希望するWebサイトを作るという仕事です。独学のみの未経験でもポートフォリオ（作品例）次第で採用される確率は十分にあります。
もう1つの稼ぎ方が副業またはフリーランスとして仕事をする方法です。
Webデザインの仕事案件はクラウドソーシングサイトなどで多く募集されています。ホームページ制作丸ごとの案件もあれば、コーディングのみの仕事やバナー制作だけの仕事もあり、幅広い稼ぎ方ができます。
また、クラウドソーシング以外にもTwitterでDMをしたり、地元のお店に営業をして仕事を獲得している方も多くいらっしゃいます。
Webデザインの仕事なら副業で月に10万円以上稼ぐことは十分可能ですので、今からでも学ぶ価値のあるスキルと言えるでしょう。
【登録必須】フリーランス向けエージェント＆マッチングサービスおすすめ5選 未経験がやるべき仕事の探し方と取り方を解説
【Webデザインのスキルを身につけるまでの学習ロードマップ】
Webデザインに必要なスキルと、スキル習得後の稼ぐイメージはできたでしょうか？
上述したようにいくつものスキルを身につける必要があるので、ここからは学習のおすすめロードマップをお伝えします。また、稼げるようになるまでの時間についても解説します。
・何から学べばいい？必要なスキルレベルの目安は？
Webデザインを習得するまでのロードマップは以下がおすすめです。
- テキストエディタ、HTML、CSS、Bootstrapのチュートリアルをこなす
- 既存サイトの模写を5サイト分やってみる
- デザインの本を一冊読む
- jQuery、WordPress、adobe XDについて学ぶ
- サーバーやドメインの契約とアップロード方法について調べる
- Photoshop、Illustratorについて学ぶ
- JavaScript、PHPについて学ぶ
実はWebデザインで稼ぐためには全てのスキルを完璧にマスターする必要はありません。
Webデザイン初心者の多くが勘違いしていることなのですが、やり方があると知ってさえいればあとはネットで調べながら作ればいいのです。
もちろん、全て頭に入っていて自由に使いこなせる方が作業スピードは格段に上がります。ですが、それは実践を繰り返す中で身に付いていくものでもあります。
世界中の料理を完璧に作れるようになってから料理人になる人はいませんよね。とりあえずキャベツの千切りができる状態になったらアルバイトを始めてみて、そこから色々と覚えていくものです。
Webデザインも同じように、HTMLのコードを書けるようになったらコーディングの仕事にチャレンジしてみる。それから他のスキルも身につけていくという感じで進めることがおすすめです。
十分副業できるくらいのスキルは身についているのに、いつまでも勉強ばかりしていたら意味がないですよね。
ある程度のレベル感まで達したら稼ぐフェーズに移りましょう。スキルは稼ぎ始めた後でも伸ばせます。
それぞれの稼ぎ方でのスキルの最低限の目安は以下の通りです。
最低限のWeb制作はこれくらいのレベル感で行うことができます。さらにPhotoshopやIllustratorなどので事案スキルを身につければ、より単価の高い仕事を請け負うことができるようになります。
まずはHTML、CSS、Bootstrapのチュートリアルを見ながらやってみることがスタートです。次章で勉強の始め方を解説します。
・働きながらでも可能？ Webデザインで稼げるようになるまでの期間
Webデザインの勉強法を解説する前に、未経験からWebデザインの仕事ができるようになるまでの学習時間をお伝えします。以下がそれぞれのスキル習得の最低限の目安です。
- HTML ：8時間
- CSS ：12時間
- Bootstrap ：3時間
- jQuery ：5時間
- WordPress ：3時間
- adobeXD ：1時間
- Photoshop ：8時間
- Illustrator ：8時間
- JavaScript ：20時間
- PHP ：20時間
これらが最低限の勉強時間の目安で、ここにさらに模写の時間が加わります。HTMLとCSSの基礎を学んだ状態だと、1つのサイトを模写するのにかかる時間は5〜10時間ほどだと思っておいてください。
JavaScriptやPHPはプログラミング言語の世界に入っていくので勉強時間は長くかかります。ですが、Webデザインで稼ぐためには必ずしも必要なものではありません。
20時間の勉強ということは1日1時間の勉強で1ヶ月弱です。それくらいの時間なら働きながらでも時間を作ることができるのではないでしょうか？
今から1ヶ月後をイメージしてみてください。今日から勉強をスタートしたあなたが1ヶ月後にはWebサイトを作ることができるようになっている。無理だと思っていたことができるようになっている。
そのときの感情を考えると、頑張ってみようという気持ちになるのではないでしょうか？
Webデザインは稼げるだけでなく純粋に楽しいものです。興味を持った方はぜひ勉強を始めてみてください。
この記事が少しでも参考になれば幸いです。
【厳選】副業で稼げるWebデザインスクール5社を比較｜ Web制作スキルがオンラインで身についておすすめ
【Webデザイン 関連記事】
【オワコン？】プログラミングを勉強しても意味がないのはなぜ？ これからの時代に必須と言われる理由
もう無理！？プログラミングは稼げない8つの理由｜副業で初心者が稼げるほど甘くない
【注意】初心者にプログラミングは難しい？ 独学する前に知っておくべき4つのこと
【5選】Webデザインの仕事に役立つおすすめ資格｜Web制作に資格は必要？合格しても意味がない？
【LIFE WORK CAFEのおすすめ記事】
【厳選】キャリア相談が出来るおすすめカウンセリング5選｜仕事や転職の悩みが解決する有料サービスを比較
【最新5選】動画編集を副業に出来るスクールはどこ？ オンラインでスキルと稼ぎ方を学んで収入アップ
【7選】稼ぎたいWebライターにおすすめの講座と初心者向けWebライティングスクール｜オンラインで副業ノウハウが学べる
【転職向け】Webマーケティングスクールおすすめ5選｜未経験からWebマーケターへ就職する最短ルート
【4選】副業の稼ぎ方が学べるおすすめのオンラインスクール｜講座を受講するべきか悩む？
【初心者必見】仮想通貨の始め方と買い方をやさしく解説｜暗号資産の基本と失敗しがちなポイントとは？
