おすすめのWebデザインスクール

Webデザインの独学勉強法は何から始めればいい?4つのSTEPを現役Webデザイナーが解説!

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

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

「Webデザインの独学は何から始めればいいの?」

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

 

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

 

これを書いている私は、現在フリーランスWebデザイナーとして仕事をしています。また転職の仕事もしており、Web企業の経営者や人事部長と日々お会いしている立場でもあります。

 

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

 

そのような経験をもとに、独学で何から始めればいいか悩んでいる初心者向けに、Webデザインを独学で勉強する4つのステップや必要なツール、Webデザインを学んだ後に目指せる未来のカタチまで、本記事で紹介しますね!

 

KEI

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

 

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

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

 

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

 

  • Webデザインは今回紹介する勉強法であれば、独学でも習得できる
  • ただし、独学は時間がかかり、簡単ではないことも事実
  • Webデザインの勉強法は大きく「独学」「Webデザインスクール」の2つ
  • 独学とWebデザインスクール、それぞれどの程度時間がかかるか事前に知っておくとよい

 

Webデザインは独学でも習得できる

まず、Webデザインは独学で勉強して習得できます。

 

一人でWebデザインを学び始め、実際にWebデザイナーとしてフリーランスや就職、在宅ワークで働けるようになった人は多いからです。

 

一方で、独学だと相応に時間はかかり、難しいことも事実

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

 

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

 

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

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

 

Webデザイナーに必要なスキル
  1. Webデザインの基本原則
  2. デザインツールの使い方(PhotoshopやIllustratorなど)
  3. HTML/CSS
  4. JavaScript
  5. Webサイト制作・デザインの実践スキル(PHPやWordPressの知識など)

 

こういったものです。最初から全部を勉強する必要はないものの、Webデザインの原則や、PhotoshopやIllustratorなどデザインツールの使い方は、早いうちから習得する必要があります。

 

KEI

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

 

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

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

 

上記が、独学とWebデザインスクール、それぞれでかかる時間の目安です。

 

もちろん、独学でも毎日使える時間が多ければ、もっと早くスキルを習得することもできます。ですが、同じ時間を費やす場合、独学とスクールだと効率性が大きく異なります。

 

KEI

Webデザインスクールで勉強した方が、必要な時間は1/3くらいまで短縮できるのです。

 

この事実は事前に知った上で、独学で勉強することをおすすめします。

 

Webデザインを独学してスキルを身につけ、就職やフリーランス、在宅ワークを目指す難易度は「Webデザイナー就職・在宅は難しい?→誰でもできます【あなたもできる手順を解説】」で詳細をチェックしてみてください。

 

独学に自信がない方へ

なお、「できればスクールに通いたいけど、スクールに通うお金はないし」という方は、お金に余裕がない方でもリーズナブルに受講でき、未経験からWebデザイナー就職やフリーランスを目指せるWebデザインスクールも存在するので、一度検討してみることもアリかもしれませんね。

 

KEI

相場よりリーズナブルに、Webデザイナー就職やフリーランスを目指せるスクールは「現役WebデザイナーがおすすめするWebデザインスクール5選【徹底比較】」で複数紹介しているので、よければ参考にしてみてくださいね!現役デザイナー目線で厳選しています。

 

現役WebデザイナーがおすすめするWebデザインスクール5社比較現役WebデザイナーがおすすめするWebデザインスクール5社比較【評判がいい】

 

一方で、「すでにWebデザインスクールは検討済み」「なんとしても独学で頑張りたい」という方は、これから紹介する独学勉強法に沿って学習してみてください。

 

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

 

Webデザインの独学は何から始めればいい?初心者向け勉強法を4STEPで解説!

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

 

手順1
Webデザインに必要なコーディングの基礎を学ぶ
Webデザイン独学サイト等を使い、Webデザインに必要なコーディングの基礎を学ぶ
手順2
PhotoShopやIllustratorの基礎を学ぶ
Adobe社のチュートリアル等を使って学ぶ
手順3
既にあるWebサイトをトレースする
プロが作ったWebサイトをマネしてトレースする
手順4
オリジナルWebサイトのデザインを作ってみる
簡単でも良いので、自分一人でサイトを完成させる

 

Webデザイン初心者が独学で何から始めればいいか迷った場合、上記の手順で勉強を行いましょう。

 

KEI

4つのSTEPをそれぞれ解説していきますね!

 

ステップ1:Webデザインに必要なコーディングの基礎を学ぶ

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

 

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

 

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

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

 

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

 

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

 

こうやって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やIllustratorでWebデザインの基礎を学んだら、ここからはプロのWebサイトデザインをトレースすることで、プロのデザインを学んでいきましょう。

 

トレースとは「模写」「マネ」をすることです。プロのWebデザインをトレーズで真似しながら学んでいくことで、良いデザインを自然と体得することができます。

 

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

 

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

 

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

 

KEI

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

 

プロの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サイトを、なぞるように完コピをしていくことです。

 

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

 

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

 

PhotoShopでのトレース方法

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

 

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

 

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

 

KEI

上記のようにやっていけば、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万円台で受講できる、良質なオンラインスクールも増えてきています。

 

KEI

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

 

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

 

現役WebデザイナーがおすすめするWebデザインスクール5社比較 現役WebデザイナーがおすすめするWebデザインスクール5社比較【評判がいい】

 

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

Webデザインの独学勉強法は何から始めればいい?4つのSTEPを現役Webデザイナーが解説!

 

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

結論、できます。

 

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

 

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

 

未経験でもフリーランスや副業、在宅ワークできるようになる?

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

 

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

 

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

 

実績を通じて、上記を証明する必要があります。だからこそ、ステップ4で挙げた「オリジナルのWebサイト」を作ることが、とても重要です。

 

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

 

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

 

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

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

 

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

◎あなたのプロフィール

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

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

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

 

◎制作物の紹介

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

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

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

 

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

 

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

 

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

 

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

 

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

 

まとめ

Webデザインの独学勉強法は何から始めればいい?4つのSTEPを現役Webデザイナーが解説!

 

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

⇨上記4ステップでOK!

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

 

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

 

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

 

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

 

KEI

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

 

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

 

コメントを残す

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