Webデザイン独学ロードマップ|未経験が何からはじめるかを完全ガイド

webデザイン独学ロードマップ完全版
目次

未経験の独学Webデザイン。何からはじめる?

Webデザインスクールに通う予定はないけれど、全くの初心者・未経験から独学でWebデザインを学びたい方へ。

この記事では、「何から学び始めればいいのか全くわからない」というデザイン未経験者向けに、Webデザインに必要なスキルと独学での学習方法について基礎から丁寧に解説します。

この記事はWebデザイナー歴18年のフリーランスが書いています

この記事でわかることは以下の内容です。

  • Webデザイン学習におすすめのパソコン
  • Webデザイナーの仕事内容
  • Webデザインに今、必要なスキル
  • Webデザイン学習に必要なツール
  • おすすめデザインソフト
  • Webデザイン独学の流れ
  • おすすめ学習サイト

独学の方法だけ知りたい人や、読み飛ばしたい時は、目次のリンクから飛んでいってくださいね。

Webデザインにおすすめのパソコンと必要なスペック

Webデザインにはパソコンが必要になりますので、まず最初にパソコンを用意しましょう。

すでにパソコンを持っている人は、まずはデザインソフトがスムーズに動くかどうか動作確認してみましょう。もし快適に動くようであれば、急いで購入する必要はないです。動作確認するソフトは、FigmaCamvaがおすすめです(無料なので)

パソコンを持っていない人は、以下のスペック表を参考にして購入してください。

極端に安いものはNGです。安価なパソコンでは、WEBデザインに使うデザインソフトが動かないことがあります。安物買いの銭失いにならないよう、必要スペックを満たしたパソコンを用意してください。

2025年現在デザイン作業に必要なスペックは、以下になります。

スクロールできます
MacWindows
CPUM1チップ以上intel Core5以上
AMD Ryzen5以上
メモリ16GB以上
ストレージSSD512GB以上
画面サイズ15インチ以上
Webデザインに使うPCの最低スペック参考(2025年)

私のおすすめパソコンについては以下の記事にまとめてあります。

心はMacに傾いている!という方は、こちらの記事がおすすめです。

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

Webデザインの仕事内容と必要なスキル

Webデザイナーに必要なスキルとは

Webデザインを勉強しようと思って調べても、Webデザイナーの仕事内容や必要なスキルがよくわからないという方も多いのではないでしょうか?

そうです、実際、範囲が広く曖昧なのでわかりにくいのです。

デザイナーという呼称なのに、デザインだけでなく、さまざまな作業がWebデザイナーの仕事に含まれているのが原因です。

一般的にWebデザイナーに必要なスキルは、このくらいあると言われています。意味がわかりませんよね。

  • デザインスキル
  • HTML
  • CSS
  • JavaScript
  • CMS(WordPress)
  • レスポンシブデザイン
  • UI/UXデザイン
  • サーバードメイン
  • SEO

Webデザインスクールで習う内容もだいたいこのスキルの半分、もしくは全部を習得するコースが多いです。

webデザイナーに必要なスキル一覧を図解で説明

現役20年近い私でも多すぎだろって思います

ここで改めて、Webデザイナーとはどういう仕事かを整理して、2025年の現在、本当に必要なスキルについて考えてみましょう。

Webデザイナーの主な仕事内容

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

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

具体的には、以下のような制作物を手がけます。

  • Webサイトのデザイン
  • バナー広告の制作
  • UI/UXデザイン
  • アプリのデザイン
webデザイナーが作成するものの実際の一覧 ・Webサイトデザイン ・アプリデザイン ・バナーデザイン ・Youtubeサムネイルデザイン

そのため、Webデザイナーには以下のスキルが求められます。

  • デザインソフトの操作スキル(Adobe Photoshop、Illustrator、Figma など)
  • デザイン力(視覚的なバランス、色彩、レイアウトなど)

Webデザイナーの最も基本的なスキルは、「デザインソフトを使ってデザインを作成する力」です。まずはこれをマスターすることが重要です。

Webデザイナーに必須スキルは、「デザインソフトを使ってデザインするスキル」です。とにかくこれをマスターするのが先決

WebデザイナーとHTMLコーディングの関係

一方で、昔からWebデザイナーの仕事には、HTML/CSSを使ったコーディングも含まれてきました。

