Webデザイナーに興味があってWebデザインを勉強したいけど、何から勉強すればいいのかわからない…「どうすればWebデザインが出来るようになるのかな？」と思っていませんか？
この記事で紹介する「Webデザインを独学を何から勉強する？」では、Webデザイン勉強の順番、勉強する内容を間違わなければ、初心者でもできるようになります。
実際に私もWebデザインは就業時間後の時間を使って独学で取り組み、現在Webデザイナーとして仕事をしてきました。
この記事では「Webデザイン初心者はまず何から勉強を始めると良いか」からお伝えしていきます。
今回は私が過去に学んだ方法や経験から、実際にこの順番で勉強するのがよいのか、Webデザイナーを目指している人が読んだ時に少しでも参考になればと思います。
独学でWebデザインを仕事にするには何から勉強したらいい?
Webデザインは以下のスキルを身につける・勉強する必要があります。
必須なスキル
・Webリテラシー
・アプリケーションの使い方
・デザインスキル
・コーディングスキル（HTML/CSS、レスポンシブ対応）
理解してからでもOKなスキル
・JavaScript/jQuery
・WordPress
・サーバ周り
すごく多くですよね！
ですがいきなり全部やろうと思うと挫折するので、最初から必要はありませんので安心してください。
Webデザイナーになるには、初めに必須なスキルのアプリケーション（Photoshop）の使い方・デザインスキル・コーディングスキル（HTML/CSS、レスポンシブ対応）が最低限必要になります。
まずはその中で、自分が何を中心に学びたいかを決めておく必要があります。「デザインをメイン」にやりたいのか、「コーディングをメイン」にやりたいのか、「両方しっかり学びたいのか」が決まると、どのスキルを先に学ぶか決まってきます。後から変えてもOKなので、何から始めたらいいか解らない場合は色々興味のあるところからやってみて、一度自分の優先順位を決めてから勉強に取り組んでみましょう。
独学でWebデザインはマスターできる？
結論から言うと、独学でWebデザインをマスターすることは可能です。
ただ相当な努力・勉強期間は必要だし「こうなりたい！」という明確なゴールがないと挫折してしまいます。
なので、Webデザイン を独学でするメリット・デメリットがあるので比較してみます。
当たり前になりますが、独学で勉強する最大のデメリットは「わからないことを聞ける人がいない」点になります。独学でWebデザイナーになるために質問できる先生やメンターがいると頼もしいですが、メリット・デメリットを比較した時に、費用が抑えられるけど自分でどのくらい頑張れるか？で判断する事になってきます。
Webデザインを独学では難しいといわれるけど、実際どうなの？
先程お伝えした「独学で勉強するメリット」にもありますが、自分で勉強したいところを自由に決められる反面、今それが必要か？何からやったらいいのか？を指導してれる人がいないので、すべて自分で判断することになるところが「Webデザインを独学では難しい」といわれるところです。
なので、学ぶ順番としては、独学で未経験からの場合は本や動画なので学ぶことができる、最低限必要なこのスキル３つを先に自分でやってみることがおすすめです。
・コーディングスキル（HTML・CSS・レスポンシブ）
・アプリケーションの操作スキル（使い方）
・デザインの知識・スキル
何から手をつけたらいいのかわからない場合は、完璧でなくてもいいから「Webサイトをデザインからコーディングまでひと通り作れるスキル」を習得することを目指してください。
採用している会社がある場合、雇う側がWebデザインの未経験者を雇用する時は初めから高いレベルは求めていません。
この３つのスキルができれば採用してもらえる確率が上がります。
その後は、働きながら１つずつステップアップして1人前のwebデザイナーを目指してほしいです。
phpやJavaScriptなどは、はじめは必要ないです。
WordPressはphpでできていますphp言語は、はじめは覚える必要はなく、次のステップで大丈夫です。
私が独学でWebデザインを勉強した方法
各スキルの内容と、私が学んだ方法をご紹介します。
①Webリテラシー
Web業界のことを何から勉強したらいいのか全く知らない方が初めに知ったほうがいいことは、この業界の常識的な知識や専門用語・Webサイトの仕組みや全体の流れ等を理解することです。
インターネットの仕組みからサーバーの知識、htmlとは？から画像の扱いなども含まれているものです。仕事としてWebデザインをするなら「必ず知っておくべき」の基本的な内容から、専門的な知識まで含まれています。
②アプリケーション（Photoshop）
Photoshopは画像処理ソフトとして使うアプリケーションですが、Webデザインをするアプリケーションとして、Web業界では必ず使いこなす必要があるアプリです。
デザイン全体のレイアウトをしながら、写真の加工補正をしたり、ビジュアル部分の作り込みまで１つのデータで両方できるのでPhotoshopをメインに使っています。
コーディングするにしてもPhotoshopの使い方がわからないと画像書き出しもできないので、使えることは必須になります。
Photoshopの何から？と思う人は、まずはどんなツールがあるか基本操作を覚えることから。使い方を網羅した書籍を購入するのもよいし、ネットから調べるなどをして使い方はしっかり抑えておきましょう。
基本操作を覚えたあと、次はデザインの優れたホームページやバナーを真似（模写）して、実際にPhotoshopで作ってみるということを繰り返してマスターしていきます。
Photoshopの使い方はほどほどで、どんどん手を動かしてPhotoshopで制作することがおすすめです。
Illustratorが使えた方がいい、XDを使う現場も増えてきていますが、XDの使い方を覚えるのに時間を取られるのはもったいないので、Photoshopを学習した後から学んでも大丈夫です。
③Webデザイン
デザインにはセオリーがあります。自分にはデザインのセンスがない・・・と思いがちですが、デザインの理論を学ぶことでかなりデザインスキルは向上します。
デザインって何から手をつけたらいいの？と思う人は、最初は本がおすすめです。「デザインとは？」から解説しているものがあるので、1〜2冊読みやすいものを手にとってみてください。
デザインを学ぶ上で大事なことは、より良いデザインを日頃から見ておくことです。
ちょっとでかけたコンビニ、スーパー、街の看板、普段見るホームページなど、デザインに触れている機会は以外と多いので、自分がどんなデザインだったら「いいな！」と思うのかのアンテナを立ててみてください。
おすすめ勉強の本
※なるほどデザイン・目で見て楽しむ新しいデザインの本
初心者にわかりやすく、デザインのビフォーアフターもついていてとてもデザインの参考になります。サブタイトルどおり、目を惹く写真も多く、フォントもたくさん載っていて観ているだけで楽しいので一冊持ってても損はしない本です。
※ノンデザイナーズ・デザインブック
デザインの基礎を学ぶなら、この本が一番良いと思います。絶対に知っておかなくてはいけない知識が網羅されています。
④コーディング（html・css）
アプリの使い方、Webデザインの勉強と並行して、Webサイトがどのような仕組でできているかの仕組みを知るために、コーディング（html・css）を勉強しておく必要があります。
コーディング（プログラミングのようなもの）とは、デザインしたものをhtmlとcssをつかってWebサイトで見れる形にすることです。
コーディングって何から手をつけたらいいの？って思う人は、最初は「htmlとcssってこんな感じなんだ」ってのが分かるところから。ネットで初心者向けにサービスがあったり、イチからサイト完成まで解説している本もあります。
ほとんどの会社ではWebデザイナーがコーディングまで行っているので、まずは、コードがスラスラかけなくても意味がわかる、読めるぐらいにはなっているのが理想です。
そうすること、どんなコードを書けば「どういう表示がされる」のかわかってきます。
とはいえ、最低限の基礎知識は必要なので、コーディングをする前にhtmlとcssの基礎について学ぶようにしましょう。
おすすめ勉強サイト
Webデザイン初心者でこれから独学でコーディングをしたい方は「プロゲート」「ドットインストール」が、すごくわかりやすく勉強できるサービスがあるので、ここからはじめてみるのがおすすめです。
⑤JavaScript/jQuery
JavaScript/jQueryは、Webサイトに動きをつけるためのものです。
JavaScriptにはライブラリと呼ばれるjQueryというものがあり、簡単に実装するためのライブラリであるそれを組み込むことで動きがつけられることができます。
最近のWebサイトは、何かしら動きのあるサイトが多いので、ユーザーがより使いやすいWebサイトになるために必要なスキルになってきています。
CSS3のおかげでJavaScriptがなくても動きのあるサイトが作れるようになっています。
JavaScriptを使えばCSSよりも動きのある表現ができますが、html・cssの土台を固めることが優先事項なので、独学をする順番としては後でもよいスキルです。
Webデザインを独学でする効率のよい流れ
Webデザインを独学でするなら、ここからご紹介する効率の良い勉強方を試してみましょう。
デザインをするのに、PhotoshopやIllustratorといったアプリの使い方を覚える必要があります。なぜなら、アプリの使えないとデザインができないからです。
ですが、PhotoshopやIllustratorは機能がとても豊富なので、ツールの使い方をひとつひとつ覚えようとすると数が多くて挫折してしまいます。
初めはデザイン制作をしながらその都度使い方を調べる、逆引きをしながらアプリを使えるようにしていきます。
なので、まずは何かデザインを制作しながらアプリの使い方を学びましょう。
最初に何からデザインをしたらいい？と悩む場合のおすすめは「バナー」のデザインです。
バナーのようなサイズが小さいものから作ることで使い方を学べます。まずは模写・トレースからやってみましょう。できれば文字が多めのものがおすすめです。
慣れてきたら徐々に「Webサイト」のTOPページデザインに挑戦してみましょう。
初めから自分でイチから考えてデザインするのは難しいので、何か参考になるWebサイトを見つけて模写・トレースをします。できればカフェなどのかわいいサイトではなく、コーポレートサイトで探してください。
Webサイトのデザインとバナーではアプリの使うツールも変わってくるので、ここでもやりたいことの表現を調べたり模索しながら、ツールの使い方を学びます。
そして、配色やレイアウトに幅が出てくるので、デザイン全体の考え方なども身につきます。
いくつかWebサイトのデザインを模写・トレースができるようになったら、イチからWebサイトのデザインを作ることに挑戦してみましょう。
クラウドサービスなので案件があるので、できそうなものを選んでみると良いです。
これまでは既にあるWebサイトの真似して手を動かすだけだったので、配色やレイアウトなどのデザインに関しては考える必要はありませんでした。
実際の仕事は、なにもないゼロベースからデザインを考えていくので、自分で構成を考えるところからできるようにしたいです。
④コーディングを参考に、コーディングの基礎を学びます。
そのうえで、自分で作成したデザインを、実際にコーディングをしてみます。
参考にするサイトがないので、今までのコーディングの練習とは違い、応用となる知識やスキルが必要になります。
イチからWebサイトを自分で調べながらコーディングすることで、新たに学ぶことがあるし、よりスキルが深まります。
Webデザイン独学のよくある3つの間違い
①買った本を最初の１ページ目から順番で独学すること
例えば、Photoshopの本を購入したとします。
WebデザインをするのにPhotoshopの機能は2〜３割ぐらいしか使いません。
なので、本の最初っから順番に手を動かしていくと使わない機能もあるので、効率悪くなります。
元々、写真を補正したり合成したりするためのアプリなので、Webデザインとしては身につける必要がない内容も多くあります。なので、やりたいことを逆引きするような方法で本を利用することをおすすめします。
②好きなことのみ独学でやる
「おしゃれなデザインをできるようになろうとして、みかけのデザインばかり、トレースすること」
バナー、Webサイト、コーディングもですが、英語だけのおしゃれなバナーや、イメージだけのWebサイト、内容が少ないサイトのコーディングは実際の実務になったときにそんな案件はありません。何からやったらいいかわからなくて自分の好きなことだけ勉強する、アウトプットするのは注意が必要です。
③期間をきめないで独学をする
デザインだけの話ではないですが、期限を決めないと緊張感がなくなりダラダラしてしまいます。
せっかくWebデザインを独学で始めたのに、成長しないなんてもったいないですよね。
「いつまでにどうなりたい」を決めてから勉強をすすめてください。
最短でWebデザインを身につける方法とは
最短でWebデザインを身につけるには、独学をしながらスクールに通う２つの方法がおすすめです。
ネットや上に多くの情報や書籍も豊富にあるので、独学でWebデザイナーを目指す方は結構多いです。
ですが、誰でも独学が向いているという訳ではありません。
独学でWebデザインの勉強は時間がかかり、人によっては非効率かもしれません。
もしお金に余裕があるのであれば、スクールに通うのも１つの方法です。
スクールの良いところは、課題が用意されているので、何から勉強をやったらいいのわからない、学ぶ順番がわからないと思う方にはおすすめです。
あと質問できる環境がある、課題の提出がありサボれないというのが最大の良いところです。
Webデザイン【独学】によくある間違いとは？何から勉強する？のまとめ
Webデザインに興味をもって独学で始めてみたい！と思った方は、まずは「実際にやってみる」というのが一番大事なことだと思います。
実際にデザインやPhotoshopなどのアプリケーション、html・cssに触れてみて楽しかったらもっと自分で調べて実践へ進むのもいいし、より効率よく学ぶということであれば、スクールに入ることを検討してもいいですね。
