独学でWebデザイナーになるための学習方法!おすすめの本やサイトを紹介します

独学でWebデザイナーになるための学習方法!おすすめの本やサイトを紹介します

2020年4月29日

Webデザインを学習する方法は、専門学校に通う、オンラインスクールを受講する、独学などがあります。
専門学校やオンラインスクールは効率的に学習できますが、社会人で専門学校に通う時間が取れなかったり、オンラインスクールは費用が掛かるので、まずは独学から始めてみようと思う方も多いと思います。

そもそも独学でWebデザイナーになるのことは出来るのでしょうか?

答えは「Yes」です。
僕自身も専門学校やオンラインスクールに通った経験はありませんが、Webデザイナーになることができ、現在もWebデザイナーとして働いています。

僕自身が独学でWebデザイナーになった経験をもとに、効率よく独学する方法や、おすすめの書籍やサイトを紹介していきたいと思います。

Webデザインを独学するメリット

まずは独学でWebデザインを学習するメリットとデメリットを把握し、自分にとって独学が向いているかどうか判断した方がいいと思います。

まずは独学でWebデザインを学習するメリットを見ていきましょう。
個人的には独学するメリットは大きく3つあると思います。

  • 学習コストを抑えることが出来る
  • 自分の好きな場所で学習できる
  • 自分の好きな時間に学習できる

Webデザインの専門学校やオンラインスクールに通うと数万円から数十万円の費用が掛かりますが、独学であれば学費は必要ありません。
せいぜいWebデザインやコーディング関連の書籍代で1〜2万円掛かるくらいです。

また、独学であれば好きな場所で好きな時間に学習することが出来ます。
時間が取れる時は自宅でがっつり学習してもいいですし、通勤中や休憩中に書籍を読んで学習することも出来ます。

Webデザインを独学するデメリット

独学でWebデザインを学ぶデメリットは主に2つです。

  • 学習するモチベーションを維持するのが難しい
  • 専門学校やオンラインスクールより学習期間が長くなりがち

Webデザインに限ったことではありませんが、独学は学習のモチベーションを維持するのが難しいです。
学習をサボっても注意してくれる講師もいませんし、励まし合う同級生や仲間もいません。
自分で学習目標を設定し、行動をコントロールできる人でないと学習し続けることは難しいと思います。

また、独学の場合は自分で情報収集して、その情報をつなぎ合わせていく必要があります。
どんなスキルが必要なのか、どんな書籍がオススメなのか、どんなソフトやツールが必要なのかなど、様々な情報を自分で調べて学習しないといけません。

専門学校やオンラインスクールであれば、体系的に学習するためのカリキュラムが組まれているので、独学よりも学習に必要な時間を短縮することが出来ます。

独学でWebデザインを勉強するのであれば、専門学校やオンラインスクールで学習するより学習時間が掛かる可能性があることは覚悟しておいた方がいいです。

独学でWebデザインを学習するコツ

Webデザイナーの独学を始める前に知ってていただきたいのは、「独学であっても出来る限り体系的に学習する」ということです。
以下のことを意識して学習するといいと思います。

  1. まずは書籍やWebサービスなどで必要なスキルを体系的に学習する
  2. ブログなどのインターネットの情報は補完的に使う

いろいろなブログの情報をかき集めて勉強することも出来ますが、それぞれのブログは書いた人も違えば、書かれた時期や主旨も違います。
そのような情報を有用か判断し、他の情報とつなぎ合わせて学習していくというのは、独学を始めたばかりの人には困難です。

まずは書籍で必要なスキルについて体系的に学び、分からないことや、突き詰めたいことをインターネットの情報で補完するという感じで学習した方がいいと思います。

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

Webデザイナーには以下のスキルや知識が必要です。

  • デザインの基本
  • Photoshop・Illustratorの使い方
  • HTML・CSS
  • レスポンシブWebデザイン
  • JavaScript
  • WordPress

Webデザイナーはデザインが出来ればいいという訳ではなく、HTMLとCSSでWebサイトの構築まで担当することが多いです。
また、WordPressというブログシステムを使って、ブログや実績などを投稿できる動的なWebサイトを構築することもあります。

習得するスキルが多いように感じるかもしれませんが、まずは「Photoshop・Illustratorの使い方」と「HTML・CSS」を集中して学習することをオススメします。
PhotoshopやIllustratorが使えて、HTMLとCSSでWebサイトを構築できれば、アルバイトとして雇ってもらえる可能性がありますし、クラウドソーシングなどで簡単な案件を獲得できる場合もあります。

独学でデザインの基本を学ぶ

WebデザイナーはWebサイトをデザインするのが主な仕事なので、配色やレイアウト、タイポグラフィなどのデザインの基本を知っておく必要があります。
デザインの基本を知っているからといって、いいデザインが出来るようになる訳ではありませんが、基本を知っているのと知らないのではデザインの質が違ってきます。

