Web系+プログラミング

Webデザインを独学でまなぶ初心者のための学習ガイド【最新版】

Webデザインを独学で勉強しようと思っているけど初めてなので不安です。時間をかけてやるからにはしっかり学びたいし、とは言え通信講座やオンラインスクールなどに入るお金もないし。なので独学でWebデザインを学べる方法が知りたいです。

そんな疑問に答えます。

Webデザインを独学で学ぶ目的を明確化

Webデザインを独学で学ぶ前に、Webデザインを学ぶ目的を明確化しないとどこまでの知識を取得するか?ってことになります。

Webデザインを学ぶといっても、その内容はかなり多いです。

Webデザインを学ぶ理由

  • Webデザインを仕事としてやるのか?
  • ブログやネットで副業するのに必要
  • ただ単に趣味で学びたい

とくにWebデザインを仕事としてやるからには、中途半端なスキルでは全然ダメですね。

クライアントを相手にして、先方の思いをくみ取ってそれを形にしなければなりません。

それにはそれなりの知識がなければ提案すらできませんので。

Webデザインを学ぶなら、基本的なことをしっかり勉強して、そのクオリティとスピードを重視することで今後の実務にも役だちます。

基本的に必要な知識

  • HTML/CSS
  • Webデザイン(Photoshop・illustrator の習得)
  • レスポンシブ(スマホ対応)
  • jQuery
  • WordPress

あくまでも必要最低限のスキルです。まずは、このあたりを学びながらWebデザインのスキルアップをしていくことになります。

とは言え、いきなりこんなに覚えらるのかが心配。ちょっと自信なくなってきた。とか思ったりもしますよね。

でも、興味があって始めることだから大丈夫でしょう。ひとつひとつ進めていくうちに、だんだん面白くなってきますよ。

ただ、まだまだ知識がついていないうちに、他の知識を取り入れようとすることはやめておくべきです。

その理由は?

例えば、Webデザインを独学で学ぼうとすると、いろいろなことをググったりします。そうした時に、わからない単語なども結構でてきたりします。

それを解明しようとググり始めることで、深掘りしてしまい今までも勉強していたことから脱線して、違う方向へ行ってしまうなど。

そうなると、基本がわかっていない状態であらたな知識を得ようとするために、中途半端になってこの先でつまずく事が予想されます。要注意です。

いますぐ必要ない知識

  • Webマーケティング
  • SCSS
  • GitとGitHub
  • FTPやサーバー関連など

とりあえず、こういったものは軽く内容を覚えておく程度にとどめておいた方がいいですね。

以上の事を頭に入れておけば、Webデザインを独学でのりきれると思います。

Webデザインの独学勉強方法

Webデザインの勉強スタイルには以下の基本形があります。

1.コーディング ⇒ 2.デザイン

この流れで勉強する理由は、コーディングが難しくそれがネックになってしまい挫折する人がいたりします。

ここを乗り切れるかどうか、ある意味自分がWebデザインをできるかどうかの判断がつきます。

ちなみにコーディングとは、ざっくり言えば、作成したデザインにコンピュータがわかる言語でプログラムを書くことです。

このコーディングをクリアしたら、デザインに移行する形です。

具体的な独学勉強方法手順

  • 1.Webデザインの全体像を把握するための動画学習(下記参照)※必要に応じて参考書を購入
  • 2.実際に手を動かす → 何か作成してみる
  • 3.基本を復習
  • 4.応用の勉強

1~4をそれぞれ深掘り解説します。

1.動画学習

Webデザインを独学で学ぶ理由の一つには、出費は抑えたいと思うからです。

なので無料動画学習は必須になります。下記では3のおすすめの無料動画学習サイトがあります。

  • ドットインストール
  • Progate
  • youtube
ドットインストール

ドットインストールは、Webサイトが出来上がるプロセスを動画で学習できるサイトです。

分かりやすさが人気のサイトで、講師が画面上で打ち込んだコードが、どのように表示されるかを解説しているのが特徴です。

Webデザインのおおまかな全体像が確認できたりします。

ただ、無料で見れる動画は限られています。さらに動画見たかったり、講師に質問したい場合はプレミアム会員の登録が必要だったりします。