コーディングとは、このようにプログラムのようなコードを書いて、デザインをwebサイトとして機能する形にします。

HTMLコーディングの画面

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

かつては、WebデザイナーはHTMLコーディングもこなさなければならないという風潮があり、今でもデザインとHTMLを両方学べるカリキュラムになっているWebデザインスクールは非常に多いです。

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

Webデザイン作業は今は分業体制が主流。WebデザインはWebデザイナーが、コーディングはWebコーダーやフロントエンドエンジニアがやる時代に

2025年のWebデザイナーにHTMLは必須か?無駄か?

2025年現在では、HTMLコーディングはWebデザイナーに必須のスキルとは言えなくなってきています。

先ほど書いた通り分業化が進んだためです。

今はWebデザイナーとして就職した人がHTMLを書くケースはあまりないですね

また、webデザイナーがHTMLを覚えなくていい理由はもう一つ。

近年のAIの目覚ましい進化により、簡単なHTMLコードはAIで生成可能なため、HTMLをいちから学習するのに学習コストをかける必要はなくなってきました。

では、今からWebデザイナーを目指す人は、HTMLを学ぶことは無駄なのか?と思いますよね。

いいえ、やはりHTMLの基礎レベルは知っておくべきだと私は思います。

HTMLを知らないと、AIに適切な指示を出せず、求めるコードが生成されないことがあります。また、AIが生成したコードにバグがあった場合、HTMLやCSSの知識がないと修正できません。

それ以外にも、SEOに有利な構造のページを作れる、カスタマイズの自由度が広がるといった理由があります。

なので、特に分業ができないフリーランスWebデザイナーを目指す場合は、HTMLコーディングもせめて基礎レベルは学ぶべきだと思います。

フリーランスだとコーディングを知らないと、サイト一つを自分一人で立ち上げることができないからです。

WebデザイナーはHTMLコーディングをどこまで覚えるべき?」という記事でももっと詳しく解説していますので、よかったら読んでみてくださいね。

しかし、どうしてもHTMLは苦手意識が強く、覚えられないし、挫折してしまうという人もいると思います。

そういう人たちに朗報なツールがあります

近年、特にフリーランスのWebデザイナーに人気なのがノーコードツールです。

ノーコードツールの活用

ノーコードツールとは、HTMLやCSSの知識がなくてもWebサイトを作成できるツールのことです。例えば、以下のようなツールがあります。

一番のメリットは、HTML・CSSを覚える必要がなく、直感でブラウザ上でサイトを作ることができるので、圧倒的に学習コストが低いこと。

例えば、以下のようなツールがあります。

  • STUDIO
  • Wix
  • Jimdo
ノーコードツールSTUDIOのWebサイト画面イメージ
日本の最大手ノーコードツールSTUDIO

ノーコードツールには、プロフェッショナルなテンプレートも揃っていますので、実はデザイン力すら必要なくWebサイトを立ち上げることができるんです。

UI/UXデザインとは

Webデザインを勉強すると、UI/UXデザイナーという言葉を聞いたことがある人もいるかもしれません。

UI/UXデザイナーとは、ユーザーが使いやすく、快適に感じるアプリやWebサイトをデザインする人のこと。

UI(User Interface)デザイナーは、ボタンやメニュー、フォント、色、レイアウトなど、見た目や操作感をデザインするのが仕事。
UX(User Experience)デザイナーは、ユーザーがストレスなく目的を達成できるように、全体の使いやすさや体験を設計するのが仕事。

そして、Webデザインは、UIとUXの要素を両方含みつつ、Webサイト全体のデザインを担当するのが仕事です。

大企業では、UI専門/UX専門のデザイナーがいるけど、未経験者がまずWebデザインを始めるのであれば、まだそこは意識しなくて、ざっくりとWebデザイナーに必要なスキルを学べばいいです。

Webデザインを学んだ後に、UI/UXデザインの奥深さに惹かれて、UI/UXデザイナーを目指す人もいますよ

必要なスキルまとめ

近年のWebデザイン業界の動きから、未経験者が最初に学ぶべき内容は、以下の3つを基本とします。

デザイン
HTML
ノーコードツール(特にフリーランス志望なら)

ここまで読んで、HTMLは必要ないという方はコーディング部分は読み飛ばしてね

