独学でWebデザインを習得する方法｜Webデザイナーに聞くおすすめサイトとロードマップ
目次
「今のお給料に＋＠の収入が欲しい…」
「このまま働いていても、これといったスキルが身に付かず不安…」
そんな思いから、Webデザインを勉強してみたいと思った方も多いのではないでしょうか。
在宅で完結でき、華やかなイメージから副業としても人気のWebデザイン。
気になるのは「未経験から独学でWebデザイナーになれるの？」ということですよね。
そこで今回は、フリーのWebデザイナーである私の実体験も踏まえながら、独学でWebデザインを学ぶ方法や、すぐに勉強に取りかかれる具体的なロードマップをお伝えします。
※本記事エラベルが独自に制作しています。メーカー等から商品の提供や広告を受けることもありますが、コンテンツの内容やランキングの決定には一切関与していません。※本記事で紹介した商品を購入するとECサイトやメーカー等のアフィリエイト広告によって売上の一部がエラベルに還元されます。
【結論】Webデザインは独学で勉強できる
最初に結論からお伝えすると、Webデザインは独学でもスキルを十分身に着けることができます。
しかし、「どのようなWebデザイナーを目指すかによって難易度と勉強期間は大きく変わる」というのが個人的な意見です。
「どのような」というのは具体的に言うと以下の3つです。
どのようなWebデザイナーを目指したい？
それぞれ詳しく解説していきます。
Webデザイナーとして企業に就職したい
企業で働くWebデザイナーになりたい場合、独学で就職することは十分可能です。あなたがまだ学生、あるいは20代で「Webデザイナーになりたい！」と考えているなら、企業に属してスキルを磨けるこの道をおすすめします。
企業にデザイナーとして就職する場合、必ずしも美大、芸大卒である必要はありません。私の周りにも、未経験からデザイナーとして就職した方がいますが、実際に働いてから学ぶことの方が多いため、働くまでの能力は参考程度のようです。
ただし、そういった大学からの採用が多いのもまた事実。
未経験から独学でWebデザイナーになりたいなら、「私は独学で最低限の能力を身につけました」と証明できるポートフォリオ 
クリエイターが自身の実績や得意分野をアピールするための作品集のこと などを制作することが重要です。
フリーランスWebデザイナーとして独立したい
「Webデザイナー＝在宅、自由なイメージ」から、フリーランスを目指す人も年々増えていますよね。しかし、未経験からの独学でいきなりフリーランスのWebデザイナーになるのはかなり厳しいと、私は考えています。
理由は、「実力・実績がないと生活できるほどの収入を安定して確保できないため」です。
未経験から働き始めると、最初はどうしても低単価の仕事を長時間こなすことになります。（お客様の立場だったら、実績のない人に高額なお仕事を頼みませんよね。）そんな中で、いきなりWebデザイン1本でやっていくのはかなりリスクが伴います。
まずは企業に所属してデザインの実力をつけてから独立するか、副業で実績を積み上げ、ある程度の収入が見込める段階でフリーランスになるのがおすすめです。
副業でWebデザイナーとして稼ぎたい
Webデザインを副業にしたい方は、独学で学び、稼ぐことは可能です。
ただし、こちらも「完全に独学」ではなく、いざ働く前に「自分の制作物のチェック」だけはプロのWebデザイナーにお願いしましょう。
フリーランスの部分でもお伝えしたように、私はフリーランスを目指す方でも、一度は副業としてWebデザインをするのがよいと考えています。「やっぱりWebデザインは自分に合わなかった…」という場合でも引き返せますし、安定した収入源を別に確保することで、独立するまでの期間、心理的余裕をもって作業に臨むことができます。
【2023年最新】副業に役立つ資格ってある？｜副業で月5万以上稼ぐ232人に聞くお金になる資格を紹介！
Webデザインの需要は今後も伸びる？
そもそも、Webデザインは今後も必要とされるスキルなのでしょうか？これから学ぼうと思っているスキルが時代の流れと共に、役立たなくなったら…と思うと不安ですよね。
近年、様々な分野でAIが採用されて注目を浴びていますね。最近では「絵を描くAI」が一躍話題となりました。
Webデザインに関しても例外ではなく、「Web自動作成ツール」が続々と登場していますし、無料で簡単にホームページを作ることができる『ペライチ』や『STUDIO』なども有名です。
ただ、それを考えた上でも私は「Webデザインはこれからも需要の高いスキルである」と考えています。
Webデザイナーという職業はなくならない
実は、私の元に依頼にいらっしゃるお客様の中にも「一旦は自分で作ってみた」という方が多くいらっしゃいます。
あまり、予算をかけられない場合に多いですが、結局のところ
「自分のイメージ通りにできない」
「作ってみたが、何かしっくりこない」
「細かいところの調整ができない」
といった理由で、知識のあるプロにお願いしようと、ご相談に来られるんです。
また、いくら無料ツールを使ったとしても、そのホームページに使う素材や画像を集める、文章を考える、などの作業は発生します。その手間を考えたときに、「面倒だしよくわからないから、お金をかけてでも頼もう。」という人は必ず一定数存在するのです。
そして、最も重要なのは「相手が人、制作物を見るのも人である」ということ。その人が本当に欲しがっているもの、したいことの微妙なニュアンスを汲み取れるのは人だけですし、人を感動させられるものを生み出せるのも同じ人だからこそだと思います。
以上の理由から、いくら無料で簡単に作れるWeb制作ツールが出回っても、AI技術が発達してもWebデザイナーの需要がなくなってしまうことはないと考えています。むしろ、ツールはツールとして、便利に使い倒せるWebデザイナーになるのが理想といえますね。
生き残れるWebデザイナーになるためのポイント
「Webデザイナーはなくならないとしても、自分が生き残れるのか心配…」そう思うのもよく分かります。
そんな方は、「お客様が求めているWebデザイナー」を目指しましょう。
お客様が求めるとは、具体的に、以下のようなWebデザイナーのことです。
- 何でもできるWebデザイナー
- 特定の分野に詳しいWebデザイナー
2種類のWebデザイナーの具体例として、ホームページを作成する依頼を受けた際の提案内容を紹介します。
と、デザインのみではなく、Webサイト制作からその後まで一気通貫で対応してくれるのが「なんでもできるWebデザイナー」です。
そして、
といったように、業界に詳しく、傾向を理解した上で提案してくれるのが「特定の分野に詳しいWebデザイナー」です。
「カッコいいデザインを作る」ことに憧れることもあるかもしれませんが、Webデザイナーとして食べていくには「お客様のためになること」が最優先であることを肝に銘じておきましょう。
これらの能力は一朝一夕で身につくものではありません。あくまで目指す方向、という形で意識しておくと良いと思います。
自分の今まで経験してきたこともWebデザインをする上で役立つ場合が多くあります。実際に私も、Webライターとしての経験がWebデザインに生きた経験が何度もあります。過去の経験や実績も活かしながら、「替えがきかないWebデザイナー」を目指しましょう。
Webデザインの勉強に最低限必要なもの
ここからは、実際に勉強するにあたって必要なものを紹介します。
あくまで私が考える“最低限のもの”ですので、必要に応じて追加してみてくださいね。
Webデザインの勉強に最低限必要なもの
パソコン・インターネット環境
まず必要な道具として最低限以下の2つは必要です。
・PC（16GB以上）
・インターネット環境
PCについては、よく「Windowsか、Macか。」という話がありますが、自分の使いやすい方で良いです。ちなみに私は使い慣れているWindowsを使っています。制作会社ではMacを採用しているところが多いようですね。
また、インターネットの環境は素材集めや疑問点を調べたり、最終的には案件を受けるのにも必要です。この2つは初期投資と考えてしっかりしたものを準備しましょう。
おすすめのPCについては、Webデザインスクールも運営している扇田美紀さんにもご意見をうかがっています。扇田さんも「windowsでもMacでも問題ありません。」とおっしゃっています。
扇田さんが推奨するパソコンスペックを知りたい方はこちらの記事もチェックしてみてください。
【2023年最新】人気のWebデザインスクールおすすめ14選｜副業や主婦にも通いやすいスクールを徹底比較
Adobe Photoshop（Illustrator）
ソフトについては、Photoshopはデザインをする上でほとんどの方が使っています。
また、就職を目指す・自分で素材を作りたい方ならIllustratorも学んでおいた方がよいでしょう。
私はデザイナーとして就職していないため、ほとんどPhotoshopしか使っていません。他にAdobe XDやFigmaなどソフトは様々ありますが、とりあえずはこの2種類を使えるように練習しましょう。
Adobeツールは個人契約の場合は、以下の通り料金がかかるので、予め把握しておきましょう。
| 月々プラン | 年間プラン | |
|---|---|---|
| Photoshop単体 | 3,828円 | 一括：28,776 円 月額：2,728円 |
| Illustrator単体 | 3,828 円 | 一括：28,776 円 月額：2,728円 |
| コンプリートプラン | 10,280円 | 一括：72,336円 月額：6,480円 |
Adobeを契約するには、Creative Cloudコンプリートプランを契約するのが最もお得です。PhotoshopやIllustratorを始め、20以上のアプリが利用できます。ただ、あまり使わなければもったいないので、特定のアプリのみの単体契約も可能です。
PhotoshopやIllustratorに関する初心者向けのおすすめ本は、こちらの記事で紹介していますので、ぜひ参考にしてください。
大きい目標と小さなゴール
最後に、Webデザイナーとしてどんなことを達成したいのか、ゴールを決めておくと、よりモチベーション高く勉強に励むことができます。ゴールがあやふやだと、それだけで挫折する要因になります。
具体的には、「大きいゴール」と「小さい目標」を決めておくとより効果的です。
例えば私の場合、大きいゴールは、「子どもに金銭面で不自由させないこと」。これは、理想や夢に近いものですね。
小さい目標は、「◯日までにバナーを3つ作る」「◯◯月までに◯件受注する」「◯月に企業に応募する」などです。すぐに達成できそうな小さな目標を設定しておくことで、自分が成長しているという実感につながり、挫折しにくくなりますよ。
独学からWebデザインで稼げるようになるまでの完全ロードマップ
では、実際に収入を得るまでにどのように勉強したらよいのか？私が考える方法をお伝えします。
実体験ベースなので副業を目指す方向けですが、就職を目指す方も大きな学習の流れは同じかと思います。ぜひ参考にしてください。
独学でWebデザインを勉強する流れは、以下の通りです。
Webデザインを独学で学ぶための勉強法
それぞれ詳しく解説していきます。
1.自分の作りたいものを考える
まずは、「自分が作りたいものは何か？」を考えてみましょう。
| ホームページ | Webサイトとほぼ同義。ホームページから、さらに目的に応じて種類が分かれている |
|---|---|
| ランディングページ（LP） | 特定の商品・サービスを紹介し、購入してもらうためのWebページ |
| バナー | Web上で他のWebサイトや新商品、キャンペーンなどを紹介する画像 |
本来はもっと詳細に分けるべきなのですが、恐らくWebデザインと聞いて初めにイメージするのが上に挙げたものではないでしょうか。
デザインを学ぶ上では、自分が作りたいものを設定し、それに必要な知識を付ける方が結果的に楽しく、最短距離で学習を終えられます。
私もJavaScriptを少し学びましたが、今は全く使ってません…。
ここではまず、作りたいものの種類を1つ決めておきましょう。作りたいものが特にない場合は、バナーから始めてみると取り組みやすいですよ。
2.デザインを収集する
上で選んだ制作物のうち、既存のもので自分が心から素敵と思えるものをストックしていきましょう。
後々、デザインに悩んだ時の参考ファイルにもなりますので、分かりやすいようにまとめておくのもいいですね。
デザインを探すツールは多くありますが、私が利用しているサイトの一部を参考に載せておきます。
LP ARCHIVE（LPアーカイブ）
他サイトよりLPの掲載数が多く、種類も豊富なLPまとめサイトです。
「登録が新しい順」「お気に入りが多い順」などに並べ替えることができます。また、会員登録すればお気に入り登録することも可能です。
MUUUUU.ORG（ムーオルグ）
国内外のおしゃれな縦長のサイトを集めたギャラリーサイトです。
スタイリッシュな動き、美しいカラーリングのサイトが多く、見ているだけで楽しくなりますよ。
BANNER LIBRARY（バナーライブラリー）
各種SNSなどからデザイナーが厳選したバナーを集めてあるサイトです。カテゴリー分けが細かくされているので、“カッコいい”などのテイストで絞り込むこともでき、よく参考にしています。
上記のようなサイトを参考に集めたデザインの中から、自分が作りたいと思う作品を1つ選びましょう。
できそうかそうでないかは置いておいて、作りたいものを選んだ方がモチベーションアップにつながります。
3.作りながらツールの使い方を学ぶ（実際に制作）
作りたいものが決まったら、ここで初めてツールの使い方を学びます。
例えば、バナーを作りたいならPhotoshopの操作方法を学びましょう。ただ、バナー1つとっても使われている技術は様々で、最初は1枚作るのにも膨大な時間がかかると思います。こだわりすぎずに、まずは完成させることを目標にしてください。
ホームページやLPをデザインしたいのであれば、Photoshopに加えてXDが使えると便利です。
また、デザインだけでなく実際に作りたいとなると、コーディングの知識も必要でしょう。こちらも最初から1ページ作るのは大変ですので、FV（ファーストビュー） サイトにアクセスして最初に画面に表示される部分のこと の完成を目指すのが良いです。
私はコーディング、PhotoshopとIllustratorをスクールで学習しましたが、それに加え、1動画単位で学習動画が購入できるUdemyも利用していました。
UdemyでPhotoshopの操作を一通り学んでも良いですし、PhotoshopやIllustratorに関してはWeb上にもたくさんの情報が紹介されています。
また、書籍についてはこちらの記事でも評価の高いおすすめ書籍を紹介していますので、参考にしてください。
【2023年版】初心者におすすめのWebデザイン本12選｜独学で基本が身につく！
学ぶ方法に正解はありません。自分に合った方法を探してみましょう。
Webデザインスクールの評判｜無駄と言われる理由は？気になる本音を徹底調査！
4.出来上がった制作物とプロの制作物を比較する
一通り作り終わったら、参考にしたデザインと見比べてみましょう。
恐らく、「なんか違う」という感想を抱くはずです。今度は、そのお手本と自分の制作物を見比べて「なにが違う」のか言語化します。
プロのデザインは細部にこだわって作られています。もしかすると、「文字同士の間隔が微妙に違う」「背景にグラデーションがかかっていた」という細かなことかもしれません。
デザインにおいては、そういったわずかな違いが大きな印象の違いを生むこともあるのです。そういった違いを実際に見て学びましょう。
5.デザインの基礎を学ぶ
プロのデザインと比較したところで、デザインの基礎を学びます。
なぜこんなに後でデザインを学ぶかというと、実際にプロのデザインを体感してから知識を入れた方が納得しやすく、頭に入りやすいためです。
デザインの基礎を勉強する本として、私は『デザイン入門教室』をおすすめします。
かなりボリュームがありますが、デザインに関してはほぼこれだけで完結できますので、ぜひ読んでみてください。
| 価格 | 単行本：2,035円 電子書籍：1,933円 | ページ数 | 208ページ |
|---|---|---|---|
| 著者／出版社 | 坂本 伸二 SBクリエイティブ | 出版年月 | 2015年7月 |
Webデザインとは？独学で学ぶための必要スキルとWebデザイナーの将来性
6.実際の募集案件を制作してみる（不足スキルの習得）
ここまでできたら、一旦学習は終了。あとは、作りながら覚えていきましょう。
クラウドソーシングサイトに登録し、実際に募集されている案件を見てください。そこで、自分がデザインの仕事を受けた気持ちになって作品を制作します。
おすすめはバナーを公開コンペで募集している案件です。他の人があなたと同じ条件で作ったバナーが見ることができるため、勉強にもなり一石二鳥です。
また、実際の案件を見てみると、「自分のスキルじゃまだできないな」と感じることがあります。そこで「足りない」と思ったスキルを追加で学習しましょう。
とはいえ、私自身も毎回仕事を受けながら調べごとをしています。
「完璧にできるまで」学習し続けると際限がありませんので、「これは知っておかないと仕事にならないな」と思ったスキルのみ習得するよう心がけましょう。
7.実際に案件に応募・出品してみる
最後に、実際に案件に応募します。よく「応募するのが怖い」という声を耳にしますが、最初はほとんど返事はきません。
返事がこなくても一喜一憂せず、「今日は◯件応募する」と決めてしまいましょう。返事が返ってきて、初めて気にするくらいの気持ちでちょうど良いです。
この時に、以前案件を見ながら制作したバナーなどを実績として使います。「このバナーは、こういう条件を想定して制作しました」とアピールできれば、説得力も増すはずです。
また、案件に応募するのと同時に、各種SNSやココナラなどで、待ちの営業をしましょう。出せるところにはすべて出す、という気持ちで行動していきます。
実績を作るために、最初は無料・安価で制作するのも一つの手段です。また、知り合いにもデザインを始めたと報告するのも忘れないようにしてください。知り合い・友人からの依頼が舞い込んでくる場合もあります。
案件を取るのに行き詰まったら、自分1人で解決しようとせず、何が悪いのか、専門家にチェックしてもらう気持ちで臨みましょう。
Webデザインを独学するメリット・デメリット
独学する上でメリットもあれば、デメリットももちろん存在します。
人により独学できる人・難しい人がいますので、自分に合わせた学習方法をとるように心がけましょう。
独学でWebデザインを学ぶメリット
- 費用が抑えられる
- 自分のペースで学習できる
- 自分の好きなものを作ることができる
独学でWebデザインを学ぶデメリット
- モチベーションが続かない
- 独りよがりなデザインになりがち
それぞれ詳しく解説していきます。
メリット1：費用が抑えられる
Webデザインを独学で学ぶ最大のメリットは費用面です。
デザインスクールで学ぼうとすると、最低でも10万円はかかります。また、スクールで学ぶ内容は、Webデザインの最低限の基礎であることが多く、市販の書籍やネット上で得られる知識とそれほど変わらない場合も多くあります。
あまりお金をかけたくない人や、自分で計画的に勉強を進めることができる人は、無理にスクールに通わず独学がおすすめです。
メリット2：自分のペースで学習できる
独学の場合は、制約がないため、自分のペースで自由に学ぶことができます。
Webデザインスクールでは多くの場合、受講期限が決められており、その期間内にカリキュラムを修了しなくてはなりません。
中には提出課題がたくさん用意されているスクールもあるので、働きながら・家事育児をしながらだと、じっくり習得することができず、余裕をもって学べない場面もあるでしょう。
1日に限られた時間しか使えない人、長期的にコツコツ積み上げられる人は、独学が向いているといえます。
メリット3：自分の好きなものを作ることができる
Webデザインを独学で学ぶ場合、自分で作りたいサイトを好きに選んで、カリキュラムを組めるので、好きなものに必要なスキルだけを効率的に学習できます。
多くのスクールでは、決められた制作物を作り評価してもらうという流れが多いため、人によってはその制作物を作る意欲が湧かなかったり、自分のしたいこととかけ離れていたりする可能性もあります。
「こういうサイト・作品を作りたい！」という具体的なものが決まっている人は、独学でも十分モチベーションを保って意欲的に学習できるでしょう。
デメリット1：モチベーションが続かない
独学でWebデザインを学び続けるのには、強い意思と計画性が必要となります。
独学は孤独になりがちで、「自分の進んでいる方向が合っているか分からない」という不安にも陥りやすい勉強方法です。他の人の様子が気になってしまう、計画的に物事を進められない人は独学するのは厳しいでしょう。
そういった方は、デザインのプロが在籍しているスクールがおすすめ。完全オンラインで学べるところもありますので、検討してみてください。
【2023年最新】人気のWebデザインスクールおすすめ14選｜副業や主婦にも通いやすいスクールを徹底比較
デメリット2 独りよがりなデザインになりがち
デザインには正解がありません。そのため、独学をしていると、「自分が良いと感じたデザイン」が良いデザインだと勘違いしたまま進んでしまうという事態が起こり得ます。さらに、デザインに悩んだ時に自分自身で解決しなければならないというデメリットも。
この大きなデメリットをなくすため、私は、「一通り学習し終わったらプロに添削してもらうこと」をおすすめしています。具体的には、勉強法の「募集案件を見て制作してみる」の段階で、作ったものを見てもらうのが良いでしょう。
最近は「menta」などのサービスで気軽に相談することも可能ですし、SNSで気になっている人に声をかけてみるのも1つの方法です。
デザインが最も上達するのは人に見てもらった時ですので、恥ずかしがらずに添削してもらいましょう。
独学でWebデザインを勉強する上でのよくある質問
ここでは、Webデザインの勉強に関する気になる疑問や質問に答えていきます。
Webデザイナーとして稼げるようになるまでにかかる期間は？
ちなみに私は、Webデザインスクールで3ヶ月間学習したあと、1ヶ月間クラウドソーシングサイトで営業して初めてホームページ関連のお仕事を2件いただきました。
2万円でノーコードツールとテンプレートを使ってのホームページ制作、5万円で古いサイトのリニューアルという内容でしたが、分からないことが多く色々な方にアドバイスをいただきながら納品しました。
高額の案件をいただくまでの道のりは長いですし、それだけ大きな責任も伴います。“すぐに稼げる”仕事なんてなかなかありません。すぐに何万・何十万と稼げるようになることを期待せず、コツコツとスキルを身に付け、将来に向けての準備をしていきましょう。
Webデザイナーの平均年収は？
求人・転職サイトの「doda」の調べによると、2021年Webデザイナーの平均年収は356万円※①でした（前年比-7万円）。
しかし、これはあくまで平均値にすぎません。会社員かフリーランスか、仕事内容や単価によっても大きく変わります。最初は下積み時代と考え、少しずつスキルアップしてできる仕事を増やし、高単価な案件を得ることで年収を増やしていくことは可能です。
実務経験を増やし実力を高め、ポートフォリを充実させることで次の仕事へと繋がっていきます。最初から稼げなくても焦らず、実務経験を増やしてスキルを磨いていきましょう。
どの時点でWebデザイナーと名乗って良いの？
逆に言えば、「あなたがWebデザイナーと名乗った時点でWebデザイナー」だと言えます。
しかし、名乗った以上はお客さんからの仕事は責任を持ってやり遂げるようにしましょう。
Webデザイン案件受注で、低時給から抜け出すためには？
お客さんはあなたの人間性も見ています。あなたが目の前のお客さんに対して“本当にいいと思うこと”をしてあげれば、「あなたにこれも頼みたい」「知り合いにこんなことで困っている人がいるんだけど…」と相談してもらえるようになります。
その状態になるまで、根気よく努力し続けてください。
独学でWebデザインを学ぶことに挫折しそうになった時の対処法は？
「お金をかけたくないし、独学で…」という思いがあるかもしれませんが、それで辞めてしまっては、今までの時間が無駄になってしまいます。勉強に行き詰まってしまった場合は、スクールや安く買える動画を購入してみるのもおすすめです。
また、頼るのは講師やスクールでなくても良いです。SNSなどで勉強中につながった仲間がいれば相談してみましょう。
あなたが通ってきた道は、先人たちが経験してきた道でもあります。1人で悩んでいるより、ずっと気持ちが楽になりますよ。
費用が安いWebデザインスクールおすすめ7選｜月額制・無料で使えるオンラインサービスも紹介
最新のWebデザイン情報の収集方法は？
他にも、先程、紹介したサイト集などで、定期的に他人のデザインを見るように心がけましょう。
まとめ
今回は、独学でWebデザインを勉強できるのか？についてお話ししました。
独学でもWebデザイナーとして活動することはできますが、時には人の手を借りたり、辛抱強く努力する意思が必要不可欠です。
最後に独学でWebデザインを学ぶ上でのロードマップをおさらいしましょう。
私もまだ努力している身ですが、Webデザイナーとしての仕事は心から楽しいと感じています。この記事を参考に、少しでも多くの方がWebデザイナーを目指してくれれば嬉しいです。
フリーWebデザイナー
Warning: Invalid argument supplied for foreach() in /home/lifestyleb/plan-b.co.jp/public_html/elabel/cms/wp-content/themes/elabel/single.php on line 163
和食店を中心に、Webサイト制作やWebライティング、Webデザインの相談なども行うおまかせWebデザイナー。クラウドソーシングサービスのランサーズでは、認定ランサーとして高い評価を受け活躍。2児の母であり、子共たちに金銭面で不自由をさせたくないと日々奮闘中。
※記事で紹介されている商品を購入すると、売上の一部がエラベルに還元されることがあります。メーカー等の依頼による広告にはPRを表記します。
※掲載されている情報は、エラベルが独自にリサーチした時点の情報を掲載しています。掲載価格に変動がある場合や、登録ミス等の理由により情報が異なる場合がありますので、最新の価格や商品の詳細等については、各ECサイト・販売店・メーカーよりご確認ください。
