WEBデザインの勉強方法は独学?スクール?それぞれ徹底解説します

WEBデザインに興味はあるけど
「なにからはじめればよいかわからない……」
「独学とスクールはどっちがよいの?」
「どのように勉強するべきなの?」
と悩みや疑問をお持ちの方はいませんか?

この記事ではWEBデザインの勉強をこれからはじめようと思っているあなたに、WEBデザインの勉強法を詳しく解説していきます!

WEBデザインを独学で学びたい方も、WEBデザインスクールを検討している方にも、役に立つ情報をまとめました。それでは、早速みていきましょう!

目次
  1. WEBデザイナーの仕事内容とは?
  2. WEBデザインを勉強するために必要なもの
  3. WEBデザイナーが勉強するべき知識やスキル
  4. WEBデザイン初心者は、独学とスクールのどっちがおすすめ?
  5. 独学でWEBデザインを勉強する5つのポイント
  6. WEBデザインを独学で勉強する7ステップ
  7. WEBデザイン初心者の勉強に役立つ!おすすめ無料コンテンツ5選
  8. WEBデザインスクールを選ぶときの5つのチェックポイント
  9. まとめ

WEBデザイナーの仕事内容とは?

WEBデザイナーの主な仕事内容は、ホームページをデザインするといった大きな仕事から、バナー制作のような小さな仕事など幅広くあります。

例えば依頼されたWEBサイトをデザインする場合の仕事の流れとしては、クライアントと話し合ってどのような方向性にしていくのかデザインのコンセプトを決めたあと、クライアントがイメージしているWEBサイトを制作できるように全体の構成を考えていきます。

構成を考えたら、その他の配色やロゴ、フォント、アイコンの配置といった細部までデザインを進めていくという流れです。

仕事の流れは、仕事内容や働き方によって変わる場合があります。
もっと詳しいデザインの流れが知りたい方はこちらを参考にしてみてください。

【お知らせ】
累計7200名以上が参加した「好きなことで生きていく!WEBデザイナーという働き方セミナー」では、WEBデザインの学習で失敗してしまった"しくじり先生"のお話や、「未経験OK」のワナ、WEBデザイン業界の最新裏事情などをお伝えしています。

なお、日本デザインスクールのLINE@では、スキルなしでも簡単にバナーが作れるようになる無料レッスンをプレゼント中です。こちらもぜひご登録ください。

WEBデザインを勉強するために必要なもの

WEBデザインの独学に必要なもの最初に、WEBデザインを勉強するために必要なものを確認しておきましょう。
最低限用意しなければいけないものは「パソコン」「PhotoshopとIllustrator」「HTMLエディタ」の3つです。
それでは1つずつ見ていきましょう。

パソコン

WEBデザインを勉強する際は、はじめにパソコンを用意してください。
パソコンを選ぶ際は、以下の条件を満たしたものを選ぶようにしましょう。

■CPU…インテルCore i5以上
■メモリ…8GB以上(16GBあると◎)
■ハードディスク…500GB以上
■OS…Windows10/macOS最新

デスクトップとノートパソコンのどちらでもWEBデザインはできますが、持ち運びできるノートパソコンがおすすめです。

WEBデザインを勉強する人におすすめのパソコンをこちらで紹介しているので、気になる方はぜひチェックしてみてください。

PhotoshopとIllustrator

次に用意してほしいものは、PhotoshopとIllustratorです。

Photoshopは主に加工や補正などの画像編集をおこなう際に使用され、Illustratorは主にテキストや図形といったオブジェクトに対して細かなデザインを施すときに使用されるグラフィックソフトです。

他にもWEBデザイナーが使用しているソフトはありますが、多くのWEBデザイン会社で、PhotoshopやIllustratorのソフトが使用されています。

どちらもWEBデザインを勉強するうえで欠かせないソフトなので、将来WEBデザイナーとして働きたいという方は、どちらも勉強しておくとよいでしょう。

HTMLエディタ(Dreamweaverなど)

HTMLエディタとは、HTMLを書く際に使うソフトのことです。

そもそもHTMLとは、WEBページを表示するために必要な最も基本的なマークアップ言語です。アルファベットや数字がずらずらと並んでいる、アレです。


HTMLエディタは、タグの入力をサポートする機能があったり他のファイルとの連携も取れPhotoshopやIllustratorと同じAdobe社の製品なので、コンプリートプランに入っていれば、セットで使えるので検討してみてください。たりするので、WEBデザイナーやプログラマーのほとんどが使用しています。

HTMLエディタにはいろいろ種類がありますが、代表的なものにDreamweaverが挙げられます。