それ以外の

  • CMS(WordPress)
  • SEO
  • サーバードメイン関係

に関しては、あると強いスキルではあるけど、まずはデザイン力を鍛えた後で十分です。

今からWebデザインを始めようとする人が一番先に身に着けるスキルは

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

です。

  • STEP1:デザインソフトの使い方を覚える
  • STEP2:デザインソフトを使って、デザイン力を上げる

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

次はデザインソフトについて解説していきますね

デザインソフトの選び方とおすすめソフト

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

  • Photoshop(フォトショップ)
  • Illustrator(イラストレータ)
  • Figma(フィグマ)
  • XD(エックスディ)

デザインソフトの使用イメージはこんな感じです。

デザインカンプ 作成の例

初心者が独学で一気に4つとも覚えようとするのは無理なので、まずは1つから確実に身につけてください。

おすすめなのは、この2つのどちらかです。

Photoshop(フォトショップ)

Figma(フィグマ)

Photoshopについて

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料金表(アドビ公式引用2025年1月)

また、Photoshopを含めた20種類以上のソフトがセットになった、AdobeCCコンプリートプランもあります。

年間プラン(月々払い)7,780円/月(税込)
年間プラン(一括払い)86,880円/年(税込) 1ヶ月あたり7,240円
月々払いプラン12,380円/月(税込)
AdobeCCの価格(2025年1月現在)

AdobeCCは値段が高いので未経験の初心者がいきなり購入する必要はないのですが、プロデザイナーのほとんどはAdobeCCを契約しています。

Adobe公式サイトから、Adobeの会員登録後にフォトショップを購入できますので、自分のパソコンにダウンロードして使いましょう。

Figmaについて

おすすめデザインソフトその2は、Figma(フィグマ)です。

Figmaの画面イメージ
Figmaの画面イメージ

FigmaはWebデザインに特化したデザインツールで、無料で使用できるのが最大のメリットです。無料ですが、大変優れた機能を持ち、プロ御用達で、現在の制作現場で一番使われているソフトでもあります。

ただ、Figmaでは細かい写真の補正ができません。そのため、多くのデザイナーはFigmaPhotoshopの2つを併用しています。

ただし、簡単な作業はFigmaで十分対応できるため、初心者におすすめの学習方法としては、

  1. Figmaでデザインツールに慣れ、Webデザインの基礎を学ぶ
  2. Photoshopで写真の加工や、より高度なデザインを作成できるようになる

という流れがおすすめです。

なぜならFigmaは無料だから!まず試しにWebデザインに触れたみたい人にもおすすめです

Figmaは

  • 公式サイトからダウンロードして自分のパソコンにインストールして使う
  • 公式サイトからログインしてそのままブラウザ上で動かす

どっちの方法でも可能です!

Figmaについては、以下の記事でもまとめています。

独学で学ぶWebデザインの学習方法

次に、具体的にどうやってWebデザインを勉強したらいいかについて解説していきます。

Webデザインを独学で学べる、おすすめの教材・ツールを紹介します

  • 書籍
  • オンライン学習サイト
  • Adobeが提供している無料講座
  • 動画学習プラットフォームUdemy・Schooで学ぶ

書籍で学ぶ

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

  • ネットの情報に比べてきちんと精査されているため、正しい情報が多い
  • 手元に置いておくことでいつでも調べられる
  • 体系的に整理されているので、頭から読むことで情報をむらなく覚えることができる
  • 初心者対象本が多いので、わかりやすく未経験でもストレスなく勉強ができる

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

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

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

ただし、専門書は高額なので欲しい本があってもなかなか買えないですよね。その点、Amazonのサブスク990円/月で書籍読み放題サービスKindle Unlimitedでは、Webデザイン関係の本も多数読み放題対象となっています。

以下の記事では、初心者向けのWebデザイン本で読み放題対象となっている本を紹介していますので、チェックしてみてください。

オンライン学習サービスで学ぶ

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

chot.designサイトイメージ

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

未経験でも理解しやすい講座内容となっていますし、2022年より全ての講座を無料で見ることができます。無料でこのクオリティのオンライン学習のサイトはかなりコスパが良いと思います。

ただ、ちょっと内容が古いので、webデザインの基本的な知識の把握としてはいいけど、最新情報に関しては別のところで補填した方が良さそう

