Webデザインの独学勉強法はこれで決まり!【現役Webデザイナーが徹底解説】

Webデザインの独学勉強法はこれで決まり!【現役Webデザイナーが徹底解説】

「Webデザインを独学で勉強したい」

「独学でWebデザインを勉強する際の手順やツールが知りたいな」

 

本記事では上記の疑問に答えていきます。

 

これを書いている私は、現在フリーランスWebデザイナーとして仕事をしています。

 

また転職事業もやっており、Web企業の経営者や人事部長と日々お会いしている立場でもあります。

 

Webデザイナーと企業側の目線、両方を把握しているので、どのようなスキルがあれば、どのような仕事ができるかについても、精緻な情報を理解しています。

 

そのような経験をもとに、Webデザインを独学で勉強する手順やツール、その後目指せる未来のカタチまで、本記事で紹介しますね。

 

Webデザイナーになりたいと感じているなら、得られるものがあると思っています。ぜひ最後までご覧ください!

 

Webデザインを独学で勉強する前に知っておくべきこと

Webデザインを独学で勉強する前に知っておくべきこと

 

まず初めにWebデザイン独学の前に知っておくべきことから解説します。

 

  • Webデザインは独学でも習得できる
  • ただし、時間もかかるし簡単ではない

 

まず、Webデザインは独学で勉強して習得できます。一人でWebデザインを学び始め、実際にWebデザイナーとして働けるようになった人は多いからです。

 

一方で、独学で勉強する場合は、時間がかかることも事実です。

 

なぜなら、Webデザインに必要なスキルは複数存在し、それぞれを勉強する必要があるからです。

 

Webデザインに必要なスキル

Webデザインに必要なスキルは以下のようなものがあります。

 

Webデザイナーに必要なスキル

1. HTML/CSS

2. JavaScript

3. Photoshop

4. Illustrator

5. Webサイト制作・デザインの実践スキル(PHPやWordPressの知識など)

 

こういったものです。

 

最初から全部を勉強する必要はないものの、HTMLやCSS、PhotoShopなどは早いうちから習得する必要があります。

 

いろんな分野を学んでいくので、独学だと時間も一定かかってきます。

 

実際にどれくらい時間がかかるの?【学習時間の目安】

  1. 「独学」で勉強する場合の学習時間
  2. 「Webデザインスクール」で勉強する場合の学習時間

 

この2つで比較したとき、Webデザイン習得までの必要時間が以下のように大きく変わります。

 

結論から言うと、Webデザイン習得に必要な勉強時間は以下の通りです。

1. 独学で学ぶ場合:6ヶ月〜1年程度

2. Webデザインスクールで学ぶ場合:2ヶ月〜3ヶ月程度

上記の通り、独学の場合は6ヶ月〜1年程度で、Webデザインスクールの場合は2ヶ月〜3ヶ月程度となります。

 

このように、

 

  1. 独学で勉強する場合:半年〜1年間
  2. Webデザインスクールで勉強する場合:2〜3ヶ月間

 

上記を学習期間としてみておくことが必要です。

 

もちろん、毎日使える時間が多ければ、上記よりももっと早くスキルを習得することもできます。ですが、同じ時間を費やす場合は、独学とスクールだと効率性が大きく異なります。結果、スクールの方が1/3くらい短縮できるんですよね。

 

以下の記事で書いていますが、最近は安価で受講できる良質なWebデザインスクールも存在していますし、もし少し投資できそうであれば、スクールを利用することも検討してみると、結果が出るタイミングはずっと早く訪れますよ。

>>現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

 

なお、「それでもまずは独学で勉強したい!」と思う場合は、この後紹介するステップに沿って学習してみてください。

 

今回紹介するようなポイントを押さえて学習していけば、独学でもWebデザインスキルの習得はできるからです。

 

Webデザインを独学で勉強する方法

Webデザインを独学で勉強する方法

 

手順1
コーディングの基礎を学ぶ
中身1
手順2
PhotoShopやIllustratorの基礎を学ぶ
中身2
手順3
既にあるWebサイトをトレースする
中身3
手順4
オリジナルWebサイトのデザインを作ってみる
中身4

 