WEBデザイナーが勉強するべき知識やスキル

次に、WEBデザイナーが勉強するべき知識やスキルについて解説します。

まず前提として、WEBデザイナーになるために特別な資格はいりません!
WEBデザイン技能検定・WEBクリエイター能力認定試験などの資格もありますが、持っていなくても大丈夫。

世の中で活躍しているWEBデザイナーも、資格を持っていない人は多いんですよ。
そうはいっても、WEBデザイナーになるためには、ある程度のスキルが必要です。

主に3つの知識やスキルが求められるので、順に見ていきましょう。

デザインについての知識

具体的にデザインについての知識とは

  • 色指定はRGBに設定する
  • サイズの単位はピクセルを使う
  • 色の三属性

など、WEBデザイナーになるためには必ず知っておかなければならない知識のことです。

基本的なデザインの知識は身につけておきましょう。

デザインソフトを使いこなすスキル(Photoshop / Illustrator)

WEBデザイナーは、PhotoshopやIllustratorなどのデザインソフトを使いこなさなくてはいけません。

PhotoshopとIllustratorのどちらもできることが望ましいですが、両方習得するには時間がかかります。

WEBデザイン初心者であれば、Photoshopを優先させましょう。Photoshopを使いこなせれば、Illustratorを代用することも可能です。

コーディングスキル(HTML / CSS)

コーディングは主にコーダーが担当する業務ですが、WEBデザイナーといえど、ある程度のコーディングスキルは必要です。

最低限HTMLとCSSの知識は身につけましょう。

さらに、JavaScriptやjQueryのスキル、レスポンシブデザインのスキルがあると、アニメーションを入れられたり、スマートフォン・パソコン・タブレットにも対応したWEBサイトが作れます。

とはいえ、肝心のデザインができなければ、WEBデザイナーとして活躍することはできません。最初はアレもコレもと手を出しすぎないほうがよいでしょう。

コーディングがあまりできなくても、クラウドソーシングなどで外注する、という手もあります。

WEBデザイン初心者は、独学とスクールのどっちがおすすめ?

WEBデザインを勉強する方法は大きく分けると「独学」「スクール」の2つあります。
それぞれのメリット、デメリットを見ていきましょう。

なるべくお金をかけたくない人は【独学】

WEBデザイン独学のメリットデメリット

独学は費用が少なく、自分の好きな時間・場所で勉強できるのが魅力です。ですが、一緒に勉強する仲間がいないため孤独になりやすいという点もあります。
一人でも自分でモチベーションを維持し、コツコツ勉強できる人に向いている勉強法です。

WEBデザインを独学で勉強する方へおすすめの本はこちらで紹介しているので、参考にしてみてください。

効率よく勉強したい人は【スクール】

WEBデザインスクールのメリットデメリット

オンラインスクールの場合、好きな時間・場所で勉強できるのが魅力です。どこからでも受講できるので、地方や海外在住の方もOK。

マンツーマン指導だと仲間ができませんが、グループで一緒に勉強できるオンラインスクールもあります。最も効率よく勉強ができ、忙しい社会人におすすめな勉強法です。
後ほどおすすめのスクールも紹介するので、気になる方はぜひ参考にしてみてくださいね。

独学でWEBデザインを勉強する5つのポイント

「まずは独学で勉強してみたい!」と思った方に、ここでは独学でWEBデザインを学ぶために大切なポイントを5つご紹介します。

目的・目標を決めよう

  • どうしてWEBデザイナーになりたいのか
  • なんのためにWEBデザインを勉強するのか
  • どのようなWEBデザイナーになりたいのか

など、明確な目的や目標をさだめましょう。
自分のなりたい姿をしっかりイメージしておくことは、モチベーションにもつながるので必ず考えておきましょう。

計画を立てよう

目的・目標を達成するためには、どのくらいの期間で勉強するのかきちんと計画を立てましょう。無理のない範囲で、勉強のやり方やペースを決めておくとよいですね。
あまり詰め込みすぎると計画倒れになる可能性が高いので、調整日を入れるなど、ゆとりをもった計画を立てましょう。

学習時間を確保しよう

仕事や家事・育児などで忙しい場合、ついつい勉強を後回しにしがちです。時間はあっという間になくなるため、時間をつくる努力が必要になります。
集中して勉強できる時間をしっかり確保しましょう。

質問できる環境をつくろう

一人で勉強していると、どうしてもわからないことが出てくると思います。
誰かに質問できる環境があれば、とても心強いです。勉強会やセミナーに参加するなどして、一緒に勉強する仲間をつくるとよいですよ!

