webデザインの独学勉強法とは？必要スキル・サイト・本も紹介！

こんにちは！スタビジ編集部です！

最近ではブログや企業のHPを見て、思わず魅かれてしまうwebページが増えてきたと思います。

（参考：INTLOOP株式会社）

そこで「自分もこんなwebサイトをデザイン・作成したい！」とwebデザインのスキルを独学で身に着けようとする方もいるのではないでしょうか。

しかし、未経験の場合、以下の悩みを持つ方が多いです。

このように独学でwebデザインのスキルをつけられるか、悩んでいる方が多いです。

そこで今回は、以下の内容を解説します。

webデザインの仕事内容について

webデザインの仕事では、依頼する企業の「Webサイトをデザイン・制作」を行います。

どのようなテーマ・デザイン・ターゲットのサイトにするのか、クライアントと意見を交わして細かい部分までサイトを作り上げていく仕事です。

webデザインの仕事の流れとしては以下の通りです。

上記の手順で行い、webデザインに関する知識やコーディングスキルを活かしてサイトのwebデザインを制作します。

どんな人に向いている？

Webデザイナーの仕事に向いている人には以下の特徴があります。

クライアントと密にやり取りをする仕事のため「コミュニケーション能力」や「タイムマネジメント」は最低限求められます。

またwebの技術は変化が早いため、トレンドの情報を追いながら、webの新しい技術にも興味を持って身につけられる人であれば、活躍できる可能性は高いです。

独学から就職できる？

webデザインを独学で学び、webデザイナーとして就職するのは正直「難しい」といえます。

理由としてはwebデザインのスキルは幅が広く、難しい知識を必要とするため、実務経験や実績がないと採用されないからです。

ただ、独学でも副業でいろんな案件をこなし、実績をつけることで、企業に就職することも出来ます。

そのため、まずは独学した後に副業で力をつけて、実績を増やしていくことを目標にしましょう。

キャリアアップできる？

webデザイナーとして就職できた場合、そのあとキャリアアップは目指せるのでしょうか。

webデザイナーからは「webディレクター」や「webプロデューサー」へのキャリアアップが狙えます。

webディレクターとwebプロデューサーになる際には、以下のスキルを身につけていくとキャリアアップしやすいです。

webディレクター・webプロデューサーの場合はサイトをデザイン・制作するスキルに加え、web制作のプロジェクト全体のマネジメントが必要とされます。

web制作全体の指揮をとる責任のポジションのため、ある程度実務経験が求められますが、あわせて上記の資格・スキルの取得をおすすめします。

独学で学ぶべきwebデザインで必要なスキル

webデザインで求められるスキルについて見ていきましょう。

独学で学ぶべきwebデザインのスキルは以下です。

webデザイナーとして就職する場合は1〜4のスキル、フリーランスの場合は1〜6のスキルが必要になってきます。

1.HTML/CSS

「HTML/CSS」は、webページをブラウザ上に反映・表示させるための言語です。

HTMLとCSSは、Webページ全体のデザインを構成する役割があります。

2つがそろうことで綺麗なデザインのwebサイトをブラウザ上で表示することができます。

コーディングの作業では、HTML/CSSの言語を用いて、webデザインの骨格となる部分を作成していき、後から誰が見ても理解しやすい設計にすることが重要とされています。

また近年ではスマートフォンでwebページを見る人の割合が大半を占めるようになりました。

そのため、スマホでも見やすい画面で表示されるレスポンシブwebデザインのwebサイトが求められるのでその点も意識しましょう。

「HTML/CSS」の勉強方法については以下の記事で詳しく解説しているので、参考にしてみてください。

【初心者向け勉強方法】HTMLとCSSの学習ロードマップ当サイト【スタビジ】の本記事では、初学者に向けたHTMLとCSSの勉強法と勉強の際のポイントについてまとめています！Webサイトを作成に必要となる「HTML・CSS」を学習ロードマップに沿って勉強していきましょう！

2.JavaScript/jQuery

「JavaScript」は、フロントエンド開発で用いられるwebのプログラミング言語です。

webページ上で動的なアニメーションの追加や要素の表示・非表示、入力事項のチェックを行うなど、複雑な処理を実行する際に必要となります。

またjQueryは、JavaScriptで構成されたライブラリと呼ばれるプログラムの集合体で、プログラミング言語ではありません。