Photoshop公式の無料チュートリアルで学ぶ

デザインソフトを提供する会社であるAdobeは、公式サイトで自社ソフトの無料チュートリアルや限定の特別講座を設けています。

初心者向けにかなり充実した内容になっています。

公式チュートリアルのメリット
  • Adobeソフトの最新機能に対応
  • Adobe公式なので講師の質が高い
  • 現場で役立つTipsが多い

具体的には、以下があります。

アドビラーニング

Adobeの各種ソフトのチュートリアルTipsを無料公開

アドビことはじめクリエイティブカレッジ

Adobeソフトを使ったデザインやコンテンツ制作に関するスキルを、講師との講座形式で学ぶことができるオンライン学習プラットフォーム

アドビことはじめオンライン講座

Adobeソフトを使ったデザインやコンテンツ制作に関するスキルを、動画レッスン形式で学ぶことができるオンライン学習プラットフォーム

Adobe ラーニング

PhotshopやIllustraorをはじめとするAdobeソフトのチュートリアルTipsがたくさん用意されています。

初級・中級・上級とレベルが分かれていて、すべて1分〜3分程度で終わり、長くても10分程度の短いTipsなので、時間がない時でも少しでも進めることができます。

AI生成など最新機能にも対応していますので、Photoshopで何ができるか知りたい人はこちらのチュートリアルがおすすめ。

Photosopのチュートリアル・アドビラーニングのインデックス

ソフトを開いて「学ぶ」というメニューを選択することでもチュートリアルに飛ぶことができます。

Photosopのチュートリアル・アドビラーニングの画面
Photoshopの画面

ことはじめクリエイティブカレッジ(AdobeCC契約者限定)

AdobeCCを契約した人限定ですが、「Adobe ことはじめクリエイティブカレッジ」という講座もあります。

Adobe認定の専門プロ講師によるオンラインライブ授業で、完全初心者向けの内容となっており、デザインやクリエイティブ分野の基礎を学ぶことができます。

ただ、受講人数が限られているうえ、年に4回ほどしか開催されないため、非常に倍率が高く、受講できるかどうかは抽選によって決まります。しかし、人気の高さも納得の充実したカリキュラムですよ。

詳しくは以下の記事にまとめていますので、読んでみてくださいね。

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

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

ことはじめオンライン講座 」のサンプルです。

Photoshop:インパクトのある映画風ポスターの作り方

  

過去のアーカイブも視聴可能なので、繰り返し勉強することができますよ

Adobeのデザイン講座に関しては、以下の記事にも詳しくまとめています。

動画学習サイト【Udemy・Schoo】で学ぶ

IT・デザイン系の有名な動画学習サイトとして、以下の2つがあります。

Udemy(ユーデミー)icon

幅広いスキルを学ぶことができる動画学習プラットフォーム。コースの数が圧倒的。
講座ひとつにつき、1,500円〜(セール時)

schoo(スクー)

日本発の動画学習プラットフォーム。ライブ型動画やコミュニティ機能もあり。
サブスク制で月額980円。ただし、無料会員での視聴範囲も多い

Udemyのスクリーンキャプチャ
Udemy
動画学習サイトSchooのトップページ
Shoo

世界最大級のオンライン学習プラットフォームUdemy iconには、多くのデザインレッスン動画があり、未経験者向けの学習動画も充実しています。

また、schooも、ビジネススキルやクリエイティブ系の講座を提供する学習プラットフォームで、こちらは日本企業なので、より日本のビジネスに馴染んだ講座となっています。

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

YouTubeではレッスン動画がバラバラにアップされたり途中で終わったりすることもありますが、Udemyのような動画学習専門サイトでは、複数の動画がセットになり、体系的に構成されたカリキュラムとして販売されています。

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

また、動画の制作者は現役で活躍するプロのデザイナーなど、実績のある人が多いため、現場で必要なスキルをまとめた動画が揃っています。

未経験者向けの動画も多いので、自分に合ったものを選ぶことができますよ

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

Webデザイン関係でUdemyおすすめコースは、こちらの記事にまとめています。

FigmaやPhtoshopのプロ的使い方やWebデザイナーとしての基本的な知識の動画など、未経験者が学ぶべきスキルを、初級から上級までレベル別にまとめてあります。

