未経験から独学でWebデザインを学びたい人へ
Webデザインスクールに通う予定はない、全くの初心者・未経験者だけど、独学でWebデザインを学びたい方へ。
この記事では、フリーランスWebデザイナーが、何から学習を始めたら良いかわからない初心者に向けて、ひとつひとつ解説します。
この記事でわかること。
- Webデザインに必要なスキル
- Webデザインの独学で使うツール
- 選ぶべきデザインソフト
- 独学の流れやおすすめ学習ツール
- おすすめパソコンと必要なスペック
この記事はWebデザイナー歴18年のフリーランスが書いています
未経験者向け：おすすめパソコンと必要なスペック
まずはパソコンを用意しましょう。Webデザインはパソコンがないと始まりません。
極端に安いものはNGです。安価なパソコンでは、WEBデザインに使うデザインソフトが動かないことがあります。安物買いの銭失いにならないよう、必要スペックを満たしたパソコンを用意してください。
2025年現在デザイン作業に必要なスペックは、以下になります。
| Mac | Windows | |
|---|---|---|
| CPU | M1チップ以上 | intel Core5以上 AMD Ryzen5以上 |
| メモリ | 16GB以上 | |
| ストレージ | SSD512GB以上 | |
| 画面サイズ | 15インチ以上 | |
もしもう持っている人は、スペックを調べるよりまずはソフトをダウンロードして動くかどうかを確認してみましょう。もし動くようであれば、急いで購入する必要はないです
私のおすすめパソコンについては以下の記事にまとめてありますので、参考にしてください。
心はMacに傾いている！という方は、こちらの記事がおすすめです。
以下の記事では、デザイナーがMacを選ぶ理由やWindowsとMacのどちらがおすすめかを、デザイナー目線でまとめてあります。
Webデザインの仕事内容と必要なスキル
Webデザイナーの仕事内容とその変化について
Webデザインを勉強しようと思って調べても、Webデザイナーの仕事内容がよくわからないという方も多いのではないでしょうか？そうなんです、実際、範囲が広くてわかりにくいんです。
「デザイナー」という呼称なのに、デザインだけでなく、さまざまな作業がWebデザイナーの仕事に含まれているのが原因です。
現役20年近い私でも多すぎだろって思います
ここで一度、Webデザイナーとはどういう仕事かを整理してみましょう。
Webデザイナーとは、Webサイトやバナー広告、アプリ等のデザインをする仕事です。
つまり、基本的にはデザインソフトを使って、Webサイトや広告の見た目をデザインする仕事です。
そう。Webデザイナーに必須スキルは、「デザインソフトを使ってデザインするスキル」です。とにかくこれをマスターするのが先決
しかし、昔からWebデザイナーの仕事には、HTMLなどのコーディング（プログラミング作業）も含まれてきました。
かつては、WebデザイナーはHTMLもこなさなければならないという風潮があり、今でもデザインとHTMLを両方学べるカリキュラムになっているWebデザインスクールは多いです。
しかし、Webサイトが単純だった昔に比べ、今ではサイト全体が複雑化しており、ここ10年程でWebデザインとWebコーディングは別々の専門職として分業されるようになりました。
2025年現在では、HTMLコーディングはWebデザイナーに必須のスキルとは言えなくなってきました。
今はWebデザイナーとして就職後にHTMLを書かされるケースはあまりないですね
HTMLの代わりに近年人気なのが、「ノーコードツール」です。
ノーコードツールとはHTMLの知識がなくてもWebサイトを作ることができる技術で、学習コストが低いのもあり、特にフリーランスのWebデザイナーの間で人気が高まっています。
一方で、フリーランスなら、やはりHTMLのコーディングスキルはあった方がメリットは大きいです。仕事の幅が広がるなどメリットが多いからです。
具体的な理由は以下の「WebデザイナーはHTMLコーディングをどこまで覚えるべき？」という記事にまとめています。
近年のWebデザイン業界の動きから、未経験者が最初に学ぶべき内容は、
・デザイン
・HTML
・ノーコードツール
この3つが基本となります。
ここまで読んで、HTMLは必要ないという方はコーディング部分は読み飛ばしてね
必要なスキル
Webデザイナーの習得スキルをざっくり分けますと、こんな感じです。
Webデザインで一番基本のスキルは、以下の2つです。
- デザインソフトを使ってデザインを起こすスキル
- HTML/CSS言語を使って、デザイン画をHTMLファイルにするスキル
Webデザインスクールでも、この2つのスキルを、初心者に習得させることを目標としています。
まず最初に覚えるべきなのは、
・デザインソフトを使ってデザインを起こすスキル
の方です。
- STEP1:デザインソフトの使い方を覚える
- STEP2:デザインソフトを実際に使って、デザイン力を上げる
何より一番大事なのがデザイン力。そしてデザイン力を鍛えるためには、デザインソフトを使いこなせなければいけません。
次はデザインソフトについて解説します。
デザインソフトの選び方とおすすめ
デザイナーが使うデザインソフトは複数あり、具体的に現場でよく使われているのは、以下の4種類になります。プロは複数のソフトを場面によって使い分けています。
- Photoshop(フォトショップ）
- Illustrator（イラストレータ）
- Xd（エックスディ）
- Figma（フィグマ）
デザインソフトのイメージはこんな感じです。使用にはパソコンが必要です。
でも、初心者が独学で一気に4つ覚えようとするのは大変なので、まず一つ覚えてください。
おすすめなのは、Photoshop（フォトショップ）かFigma（フィグマ）です。
Photoshopについて
Photoshopは通称フォトショと呼ばれ、デザインソフトでおそらく一番有名なソフトです。世界中のプロからアマに親しまれているソフトです。
主に写真の加工を得意とするソフトで、例えば、写真を明るくするor暗くする、背景を消す、人物だけ切り抜く、肌を綺麗にする、肌の色を変える、トーンを変える、といった写真に関する加工は全てPhotoshopで行われています。高度な写真加工をできるソフトは、Photoshopだけです。他のソフトではできません。
また、Photoshopは写真の加工だけでなく、バナー作成、Webサイトのデザインカンプ作成、Web広告作成、イラスト制作、塗り絵、全てのデザイン作業を行うことができます。
Photoshopを覚えることで、すべてのWebデザイン作業を完了させることができるのです。
- 細かい写真の加工ができるのはPhotoshopだけ
- Photoshopだけが全てのWeb作業をまかなうことができる
フォトショップの機能については、以下の記事にも詳しくまとめてあるので、読んでみてください。
Photoshopの購入方法
PhotoshopはAdobe社のソフトで、サブスクで購入可能です。最初の7日間は無料で体験可能。
料金は以下になります。少し分かりにくいですが、公式サイトで契約する際は、Photoshop単体プランを選ぶより、Lightroomというソフトとセットになったフォトプランを選ぶ方が安いです。
| Photoshop単体 | フォトプラン （Photoshop＋Lightroom) | |
|---|---|---|
| 月額プラン（月々払い） | 4,980円/月(税込) | なし |
| 年間プラン（月々払い） | 3,280円/月(税込) | 2,380円/月(税込) |
| 年間プラン（一括払い） | 34,680円/年(税込) 1ヶ月あたり2,890円 | 28,480円/年(税込) 1ヶ月あたり2,370円 おすすめ！ |
また、Photoshopを含めた20種類以上のソフトがセットになった、AdobeCCコンプリートプランもあります。
| 年間プラン(月々払い) | 7,780円/月(税込) |
| 年間プラン(一括払い) | 86,880円/年(税込) 1ヶ月あたり7,240円 |
| 月々払いプラン | 12,380円/月(税込) |
値段が高いので未経験の初心者がいきなり購入する必要はないのですが、プロデザイナーのほとんどはAdobeCCを契約しています。
Adobe公式サイトから、Adobeの会員登録後にフォトショップを購入します（購入後7日は無料体験期間）。
自分のパソコンにダウンロードして使います。
Figmaについて
おすすめデザインソフトその２は、Figma（フィグマ）です。
FigmaはWebデザインに特化したデザインツールで、無料で使用できるのが一番のメリット。無料ではありますが大変優れた機能を持ち、プロ御用達の、今制作現場で一番使われているソフトでもあります。
一方でFigmaは細かい写真の補正はできません。なので、多くのデザイナーはFigmaとPhotoshopの2つを使っています。ただ、簡単な作業はFigmaで十分なので、初心者のおすすめの学習方法としては、
1.Figmaでデザインツールに慣れる。Webデザインの基礎を学ぶ
↓↓↓
2.Photoshopで写真の加工やより高度なデザインを作れるようになる
という流れがおすすめです。
Figmaは、公式サイトからダウンロードするだけ。自分のパソコンにインストールして使いますが、ログインしてブラウザ上でも動かせるため、別の環境でも作業できるのも大きな強みです。
Figmaについては、以下の記事でも詳細をまとめています。
Webデザインの学習方法
パソコンとデザインソフトを手に入れたら、次はWebデザインの勉強に入りましょう。
学習ツールについて
Webデザインを独学で学ぶ場合は、これらの教材・ツールがおすすめです
- 書籍
- オンライン学習サイト
- Adobeが提供している無料講座
- 動画学習のUdemy・Schooで学ぶ
書籍で学ぶ
書籍で学ぶことのメリットは、たくさんあります。
- ネットの情報に比べてきちんと精査されているため、正しい情報が多い
- 手元に置いておくことでいつでも調べられる
- 体系的に整理されているので、頭から読むことで情報をむらなく覚えることができる
- 初心者対象本が多いので、わかりやすく未経験でもストレスなく勉強ができる
書籍のデメリットとしては、価格が高めなことですね。
ただ、時間が空いた時にいつでも読めるて、ネットの情報と違って情報が整理されているので、無駄なく勉強を進めることができるのは本当に良いメリットだと思います。
体系的に学べるという点では、書籍が一番だと思います。ネットの情報は寄せ集めになってしまうので、細かい点はともかく、基本的な部分は書籍を購入するのがおすすめです。
オンライン学習サイトで学ぶ
「chot.design」は、無料で利用できるWebデザインのオンライン学習サイトです。
デザインの基本的な知識やデザインソフトの使い方を学ぶことができます。
質問や情報交換ができる掲示板もあり、無料でこのクオリティのオンライン学習のサイトはかなりコスパが良いと思います。
初心者向けにやさしく作られている印象です
オンライン上でWebデザインを学べる学習サイトがあります。
初心者の方におすすめなのが、オンライン上でWebデザインに関する基本的なことを学べるchot.desginというサイトです。
未経験でも理解しやすい講座内容となっていますし、2022年より全ての講座を無料で見ることができます。ぜひ試してみてくださいね。
Adobeの無料講座で学ぶ
デザインソフトを提供する会社であるAdobeは、クリエイターの卵に向けて、初心者向けに優良の無料講座を設けています。
具体的には、以下の内容になります。
- アドビことはじめクリエイティブカレッジ
-
Adobeソフトを使ったデザインやコンテンツ制作に関するスキルを、講師との講座形式で学ぶことができるオンライン学習プラットフォーム
- アドビことはじめオンライン講座
-
Adobeソフトを使ったデザインやコンテンツ制作に関するスキルを、動画レッスン形式で学ぶことができるオンライン学習プラットフォーム
- アドビラーニング
-
Adobeの各種ソフトのチュートリアルTipsを無料公開
AdobeCCを契約した人であれば、契約者のみが受講できる「Creative Cloudメンバー向け ことはじめオンライン講座 」や「Adobe ことはじめクリエイティブカレッジ」を強くお勧めします。
まず「ことはじめクリエイティブカレッジ」は、Adobe認定の専門講師によるライブ授業を受講することができます。
完全初心者向けの内容となっていますが、受講人数が限られているのと年に4回くらいしかないので、受講できるかどうかは抽選次第になっています。詳しくは以下の記事にまとめています。
一方、「ことはじめオンライン講座」の方は、ビデオ講座なので抽選もありませんし、自分の隙間時間に視聴してマイペースに学ぶことができます。
PhotoShopやIllustratorの使い方・デザインの作り方のチュートリアルが盛りだくさん。
写真編集や動画編集もあります。専門スクールと比べても遜色のない内容です。
チュートリアルのサンプルです。
Photoshop：インパクトのある映画風ポスターの作り方
過去のアーカイブも、CCユーザーならいつでも視聴可能なので、繰り返し勉強するといいです。
公式サイトはこちら
いずれも、Adobeが監修した初心者向けの講座なのでわかりやすいく、かなりおすすめです。
Adobeの講座に関しては、以下の記事に詳しくまとめていますので、読んでみてください。
Udemy・Schooで学ぶ
Youtubeにも良い動画はあるのですが、きちんと正しい知識を得たい場合は、有料の動画学習コンテンツがおすすめです。
Youtubeではレッスン動画がバラバラにアップされることが多いですが、Udemyのような動画学習専門サイトでは、何本かの動画がセットになってカリキュラムとして体型立てられたものが販売されています。
ひとつのコースを購入するだけで、専門スクールで学ぶかのような幅広い知識を得ることができるのです。
また、動画制作者も現役で働くプロのデザイナー等実績がある人なので、現場で必要なスキルをまとめた動画がラインナップされています。ターゲットが未経験者向きの動画が多いので、自分に合ったものをセレクトすることができますよ。
世界最大級の規模のオンライン学習プラットフォーム「Udemy(ユーデミー） 
」には、たくさんのデザインレッスン動画があります。未経験者向けの学習動画ももちろんあります。
Udemy はサブスクでなく買い切りなのが良いですね。
普段は高額なのですが、セール時に買うと1,500円程で優良動画が購入可能です。
ぜひ気になる講座を検索してみてください。
- Udemy(ユーデミー)
-
幅広いスキルを学ぶことができる動画学習プラットフォーム。コースの数が圧倒的
- schoo（スクー）
-
日本発の動画学習プラットフォーム。ライブ型動画やコミュニティ機能もあり
私のUdemyおすすめのコースはこちらの記事にまとめています。
デザインスキルを伸ばす方法
スキルアップにおすすめの書籍・動画
デザインソフトの使い方を覚えただけでは、デザインはうまくなりません。
まずはデザインの基礎力を身につけることが大事です。ここで紹介しているのは、どれもデザインのルールや基本を学べる書籍、動画です。グラフィックデザインがメインですが、Webデザインにも通じることが多いです。
基本を学ぶことは自分のデザインが引き出しが増えることにもなります。
しっかり勉強すると、デザインセンスが一皮向けますよ。
また、下の記事は、スクール卒業後の方に向けた記事ですが、独学で基本的な学びを終えた方にもおすすめの学習方法がまとめられていますので、参考にしてください。
Kindle umlimitedでもデザインの有用な本が読み放題です。おすすめの本を紹介していますので、ぜひ読んでみてください。
バナーデザイン作成のコツを学びたい人向けの情報をまとめたのはこちら。
模写でデザイン感覚を身につける
デザインレベルを上げるのに最も有用な方法は、デザイン模写です。
模写とは、プロがつくったサイトを自分でデザインソフト上に同じように真似をして描くことです。
イラストもそうですが、デザインも模写を超える練習方法はないと思います。
デザインの練習に模写が有用なのは、まずは基礎力が底上げされるから。プロのデザインを再現することで、レイアウトや配色のバランスを学び、観察力も鍛えられます。
さらに、手を動かすことで知識が定着し、応用力が身につきます。
模写を重ねることでデザインの引き出しが増え、オリジナル制作にも活かせるようになります。
時間ができた時、良いデザインが浮かばない時、とにかく、とにかく模写をするのをおすすめします。模写はデザインの基本です。
ボタンの作り方、レイアウトの組み方、メインビジュアルの描き方。最初は全然上手く書けないかもしれません。しかし、模写は繰り返すことで必ず実力になります。
いきなりサイトの模写はハードルが高いので、まずはバナーの模写がおすすめです
模写する時の注意点をまとめた記事もありますので、読んでみてください。
模写やトレースに関する書籍はこちらがおすすめです
中級者へレベルアップするおすすめ動画
模写が大事と言いましたが、どんだけ模写を頑張っても、いまいち自分の力に反映できないことってあると思います。
あと初心者にありがちなのが、テンプレートっぽいサイトは作れるんだけど、それより一歩上に進むことができない状況。模写するだけだと、どこをどう意識してデザインすればいいのか、そこからが難しいんですよね。
そんな人にお勧めなのがこちらのUdemyの動画です。
テンプレートっぽいデザインをどうこなれたおしゃれなデザインに作り上げるのか、プロの実際の技を惜しみなく動画にしています。
デザイン初心者が中級者にステップアップできる動画だと思います。
今風のイケてるWEBデザインを作る手順 Figma × Photoshop
独学とスクールの美味しいとこどりができる「Fullme」
公式サイト：fullme.jp
Fullmeは、女性向けデザイン書籍の売上が累計100万部を超えた、有名デザイン会社ingectar-eが講師をつとめるデザインスクールです。
デザインスクールと言っても、完全オンラインでLIVE授業はなく、オンデマンド視聴のみ。レッスン動画を見て課題を仕上げて講師に添削してもらうという、スクールというよりは個別指導付きの自習学習オンライン講座に近いスタイルです。
内容は初心者にもわかりやすいカリキュラムになっており、さらに初級・中級・上級とコースが分かれていて、自分のレベルに合わせたコースが受講可能。
価格も、29,800円(税込)〜と、内容を考えるとかなり安いお値段だと思います。
ちなみにお得なフルコースセットもあるので、書籍や動画を自分で探す手間を考えると、このコースのみで十分な力が着くと思います。
Fullmeのサービスの詳細や、料金、プロから見たメリットデメリットの解説記事もあります。
HTML/CSSの学習方法
HTML/CSSコーディングとは、デザイン絵をHTMLとCSSというコードに置き換えて、動きをつけたり、ボタン押すとページが変わったりするWebサイトの形にすることです。イメージとしては、プログラミングのようなものです。
デザインの勉強がある程度進んだら、HTMLコーディングの勉強に進んで良いと思います。
HTML/CSSの勉強方法は、動画を見ながら手も動かせるオンライン学習がおすすめです。
※WebデザイナーがHTMLを勉強するべきなのか？という疑問は、「WebデザイナーがHTMLを学ぶ理由」という記事にメリットをまとめてあります。
オンライン学習で学ぶ
未経験者に最適なHTMLとCSSを学べるサイトがあります。２つともとても有名で多くのHTMLコーダーがこのサイトからスタートしてプロになっています。
どちらも実際にコードを打ちながらHTMLが学べる、演習付きの学習サイトです。
「ドットインストール」と「progate」を使ったHTMLの独学方法に関しては、以下の記事で詳しくまとめていますので、ぜひ読んでみてくださいね。
基礎終了後に学ぶべきCSS設計
HTML/CSSの基本は、オンライン学習で十分学べます。その後は「CSS設計」という知識が重要になってきます。しっかり学んで、初心者から中級者へとステップアップしましょう。
「CSS設計」はネットで勉強しようとすると煩雑になるので、本で基礎から勉強した方がわかりやすいです。CSS設計については、こちらの記事を参考にしてくださいね。
また、HTML/CSSの基礎を学び終わった人が中級レベルになるのに勉強するべきこと・必要なスキルをまとめた記事もあります。独学者のための学び方を解説しているので、ぜひ読んでみてください。
HTMLから始めなくて良い理由
Webデザインの勉強にあたり、HTMLから始めた方が良いと書いてあるサイトもありますが、私はHTMLは後回しでいいと思います。
HTML/CSSとは、わかりやすいイメージでいうと、プログラミング作業のようなものです。
デザインを学びたいのにコードを打ち込むだけのHTMLから先に学ぶのは意味がわからないし、楽しくないし、そこで挫折したら勿体無いからです。
また、最初にも描いた通り、現在のWebサイト制作の現場では、分業制が進んでいますので、デザイナーがHTMLを学ぶ必要は必ずしもありません。
まずは、興味のあるデザインを勉強する。余裕が出てきたら、HTMLを勉強する。
ゴールがWebデザイナーへの就職だろうがフリーランスだろうが副業だろうが、まずはデザイン→HTMLの順をおすすめします。
ノーコードツールについて
ノーコードツールというのは、その名の通りHTMLといったコードを書かずにWebサイトを作ることができる技術です。有名なものに、STUDIO（スタジオ）、Wix（ウィックス）、ネットショップ専門のノーコードツールならBASE（ベイス）があります。
昨今ノーコードツールは大変人気で、特にフリーランスWebデザイナーにとって必須スキルとなりつつあります。
その理由は、ノーコードツールはHTMLのスキルが入らず、またノーコードツールのテンプレートをうまく利用することでデザインセンスもさほど入らずに綺麗なWebサイトを作り上げるので、学習のコスパ・タイパが非常に高いこと。
また、Webサイトの制作コストを下げることで、少ない予算を希望するお客様のニーズともマッチすることができます。
これからAIとノーコードツールはますます発展をしていくと思います。
今まではWebデザイナーはデザインを起こしてHTML化するのが定常でしたが、今後はデザインを起こしてノーコードツールに嵌め込むというやり方も一般的になっていくと思われます。
ノーコードツールについての具体的は解説は、以下の記事を参考にしてください。
Webデザイン独学のゴールは？半年以内を目安にしよう
さて、一通り勉強を進め終わったとして、いつまで独学で学び続ければいいのでしょうか。
はっきり言ってWebデザインの勉強には終わりはありません。仕事にした後も学びは続きます。IT業界の流行の流れは、尋常じゃないくらい早いので、一生勉強と言っても過言ではありません。
逆に言うと、今勉強していることもいつ古いスキルになってもおかしくないので、さっさとどこかで切りあげて、転職する・開業する、といったモードに切り替えることが必要です。
個人の時間配分のペースもありますが、だいたい半年でWebデザインの基礎的なことは勉強できるかと思います。
デザイン専門スクールも、だいたい半年以内のカリキュラムになっています
また、独学で学ぶ経験値と実践で得る経験値は天と地ほど違います。
独学だと1年かけてたどり着くものが、実践では２ヶ月で驚くほどレベルアップします。
一日でも若い方が、一日でも未熟な方が、現場での実践でたくさん成長できます。
最後に：ポートフォリオを作る
独学Webデザイナーが仕事をとる・もしくは就職するために必要なもの。それは「ポートフォリオ」です。
ポートフォリオとは、あなたの制作実績のこと。といっても本当の実績でなく、架空のサイトの制作物でかまいません。
Webデザインスクールでは、卒業課題としてポートフォリオを作成します。しかし、独学の場合は、ポートフォリオは自分で作ることになります。
ポートフォリオは上手い下手は関係ありません。今の自分のスキルを相手に示すのが、ポートフォリオの役割です。
- こんなデザインが得意です
- バナーならこんなものが作れます
- HTMLコーディングがここまでできます（または、できません）
- ソフトはこれとこれが使えます
これらが伝わるポートフォリオを作りましょう。
また、独学者の辛いところとしてポートフォリオを添削してくれる人がいないという点があります。
デザインのレベルをあげる1番のコツは、誰か他人に自分のデザインをレビューしてもらうことです。
レビューしてもらう環境がないと、いつまでたっても初心者っぽい垢抜けないデザインを脱却できないんですよね。
その点デザインスクールにいると現役のプロ講師が、びしびしと添削してくれるので、かなりのスキルアップになります。
独学者の場合は、ネットのデザイン添削サービスを利用して、自分のポートフォリオのレベルを上げましょう！
おすすめの添削サービスです。
ココナラのポートフォリオ添削サービスもおすすめです。
まとめ
WEBデザインの学習で必要なのは、まずは基礎能力をしっかりつけること。隙間時間に少しずつでも繰り返し何度もこなしましょう。
手を動かした分だけ、絶対に成長します！
Webデザインの仕事内容の実際の細かい流れに関しては、以下の記事にさらに具体的に解説していますので、読んでみてください。