デザインの基本を学習するのにオススメの書籍は『ノンデザイナーズ・デザインブック』です。
この1冊でレイアウトやタイポグラフィ、配色などデザインについて一通りの知識を得ることが出来ます。

デザインは数をこなして経験を積まないと上達していきません。
ノンデザイナーズ・デザインブックを熟読して、あとはWebサイトやバナーなどをデザインしまくるのがいいと思います。

過去の記事でデザインの学習方法を紹介しているので、よかったら参考にしてください。

Webデザインを上達させるためにWebデザイナーの僕が実際にやったこと
Webデザインを始めた頃、なかなか上達しなくて悩んだ時期がありました。先輩デザイナーと自分のデザインを比べると、何か野暮ったかったりパッとしなかったりで自信喪失…
ryob.net

独学でPhotoshop・Illustratorの使い方を学ぶ

まずはPhotoshopやIllustratorの操作方法や機能を解説した書籍で基本的な使い方を学習するといいです。
PhotoshopやIllustratorは頻繁にアップデートしてUIや機能が変わるので、発売日が古い書籍だと情報も古い場合があるので注意してください。

僕が使ってた書籍は廃盤になったみたいで紹介できませんが、『Photoshop しっかり入門』と『Illustrator しっかり入門』は初心者に分かりやすそうな感じです。

PhotoshopやIllustratorは機能が多く出来ることも多いのですが、Webデザインでは全ての機能を使う訳ではありません。
全ての機能をマスターする必要はなく、Webデザインでよく使う機能だけ使えるようになればOKです。

Webデザインで使う機能を知るために、PhotoshopやIllustratorで実際にWebサイトをデザインする書籍も読むといいのですが、ドンピシャな書籍を見つけることが出来ませんでした。
少し古い書籍ですが『WebデザインのためのPhotoshop+Illustratorテクニック』が内容的に近いと思います。

あと、『PhotoshopでWebデザインをはじめよう!』というAdobeのブログも役に立つので読んでみることをオススメします。

https://blogs.adobe.com/japan/serialization/web-start-design-with-photoshop/

独学でHTML・CSSを学ぶ

HTMLとCSSを学習するには、実際にWebサイトを構築していく流れを解説している書籍を読んだ方がいいです。
『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』はHTMLとCSSの知識だけではなく、Webサイトの仕組みや制作の流れまで解説してあり、この1冊でWebデザイナーに必要な知識を得られるのでオススメです。

ちなみに『HTML・CSS辞典!』のような書籍は必要ありません。ググればHTMLやCSSのタグをまとめた優良なサイトがたくさんあります。
僕も以下のサイトには大変お世話になっています。

下記の記事でHTMLの基本を解説しているので、よかったら参考にしてください。

初心者向け!HTMLでホームページを作ってみよう
ホームページはHTMLという言語で書かれています。HTMLを勉強することで、ホームページを作れる様になります。最近はWordPressでホームページを作るケース…
ryob.net

独学でレスポンシブWebデザインを学ぶ

レスポンシブWebデザインとは、Webサイトをスマートフォンでもパソコンでも見やすいように構築する手法です。
スマートフォンでWebサイトをみる人が多い現在では、レスポンシブWebデザインは必須のスキルと言えます。

HTMLとCSSを駆使してスマートフォンでもパソコンでも見やすいWebサイトを構築していくので、HTMLとCSSの学習の延長線上にある感じです。
HTMLとCSSの学習にオススメした『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』はレスポンシブWebデザインについても解説してあるので、まずはこの書籍で学習するといいと思います。

当ブログでも過去の記事でレスポンシブWebデザインについて解説しているので、よかったら参考にしてください。

レスポンシブWebデザインの作り方を解説!よく使うサンプルあり
レスポンシブWebデザインとは、1つのHTMLをCSSによってパソコンでもスマートフォンでも見やすいように最適化することです。 スマートフォンでWebサイトを見…
ryob.net

独学でJavaScriptを学ぶ

JavaScriptはWebサイトに色々な機能を追加することができ、アニメーションを実装する際に使うことも多いです。
画像をスライドさせたり、ボタンをクリックしてナビゲーションを表示させたり、スクロールに合わせて要素をアニメーションさせたり、色々なことが出来ます。
HTMLとCSSで構築したWebサイトに動きが加わるので、めっちゃテンションが上がります。

JavaScriptの書籍には内容が難しいものもありますが、最初は内容が薄くともとっつきやすい書籍を選んだ方がいいです。
僕も最初に白黒で文字がびっしり書かれた書籍を選んで挫折しそうになったことがあります。
『確かな力が身につくJavaScript「超」入門』は初心者にもとっつきやすくていいと思います。

この本で基本を学んだら、もっと内容が濃い書籍やインターネットの情報で学習してステップアップしていくといいです。

過去の記事でjQueryというJavaScriptのライブラリを使って、イメージスライダーやイメージの拡大表示などを実装する方法を解説しているので、よかったら参考にしてください。