インプットしたあとは必ずアウトプットしよう

WEBデザインの勉強はインプットした分、アウトプットが大事になります。
実際に手を動かしながら学ぶことで、デザインツールの使い方などを含め知識が定着しやすくなるのです。学んだことの復習や自分の苦手分野の把握のためにも、たくさんアウトプットしましょう。

WEBデザインを独学で勉強する7ステップ

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

ここでは、WEBデザインを独学で学びたい人向けに、どのような流れで勉強すればよいか、具体的に解説していきます。
7つのステップがあるので、順に見ていきましょう。

STEP1 WEBデザインの基礎を学ぼう

まずは、書籍やブログ・YouTubeなどから、WEBデザインの基礎を学びましょう。
ある程度の知識を入れたら、よいデザインと悪いデザインがパッと見てわかるようになるとよいですね。

また、普段から電車の中吊り広告やWEBサイト、ヘッダーやバナーなどを見るクセづけをしておきましょう。

STEP2 基本的なデザインツールの使い方を覚えよう

デザインの基礎ができてきたら、Photoshop・Illustratorなどのデザインツールの使い方を覚えましょう。

デザインツールにはたくさんの機能がありますが、実務で使う機能は限られています。写真の補正方法や、文字の入れ方など、優先順位の高い機能から覚えていくとよいですね。

STEP3 デザインを模写してみよう

ある程度デザインツールの使い方がわかってきたら、まずは、簡単なバナーから模写してみましょう。写真や装飾などは、インターネットのフリー素材をダウンロードするとよいですよ。

どちらが本物なのかわからないくらい、よく観察して模写しましょう。作っているうちに、デザインツールも使い慣れていきます。

STEP4 コーディングの基礎知識をつけよう

デザインの模写ができたら、コーディングの基礎を勉強していきましょう。
Progataやドットインストールなど、無料でコーディング学習できるものもあります。
本や動画を見るだけではなく、実際に手を動かしながら勉強するとよいですよ。

STEP5 サイトを模写してみよう

デザインとコーディングの知識を合わせて、サイトを模写してみましょう。
実際に作ってみると、勉強した知識がスキルとして定着していきます。わかったつもりでいる所に気付くこともできるでしょう。

STEP6 自分でWEBサイトを作ってみよう

サイトの模写ができたら、自分でデザイン・コーディングしたWEBサイトを作ってみましょう。模写と違って自分で考えながらつくる必要があるため、今までよりも難易度が高くなります。

わからないところはインターネットで検索したり、書籍を参考にするなど、調べながら制作しなくてはなりません。苦労するかもしれませんが、その分自分で解決する力が身につくでしょう。

STEP7 クラウドソーシングなどで受注してみよう

ここまでできたら、クラウドソーシングに登録して受注してみましょう。
実際にクライアントの要望を聞きながら制作することで、実社会に通用するスキルを身につけられます。
また、今まで作った作品をポートフォリオにまとめておくと、お仕事を受注する際のアピールに使えますよ。

WEBデザイン初心者の勉強に役立つ!おすすめ無料コンテンツ5選

ここでは、WEBデザイン初心者の勉強に役立つおすすめ無料コンテンツを紹介していきます。

「WEBデザイナーってどんなものを作っているの?」と気になる人も、「WEBデザインの勉強を始めたばかりで、無料で役に立つコンテンツを知りたい!」と思っている人も、ぜひチェックしてみてください。

良質なバナーデザインが見つかる【Pinterest】

Pinterestは、WEBサイト上にある画像を集めてブックマークできるサイトです。
Pinterest内で「WEBデザイン バナー」などと検索してみると様々なデザインが見つかります。

まずはWEBデザイナーがどんなものを作っているのか確認してみるのもよし、模写するバナーの参考探しをするのもよし!たくさんバナーを見て、良いデザインの感覚を掴んでください。

基本的なデザインツールの機能を学べる【Adobe公式サイト】

PhotoshopやIllustratorのデザインツールは、Adobe社が提供しています。
そのAdobe公式サイトでPhotoshopやIllustratorのチュートリアルが公開されており、基本の使い方を学べます。

Photoshopを初めて使う人でもわかりやすく解説しているので、とても参考になるはず。チュートリアルを見ながら実際に手を動かしながらやってみると、スキルが定着しやすいですよ。

Photoshopチュートリアル

Illustratorチュートリアル

現役デザイナーの無料レッスンが受けられる【YouTube ゼロイチWEBデザイン】

