【未経験・何からはじめる？】Webデザイン独学のための完全ロードマップ

未経験だけどWebデザインを学びたい人へ

Webデザイン専門スクールには通うつもりがない。全くの初心者・未経験者だけど、独学でWebデザインを学びたいという方へ。

現役のフリーランスWebデザイナーが、何から始めたら良いかわからない初心者の方に向けて、ひとつひとつ丁寧に説明していきます。

この記事でわかること。

Webデザイナーの仕事内容のイメージがわかない方は、まずは以下の記事を読んでみてください。基本的なことをまとめています。

まずはWebデザインに必要なスキルを整理しよう

何から学べばいいのかわからなくて迷子になってしまった人へ。まずは、Webデザイナーになるために必要なスキルは何かを整理していきましょう。

Webデザインを勉強しようと思っていろいろ調べても、Webデザイナーの範囲がよくわからないってことはないですか。そうです、多すぎるし、わかりにくいんです。

デザイナーという呼称なのに、デザインだけでなくいろいろな仕事がWebデザイナーの範疇に入ってしまっているのが原因です。

Webデザイナーとはどういう仕事か

ここで一度、Webデザイナーとはどういう仕事かを整理してみましょう。

Webデザイナーとは、Webサイトやバナー広告、LPサイト、アプリ等のデザインをする仕事です。

なので、基本的には、デザインソフトを使ってWebサイトや広告の「見た目」をデザインする仕事です。

ただ、昔からWebデザイナーはHTMLコーディングも仕事の範疇とされてきました。

デザイン画はそのままではただの絵です。HTMLという言語で絵をコード化することで、はじめてWebサイトとなります。HTMLコーディングとはプログラムのような作業のことです。

WebデザイナーたるものHTMLが打てるはずという風潮は長く、Webデザインスクールでは、今でもデザイン＋HTMLというカリキュラム内容のところが多くあります。

しかし、Webサイトが単純な構造だった昔に比べると今はサイト全体が複雑化しているため、ここ10年程でようやくWebデザインとWebコーディングは別々の専門職として分業されるようになってきました。

2024年の現在では、HTMLコーディングはWebデザイナーに必須のスキルとは言えません。

Webデザイナーとして会社に採用された場合は、HTMLを覚えさせられることは今の時代はあまりないでしょう。

一方で、フリーランスとして独立するのであれば、やはりHTMLのコーディングスキルはあった方がいいです。

その理由は「WebデザイナーはHTMLコーディングをどこまで覚えるべき？」という記事に書いていますので、読んでみてください。

Webデザイナーになるために必要とされるスキル

ここまでの話をまとめてWebデザイナーの習得スキルをざっくり分けますと、こんな感じです。

Webデザイン初心者が最初に覚えるべきスキルの順番

Webデザインで一番基本のスキルは、以下の2つです。

Webデザイン専門スクールでも、この2つのスキルを、初心者に習得させることを目標としています。

スクールではカリキュラムに則って勉強を進めることで自然とこれらのスキルが身につきますが、未経験者が個人でやろうとすると、何から始めたら良いかわからないですよね。

まず最初に覚えるべきなのは、

・デザインソフトを使ってデザインを起こすスキル

の方です。

何より一番大事なのがデザイン力。そしてデザイン力を鍛えるためには、デザインソフトを使いこなせなければいけません。

じゃあどのデザインソフトを使えばいいのか。

デザイナーが使うデザインソフトは複数あり、具体的に現場でよく使われているのは、以下の5種類になります。これらのソフトを場面によって使い分けるのがプロです。