手順は上記の通りです。

 

それぞれ解説していきますね!

 

ステップ1:コーディングの基礎を学ぶ

Webデザインの勉強をする場合、最初はコーディングの勉強から始めることがおすすめです。

 

なぜなら、Webサイトのデザインの基本を学べるのがコーディングだからです。

 

そもそもコーディングって?

コーディングとは、HTMLとCSSを用いて行うWebサイトの枠作りや、装飾を行うことです。

 

HTMLを使うと、Webサイトのテキストや画像、リンクを記述することができます。

 

CSSを使うと、HTMLで作ったWebサイトの骨格に、色をつけたり、配色やサイズ変更をすることができます。

 

こうやってWebサイトの枠を作ったり、装飾を行うことが、コーディングです。

 

コーディングの勉強法

おすすめはWebデザインの独学サイトで勉強することです。

 

最近はWebデザインの基礎を無料で学べる良質なサイトも多く存在しています。無料だと利用できるコンテンツの制限はあるものの、それでもHTMLやCSSの基本は独学サイトで学べます。

 

おすすめの独学サイトは「【無料あり】Webデザイン独学で使えるおすすめ勉強サイト7選【現役Webデザイナーが厳選】」でまとめているため、こちらから良さそうなサイトを使って勉強してみてください。7ついずれもHTMLやCSSを無料で学ぶことができますので。

 

JavaScriptも学んでおくと幅が広がる

なお、HTML・CSSに加えて「JavaScript」も勉強しておくと、より幅広いWebサイトデザインが作れるようになります。

JavaScriptとは「Webサイトに動的な動きをつけることができる言語」です。HTMLとCSSで作ったWebサイトを、よりリッチなデザインにする際に使えます。

Webデザイナーとして仕事をしていく場合、遅かれ早かれ学ぶ言語です。前述した「Webデザイン独学で使えるおすすめ勉強サイト7選」にはJavaScriptの基本を学べるものもあります。時間があればこちらもトライしてみましょう。

 

ステップ2:PhotoShopやIllustratorの基礎を学ぶ

コーディングの基礎がわかったら、次はPhotoShopやIllustratorの基礎を学んでいきましょう。

 

中でも最初は「PhotoShop」でOKです。なぜなら、PhotoShopができると、それだけでも幅広いWebデザインができるからです。

 

私自身、様々な企業を見てきましたが、企業によってはIllustratorを使っている会社もあります。でも、割合としてはPhotoShopの方が多いです。そのため、最初はPhotoShopを勉強することがおすすめです。

 

PhotoShopの勉強法

Adobe社が提供するPhotoShop CCチュートリアルだけでもPhotoShopの勉強は十分です。

>>PhotoShop CCチュートリアル公式サイトへ

 

実際にPhotoShopを使って慣れてきたら、PhotoShopを購入しましょう。月額2,480円の年間契約で使うことができます。

>>PhotoShopの購入はこちら

 

ステップ3:既にあるWebサイトをトレースする

 

HTMLやCSS、PhotoShopで基礎を学んだら、ここからはプロのWebサイトデザインから学んでいきましょう。

 

なぜなら、プロのWebデザインを見て学んでいくと、良いデザインがどんなものかがわかっていくからです。

 

これはWebデザイナーに限った話ではないですが、いわゆるクリエイティブの仕事は、プロのデザインをどれだけ自身に取り込んでいるかで、アウトプットの差が出ます。

 

例えば建築家の場合は、世界中の建築家の作品を見て、学んでいくことで、自分自身も良い設計ができるようになっていきます。

 

Webデザインもこれと同じで、世界中のWebデザイナーの作品を見て、学んでいくからこそ、良いWebサイトを作ることができます。

 

なので、プロのデザインをどんどん見て、真似して、盗んでいきましょう。

 

プロのWebデザインを真似してスキルアップする勉強法

  1. プロのWebデザインに多く触れてみる
  2. そのサイトをトレースして作ってみる

 

 