ゼロから自分で作れるWEBデザイン体験レッスンを現役WEBデザイナーがわかりやすく解説しています。
現役WEBデザイナーが実務で使える知識のみに絞って教えているので、効率よく学習できますよ。

また、WEBデザイナーの収入事情や転職の仕方、クラウドソーシングのやり方などWEBデザイン初心者が知りたい情報を多く発信しています。

講師の久保先生は明るく楽しい女性なので、きっと楽しみながらWEBデザインの学習ができますよ。

プログラミング初心者におすすめ【Progate】

イラスト中心のスライドを使ってわかりやすくプログラミングを教えてくれます。
実際に作りながら学べるので、スキルが身につきやすいのです。
スライドでまとめられているので、動画よりも復習しやすいところが強みです。

学習コースがいくつか分かれていますが、まずは「HTML&CSS」を選んで学習していくといいですよ。

動画による学習スタイルでわかりやすい【ドットインストール】

すべての動画は3分以内にまとめられており、無理なく学習できます。
スマートフォンでも視聴できるので、通勤時間やお昼休憩などのスキマ時間で気軽に学べます。

豊富なレッスンがありますが、「WEBサイトを作れるようになろう」というところから学習するのがおすすめです。実践的なスキルを身につけられますよ。

WEBデザインスクールを選ぶときの5つのチェックポイント

WEBデザインスクール選びのポイント

「独学は難しそうだな……」と思った方は、WEBデザインスクールを検討してみてはいかがでしょうか?スクールは独学と違い、効率よく勉強できるカリキュラムが組まれていたり仲間を作りやすかったりするため、モチベーションを維持しながらスキルが習得できます。

ただ、WEBデザインスクールと一口にいっても、WEBデザインを学べるスクールは数多くあります。どこを選べばよいのか、迷ってしまいますよね。

時間・労力・お金を使って学ぶのですから、絶対に失敗したくないはず。

ここでは、WEBデザインスクールで学びたい方向けに、WEBデザインスクールを選ぶときにチェックすべき5つのチェックポイントをご紹介します。

現役WEBデザイナーが教えているか?

WEB業界は、トレンドの移り変わりが激しいです。
現役でない講師の場合、ソフトの使い方しか教えてくれず、肝心のデザインは古臭いものしかできない、というケースも少なくありません。

現役のWEBデザイナーが講師であれば、現場で使えるノウハウを教えてくれるので、実社会ですぐに役立ちます。

習得期間はどのくらいか?

習得期間は、できれば短い方がよいです。「長い方が、いろいろな知識を教えてもらえるんじゃないの?」と思いがちですが、長くなればなるほど、最初に習ったことを忘れていきます。

さらに、現場で使わないスキルを覚えたとしても、結局使う機会はありません。
ダラダラと勉強するより、実務で使えるスキルだけを短期間で習得した方が、効率がよいのです。

現場で使える力が身につくか?

WEBデザインスクールを卒業したあと、すぐに転職・副業・フリーランスできるようなスキルが身につかなければ役に立ちません。

趣味ならともかくお仕事につなげたいのであれば、実社会ですぐに使えるスキルが身につくか確認しましょう。

卒業生の作品のクオリティは高いか?

WEBデザインスクールのレベルを見るには、卒業生の作品を確認するのが一番です。
「こんな作品を作りたい!」と思えるようなWEBデザインスクールを選びましょう。

ただし、公式サイトにはよい作品しか載せていない場合があるため、公式サイト以外でもチェックできるとよいですね。

口コミはよいか?

最後に、そのスクールの口コミも忘れずに確認しましょう。
公式サイトにはよいコメントだけしか載せないケースもあるため、クチコミサイトや個人のブログ・SNSなど、いろんなところから情報を集めるとよいですよ。

まとめ

今回の記事では

  • WEBデザイナーが勉強するべき知識やスキル
  • WEBデザインを勉強する2つの方法(独学・スクール)
  • 独学で勉強する際の7STEP
  • おすすめのWEBデザインスクールなどをご紹介しました。

「とりあえず独学で勉強してみようかな」と思った方もいると思いますし、「スクールに通ってしっかり勉強したい」と思った方もいると思います。

もちろんどちらでも大丈夫です。ぜひ、あなたがピンときた勉強法を試してみてください。
WEBデザインの勉強をはじめる前に、あなたに合った勉強法を把握することが大切です。

あなたに合った方法でWEBデザインを勉強して、今後WEBデザイナーとして活躍することを、心より応援しています!

WEBデザイナーになって人生を変えた話
特別ストーリーを限定公開中!
WEBデザイン20のレッスンを無料プレゼント中
詳しくはコチラ