jQueryを利用すると、JavaScriptで言語を書くと数行ほど必要なところを1行で終わらせられるため、コードを短縮できます。

JavaScriptの学習方法については以下の記事で詳しく解説しています。

【JavaScript学習ロードマップ】独学おすすめ勉強法とおすすめサイトを紹介！当サイト【スタビジ】の本記事では、Javascriptsの独学勉強法を紹介していきます！Webサイト制作には欠かせないスキルなので、学習ロードマップに沿ってJavascriptをマスターしていきましょう！

3.IllustratorとPhotoshop

「Illustrator」と「Photoshop」は、adobe社が提供しているツールです。

webデザインの現場では、イラストや画像を作成・編集する際に、上記の2つのツールをよく利用します。

4.デザインスキル

webサイトを作成する際には、ユーザーにとって見やすくて使いやすいことを意識します。

そのため、「レイアウト・構成を作成し、適切な場所にボタンを配置するデザインスキル」が求められます。

そうした、ユーザー目線で設計するデザインのことを「UI/UXデザイン」と呼びます。

上図のようにUIデザインはUXデザインの一つの要素として含まれます。

UI/UXデザインを学ぶと、ユーザー視点での使いやすいデザインを設計出来ます。

5.webマーケティング・webライティング

「webマーケティング・ライティング」のスキルがあると、商品を販売して売上にできるサイトを作成できます。

おしゃれで見やすいwebデザインにアクセスしてもらうためには、想定のターゲットにとって魅力的な内容が必要になります。

集客力のあるwebサイトを作成し、多くのクライアントから評価を得たい場合は、webマーケティング・webライティングも身に着けていきましょう。

webマーケティングの勉強方法については以下の記事で解説しています。

独学でWebマーケティングを勉強して稼げるようになるロードマップ！当サイト【スタビジ】の本記事では、Webマーケティングの勉強法についてまとめていきます。Webマーケティングは、これからの世の中を生き抜く上で非常に重要なスキル。Webマーケティングをインプットし実践まですることで初めて身に付きます。この記事ではインプット編と実践編に分けて解説していきますよ！

6.営業スキル

副業・フリーランスでwebデザインの仕事を実践したい場合には、「営業スキル」が必要です。

営業スキルは上記を意識して取り組んでいきましょう。

また営業スキルは何よりも経験値が大事になってきます。

クライアントと関わる回数が多くなれば、経験が活かされてよりスムーズに案件を獲得しやすくなります。

そのため、募集された仕事に応募して継続的に営業を実践することが大切です。

webデザインを独学で学ぶロードマップ5STEP

webデザインを独学で学ぶ際には、以下のロードマップを実践しましょう。

1.HTMLとCSSを本・サイトで学ぶ

まずは「HTML/CSS」の内容が詳しく記載された本・サイトで学びましょう。

HTMLとCSSはwebデザインの土台となるところなので、最初に勉強しておきたいところです。

また、HTMLとCSSは2つそろって一つの表現になるので、勉強する際にはHTML⇒CSSの順番で一緒に学ぶと各要素の構造を理解しやすいです。

学習の順番は以下がおすすめです。

まずは学習サイトで、実際にコードを書きながらHTMLとCSSの基礎レベルを身に着けていきましょう。

HTML/CSSの詳しい学習方法は以下の記事で解説しています。

【初心者向け勉強方法】HTMLとCSSの学習ロードマップ当サイト【スタビジ】の本記事では、初学者に向けたHTMLとCSSの勉強法と勉強の際のポイントについてまとめています！Webサイトを作成に必要となる「HTML・CSS」を学習ロードマップに沿って勉強していきましょう！

2.IllustratorとPhotoshopを使いこなして学ぶ

「Illustrator」と「Photoshop」の学習では、まずは7日間の体験版をダウンロードしてから学びましょう。

Illstrator・Photoshopの学習は以下のように進めると良いです

実際にツールを使って使用感・操作・機能を確かめて、このまま使い続けられそうであれば、年間プランを購入して本格的に学習を進めていきましょう。

学習本やUdemy・YouTubeなどの動画サイトで使い方がわかりやすくレクチャーされているので、実際に操作して楽しみながら学べます。

実際に成果物を作りたい時は、ブラウザで以下のキーワードを検索していると練習に最適なものが見つかります。