• Photoshop(フォトショップ）
• Illustrator（イラストレータ）
• Xd（エックスディ）
• Sketch（スケッチ）
• Figma（フィグマ）

デザインソフトのイメージはこんな感じです。パソコンがないと使えないので注意してくださいね。

駆け出しWebデザイナーの最初の一歩としておすすめなのは、Photoshop（通称フォトショ）です。

初心者がまず覚えるべきデザインソフトにPhotoshopをおすすめする理由

Photoshopは、主に写真の加工を得意とするソフトです。例えば、写真を明るくするor暗くする、背景を消す、人物だけ切り抜く、肌を綺麗にする、肌の色を変える、トーンを変える、といった写真に関する加工（レタッチ）は全てPhotoshopで行われています。写真加工はWebデザインにとってとっても大事な作業です。

そして、このような高度な写真加工をできるソフトは、Photoshopだけです。他のソフトではできません。

また、Photoshopは写真の加工だけでなく、バナー作成、Webサイトのデザインカンプ作成、Web広告作成、イラスト制作、塗り絵、全てのデザイン作業を行うことができます。

まず最初にPhotoshopを覚えることで、すべてのWebデザイン作業に通じることができるのです。

Photoshopに慣れたら、他のソフトもいろいろ触ってみるといいでしょう。ある程度Photoshopをマスターすると、他のソフトとのの機能の違いに気づくと思います。

デザインソフトに慣れてデザイン力がある程度ついた後に余力があれば、HTMLを覚えていく流れがおすすめです。

独学でのデザインソフトの勉強方法にジャンプしたい場合は、こちらから。

HTMLから始めなくて良い理由

HTML/CSSとは、わかりやすいイメージでいうと、プログラミング作業のようなものです。

Webデザインの勉強にあたり、HTMLから始めた方が良いと書いてあるサイトもありますが、私はHTMLは後回しでいいと思います。

なぜなら、デザインを学びたいのにコードを打ち込むだけのHTMLから先に学ぶのは意味がわからないし、楽しくないし、そこで挫折したら勿体無いからです。

また、最初にも描いた通り、現在のWebサイト制作の現場では、分業制が進んでいますので、デザイナーがHTMLを学ぶ必要は必ずしもありません。

まずは、興味のあるデザインを勉強する。余裕が出てきたら、HTMLを勉強する。

ゴールがWebデザイナーへの就職だろうがフリーランスだろうが副業だろうが、まずはデザイン→HTMLの順をおすすめします。

※WebデザイナーがHTMLを勉強するべきなのか？という疑問は、「WebデザイナーがHTMLを学ぶ理由」という記事にメリットをまとめてあります。

Webデザインの独学に必要なツール＆ソフト

Webデザイン未経験者が独学にあたって購入しなければいけないもの。それは

の２点です。

独学Webデザインに必要なパソコンのおすすめ

パソコンは極端に安いものではNGです。あまりに安いパソコンでは、デザインに必要なデザインソフトが動かないからです。安物買いの銭失いになってしまいます。

Webデザインに最低限必要なパソコンのスペック、私のおすすめのパソコンは以下の記事にまとめてありますので、参考にしてください。

　

また、デザイナーであればMacを買うべき？と悩んでいる方も多いと思います。

以下の記事では、デザイナーがMacを選ぶ理由と、WindowsとMacのどちらがおすすめかを、デザイナー目線でまとめてあります。

心はMacに傾いている！という方は、以下の記事を参考にしてみてください。

とにかくパソコンをゲットする、話はそこからです。

独学Webデザインに必要なデザインソフトのおすすめ

プロのデザイナーの99%は、先ほどあげたAdobe社のデザインソフトを使っています。

アドビソフトはサブスク契約で使用することができ、月額または年額払いです。

Photoshopの公式サイトへ

Photoshopのみが欲しい場合は、フォトプランというプランがお得。月額2,178円（ただし年間契約）になります。

しかし、独学の場合、別におすすめしたいプランがあります。

Adobe CC（Creative Cloudコンプリートプラン）

こちらは、20種類以上のAdobeソフトがコンプリートされたプランです。

独学を進めていくといずれXdやIllustratorといった別のソフトも必要になってくるシーンがきます。なので、サブスクであればAdobeCCを最初から契約してしまった方が後々お得ということもあります。

実は独学者にはAdobeCCを強くお勧めしたい理由がありまして、それは、

Adobe公式が運営する初心者向けオンライン講座「Adobeことはじめ講座」を無料で受けることができるというメリットがあります。

この講座は、とても素晴らしい内容でしかも無料。独学者にとって大きな価値があります。

Adobeことはじめについては、このページで詳しく後述しますね。

先に料金の説明に進みます。

AdobeCCのサブスク料金

ここからは、AdobeCCのサブスク料金の話です。

上記の表を見てみてください。

AdobeCCは、公式サイトから契約すると年間72,336円とちょっと、いやかなり高額です。

しかし、実はAdobeCCには誰でも半額近い値段で契約する特別な方法があります。それは、

AdobeCCをデジタルハリウッドというスクール経由で購入するという方法です。

デジタルハリウッドのAdobeCCマスター講座というオンライン講座は、受講料が39,980円(税込)/年。

この講座の受講を申し込むと、オンライン講座＋AdobeCC(一年分)がついてきます。

つまり、このオンライン講座を契約することで、年間7万円以上するAdobeCCを半額近い値段で安くゲットできるというわけです。

ちなみに講座の内容は、46時間の基礎講座教材になっており、ビデオ視聴のみの教材なので、見るも見ないも自由。AdobeCCを定価より安くゲットできて、有名デザインスクールのビデオ講座も視聴できる。公式に認められているやり方なので、安心して契約できます。　　

詳しくは「【2023年】40%以上オフ！Adobe製品を誰でも安く買える方法」の記事を読んでみてください。

再度言いますが、独学志望であれば、絶対にPhotoshop単体よりAdobeCCをデジハリ経由で契約するべきです。

【デジハリオンラインのAdobeマスター講座】公式サイトへ

【実践】Webデザインを学ぶ

パソコンとデザインソフトを手に入れたら、早速Webデザインの勉強に入りましょう。

Webデザイン学習の教材について

1.書籍で学ぶ

書籍で学ぶことのメリットは、たくさんあります。

書籍のデメリットとしては、専門書となるので価格が高めなことですね。

でも時間が空いた時にいつでも読めるし、ネットと違って情報が整理されているので、無駄なく勉強を進めることができるのは本当に良いメリットだと思います。

わかりやすさと体系的に学べるという点では、書籍が一番だと思います。ネットの情報は寄せ集めになってしまうので、細かい点はともかく、基本的な部分は書籍を購入するのがおすすめです。

2.オンライン学習サイトで学ぶ

オンライン上でWebデザインを学べる学習サイトがあります。

初心者の方におすすめなのが、オンライン上でWebデザインに関する基本的なことを学べるchot.desginというサイトです。

未経験でも理解しやすい講座内容となっていますし、なんといっても2022年より全ての講座を無料で見ることができます。ぜひ試してみてくださいね。

3.デザインソフト会社が提供している無料講座で学ぶ

デザインソフトを提供する会社であるAdobeは、クリエイターの卵に向けて、初心者向けに優良の無料講座を設けています。

この講座を受講するにはAdobeのデザインソフトの契約が必要となりますが、Webデザインをはじめるためにはどちらにしろ契約しなければいけないソフトなので、契約後は積極的に講座を受講するようにしましょう。

「アドビことはじめクリエイティブカレッジ」は人気が高く抽選になってしまいますが、「アドビことはじめオンライン講座」の方はいつでも学べるビデオ講座です。Adobe監修の講座なのでわかりやすいく、かなりおすすめです。

4.有料動画コンテンツで学ぶ

Youtubeにも良い動画はあるのですが、きちんと正しい知識を得たい場合は、有料の動画コンテンツの方がおすすめです。

Youtubeではレッスン動画がバラバラにアップされることが多いですが、Udemyのような動画学習専門サイトでは、何本かの動画がセットになってカリキュラムとして体型立てられたものが販売されています。

ひとつのコースを購入するだけで、専門スクールで学ぶかのような幅広い知識を得ることができるのです。

また、動画制作者も現役で働くプロのデザイナー等実績がある人なので、現場で必要なスキルをまとめた動画がラインナップされています。ターゲットが未経験者向きの動画が多いので、自分に合ったものをセレクトすることができますよ。

ここまでに、

・Webデザイナーに必要なスキルと道具について

・初心者向けWebデザインスキルの習得方法

について解説してきました。次からは、実際に独学でWebデザイン学習を進めていく具体的な流れを紹介していきます。

デザインソフトの使い方を学ぶ

デザイナーが起こすデザインイメージを「デザインカンプ」といいます。デザインカンプを作るのに必要なのがデザインソフト。まずはこの使い方を覚えます。

AdobeCC購入者なら無料の「ことはじめ講座」がおすすめ

AdobeCCを契約した人であれば、契約者のみが受講できる「Creative Cloudメンバー向け ことはじめオンライン講座 」や「Adobe ことはじめクリエイティブカレッジ」を強くお勧めします。

まず「ことはじめクリエイティブカレッジ」は、Adobe認定の専門講師によるライブ授業を受講することができます。

完全初心者向けの内容となっていますが、受講人数が限られているのと年に4回くらいしかないので、受講できるかどうかは抽選次第になっています。詳しくは以下の記事にまとめています。

一方、「ことはじめオンライン講座」の方は、ビデオ講座なので抽選もありませんし、自分の隙間時間に視聴してマイペースに学ぶことができます。

PhotoShopやIllustratorの使い方・デザインの作り方のチュートリアルが盛りだくさん。

写真編集や動画編集もあります。専門スクールと比べても遜色のない内容です。

チュートリアルのサンプルです。
Photoshop：インパクトのある映画風ポスターの作り方

　　

過去のアーカイブも、CCユーザーならいつでも視聴可能なので、繰り返し勉強するといいです。　

公式サイトはこちら

　

また、Adobe公式サイトのデジタルハリウッド経由でAdobeCCを契約すると、有名デザインスクールのデジタルハリウッドの「Adobeマスター講座」も受講することができます。

こちらも完全初心者向けの内容なので、合わせて試聴することで理解がアップすること間違いなしです。

デジタルハリウッド版Adobeマスター講座の概要

２.Udemyの初心者講座でデザインソフトの使い方をマスターしよう

AdobeCCを契約していない方は、Udemyの動画での学習がおすすめです。

世界最大級の規模のオンライン学習プラットフォーム「Udemy(ユーデミー） 」には、たくさんのデザインレッスン動画があります。未経験者向けの学習動画ももちろんあります。

Udemy はサブスクでなく買い切りなのが良いですね。

普段は高額なのですが、セール時に買うと1,500円程で優良動画が購入可能です。

ぜひ気になる講座を検索してみてください。

私のUdemyおすすめのコースはこちらの記事にまとめています。

4.オンライン学習サイト「chot.design」で基礎知識を身につける

「chot.design」は、無料で利用できるWebデザインのオンライン学習サイトです。

デザインの基本的な知識やデザインソフトの使い方を学ぶことができます。

質問や情報交換ができる掲示板もあり、無料でこのクオリティのオンライン学習のサイトはかなりコスパが良いと思います。

　

デザイン模写でデザイン感覚を身につける

デザインソフトの使い方をある程度マスターしたら、今度は実際のサイトデザインを起こしてみましょう。

といってもいきなりオリジナルデザインは浮かばないと思うので、まずはデザインの模写からはじめます。

模写とは、プロがつくったサイトを自分でデザインソフト上に同じように真似をして描くことです。

イラストの模写と一緒です。Webデザインも模写をすることで、デザイン力が確実にあがります。

時間ができた時、良いデザインが浮かばない時、とにかく、とにかく模写をするのをおすすめします。模写はデザインの基本です。

ボタンの作り方、レイアウトの組み方、メインビジュアルの描き方。最初は全然上手く書けないかもしれません。しかし、模写は繰り返すことで必ず実力になります。

模写する時の注意点をまとめた記事もありますので、読んでみてください。

模写やトレースに関する書籍はこちらがおすすめです

バナーデザイン作成のコツを学びたい人向けの情報をまとめたのはこちら。

デザインのレベルをあげるためにおすすめの動画

模写が大事と言いましたが、どんだけ模写を頑張っても、いまいち自分の力に反映できないことってあると思います。

あと初心者にありがちなのが、テンプレートっぽいサイトは作れるんだけど、それより一歩上に進むことができない状況。模写するだけだと、どこをどう意識してデザインすればいいのか、そこからが難しいんですよね。

そんな人にお勧めなのがこちらのUdemyの動画です。解説も丁寧ですし、制作されたデザインが今風でおしゃれです。デザイン初心者が確実に階段を登れる動画になっています。

今風のイケてるWEBデザインを作る手順 Figma × Photoshop

HTML/CSSのコーディングを学ぶ

HTML/CSSコーディングとは、デザイン絵をHTMLとCSSというコードに置き換えて、動きをつけたり、ボタン押すとページが変わったりするWebサイトの形にすることです。イメージとしては、プログラミングのようなものです。

デザインの勉強がある程度進んだら、HTMLコーディングの勉強に進んで良いと思います。

HTML/CSSの勉強方法は、動画を見ながら手も動かせるオンライン学習がおすすめです。

HTML/CSSはオンライン学習で学ぶ

未経験者に最適なHTMLとCSSを学べるサイトがあります。２つともとても有名で多くのHTMLコーダーがこのサイトからスタートしてプロになっています。

どちらも実際にコードを打ちながらHTMLが学べる、演習付きの学習サイトです。

「ドットインストール」と「progate」を使ったHTMLの独学方法に関しては、以下の記事で詳しくまとめていますので、ぜひ読んでみてくださいね。

基礎が終わったら、脱初心者に向けて「CSS設計」を学ぼう

HTML/CSSの基本は、オンライン学習で十分学べます。その後は「CSS設計」という知識が重要になってきます。しっかり学んで、初心者から中級者へとステップアップしましょう。

「CSS設計」はネットで勉強しようとすると煩雑になるので、本で基礎から勉強した方がわかりやすいです。CSS設計については、こちらの記事を参考にしてくださいね。

また、HTML/CSSの基礎を学び終わった人が中級レベルになるのに勉強するべきこと・必要なスキルをまとめた記事もあります。独学者のための学び方を解説しているので、ぜひ読んでみてください。

Webデザイン独学のゴールは？半年以内を目安にしよう

さて、一通り勉強を進め終わったとして、いつまで独学で学び続ければいいのでしょうか。

はっきり言ってWebデザインの勉強には終わりはありません。仕事にした後も学びは続きます。IT業界の流行の流れは、尋常じゃないくらい早いので、一生勉強と言っても過言ではありません。

逆に言うと、今勉強していることもいつ古いスキルになってもおかしくないので、さっさとどこかで切りあげて、転職する・開業する、といったモードに切り替えることが必要です。

個人の時間配分のペースもありますが、だいたい半年でWebデザインの基礎的なことは勉強できるかと思います。

また、独学で学ぶ経験値と実践で得る経験値は天と地ほど違います。

独学だと1年かけてたどり着くものが、実践では２ヶ月で驚くほどレベルアップします。

一日でも若い方が、一日でも未熟な方が、現場での実践でたくさん成長できます。

ポートフォリオを作る

独学Webデザイナーが仕事をとる・もしくは就職するために必要なもの。それは「ポートフォリオ」です。

ポートフォリオとは、あなたの制作実績のこと。といっても本当の実績でなく、架空のサイトの制作物でかまいません。

Webデザインスクールでは、卒業課題としてポートフォリオを作成します。しかし、独学の場合は、ポートフォリオは自分で作ることになります。

ポートフォリオは上手い下手は関係ありません。今の自分のスキルを相手に示すのが、ポートフォリオの役割です。

これらが伝わるポートフォリオを作りましょう。

また、独学者の辛いところとしてポートフォリオを添削してくれる人がいないという点があります。

デザインのレベルをあげる1番のコツは、誰か他人に自分のデザインをレビューしてもらうことです。

レビューしてもらう環境がないと、いつまでたっても初心者っぽい垢抜けないデザインを脱却できないんですよね。

その点デザインスクールにいると現役のプロ講師が、びしびしと添削してくれるので、かなりのスキルアップになります。

独学者の場合は、ネットのデザイン添削サービスを利用して、自分のポートフォリオのレベルを上げましょう！

おすすめの添削サービスです。

ココナラのポートフォリオ添削サービスもおすすめです。

ココナラで「ポートフォリオ　添削」で探す

就職活動をする

独学のみで学ぶ場合、就職先も自分で見つけなければいけません。これがデザイン専門スクールとの違いで、スクールではだいたい就職支援や独立支援（副業・開業支援）がありますので、その点スクール卒業生の方がかなり有利になります。

独学者の弱いところはこの就職支援がないところで、基本自分の力で転職活動や副業のための一歩を踏み出さなければいけないんですね。

幸いデザイン会社は即戦力を求めるところもあれば、未経験OKのところもあります。未経験OKのところは、体制が厳しいところも多いですが、修行と思って最初は我慢しても良いでしょう。実践スキルをしっかり積めばいくらでも転職・独立することができる職種です。

独立希望の場合は、クラウドワークスやココナラあたりで地道に稼ぐこともありですが、実はフリーランスのほとんどはリアルな紹介案件での受注がほとんどです。最初は実績作りのためにも、リアルな人脈を増やすのをおすすめします。

まとめ

デザインなら「Adobe ことはじめ」。HTMLなら「プロゲート」「ドットインストール」を一通りやると、基礎的な技術は覚えることができます。

まずは基礎能力をしっかりつけること。上記の3つを一度終わらせただけでは足りません。隙間時間に少しずつでも繰り返し何度もこなしましょう。