UdemyとSchooに関して詳しく知りたい方、両者の比較をしたい方はこちらの記事を参考にしてください。

独学でデザインスキルを伸ばすには

スキルアップにおすすめの書籍・動画

デザインソフトの使い方を覚えただけでは、デザインはうまくなりません。

デザイナーに必要なのは、デザインの基礎力を身につけることです。

以下の記事で紹介しているのは、どれもデザインのルールや基本を学べる書籍、動画です。グラフィックデザインがメインですが、Webデザインにも通じることが多いです。

基本を学ぶことは自分のデザインが引き出しが増えることにもなります。

しっかり勉強すると、デザインセンスが一皮向けますよ。

また、下の記事は、Webデザインスクールを卒業した方に向けた記事ですが、独学で基本的な学びを終えた方にもおすすめの学習方法がまとめられていますので、参考にしてください。

Kindle umlimitedでもデザインの有用な本が読み放題です。

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

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

デザインレベルを上げる最も有用な方法は、デザイン模写です。

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

イラストの上達も模写が一番と言いますが、デザインも模写を超える練習方法はないと思います。

デザインの練習に模写が有用なのは、基礎力が底上げされるからです。プロのデザインを再現することで、レイアウトや配色のバランスを学び、観察力も鍛えられます。

さらに、手を動かすことで知識が定着し、応用力が身につきます。

模写を繰り返すことでデザインの引き出しが増え、オリジナルの制作にも活かせるようになります。

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

ボタンの作り方、レイアウトの組み方、メインビジュアルの描き方。

最初はうまく描けないかもしれませんが、模写は繰り返すことで必ず実力がつきます。

模写は意外と難しいので、まずは簡単なものからの模写がおすすめです

いきなり模写をしようと思っても、初心者だとレベルの高い見本しか見つけられないかもしれません。またフォントや素材もどれを使えばいいのかもわからないと思います。

初心者は、初心者用の練習キット(素材セット)がついている模写・トレースのデザインドリルを使うのをおすすめします。

こちらのドリルでは、素材・テキスト(フォント)・完成見本を、全てダウンロードできます。

演習問題を繰り返すことでデザインの基礎レベルをあげ、最終的に実践問題にチャレンジします。

デザインの基礎ルールの解説もありますので、模写を通して自分の力になるといいですね。

こちらの記事には模写する時の注意点をまとめてあります。

デザイン中級者へレベルアップするおすすめ動画

ただ、どれだけ模写を頑張っても、なかなか自分の力に反映できないこともありますよね。

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

そんな方におすすめなのが、こちらのUdemy iconの動画です。

テンプレートっぽいデザインを、どうやっておしゃれでこなれたデザインに仕上げるか、プロの実際の技を惜しみなく紹介している動画です。

デザイン初心者が中級者にステップアップできる内容だと思います。

Udemy Figma学習動画おすすめ
Udemy Figma学習動画おすすめ

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

独学とスクールの美味しいとこどり「Fullme」

デザインスクールFullMeのサイトトップページ

公式サイト:fullme.jp

Fullmeは、女性向けデザイン書籍の売上が累計100万部を超えた、有名デザイン会社ingectar-eが講師を務めるデザインスクールです。

デザインスクールと言っても、完全オンラインで、LIVE授業はなく、オンデマンド視聴のみ。レッスン動画を見て課題を仕上げ、講師に添削してもらうというスタイルで、スクールというよりは個別指導付きの自主学習スタイルといって良いかもしれません。

内容は受講者のレベルに合わせたカリキュラムになっており、初級・中級・上級とコースが分かれていて、自分のレベルに合わせたコースが受講可能。

価格も、29,800円(税込)〜と、内容を考えるとかなりリーズナブルだと思います。

ちなみに、初級・中級・上級がセットになったフルコースセットは20%オフで、お得感があります。

Fullmeのサービスの詳細や、料金、プロから見たメリットデメリットの解説記事はこちら。

HTML/CSSの独学学習方法

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

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

オンライン学習サイトでHTML/CSSを学ぶ

HTMLCSSを学べるオンライン学習サイトで有名なのは、以下の2つです。どちらも非常に有名で、多くの初心者・未経験者がこのサイトからスタートし、プロになっています。

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