さまざまな参考記事を確認しながら、複数の画像・イラストを何回かトレースすることで画像・イラスト編集のスキルが向上出来ます。

3.デザインの理論を本や企業ブログで学ぶ

少し学術的ですが「デザインの理論」もしっかり押さえておきましょう。

デザインの理論を学ぶことで、論理的にサイトの要素を適切な配置・配色できるようになり、デザイン性の高いwebサイトを作成できます。

まずは図解などを用いてわかりやすく解説された本やブログで学ぶことがおすすめです。

特に企業ブログでは素人にも「見やすいホームページとは」や「目的に合ったデザインの選び方」等、デザインの理論をわかりやすく説明しています。

以下のキーワードで調べてみてください。

4.オリジナルwebサイトを制作する

HTML/CSSとIllstrator・Photoshopが使えるようになれば、オリジナルwebサイトが作るスキルは身についています。

そこで、実際に「オリジナルwebサイトを制作」して自分の実力を確かめてみましょう。

オリジナルwebサイトを作成して学習する際には以下の手順で進めると良いです。

一からwebサイトを作るのは難しいので、まずはWordPressを使って立ち上げて、徐々に自分でカスタマイズしていくとやりやすいです。

自分の勉強したスキル・知識を活かしてオリジナルwebサイトをデザインすることで、企業やクライアントに積極的にアピールできます。

ドメインの取得からWordPressの始め方については以下の記事で詳しくまとめています。

【登録から】エックスサーバー（XServer）の使い方！サーバー設定とドメイン取得からWordPressインストールまで！当サイト【スタビジ】の本記事では、エックスサーバーの使い方について徹底的に解説していきます！サーバーの設定からドメイン取得、そしてWordPressインストールまでを見ていきましょう！エックスサーバーを使えば簡単にWebサイトを構築できるんです！

5.フリーランス・副業ならクラウドソーシングで実務を学ぶ

フリーランス・副業の場合は、「クラウドソーシングで仕事を獲得」し、実務をやりながら実践スキルを学んでいきましょう。

クラウドソーシングは、サイトを通じて企業が不特定多数の方に仕事を依頼できるサイトで、募集依頼に提案文を提出して、採用されると実際に仕事が出来ます。

以下のクラウドソーシングサービスが有名なのでオススメです。

提案文に不安がある方は「webデザイナー 提案文」「web制作 提案文」と検索すると参考になるものが出てくるので調べてみてください。

webデザインを学ぶ際のコツ4つ

webデザインを学ぶロードマップについてみていきました。

ここでwebデザインを学ぶ際のコツも押さえていきましょう。

わからないことを質問できる環境で学ぶ

webデザインの独学では、一人で解決できないことがよくあります。

その際に「わからないことを質問できる環境」があると、学習が立ち止まってしまうことが少なくなります。

「MENTA」というwebデザインに知見のある人に質問をしながら学習を進められるサービスを使うのもオススメです！

目標・目的を決める

ロードマップに合ったようにwebデザインは、ツールの使い方・デザイン・プログラミング・営業などの学習範囲が広いです。

そのため、自身で勉強の進捗を管理し、モチベーションを維持するためにも「目標・目的」を決めましょう。

目標は「勉強に関する本を１ページ読む」という簡単なものから「学習サイトのコースを１コースやりきる」というハードルの高いものまで何段階も分けて準備すると良いです。

アウトプットの時間を増やす

webデザインの勉強では学習内容を読んで終わりだと、スキルを中々身に付きにくいです。

実際にツールを使ったりコーディングしたりして「アウトプットの時間」を増やし、感覚的に使い方を学ぶことが大切です。

IllstratorやPhotoshopのツールの使い方、HTML/CSS・JavaScriptのコーディング方法などは、実際に手を動かすことで、理解できることも多いです。

また、アウトプットというと凝ったなものを作らないといけないイメージがありますが、教科書の例題をアレンジしただけでも立派なアウトプットです。

何から勉強すればいいのかわからない場合は？

webデザインを学ぼうと思っても、何から勉強すればいいのかわからない場合があると思います。

その際は「何を実現したいのか」を具体的に決めましょう。

学習のロードマップを説明しましたが、自分のやりたいことから学ぶのもありです。

全くの初心者の場合は、HTML/CSSを使って目に見える形で勉強の成果が残せるポートフォリオを作成するのがおすすめです。

