「Webデザインの独学は何から始めればいいの？」
「Webデザインを独学で勉強したいけど、手順が全くわからない」
「初心者がWebデザインを独学で勉強する際の学習ロードマップ・必要ツールが知りたいな」
この記事では上記の疑問に答えていきます。
私は現在フリーランスWebデザイナーとして仕事をしています。転職の仕事もしており、Web企業の経営者や人事部長と日々お会いしている立場でもあります。
Webデザイナーと企業側の目線、両方を把握しているので、どのようなスキルがあれば、どのような仕事ができるかについても、精緻な情報を理解しています。
そのような実体験をもとに、Webデザイン独学で何から始めればいいか悩んでいる初心者向けに「Webデザインを独学で勉強する学習ロードマップ・4つのステップ」や「必要なツール」「Webデザインを学んだ後に目指せる未来のカタチ」まで、この記事ですべて紹介しますね！
Webデザイナーになりたいと感じているなら、得られるものがあると思っています。Webデザインを独学で勉強し、Webデザイナーになりたい方は、ぜひ最後までご覧くださいね！
目次
初心者が独学でWebデザイナーになるには？Webデザインを独学で勉強する前に知っておくべきこと
まず初めにWebデザイン独学の前に知っておくべきことから解説します。
- Webデザインは今回紹介する勉強法であれば、独学でも習得できる
- ただし、独学は時間がかかり、簡単ではないことも事実
- Webデザインの勉強法は大きく「独学」「Webデザインスクール」の2つ
- 独学とWebデザインスクール、それぞれどの程度時間がかかるか事前に知っておくとよい
Webデザインは独学でも習得できる
まず、Webデザインは独学で勉強して習得できます。
一人でWebデザインを学び始め、実際にWebデザイナーとしてフリーランスや就職、在宅ワークで働けるようになった人は多いからです。
一方で、独学だと相応に時間はかかり、難しいことも事実
一方で、独学で勉強する場合は、時間がかかり、難しいことも事実です。
なぜなら、Webデザインに必要なスキルは複数存在し、それぞれを勉強する必要があるからです。
Webデザインに必要なスキル
Webデザインに必要なスキルは以下のようなものがあります。
- Webデザインの基本原則
- デザインツールの使い方（PhotoshopやIllustratorなど）
- HTML/CSS
- JavaScript
- Webサイト制作・デザインの実践スキル（PHPやWordPressの知識など）
こういったものです。最初から全部を勉強する必要はないものの、Webデザインの原則や、PhotoshopやIllustratorなどデザインツールの使い方は、早いうちから習得する必要があります。
いろんな分野を学んでいくので、独学だと時間も一定かかってきます。
Webデザインの独学の難しさは「Webデザインの独学・就職・在宅は難しい？→可能です【あなたもできる手順と難易度を解説】」で詳細をチェックしてみてください。
実際にどれくらい時間がかかるの？【学習時間の目安】
- 独学で勉強する場合：半年〜1年間
- Webデザインスクールで勉強する場合：2〜3ヶ月間
上記が、独学とWebデザインスクール、それぞれでかかる時間の目安です。
もちろん、独学でも毎日使える時間が多ければ、もっと早くスキルを習得することもできます。ですが、同じ時間を費やす場合、独学とスクールだと効率性が大きく異なります。
Webデザインスクールで勉強した方が、必要な時間は1/3くらいまで短縮できるのです。
この事実は事前に知った上で、独学で勉強することをおすすめします。
関連記事Webデザイン・制作の習得に必要な勉強時間・独学期間は？Webデザイナーを目指す期間を解説
なお「できればスクールに通いたいけど、スクールに通うお金はないし」という方は、お金に余裕がない方でもリーズナブルに受講でき、未経験からWebデザイナー就職やフリーランスを目指せるWebデザインスクールも存在するので、一度検討してみることもアリかもしれませんね。
相場よりリーズナブルに、Webデザイナー就職やフリーランスを目指せるスクールは「現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】」で複数紹介しているので、よければ参考にしてみてくださいね！現役デザイナー目線で厳選しています。
一方で、「すでにWebデザインスクールは検討済み」「なんとしても独学で頑張りたい」という方は、これから紹介する独学勉強法に沿って学習してみてください。
今回紹介するポイントを押さえて学習していけば、独学でもWebデザインスキルの習得はできるからです。
Webデザインを独学で始めるために必要なもの
Webデザインを独学で始めたいとはいえ、必要なものは全くわからないですよね。
結論、次のものを準備すれば、独学で勉強を始められますよ！
- パソコン
- Adobeのデザインソフト
- 無料のテキストエディタ
1. パソコン
まずはパソコンですが、基本的にはいま使っているパソコンで大丈夫です。
Webデザイナーのパソコンの主流はMacbookですが、まずはお金をかけず、今あるパソコンで良いので、Webデザイン学習をまずスタートすることが大切です。
その場合、性能がよくないパソコンだと処理速度が遅く、デザイン作業が思うように捗らないことも起こります。
もし作業が捗らない場合は、CPU性能が良いCPU core i5以上のパソコンや、メモリ16G以上のパソコンなどに切り替えましょう。
そうすれば、快適にWebデザインができると思います。
2. Adobeのデザインソフト
デザインを行う上で、Adobeが出している「デザインソフト」も必要となります。
プロのWebデザイナーがメインで使うソフトは以下の2つです。
- Adobe Photoshop：月額3,280円
- Adobe Illustrator：月額3,280円
Photoshopは主に画像加工をするソフトで、Illustratorはアイコンやイラストを作成するソフトです。
特にPhotoshopは、Webデザイナーが最も使っているデザインソフトです。まずはPhotoshopを用意し、学習することがおすすめです。
ちなみに、PhotoshopとIllustrator、それぞれ契約しても良いですが、Adobe Creative Cloud（Adobe CC）という、Adobe製品がパッケージ化されたプランがあります。
Adobe Creative Cloudの年間契約または月額契約をすると、PhotoshopもIllustratorも両方とも使えるようになり、とてもお得です！
Adobe CCのお得な契約方法は「Adobe CCコンプリートプランを安く買うには？お得に購入できる4つの方法！【学生・社会人それぞれで解説】」で詳しくまとめています。合わせて参考にしてみてください。
3. 無料のテキストエディタ
Webデザインの現場で、作成したデザインをWebサイト上で表示できるように記述することをコーディングと言います。
独学でWebデザインを学ぶ場合、コーディングの基本を学ぶ必要があります。その際に利用するテキストエディタも必要となります。
無料で使えるテキストエディタがたくさんあるので、お金をかけずに無料でOKです。
テキストエディタならVisual Studio Code、Brackets、Sublime text3、Atomなどがおすすめです。
Webデザインの独学は何から始めればいい？初心者向け勉強法・学習ロードマップを4STEPで解説！
いずれかの手順でつまづいてしまったらWebデザインスクールも検討してみる（参考：現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】）
Webデザイン初心者が独学で何から始めればいいか迷った場合、上記の手順で勉強を行いましょう。
4つのSTEPをそれぞれ解説していきますね！
ステップ1：Webデザインに必要なコーディングの基礎を学ぶ
Webデザインを独学で勉強をする場合、最初はコーディングの勉強から始めることがおすすめです。
なぜなら、Webサイトのデザインの基本を学べるのがコーディングだからです。
コーディングとは、作成したデザインをWebサイト上で表示できるように記述することを言います。具体的には、HTMLとCSSを用いて行うWebサイトの枠作りや、装飾が当たります。
HTMLを使うと、Webサイトのテキストや画像、リンクを記述することができます。一方でCSSを使うと、HTMLで作ったWebサイトの骨格に、色をつけたり、配色やサイズ変更をすることができます。
こうやってWebサイトの枠を作ったり、装飾を行うことが、コーディングです。
Webデザインのコーディング勉強法
おすすめはWebデザインの独学サイトで勉強することです。
最近はWebデザインの基礎を無料で学べる良質なサイトも多く存在しています。無料だと利用できるコンテンツの制限はあるものの、それでもHTMLやCSSの基本は独学サイトで学べます。
おすすめの独学サイトは「【無料あり】Webデザイン独学のおすすめ学習・練習サイト7選【現役Webデザイナーが厳選】」でまとめているため、こちらから良さそうなサイトを使って勉強してみてください。7ついずれもHTMLやCSSを無料で学ぶことができますので。
なお、HTML・CSSに加えて「JavaScript」も勉強しておくと、より幅広いWebサイトデザインが作れるようになります。
JavaScriptとは「Webサイトに動的な動きをつけることができるもの」です。HTMLとCSSで作ったWebサイトを、よりリッチなデザインにする際に使えます。
Webデザイナーとして仕事をしていく場合、遅かれ早かれ学びます。前述した「Webデザイン独学で使えるおすすめ勉強サイト7選」にはJavaScriptの基本を学べるものもあります。時間があればこちらもトライしてみましょう。
ステップ2：PhotoShopやIllustratorの基礎を学ぶ
コーディングの基礎がわかったら、次はデザインツールの「PhotoShop」や「Illustrator」の基礎を独学で学んでいきましょう。
PhotoshopとIllustratorは両方とも学びたいツールですが、前述通り、最初は「PhotoShop」でOKです。なぜなら、PhotoShopができると、それだけでも幅広いWebデザインができるからです。
私自身、様々な企業を見てきましたが、企業によってはIllustratorを使っている会社もあります。でも、割合としてはPhotoShopの方が多いです。そのため、最初はPhotoShopを勉強することがおすすめです。
PhotoShopの勉強法
Adobe社が提供するPhotoShop CCチュートリアルだけでもPhotoShopの勉強は十分です。
チュートリアルであれば、Photoshopを契約する必要は現状ありません。
実際にPhotoShopを使って慣れてきたら、PhotoShopのデザインソフトを購入しましょう。
Photoshop単体であれば、月額3,280円の年間契約で使うことができます。
一方、前述した「Adobe CC」であれば、PhotoshopやIllustratorなど、Adobe社製品をまとめて使えます。
PhotoshopとIllustratorの両方を揃えたい方は、Adobe CCの年間契約または月額契約がおすすめです！
ステップ3：既にあるWebサイトをトレースする
HTMLやCSS、PhotoShopやIllustratorでWebデザインの基礎を学んだら、ここからはプロのWebサイトデザインをトレースすることで、プロのデザインを学んでいきましょう。
トレースとは「模写」「マネ」をすることです。
プロのWebデザインをトレーズで真似しながら学んでいくことで、良いデザインを自然と体得することができます。
これはWebデザイナーに限った話ではないですが、いわゆるクリエイティブの仕事は、プロのデザインをどれだけ自身に取り込んでいるかで、アウトプットの差が出ます。
例えば建築家の場合は、世界中の建築家の作品を見て、学んでいくことで、自分自身も良い設計ができるようになっていきます。
Webデザインもこれと同じで、世界中のWebデザイナーの作品を見て、学んでいくからこそ、良いWebサイトを作ることができます。
プロのデザインをどんどん見て、真似して、盗んでいきましょう。
プロのWebデザインを真似してスキルアップする独学勉強法
- プロのWebデザインに多く触れてみる
- そのサイトをトレースして作ってみる
やるべきことは上記2つです。
まずはトレースの前に、プロのデザインに多く触れていきましょう。
この際にただぼーっとみるのではなく、ヘッダーや見出しデザイン、フォント、フッターなどがどのように作られているか、一つ一つの構成を見ながら、その意図を考えていくことがおすすめです。
そうやって質の高いサイトに触れていくと、あなた自身の「デザインの引き出し」が増えていきます。この引き出しの多さがあると、良いデザインをどんどん生み出せるようになっていきますよ。
I/O 3000
I/O 3000は国内外問わず、様々なWebサイトが掲載されているサイトです。
良質なWebサイトがたくさんあるため、プロのWebデザインに多く触れる際にぴったりなサイトです。
Awwwards
Awwwardsは海外のサイトです。こちらもセンスの良いWebサイトが多数掲載されており、世界で注目されているWebデザインを学ぶことができます。
現代デザイン
現代デザインも数多くのWebデザインが掲載されているサイトです。
最新のWebデザインを学べるサイトであり、流行やトレンドを捉える際にも特に役立ちます。
良いWebサイトを見つけたらPhotoShopでトレースしてみよう
上記で良いWebサイトを見つけたら、トレースをしていきましょう。
トレースとは前述通り「模写」「真似」を意味します。Webサイトのトレースとは、既にできているWebサイトを、なぞるように完コピをしていくことです。
トレースをすることで、「なぜこのWebサイトはこういうデザインなのか」「どういう意図があるのか」といったことを、学ぶことができます。
またトレースをすることで、頭だけでなく、手を動かしながら身体でデザインを学ぶことができます。そのため、良いデザインを身体でも覚えることができるんですよね。
PhotoShopでのトレース方法
まずはPhotoShopに、あなたが気になったWebサイトを見ながら、同じようにデザインをしていきましょう。
そうすることで、手を動かしながら、プロのWebデザインを学ぶことができます。
前述通り、トレースはヘッダーや見出しデザイン、フォント、フッターなどがどのように作られているか、一つ一つの構成を見ながら、その意図を考えていくことがおすすめです。
上記のようにやっていけば、Webデザインの引き出しは間違いなく増えていきますし、Webデザイナーとしてスキルアップしていけますよ。
ステップ4：オリジナルWebサイトのデザインを作ってみる
ここまで学んだら、あとはオリジナルWebサイトを作ってみることです。
作るものはどんなWebサイトでもOKです。構成も難しいものである必要はなく、簡単なものから始めましょう。
ここで大事なことは、良いものを作ることではなく、簡単でも良いので、一つのWebサイトを完成させることです。
一つでも自身でWebサイトを作れるようになれば、それがあなたの実績になります。実績は今後、就職や転職、副業や独立をする際に、相手にアピールする貴重な材料になります。
そういったサイトを作って、積み上げていくことで、仕事を得ることはどんどん楽になっていくんですよね。
加えて、作ったWebサイトは実績だけでなく、あなたの自信にもなります。「こういったサイトは自分自身で作れそうだな」と思えることが増えていけば、その分仕事のチャンスも増えますし、働き方の選択肢も広がっていきますよね。
Webデザイン独学を一人でできるか不安な方へ
ここまで読んできて、「全部一人でできるか不安…」という方も多いと思います。
その場合は、前半でも少し述べた「Webデザインスクールの利用」がおすすめです。
前述通り、Webデザインを独学で勉強する場合と、Webデザインスクールで勉強する場合では、およそ3倍くらいはかかる時間が変わってきます。
- 独学で勉強する場合：半年〜1年間
- Webデザインスクールで勉強する場合：2〜3ヶ月間
Webデザインスクールであれば、HTMLやCSSの基礎も、PhotoShopの使い方も、Webサイトのトレースや、オリジナルサイト制作も、全てプロの徹底サポートのもと、最短距離で習得することができます。
最近は低価格で受講できるオンラインスクールも増えている
以前は40〜50万円以上のスクールも多かったですが、最近は10〜20万円台で受講できる、良質なオンラインスクールも増えてきています。
挫折しがちな最初の段階は、Webデザインスクールで学ぶこともおすすめですよ。
「現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】」の記事で、リーズナブルに受講でき、おすすめのWebデザインスクールを紹介しています。現役デザイナー目線で選び抜いたので、「一人でできるか不安」という方は、ぜひ参考にしてみてくださいね！
現役WebデザイナーがおすすめするWebデザインスクール7選
Webデザイン独学でよく聞かれる質問
未経験でもWebデザインを習得すれば、Webデザイナー就職・転職できる？
結論、できます。
なぜなら、未経験からWebデザインを勉強し、就職、転職している人はたくさんいるからです。
Webデザインは学歴や経歴以上に「スキル」が重視される仕事です。そのため、今回紹介した方法で勉強し、スキルをちゃんと身につけていけば、Webデザイナーとして企業に入ることは可能ですよ。
一方「完全独学」でWebデザイナー就職・転職を目指す場合、難易度が比較的高いことは認識しておく必要があります。なぜなら前述通り、Webデザイン独学は決して簡単ではないからです。
特に就職・転職を目指すなら、プロが使う正しい技術を学ぶ必要があります。独学で学べないことはないですが、相応に時間もかかります。
就職・転職を見据えて学習するなら「Webデザインスクール」を活用したほうが、圧倒的に実現しやすいのが正直なところです。
- 確実に就職・転職を目指すなら「Webデザインスクール」
- 時間がかかってもお金をかけず就職・転職を目指すなら「独学」
このような選び方になります。
就職・転職を目指す難易度は「Webデザイナー就職・在宅・独学は難しい？→可能です【あなたもできる手順を解説】」で詳しくまとめているので、こちらも参考にしてみてください。
関連記事就職支援・転職支援に強いWebデザインスクール6社！現役Webデザイナーが厳選
未経験でもフリーランスや副業、在宅ワークできるようになる？
結論、できます。Webデザイナーとして企業での実務経験がなくても、サラリーマンの副業や、主婦の在宅ワークは実現可能です。
例えば、最近は副業で稼ぎやすい「クラウドソーシング市場」が成長しています。
事実、厚生労働省の統計によれば、2015年に650億円だった国内クラウドソーシングの市場規模は、2020年には2,950億円と、わずか5年間で約4.5倍となっています。
クラウドソーシングのようなフリーランス・副業・在宅ワーク市場が拡大している中で、特に需要が伸びているのがWebデザインです。
Webデザインの案件数が増えているため、未経験でもできる案件も同じように増えているんですよね。
なお、フリーランスや副業や在宅ワークをする際に重要なのは「実績」です。特に「オリジナルサイト」を作った実績が重要です。
- あなたは何ができるのか
- あなたはどんなものを作ったことがあるか
実績を通じて、上記を証明する必要があります。だからこそ、ステップ4で挙げた「オリジナルのWebサイト」を作ることが、とても重要です。
独学でもできる方はいますが、一人でできない場合は、前述したようにスクールを使えば、短期間でもオリジナルサイトを作れるようになりますよ。
関連記事現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】
関連記事副業に強いWebデザイナースクール7選【デザイン制作の案件紹介付き】
ポートフォリオってどうやって作ればいいの？
ポートフォリオは、あなたが作った制作物を、プロフィールとともにまとめたものです。
◎あなたのプロフィール
✔︎ これまでの経歴や実績：どんな仕事をこれまでやってきたか
✔︎ あなたができること：保有スキルや資格など
✔︎ 将来やりたいこと：こんなことをやっていきたいということ。志望企業の事業とマッチしていることが重要
◎制作物の紹介
✔︎ 制作した制作物のタイトル
✔︎ 写真などビジュアルで伝わるもの
✔︎ 制作物に関するコンセプトなどの補足
上記のような項目を、ポートフォリオに入れて作っていけばOKです。
なお、ポートフォリオ自体の作り方は簡単です。
以下のようなポートフォリオ作成サービスを使えば、簡単にポートフォリオサイトが作れます。
イメージがわかない場合は「Pinterest」というサイトに参考事例が多く載っているため、覗いてみるとイメージがわきますよ！
Webデザイン独学でおすすめの本はある？
本を使って勉強したい方向けのおすすめ本は「Webデザイン独学のおすすめ本11選！現役デザイナーが本気で厳選【初心者向け入門書など】」の記事でまとめています。
現役デザイナー目線で、入門書や目的別で厳選11冊をまとめたので、本も活用したい方は参考にしてみてください！
まとめ
- コーディングの基礎を学ぶ
- PhotoShopやIllustratorの基礎を学ぶ
- 既にあるWebサイトをトレースする
- オリジナルWebサイトのデザインを作ってみる
⇨上記4ステップでOK！
⇨もし一人で全部できるか不安ならWebデザインスクールを活用しよう（参考：現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】）
最後に、Webデザインを勉強すれば、以下のような未来を実現することができます。
- 在宅ワークで自宅にいながら働く。
- 国内外を転々として自由に働く。
- 憧れの海外移住をする。
- 家事や育児をしながら、社会とつながりを持つこともできる。
- 会社員の副業で月10万円の副収入を得て、お金の不安を解消する。
上記のような働き方は、夢のように感じるかもしれません。でも、夢のような働き方を、先に行動した人たちは、すでに現実にしています。
一歩踏み出せば、未来のカタチは大きく良い方向に変わると思いますよ！
人気記事現役WebデザイナーがおすすめするWebデザインスクール7社比較【評判がいい】