やるべきことは上記2つです。

 

まずはプロのデザインに多く触れていきましょう。

 

この際にただぼーっとみるのではなく、ヘッダーや見出しデザイン、フォント、フッターなどがどのように作られているか、一つ一つの構成を見ながら、その意図を考えていくことがおすすめです。

 

そうやって質の高いサイトに触れていくと、あなた自身の「デザインの引き出し」が増えていきます。この引き出しの多さがあると、良いデザインをどんどん生み出せるようになっていきますよ。

 

I/O 3000

Webデザイン独学勉強法

 

I/O 3000は国内外問わず、様々なWebサイトが掲載されているサイトです。

 

良質なWebサイトがたくさんあるため、プロのWebデザインに多く触れる際にぴったりなサイトです。

 

Awwwards

Webデザイン独学勉強法

 

Awwwardsは海外のサイトです。こちらもセンスの良いWebサイトが多数掲載されており、世界で注目されているWebデザインを学ぶことができます。

 

現代デザイン

Webデザイン独学勉強法

 

現代デザインも数多くのWebデザインが掲載されているサイトです。

 

最新のWebデザインを学べるサイトであり、流行やトレンドを捉える際にも特に役立ちます。

 

良いWebサイトを見つけたらPhotoShopでトレースしてみよう

上記で良いWebサイトを見つけたら、トレースをしていきましょう。

 

トレースとは、既にできているWebサイトを、なぞるように完コピをしていくことです。

 

トレースをすることで、「なぜこのWebサイトはこういうデザインなのか」「どういう意図があるのか」といったことを、学ぶことができます。

 

またトレースをすることで、頭だけでなく、手を動かしながら身体でデザインを学ぶことができます。そのため、良いデザインを身体でも覚えることができるんですよね。

 

PhotoShopでのトレース方法

まずはPhotoShopに、あなたが気になったWebサイトを見ながら、同じようにデザインをしていきましょう。

 

そうすることで、手を動かしながら、プロのWebデザインを学ぶことができます。

 

前述通り、トレースはヘッダーや見出しデザイン、フォント、フッターなどがどのように作られているか、一つ一つの構成を見ながら、その意図を考えていくことがおすすめです。

 

そうやっていけば、Webデザインの引き出しは間違いなく増えていきますし、Webデザイナーとしてスキルアップしていけますよ。

 

ステップ4:オリジナルWebサイトのデザインを作ってみる

ここまで学んだら、あとはオリジナルWebサイトを作ってみることです。

 

作るものはどんなWebサイトでもOKです。構成も難しいものでなく、簡単なものから始めましょう。

 

ここで大事なことは、良いものを作ることではなく、一つのWebサイトを完成させることです。

 

一つでも自身でWebサイトを作れるようになれば、それがあなたの実績になります。実績は今後、就職や転職、副業や独立をする際に、相手にアピールする貴重な材料になります。

 

そういったサイトを作って、積み上げていくことで、仕事を得ることはどんどん楽になっていくんですよね。

 

加えて、作ったWebサイトは実績だけでなく、あなたの自信にもなります。「こういったサイトは自分自身で作れそうだな」と思えることが増えていけば、その分仕事のチャンスも増えますし、働き方の選択肢も広がっていきますよね。

 

Webデザイン独学を一人でできるか不安な方へ

Webデザイン独学を一人でできるか不安な方へ

 

ここまで読んできて、「全部一人でできるか不安…」という方も多いと思います。

 

その場合は、前半でも少し述べた「Webデザインスクールの利用」がおすすめです。

 

前述通り、独学で勉強する場合と、Webデザインスクールで勉強する場合では、およそ3倍くらいはかかる時間が変わってきます。

 

  1. 独学で勉強する場合:半年〜1年間
  2. Webデザインスクールで勉強する場合:2〜3ヶ月間

 

Webデザインスクールであれば、HTMLやCSSの基礎も、PhotoShopの使い方も、Webサイトのトレースや、オリジナルサイト制作も、全てプロの徹底サポートのもと、最短距離で習得することができます。

 