実際に完成するイメージもしやすく、どこの部分の知識が足りていないかがわかりやすいため、楽しく勉強できてすべての学習を終えたときに達成感があります。

webデザインの勉強でおすすめのサイト

webデザインの勉強で「おすすめのサイト」について紹介していきます。

おすすめのサイトは以下になります。

Udemy

「Udemy」では、オンライン動画学習のプラットフォームサービスを提供しており、さまざまな内容を学習できます。

webデザイン関連では、「Photoshop」「Illustrator」「HTML/CSS」「JavaScript/jQuery」などの幅広い範囲の内容を学べます。

「Photoshop」には以下の講座がおすすめです。

最新Photoshop　 23時間の動画と演習でPhotoshopの全てを完全マスター　初心者がプロを目指すコース

実際に作品を作りながらPhotoshopの基本機能を解説してくれるので、実践的なスキルが身につきます。

「Illstrator」には以下の講座がおすすめです。

ゼロからスキルがしっかり身につく！Adobe Illustrator(イラストレーター)グラフィックデザイン実践基礎講座

Illustratorの操作方法に加えて、グラフィックデザインの基礎も体系的にデザインについて学べます。

練習課題もあるので、アウトプットを出しながら飽きることなく進められます。

「HTML/CSS」「JavaScript」では以下の講座がおすすめです。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

UXに対して熱意がある講師の方から、webページ制作の基礎技術をわかりやすく学習できます。

講座を見ながら自分でも手を動かすことで、コーディングのスキルが自然と身につきます。

Udemyについては以下の記事で詳しくまとめているので、気になる方は見てみてください。

【体験談】評判の良いUdemyを30コース以上受けている僕が徹底レビュー！当サイト【スタビジ】の本記事では、世界最大のオンライン学習プラットフォームであるUdemyのメリット・デメリット・評判・口コミについてまとめていきます！実際にプログラミングやデータサイエンス、Webマーケ関連のコースを30個以上受講している体験談をもとにお伝えしていきます。

Progate

「Progate」は、幅広いプログラミング言語の入門から基礎までを学べる学習サイトです。

スライド形式でプログラミングの概念について学んだ後、ブラウザ上で実戦形式のコーディング学習ができます。

Progateでは、webデザインの中で「HTML/CSS」「JavaScript/jQuery」のスキルを身につけられます。

入門レベルは無料で受けられるので、まずは試しにやってみて学習を続けられそうか見極めてみても良いと思います。

ドットインストール

「ドットインストール」とは、1つの内容を3分の動画でプログラミングについて解説された初心者向けのサイトです。

webデザインでは「HTML/CSS」「JavaScript/jQuery」の学習で利用できます。

1つの動画が3分と短いため、通勤や通学時間でも学習しやすく、予習・復習用として使えます。

コースも多く内容が充実しているので、自分で勉強を進められる人にはピッタリのサイトです。

ドットインストールに関しては以下の記事で詳しく解説しているので、良かったら参考にしてみてください。

【体験談】ドットインストールの評判は？道半ばで挫折した話当サイト【スタビジ】の本記事ではドットインストールの評判について主観的な観点と共にまとめていきます。ドットインストールはプログラミング学習サービスとして評判の良いサービス。ただ過去にドットインストールを受講してみて特に何も得られず終わってしまった過去があるので、その体験談について赤裸々に語っていきたいと思います。

webデザインの勉強でおすすめの本

ここではwebデザインの勉強におすすめの本を紹介します。

おすすめの本はこちらになります。

デザインの理論を学ぶ「ノンデザイナーズ・デザインブック」

「ノンデザイナーズ・デザインブック」は”デザインの基本原則や構造”、”わかりやすいレイアウト”、”綺麗なフォント”などについて図解を用いて解説された本です。

画像でどの部分がダメなのか、どのように表示させると見やすいデザインになるのかが明確にわかるため、デザインスキルを向上させられます。

デザインを手軽に学べる「なるほどデザイン」

「なるほどデザイン」は良い・悪いデザインの例をあげていて、見るだけでシンプルで綺麗なデザインを理解できる本です。

参考画像と一緒にデザインの改善ポイントを複数記載してくれるので、論理的にデザインを際立たせてよく見せる方法が理解出来ます。