って言っても、プレミアム会員の月額は税込み1,080円です。

Progate

Progateは、月額1,078円(税込み)で、HTMLやCSS、jQueryやJavascriptを勉強することができます。

わかりやすく体系的に勉強できる人気のサイトなので超おすすめです。

youtube

youtubeにはさまざまな動画が投稿されています。

youtubeの検索窓に「webデザイン 独学」と入力して検索してみてください。

かなりの数の動画が表示されます。

2.実際に手を動かす

動画を見て少しでもわかってきたら、 何か作成してみます。動画を見ているだけでは前に進みませんので。

  

自分で実際にコードを打ち込んでみます。コードを打つ際にはテキストエディターが必要になります。

以下は無料で使える代表的なテキストエディター。

  

3.基本を復習

動画を見て、実際に手を動かしてみてあるていど基本ができるまで、何度も繰り返します。

コーディングのレベルアップの近道は、作りながら勉強することです。

実際に作ることで何がどうなっているかが理解できます。

ここを復習することが、「Webデザインを独学で学ぶコツ」だったりします。

ここまでで難しいと感じても、まだ序盤です。これからさらに難し度はアップしていきます。

ゲームと同じで、敵を倒してもさらに強い敵がでてくるみたいな。そんな感じだったりしますw

ある程度基本が身に付いたら、ブログを1つ立ち上げてみるといいです。

わかったつもりでいたのに、わかっていなかった。。。みたいなことの気づきがあります。

4.応用の勉強

基本のスキルが身に付いたら、次は応用編になります。

Webデザインの独学に限らず、基本⇒応用は普通にあたりまえだったりしますがw

ここで言う応用は、まだ手を付けていないHTMLやCSSになります。この2つはサイトを作るには必須のスキルになります。

趣味でワードプレスのブログ等を運営している人も、ほぼほぼこの2つの基本操作はできています。

実際のこのブログにも使用しています。

なので、覚えれば誰でも使えたりします。思い通りにいかない時はCSSなどをさらに勉強する必要があります。

ここでは、Webデザインの学習がメインですので、アニメーションなどを実装してみるのもありですね。

こんなの難しくて出来ません。とか言う場合は、以下の書籍をおすすめします。

動画と書籍でしっかり学ぶことができますね。

おすすめの独学用書籍

Webデザイン独学の注意点

Webデザインで学んだこと。

特にコーディングの学習後は期間を空けずに反復学習が必須です。

せっかく覚えたのだから忘れないようにしなければいけません。通勤通学時のスキマ時間を有効活用するのがおすすめです。

疑問質問はかならず解決する事

とは言うものの、独学だったら誰に質問するんだよ?って思いますよね。多少のお金を払ってでもそういサービスを利用するしかありません。

ココナラなどがおすすめです。

また、「サルカワ」というサイトだとかなりの学習内容が掲載されてますので参考になります。私も愛用しています。

学習後は作品の作成

ある程度できるようになったら、実際にコードを打ってサイトやブログの作成をすると、独学で学んだ知識が身についているかどうかがわかります。

と同時に、自分の弱点や理解していないところが明確化されるので、そこをまた復習で補います。

そしてかならずアウトプットするこを忘れずに行います。

例えば
  • 自分のブログを作ってみる
  • ポートフォリオを作ってみる
  • オンラインコンペに応募してみる
  • デザインしてコーディングまでやってみる

などなど、インプットしたら必ずアウトプットすることをおすすめします。なぜなら、そうすることで覚えたことが確実に身に付くからですね。是非やってみてください。

Webデザイナー独学のまとめ

この記事では、Webデザインを独学で勉強をする際のコツや注意点・学習方法などを紹介しました。

独学では不安があるかもですが、オンラインスクールなどでは結構高額な受講料金だったりします。

極力お金をかけずにWebデザイナーを目指すなら、独学でがんばるしかないですね。

とは言え、完全無料でがんばる!!とかじゃなく、参考書など購入するものは購入し、必要なものには多少なりともお金かけることは必要です。

最後までお読みくださりありがとうございました。