「未経験だけどこれからWebデザイナーになりたいな...でもスクールに通うお金もないし、できれば独学でしたい...Webデザイナーになるためには何を勉強したらいいんだろう...？」
こういった疑問に答えます。
本記事の内容
- 完全未経験からでもWebデザイナーになれます【僕の実体験なので信憑性あり】
- 最短でWebデザイナーになる勉強方法【９つの手順で解説します】
- 最短で効率良く転職するならデザインスクール一択です
この記事を書いている僕は、完全未経験（前職は美容師）の状態から独学でWebデザイナーに転職し、現在はWebデザイナーとして5年目になります。
この記事では、これまでの経験をもとに「もっとこうしていれば効率的に転職できたなぁ...」という部分も踏まえて、最短で完全未経験の初心者から独学でWebデザイナーになる手順や効率的な勉強方法を詳しく紹介します。
独学でWebデザイナーを目指したい人はもちろん、副業でWebデザインの仕事がしたいという人にも確実に役立つ内容になっているので、参考にしていただければと思います。
目次
そもそもWebデザイナーは独学でなれるのか？
結論：Webデザイナーは独学でもなれる
結論からお伝えすると、独学でもWebデザイナーになれます。
というのも、僕が未経験から独学でWebデザイナーになりました。
「独学でなれるってことは、元々スキルがあったのでは？」
自分でもびっくりするくらい全くありませんでした。
未経験のレベルでいうと、元々美容師をやっており、退職するまでパソコンは学校の授業で習った程度で、そんな頃の知識は当然忘れており、Windowsのパソコンの起動方法すらわかりませんでした…ポンコツすぎる…
そんな状態からでも独学でWebデザイナーになれたので、この記事を読んでいるあなたならきっとなれます。
Webデザイナーになるためにはどのレベルが最低限必要なのか？
まず未経験からWebデザイナーになるために、どのレベルが最低限必要かお話しておきます。
答えは、「下手でもWebサイトをひとりで作れるレベル」です。
ここで過去の僕は、デザインのことばかりを勉強してしまい、後悔しました。
なぜなら、Webデザイナーはデザインすることだけが仕事ではないからです。
会社によっては、デザインとコーディングが分業になっているところもありますが、そういうところは美大卒やデザインに特化した人材を求めている場合が多いので未経験だと正直厳しいかなと…
「え？Webデザイナーにコーディングのスキルって必要なの？」
コーディングができないとWebサイトは完成しません。
実際の現場でも今のWebデザイナーのほとんどの方はコーディングができます。
コーディングといっても、HTMLとCSSというマークアップ言語を使って作っていくので、そこまで難しくはありません。
むしろ、デザインとコーディングができれば入れる会社の選択肢が広がり、自分の理想とする働き方を叶えることができる可能性はグッと上がります。
なので、まず「下手でもWebサイトをひとりで作れるレベル」を達成することをゴールにしてください。
Webデザイナーになるために必要なスキル3つ
以下の３つのスキルがあれば、Webサイトをひとりで作ることができます。
- コーディングスキル
- デザインツールの操作方法
- デザインの知識
この３つさえ習得してしまえば、最低限のレベルに達することができます。
習得の為に最短で効率良く勉強する方法をご紹介していきます。
独学でWebデザイナーになるための勉強法９ステップ【効率的】
Step1.コーディング：オンライン学習ツールでやっていけそうか判断する
「Webデザイナーなのに、先にコーディングなの？」
最初に取り組むのはコーディングがおすすめ
なぜならコーディングの段階で心が折れてしまい挫折する人が多いからです。
なので、この段階で「自分はWebデザイナーとしてやっていけるのか」を判断する上でとても重要になってきます。
「コーディング嫌いじゃないかも…」と思えたらあなたはWebデザイナーに向いてます。
また、デザインの勉強をする際にはPhotoshopやIllustratorといったデザインツールを購入する必要もあるので、事前に適正を見極められると無駄なお金を払わなくてすむのでおすすめです。
次のオンライン学習から初めてみましょう。
progate（プロゲート）
progateは、無料でコーディングを学べる学習ツールです。
実際に学んだことをコードで書ける仕様になっていて、インプット・アウトプットを効率的に行えます。
有料コースだと受講できるコースが増えるので短期間で課金するのはおすすめです
とりあえずHTML＆CSSコースの上級までやっておきましょう
ドットインストール
ドットインストールは、動画でコーディングを解説してくれる学習ツールです。
動画１つが３分ほどに短くまとめてあるので勉強しやすいのもメリットです。
こちらも有料コースでサクッと基礎を学んでしまいましょう。
Step2.コーディング：参考書で知識とスキルを高める
Step1のオンライン学習をやってみて、「コーディング嫌いじゃないかも…」と思えたならもうWebデザイナーには半分なれたも同然です。
コーディングで大切なのは、とにかく「手を動かす」「作ってみる」です。
Facebookの創設者のマーク・ザッカーバーグもこう言ってます。
Done is better than perfect.（完璧であることより、まず終わらせることが重要だ）
ついつい完璧を目指してしまい、なかなか進まない時に見返して欲しい名言です。
HTMLとCSSを勉強する時におすすめの参考書を紹介します。
スラスラわかるHTML&CSSのきほん 第3版
実際にカフェのサイトを作り方を学べるので、一緒にコーディングしながら学ぶとカフェのサイトが作れます。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座［第2版］
「Webクリエイターボックス」のManaさんが執筆した人気のコーディング本です。
HTMLやCSSのコーディングだけでなく、Webデザインの基礎も学べるおすすめの1冊。
イラストや図解、写真がたくさん使われているので、わかりやすく初心者にはおすすめです。
Step3.コーディング：Webサイトを5つ模写する
ここまででHTML・CSSの基礎はだいたい理解できたかなと思います。
ここからは実際にWebサイトを構築していく流れになります。
模写とは？
模写とは、既存のWebサイトのデザインを真似して、自分でWebサイトを制作することを指します。
過去の僕もそうだったのですが、プログラミング初心者は「技術書ばかりを読んでいる」という感じです。
もちろん学習も大切ですが、それ以上に大切なことは「自分でモノづくりをしてみること」です。
参考書を見ず、コードをコピペせず、チュートリアルを捨てて、自分でモノを作ってみましょう。
「完全にゼロから何かを作る」という作業はめちゃくちゃしんどいです。
しかし、ゼロからモノを作るとすべてのコードを理解しながら自分で書いているので、なにかエラーが起きても、原因が特定しやすいです。
めちゃくちゃしんどいですが、ここで確実にレベルアップできるので踏ん張りましょう。
以下の参考サイトで「６割ぐらいなら自分でも作れそうだなー」と思うWebサイトを模写してください。
残りの4割はググりながら頑張って実装しましょう。
ジャンルはなんでもＯＫです。
テキストエディタは無料で利用できるVisual Studio Code（ヴィジュアルスタジオコード）がオススメ。
参考サイト
仕事でもデザインの参考にしている超使えるギャラリーサイト「SANKOU！」
カテゴリーで細かく分類してくれているので、作りたいイメージから探すこともできます。
また、定期的に更新されておりいろんなデザインパターンをみれるので自信のデザインの引き出しも増やすことができます。
僕も毎日仕事はじめに眺めてます。
他の参考サイトも紹介しておきます。
Step4.デザインツール：デザインツールの登録
コーディングがひと通りできるようになったら、次は「デザインツール」の勉強を始めましょう。
デザイン作業に使うソフト、代表的なのがAdobe社です。
すべて揃えるとそれなりの金額になるので、最初はPhotoshopやIllustratorだけを契約して使う方法がおすすめです。
Step5.デザインツール：Photoshopの操作方法を学ぶ
現場で必ず仕様するツール「Photoshop」の操作方法を学んでいきましょう。
とはいっても、転職できる最低限のレベルはAdobe（アドビ）社が提供する「Photoshopチュートリアル」を行うだけでOKです。
ここでも実際に「手を動かす」ことが大事です。
チュートリアルが終わった時点で、「これで大丈夫か？」と思うと思います。
僕は思いました。
そこでPhotoshopに関する本は複数購入したのですが、個人的に「これは入門書としておすすめだな」と思う本もご紹介しておきます。
Photoshopを学ぶ本が欲しいという方に1番おすすめなのが「独学 Photoshop 楽しく基本が身につくガイドブック」です。
独学 Photoshop 楽しく基本が身につくガイドブック
YoutubeでPhotoshopのチュートリアル解説動画を発信している Mappy Photoさんによる基本から応用までわかりやすく解説されているのでこれだけで基本を網羅できるので入門書としておすすめです。
Kindle Unlimitedでもその他におすすめの本が対象作品であったので載せておきます。
新規登録であれば30日間無料トライアルがあるので、無料期間中に学びきってしまいましょう。
Kindle Unlimited対象作品
Step6.デザインツール：Illustratorの操作方法を学ぶ
現場で必ず仕様するツール「Illustrator」の操作方法を学んでいきましょう。
とはいっても、こちらもAdobe（アドビ）社が提供する「Illustratorチュートリアル」を行うだけでOKです。
Illustratorを学ぶ本が欲しいという方に1番おすすめなのが「Illustrator よくばり入門 CC対応」です。
Illustrator よくばり入門 CC対応
基本の操作から、ちょっとしたアイコン・バナーの作成方法など実践できるテクニックは初心者でにわかりやすいように解説しており、ある程度操作を覚えた方にもおすすめできる一冊となっています。
こちらはKindle Unlimitedで対象作品だったので、目を通すだけでも役に立つと思います。
Kindle Unlimited対象作品
Step7.デザインツール：バナーを5つ模写する
Photoshop・Illustratorの基礎は学べたと思いますが、とはいえ操作方法などは都度ググればいいので、ここでは実際に作品を作って手を動かすことをメインにしています。
やはり、成長に大切なことは「自分でモノづくりをしてみること」です。
以下の参考サイトで「６割ぐらいなら自分でも作れそうだな―」と思うバナーを模写してください。
ジャンルはなんでもＯＫです。
Step8.デザインの基礎：デザインの基礎を学ぶ
コーディング・デザインツールの操作方法がわかったところで、デザインの基礎知識を学んでいきます。
「なんでこのタイミングでデザインの基礎知識なの？もっと最初でも良かったんじゃない？」
なぜこのタイミングなのかというと、デザインの基礎を学んだ後でこれまでに実際にあなたが手を動かして作成した、Webサイトの模写、バナーの模写を見返してほしいからです。
模写した作品には、これから学んでいくテクニックが使われていることに気がつくはずです。
デザインの基礎は本を2,3冊読めばOKです。
最低限知っておいて欲しい点をあげておきます。
- 配色：色の組み合わせ、色の与える印象
- フォント：種類、デザインに最適な組み合わせ、行間、文字間
- レイアウト：配置
- UI/UX：ユーザー目線のデザイン
上記は、次のデザインの本を読めばOKです。
ノンデザイナーズ・デザインブック
なるほどデザイン
デザイン入門教室
けっきょく、よはく。
デザインの基礎を学んだ後でこれまでに実際にあなたが手を動かして作成した、Webサイトの模写、バナーの模写を見返してみてどうでしたか？
「こういうところでこのテクニックが使われているのかー」と思うだけでも成長のスピードは違います。
模写したもので足らなければ、コーディングの模写の際にご紹介した参考サイトからも探してみてください。
参考サイトに掲載されているWebサイトは「プロが作ったデザイン」です。
プロが時間をかけて、クライアントの目的・意図を叶える為に作成したデザインなので、本で学んだ知識を前提に見てみると学べることは多いはずです。
実際に、僕も毎日時間があるときは参考サイトを眺めてデザインの情報収集を行っています。
「なぜこのデザインに目がいくんだろう…」「こんなデザインが流行っているのかな…」など疑問点がでてきて、調べることで知識も増えていきますし、なにより自分の中にデザインの引き出しが増えるので、Webデザインの勉強に最適です。
Step9.実装：簡単なサイトを2つ自分で作ってみる
ここからはこれまで学んだ内容をフルに生かして自分で架空のWebサイトを作成していきます。
作るサイトは架空のものなので、好きなテーマにしましょう。
実際に、現場でも大まかに下記の手順でWebサイトが制作されます。
Webサイト制作の流れ
- 要件定義：どんな目的を達成したいのかなどクライアントのご要望を確認
- サイトマップ：Webサイトのページ構成を決める
- ワイヤーフレーム：レイアウトの枠組み・配置位置を決める
- デザインカンプ：ワイヤーフレームにデザインを装飾
- コーディング：デザインカンプをもとにコーディング作業
- 公開：インターネット上に公開
上記の流れを架空のクライアントを想定して制作してみましょう。
実際にここで１つWebサイトを作れたら、Webデザイナーとして案件を取れる最低限のレベルに達しています。
難しく考えず、好きなジャンルを想定して楽しみながら2つ作りきりましょう！
おまけ：勉強が身に付く勉強法
勉強する上で最も重要なことは、アウトプット前提でインプットするということです。
Webデザイナーになるために、勉強することは多く、また範囲が広いです。インプットはオンライン学習や、書籍でできます。では、アウトプットはどうするかというと、ブログです。
ブログがもっとも効果的なアウトプットです。
アウトプットの名著「アウトプット大全」では、「書く」と「教える」はより自己成長を促すアウトプット方法だと述べられています。
つまりブログは「記事を書いて、読者に教える」ものなので、成長効果が高いアウトプットになります。
また、ブログがポートフォリオのかわりになるので知識習得もできるし一石二鳥の効果があります。
1番のおすすめは、WordPressを使ったブログです。
WordPressはCMS（Contents Management System）の一種で、国内でのシェアは80%以上でダントツのトップです。
そして、Webデザイナーになったら必ずと言っていいほどWordPress案件が回ってきます。
とはいえ基礎は比較的簡単なので、基本的な機能と構造をわかっておくだけでも面接で有利になります。
なので、勉強のアウトプット用のブログをWordPressで構築できれば、WordPressの使い方も学べ、さらにWebデザイナーになる手助けになります。
ブログ初心者でも「【画像付き】初心者でもわかる！WordPressでブログの始め方を全手順画像付きで解説！」この記事の手順通り進めると、ブログを開設できるよう全手順画像付きでブログの始め方を解説していますので、参考にしていただければと思います。
学んだことをアウトプットし、知識を定着させつつブログで稼ぐこともできます。
ブログで稼ぐなら「ASP」サービスの登録が必須になります。
登録は無料なので、ブログを立ち上げたこのタイミングでASPサービスに登録しておきましょう。
おすすめのASPサービスは、以下のASPに登録しておけば間違いなしです。
- もしもアフィリエイト
：Amazon、楽天、Yahooショッピングなどの物販アフィリエイトをする場合は必ず登録しておきたいASP - A8.net：ASP最大手で案件数もトップクラス。ジャンルもほぼ全ジャンル扱っています。
- afb：美容・エステ・婚活ジャンルを主に取り扱う予定なら登録しておきたいASP
- infotop：登録審査がないので、初心者の方でも利用しやすく高額案件豊富なのが魅力
転職の為の準備・活動
未経験からWebデザイナーになるためには、ポートフォリオというあなたの作品集が必ず必要になります。
あなたは企業に自分が何ができるのかを提示しなければなりません。
とはいえ、掲載するものはすでに作成済みです。
そう、ここまでで作成した成果物を掲載するだけでOKです。
- Step3.コーディング：Webサイトを5つ模写する
- Step7.デザインツール：バナーを5つ模写する
- Step9.実装：簡単なサイトを2つ自分で作ってみる
上記のステップで作成したものに説明を追加します。
ポートフォリオに追加する情報
- Webサイトの目的
- Webサイトのターゲット
- デザインの方向性
- 配色の選定理由
- レイアウトの構成説明
- フォント選定の理由
- 制作する上で意識したこと
「なぜこのデザインにしたのか？」を言葉にして伝えられるようにポートフォリオを作成するのがポイントです。
ここで注意してほしいのが「こだわりすぎない」とこです。
「企業に提出するものだから、こだわって作成しないと…」と気負いすぎると制作するのもしんどくなるし、終わりが見えません。
渾身のポートフォリオを作成することも大事ですが、さっとポートフォリオをまとめて転職活動に時間を使いましょう！
転職活動・応募しまくる
ポートフォリオの作成が終わったらいよいよ転職活動です。
「転職活動とかどうしたらいいんだろう…履歴書とか必要だよな…」
初めての転職はわからないことだらけですよね。
転職に関しては、その道のプロに教えてもらうのが最短です。どういう企業に行きたいのか、自分の年収の相場、書類の書き方なども教えてくれるのでとりあえず転職エージェントに登録しましょう。
未経験におすすめの転職エージェントをご紹介します。いずれも未経験歓迎の求人が多い転職エージェントなので、まずはどれか登録して話を聞いてみましょう。
- 転職のリクルートエージェント｜転職成功実績No.1：最大級の転職サイトなので保有求人数が業界最大数を誇ります。まずはここに登録しましょう。
- doda：サイト内で適正年収がわかったり初めての転職をサポートしてくれる機能が充実しているので初めての転職でも安心して使えるのがポイント高いです。
- 転職エージェントのマイナビエージェント｜人材紹介・転職サイト：定番のマイナビです。求人も多く、登録して損はしません。
最短で効率良く転職したい人はデザインスクール一択です
ここまで、独学でWebデザイナーになるための勉強方法などをご紹介してきましたが、「やっぱり独学だと不安…」「自分は意志が弱いしすぐサボっちゃうから独学なんてできるだろうか…」と感じる人もいると思います。
そんなお悩みを解決してくれるのは、Webデザインスクールです。
独学でも、Webデザイナーになるのは可能ですが、不明点などが自分の力で解決できず、学習途中で挫折してしまうこともあります。
僕は独学で勉強をしていましたが、わからないところはググるしか方法がなくとても時間がかかったなと思います。
転職して、周りに聞いてみるとスクールに通っていたというWebデザイナーの方も多くいました。
最短で効率良く学びたいのであればデザインスクール一択です。
とはいえ、メリット・デメリットも紹介しますので独学かスクールかを決める参考にしてもらえればと思います。
デザインスクールでWebデザイナーを目指すメリット
- 業務経験のある講師から直接指導してもらえる
- 効率良く知識が学べる
- 疑問点をすぐ質問できる
- モチベーションを維持しやすい
デザインスクールでWebデザイナーを目指すデメリット
- スクール費用がかかる
- 学習期間の縛りがある
- デザインスクールによっては古い情報を教えている可能性がある
おすすめWebデザインスクール
Webデザイナーとして働きはじめて現場で集まる情報やスクール経験者からの情報をもとにおすすめのデザインスクールをご紹介します。
- デザスタ：個人的に日頃から情報をチェックして信頼できるなと思っている越智 奎吾さんが運営するデザインスクール。現場で使える生きた技術を学べる一番おすすめできるデザインスクールです。
- デジハリ：有名Web制作会社LIGが運営するデザインスクールです。業界で活躍しているベテランのプロが特別講師となってセミナーで解説してくれるところが魅力的です。
- TechAcademy：オンラインプログラミングスクールの受講者No.1の実績あるスクールです。デザインを学びたいエンジニア向けのカリキュラムになっています。
まとめ：独学でWebデザイナーになれます。
Webデザイン学習もWebデザイナー就職も在宅ワークも難しく思われがちですが、ちゃんと行動していけば難しくありません。
特にWebデザイナーは、在宅ワーク・副業・フリーランスといった働き方も実現しやすい仕事です。
今の収入をもう少し増やしたい、在宅など場所にしばられず自由に仕事がしたい。そういった方にWebデザインは本当におすすめです。
今から行動してとりあえず3ヶ月本気で向き合ってみてください。
「行動」が大切です。
これからWebデザイナー・エンジニアになりたい方は僕が完全未経験の独学期間にはやく知りたかった【厳選】現役Webデザイナーがおすすめする独学初期に知りたかった読んで良かった本まとめでおすすめの本をご紹介していますので、ご参考にしていただければと思います。
以上、「【完全未経験】独学でWebデザイナーに転職する方法」でした。