コーディングに最適「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」

「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は”HTML/CSSに関する知識”～”webサイトの仕組み”まで学べる本です

画像を用いてわかりやすく解説してくれるため、初心者でも要点を把握しながらコーディングの学習を進められます。

Facebook・TwitterプラグインやYouTube動画、レスポンシブデザイン対応などの外部メディアを利用した作成方法なども解説していて、実用的なスキルも押さえられます。

webデザインの勉強におすすめの資格

webデザインの勉強をしていく中で、こんな気持ちになると思います。

この場合、成果物を作るのもありですが、習熟度を測る意味で資格を取るのもおすすめです。

webデザインの勉強におすすめの資格は以下の2つです。

webクリエイター能力認定試験

「webクリエイター能力認定試験」は、サーティファイ認定試験事務局が提供するwebクリエイターとしてのスキルを測る認定試験です。この試験ではHTML/CSSの実技やJavaScriptの読み込み・デザインカンプに関する知識問題が出題されます。

webデザイナー検定

「webデザイナー検定」とは、CG-ARTS協会が提供するweb全体の知識が得られる試験です。

この試験ではwebデザインの一通りの作業に関する知識や技術を問われます。

webデザインを独学する際の注意点

webデザインの分野を独学で勉強する際の注意点について見ていきましょう。

陥りやすい失敗パターンを事前に押さえることで、円滑に学習を進められます。

コーディングは短期間で学習する

コーディングは別言語の学習のようなもので、期間を空けると忘れてしまいます。

そのため、だらだらとやっていると、前回やった作業を忘れてしまい、思い出すための時間が余計にかかってしまいます。

成果物を作って自信をつけるためにも、コーディングの学習は短期間でやると良いです。

独学から案件獲得する場合は制作実績を提示する

独学から案件を獲得する際には、「制作実績をまとめて載せたポートフォリオサイトを作成すること」が大切です。

今までの制作実績があることで、クライアントがスキルを確かめやすく、どの程度の仕事を任せられるのか判断しやすくなります。

特にフリーランス・副業の場合は、実績がない方も仕事に応募することが多く、ライバル達と差別化をするためにも制作実績を見せることが重要です。

勉強が止まってしまう場合はスクールを検討しよう

わからないことが多かったり、うまく時間が取れなくて学習が進まなくなった場合は、「スクールに通うこと」を検討しましょう。

特にプログラミングでは、基礎内容がわかっていないと先に進めないことが多いので、立ち止まってしまうケースが多いです。

スクールに通えば、メンターにわからないことをすぐに教えてもらい、学習の理解度も増すため、モチベーションも保ちやすいです。

そんなスクールの中でも一番オススメなのがテックアカデミーです。

テックアカデミーは日本最大級のオンラインスクールで、メンターさんは現役エンジニアの方なので非常に安心感があります。

質問や疑問点はSlackを通してすぐに解決できるので、初心者の方でも安心して受講できます。

また週２回のメンタリングでは、進捗確認の他、実務レベルの小話やノウハウも聞けるので非常に実践的な力が付きます。

テックアカデミーを受講した時の実体験をまとめていますので、興味があればチェックしてみてください。

【体験談】テックアカデミー評判は？3か月本気受講してみたので徹底レビュー！当ブログ【スタビジ】では、様々なプログラミングスクールの中からテックアカデミーのメリット・デメリット・評判について3か月の体験談をもとに赤裸々にレビューしていきます。

プログラミングスクールが高いと感じた場合は、MENTAなどのサービスを利用して料金・内容とともに納得できるメンターを探すのも手です。

プログラミングスクールに関しては以下の記事で紹介しているので、参考にしてみてください。

【言語・目的別】おすすめのプログラミングスクールを徹底比較！ここでは、プログラミングスクールについて徹底的にまとめています！色々あってどれがよいのかなかなか分かりづらいプログラミングスクール。言語別や様々な観点でおすすめのプログラミングスクールを比較していきますよー！

webデザイン独学勉強法　まとめ

webデザインの独学勉強法について見ていきました。

ふりかえるとwebデザインの勉強は以下のロードマップでやるのがおすすめです。

実現したい目標を意識しながら、出来るだけアウトプットを作ってスキルを習得していきましょう。

その他、他業種の勉強方法について以下にまとめているので適宜参考にしてみてください！