以前は40〜50万円以上のスクールも多かったですが、最近は10〜20万円台で受講できる、良質なオンラインスクールも増えてきています。

 

挫折しがちな最初の段階は、Webデザインスクールで学ぶこともおすすめですよ。

 

現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】」の記事でおすすめのWebデザインスクールを紹介しているので、「一人でできるか不安」という方は、ぜひ参考にしてみてください。

 

>>現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】 現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

 

Webデザイン独学でよく聞かれる質問

Webデザインの独学勉強法はこれで決まり!【現役Webデザイナーが徹底解説】

 

 

未経験でもWebデザインを勉強すれば、Webデザイナーに就職・転職までできる?

結論、できます。

 

なぜなら、未経験からWebデザインを勉強し、就職、転職している人はたくさんいるからです。

 

Webデザインは学歴や経歴以上に「スキル」が重視される仕事です。そのため、今回紹介したようなステップで勉強し、スキルを身につけていけば、Webデザイナーとして企業に入ることは可能ですよ。

 

副業や在宅ワークもできるようになるかな?

結論、できます。

 

Webデザイナーとして企業での実務経験がなくても、サラリーマンの副業や、主婦の在宅ワークは実現可能です。

 

なお、副業や在宅ワークをする際に重要なのは「実績」です。特に「オリジナルサイト」を作った実績が重要です。

 

  • あなたは何ができるのか
  • あなたはどんなものを作ったことがあるか

 

実績を通じて、上記を証明する必要があります。

 

だからこそ、ステップ4で挙げた「オリジナルのWebサイト」を作ることが、とても重要です。

 

一人でできない場合は、前述したようにスクールを使えば、短期間でもオリジナルサイトを作れるようになりますよ。

>>現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

 

ポートフォリオってどうやって作ればいいの?

ポートフォリオは、あなたが作った制作物を、プロフィールとともにまとめたものです。

 

ポートフォリオに入れるべき項目

◎あなたのプロフィール

✔︎ これまでの経歴や実績:どんな仕事をこれまでやってきたか

✔︎ あなたができること:保有スキルや資格など

✔︎ 将来やりたいこと:こんなことをやっていきたいということ。志望企業の事業とマッチしていることが重要

 

◎制作物の紹介

✔︎ 制作した制作物のタイトル

✔︎ 写真などビジュアルで伝わるもの

✔︎ 制作物に関するコンセプトなどの補足

 

上記のような項目を、ポートフォリオに入れて作っていけばOKです。

 

なお、ポートフォリオ自体の作り方は簡単です。

 

以下のようなポートフォリオ作成サービスを使えば、誰でも簡単にポートフォリオサイトが作れます。

 

ポートフォリオ作成サービス

 

イメージがわかない場合は、「Pinterest」というサイトに参考事例が多く載っているため、覗いてみるとイメージがわきますよ!

 

まとめ

Webデザインの独学勉強法はこれで決まり!【現役Webデザイナーが徹底解説】

 

Webデザイン独学勉強法まとめ
  1. コーディングの基礎を学ぶ
  2. PhotoShopやIllustratorの基礎を学ぶ
  3. 既にあるWebサイトをトレースする
  4. オリジナルWebサイトのデザインを作ってみる

⇨上記4ステップでOK!

 

⇨もし一人で全部できるか不安ならWebデザインスクールを活用しよう(参考:現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

 

KEI

最後に、Webデザインを勉強すれば、以下のような未来を実現することができます。

 

  • 在宅ワークで自宅にいながら働く。
  • 国内外を転々として自由に働く。
  • 憧れの海外移住をする。
  • 家事や育児をしながら、社会とつながりを持つこともできる。
  • 会社員の副業で月10万円の副収入を得て、お金の不安を解消する。

 

上記のような働き方は、夢のように感じるかもしれません。でも、夢のような働き方を、先に行動した人たちは、すでに現実にしています。

 

一歩踏み出せば、未来のカタチは大きく良い方向に変わると思いますよ!

 

人気記事現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です