ドットインストールprogateを使ったHTMLの独学方法に関しては、以下の記事で詳しくまとめています。

基礎を学んだ後に取り組みたいCSS設計

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

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

また、HTML/CSSの基礎を学び終わった後に、中級レベルにステップアップするために勉強すべきことや必要なスキルをまとめた記事もあります。独学での学習方法を解説しています。

ノーコードツールについて

ノーコードツールについて、もう少し補足しますね。

ノーコードツールとは、その名の通りHTMLといったコードを書かずにWebサイトを作ることができる技術です。

有名なものに、STUDIO(スタジオ)、Wix(ウィックス)、ネットショップ用ならBASE(ベイス)があります。

昨今ノーコードツールは大変人気で、特にフリーランスWebデザイナーにとって必須スキルとなりつつあります。

その理由は、ノーコードツールはHTMLのスキルが入らず、またノーコードツールのテンプレートをうまく利用することでデザインセンスもさほど入らずに綺麗なWebサイトを作り上げるので、学習のコスパ・タイパが非常に高いこと。

また、HTMLがない分Webサイトの制作コストを下げることができますので、少ない予算を希望するお客様のニーズともマッチすることができます。

これからAIとノーコードツールはますます発展していくと思います。

今まではWebデザイナーはデザインを起こしてHTML化するのが定常でしたが、今後はデザインを起こしてノーコードツールに嵌め込むというやり方も一般的になっていくと思われます。

ノーコードツールについての具体的な解説は、以下の記事にまとめてあります。

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

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

正直なところ、Webデザインの勉強に終わりはありません。仕事にしてからも学びは続きます。特にIT業界の流行のスピードは非常に速く、一生勉強と言っても過言ではありません。

逆に言うと、今頑張って学んでいることも、いつ古いスキルになってもおかしくないので、早めにどこかで切り上げて、転職や開業などの次のステップに進むことが大切です。

個人の時間配分にもよりますが、だいたい半年でWebデザインの基礎は学べるかと思います。

デザイン専門スクールも、だいたい半年程で卒業するカリキュラムになっています

また、独学で得る経験と、実際の現場で得る経験は天と地ほどの差があります。独学で1年かけて習得することが、実践ではわずか2ヶ月で驚くほどレベルアップすることもあります。

1日でも若いとき、1日でも未熟なときに、現場での実践を通じて成長することがとても大切だと思います。

学習の最後に:ポートフォリオを作る

独学でWebデザイナーを目指す場合、仕事を取る・就職するために最も必要なもの。それは「ポートフォリオ」です。

ポートフォリオとは、あなたの制作実績を示すものです。実際の仕事でなくても、架空のサイトの制作物でも構いません。

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

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

  • こんなデザインが得意です
  • バナーならこんなものが作れます
  • HTMLコーディングがここまでできます(または、できません)
  • デザインソフトはこれが使えます

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

また、独学者にとって辛いのは、ポートフォリオを添削してくれる人がいないことです。デザインのレベルを上げるために最も効果的なのは、誰かに自分のデザインをレビューしてもらうことです。

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

その点、デザインスクールでは現役のプロ講師がしっかりと添削してくれるので、デザインレベルは向上します。

独学の場合は、ネットのデザイン添削サービスを利用するなどして、自分のポートフォリオのレベルを上げることをおすすめします!

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

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

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

Webデザイン独学ロードマップ:まとめ

長い記事を読んでくれてありがとう!

この記事で紹介した本や動画、学習ツールをうまく利用して、独学でもがんばってWebデザインのスキルをあげてくださいね。

WEBデザインの学習で必要なのは、まずは基礎能力をしっかりつけること。隙間時間に少しずつでも繰り返し何度もこなしましょう。

手を動かした分だけ、絶対に成長します!

・デザインソフトの使い方
・デザイン力
・HTML/CSSの基礎

これらをしっかり理解した後は、デザイン設計やポートフォリオ作成に力を入れ、実務経験を積むことがスキル向上につながります。

独学でももちろん学びは深められますが、他者からのフィードバックを受けることでデザイン力が高まり、キャリアに繋がるチャンスが広がります。

今回紹介した、FullMeやポートフォリオの添削サイトをうまく利用して、成長を続けてくださいね。


Webデザインの仕事内容の実際の細かい流れに関しては、以下の記事に具体的に解説しています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次