【jQuery】イメージスライダーslickをレスポンシブサイトで使う方法
Webサイトで画像やコンテンツをスライドさせる場合は、jQueryのスライダープラグインslickをよく使います。僕が携わるwebサイトの9割はレスポンシブWe…
ryob.net
【jQuery】画像を拡大表示できる「Lightbox」の使い方
画像やテキストをクリックするとポップアップ風に拡大画像を表示できる「Lightbox」の実装方法を解説します。 jQueryプラグインLightboxを実装する…
ryob.net

独学でWordPressを学ぶ

世界中のWebサイトの3割から4割はWordPressで作られていると言われるほど、WordPressは超人気のシステムです。

Webサイトにはブログやお知らせ、実績など頻繁に更新が必要なコンテンツがあります。
本来ならHTMLを編集して更新していけばいいのですが、HTMLの知識が必要ですし管理も大変です。
WordPressでWebサイトを作っておけば、お知らせなどをブログのように管理画面から追加や編集することが出来るようになります。

WordPressはPHPという言語で作られているますが、基本的なWebサイトの構築であればPHPの深い知識は必要ありません。
僕がWordPressを学習し始めた頃は全くPHPの知識がない状態で、WordPressを触りながら徐々にPHPの知識を身につけていきました。
まずは、実際にWordPressでWebサイトを構築する流れを解説した書籍で勉強することをオススメします。

『WordPressレッスンブック』はWordPressでブログを作る方法を学習できる書籍です。
「ブログを作りたい訳じゃない」と思うかもしれませんが、WordPressの基本が学べるのでオススメです。

この書籍でWordPressの基本を学んだら、今度はブログではなくWebサイトの作り方を解説した書籍にステップアップします。
同じ書籍名でまぎらわしいですが、『WordPressレッスンブック』ではWordPressでWebサイトを作る方法を学習できます。

WordPressの書籍を選ぶ際のポイントは、「WordPressのテーマの作り方を解説してある書籍を選ぶ」ことです。
WordPressの管理画面で既存テーマの設定を変更してデザインをカスタマイズする系の書籍は、単にWordPressでブログを作りたい人にはオススメですが、WebデザイナーとしてWordPressでWebサイトを構築したい人にはあまり必要ありません。

Webデザインの独学に必要な学習期間

Webデザインの独学に必要な学習期間には個人差がありますが、3ヶ月もあればPhotoshopやIllustratorの基本操作と、HTMLとCSSの基本は身につけることが出来ます。
半年もあればWordPressで簡単なWebサイトを作れるようになることも可能です。

ここまで出来るようになれば、あとはアルバイトやインターンでもいいのでWeb制作会社に潜り込み、実戦でどんどんスキルアップしていく方が効率的です。
クラウドソーシングなどで簡単な案件に挑戦するのもいいかもしれません。

ただし、いいWebデザインが出来るようになるまでは数年かかると思います。
僕も納得がいくデザインが出来るようになるまで2年くらいは掛かりました。
今でもなかなかいいデザインが出来ない時もあります。
デザインはスポーツや音楽のようにゴールがある訳ではないので、デザインに携わっている限り学習は続くのだと思っています。

Webデザイナーになるには独学とスクールどちらがオススメか

僕自身はWebデザイナーに必要なスキルや知識を独学で学習しましたが、効率的に学習するのであればオンラインスクールを受講する方がいいと思います。

僕がWebデザイナーを目指していた頃は、今ほどWebデザインやプログラミングのオンラインスクールが充実していませんでした。
通う系のスクールや専門学校はありましたが、すでに社会人だった僕はスクールに通うことが出来なかったので独学するしかありませんでした。

オンラインスクールを受講するには費用が掛かりますが、独学より早く学習を終えてWebデザイナーとして稼げるかもしれません。
独学なら学習コストを抑えることが出来ますが、Webデザイナーとして稼ぐのが遅くなったり、途中で挫折してしまったりするかもしれません。
トータル的に考えれば、オンラインスクールを受講する方がお得ということもあります。

独学でWebデザイナーになる学習方法のまとめ

独学でWebデザインのスキルを身に付けるためには、出来る限り体系的に学習することが大切です。
まずは書籍で体系的に学び、インターネットの情報で補完するという方法がオススメです。

学習に使う書籍を選ぶ際は、内容が難し過ぎるものを選ばす、まずは自分が理解できるものを選んだ方がいいです。
内容が難し過ぎる書籍を選んでしまうと挫折してしまう原因にもなります。
まずは簡単なものからスタートし、自分のスキルや知識がレベルアップするにつれて、どんどん難しいものにチャレンジしたらいいだけです。

Webデザイナーに必要なスキルは多く感じますが、焦らずひとつずつ身に付けていけばいいと思います。
自分がデザインしたサイトを自分で構築できたときは、きっと大きな達成感を感じれるはずです。

以上が独学でWebデザイナーになるための学習方法でした。