【Webデザイン添削】メンターにオンラインで相談できるサービスはこちらから

Webデザインの無料独学サイト【成功者が誰にも教えない】20選

記事内に商品プロモーションを含む場合があります
Webデザイン無料の独学サイトアイキャッチ画像

独学でWebデザインの勉強がしたいんだけど「無料で学べるサイトはないかな?」「最初はできるだけお金をかけずに、安い学習サイトで学べたらいいな」そんな風に思っていませんか?

この記事では、Webデザイナー・グラフィックデザイナー歴20年の私からみて、初心者向けで、なおかつ無料で独学でWebデザインを学習できるサイトをまとめてお伝えします
私自身も前から〜今でもお世話になってる、役立つサイトを、本当に惜しみなくご紹介します。

Webデザインを学びたいけど「無料で始めたい!」方は必見です!

目次

「Webデザイン」が学べるサイト6選

デザインをメインに学ぶなら「chot.design/ちょっとデザイン」がおすすめ

画像引用:chot.designWebサイトより

chot.designは、Webデザイン初心者におすすめの無料でデザインを学べる学習サイトです。
実際にWebデザイン会社やIT企業で働いている、現役Webデザイナー達がカリキュラムを制作しているので、現場で使われているリアルなノウハウを勉強ことができます。デザインの基礎知識のコンテンツを全て無料で体験できるようになっています。もっと知りたい!と思ったら有料プランもあるので、実際に学んでみるといいですね。

サイトテーマ毎日ちょっとずつデザインを学ぶ、IT/Web業界の学習サイト
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料と有料(月額1,100円)コンテンツあり

デザインを実践しながら学ぶなら「Cocoda!/ココダ」がおすすめ

画像引用:Cocoda!Webサイトより

Cocoda!は、デザインの基本から実践までを1つのサービスで学ぶことができるサイトなので、独学にピッタリです。
デザイン以外にも、Webデザイナーとして働ける場所を探すことができたりする機能や、Webデザインの仕事やプロジェクトを見つけることができたり、色々盛り込まれているサービスです。
サービス内の課題はご自分のポートフォリオにもなるので、就職活動をするときに自分作品を紹介するときに活用できます。

サイトテーマデザインの基本知識をイチから学べる
架空案件の内容に対して自らが考えてデザインをする
実践的に学べることが特徴
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料

UIをメインに学ぶなら「Daily UI」がおすすめ

画像引用:Daily UI Webサイトより

Daily UIは、メールアドレスを登録すると100日間UIに関するお題が毎日メールで届き、そのお題の内容でUIデザインしTwitterなどSNSでハッシュタグ「#DailyUI」付けて発信しよう!というサービス・サイトです。
毎日様々なお題が送られてくるので、いろんなデザインパターンを作ってみたい人に最適なサービスです。

サイトテーマUI/UXデザインの勉強
レベル★☆☆☆
こんな人におすすめ初心者(作品をどんどん作りたい人)
料金無料

無料オンラインで学ぶなら「Schoo/スクー」がおすすめ

画像引用:SchooWebサイトより

Schooは、生放送の無料動画で学習できるオンラインの学校です。色々な幅広いジャンル・業界から「先生」をお招きして、毎日新しい「授業」を生放送で配信していて無料で参加できます。

Webデザインが学べる「デザイン学部」という学部があり、所属すると学部の最新授業やカリキュラム進捗状況が届くようになります。デザインの理論から、Webデザインの考え方、アプリケーションの使い方、コーディング(html/css)、印刷物まで幅広く学ぶことができます!

デザイン以外にも気になる講座を受講すしてスキルアップをするのもよいですね!

サイトテーマ幅広い学びのテーマが充実、動画を見て学ぶスタイル
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料(生放送)と980円/月(すべての授業が見放題)

有料オンラインで学ぶなら「Udemy/ユーデミー」がおすすめ

画像引用:UdemyWebサイトより

Udemyはオンライン動画学習サービスです。動画講座を購入して学習するスタイルです。講座の料金は、無料の講座もあれば2万円以上もする講座もありますが、すべて買い切り型の動画なので一度購入すれば期限なくいつでも視聴することができるので学習期限なしで自分のペースで学べることができます。

サイトテーマ買い切り型の動画講座を購入して学習するスタイル
レベル★☆☆☆☆
こんな人におすすめ初心者
料金講座によって金額設定あり

Webデザイン全般を学ぶなら「Skillhub/スキルハブ」がおすすめ

画像引用:Skillhub/スキルハブWebサイトより

Skillhub/スキルハブは、動画コンテンツを視聴して学習できる、フリーランス、起業したい人、転職したい人のための初心者から学べるオンラインスクールです。14講座98レッスンが無料で公開になっており、基礎的な内容であれば無料で学習することができます。もっと深く学びたい方は無料でコンテンツを実際に試してみてから、有料へ移行するプランがおすすめです。

サイトテーマ自学自習・オンライン完結、プログラミングが多い
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料と有料(月額1,080円)コンテンツあり

「コーディング・プログラミング」が学べるサイト4選

スキマ時間で気軽に学ぶなら「ドットインストール」がおすすめ

ドットインストールHPの画面キャプチャー
画像引用:ドットインストールWebサイトより

ドットインストールでは、すべてのレッスンは3分以内の動画で提供されています。すきま時間を利用して無理なく気軽に学べます。もちろんスマートフォンからも視聴可能です。

サイトテーマ3分動画で無理なく学習、豊富で幅広いレッスン
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料と有料(月額1,080円)コンテンツあり

プログラミングがメインなら「Progate/プロゲート」がおすすめ

プロゲートHPのキャプチャー
画像引用:プロゲートWebサイトより

Progateでは、WEBサイト制作に必要なHTML/CSS, JavaScript, jQueryや、サーバーサイドのRubyやRuby on Rails, またWeb開発パスなどを学習することができます。

サイトテーマオンラインプログラミング学習サービス
「初心者から、創れる人を生み出す」ことが理念
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料と有料(月額980円)コンテンツあり

実践型のプログラミング学習なら「CODEPREP/コードプレップ」がおすすめ

画像引用:codeprepWebサイトより

CODEPREPは、プログラミングを書いて動かしながら学ぶ実践型のプログラミング学習サービスです。

学ぶ内容はドットインストールやProgateと似ているサイトですが、Webデザインの基礎知識やコーディングがメインになるので、いずれかのサイトで実際に触ってみて、ご自分がやりやすいサービスを進めていくのでOKです。

サイトテーマ「穴埋め形式の学習スタイル」で、初心者でも挫折しづらい学習方法
レベル★☆☆☆☆〜★☆
こんな人におすすめ初心者〜中級者向け
料金無料

実際に入社したとしての学習なら「シラバス」がおすすめ

画像引用:シラバスWebサイトより

シラバスは、WebデザインやWebアプリケーションの 開発方法を学ぶことができる WEB サービスです。 ステップバイステップで、マネをしながら学習することができます。

サイトテーマステップバイステップで、マネをしながら学習
レベル★☆☆☆☆〜★☆
こんな人におすすめ初心者〜中級者向け
料金無料

【公式】Adobeアプリの使い方が学べるサイト4選

Webデザインを独学する上で、必ず必要になってくるのがAdobe製品です。
そのAdobeから公式のチュートリアルの解説サイトをご紹介します。これらを利用すれば充分に独学でアプリが習得できます。練習用のサンプルファイルもあるので、実際に手を動かしながら学ぶことができます。各アプリのチュートリアルは本を買うより先に見てもらいたい内容なのでチェックしてみてください。

AdobeCCの使い方なら「Creative Cloudチュートリアル」がおすすめ

画像引用:Creative CloudチュートリアルWebサイトより

Creative Cloudチュートリアルは、Adobe製品全体でどんなことができるか?から説明しています。
AdobeCCを契約したならまず一番最初に読んでほしい内容です。

サイトテーマAdobe公式のCreative Cloudのチュートリアル
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料

Illustratorの使い方なら「Illustratorチュートリアル」がおすすめ

画像引用:IllustratorチュートリアルWebサイトより

Adobe社公式のIllustratorのチュートリアル。「初級」「中級以上」とありますが、独学からの場合は「初級」の「今日から始めるIllustrator」→「Illustratorの基礎」と進めていきましょう!

サイトテーマAdobe公式のIllustratorのチュートリアル
レベル★☆☆☆☆
こんな人におすすめ初心者〜中級者
料金無料

Photoshopの使い方なら「Photoshop チュートリアル」がおすすめ

画像引用:Photoshop チュートリアルWebサイトより

Adobe社公式のPhotoshopのチュートリアル。「写真編:基礎」から「写真編集 – 色補正と切り抜き」とステップを上げて進めていきます。補正などがわかってくると表現の幅が広がります!習うより実際に使って慣れることをおすすめします。

サイトテーマAdobe公式のPhotoshopのチュートリアル
レベル★☆☆☆☆
こんな人におすすめ初心者〜中級者
料金無料

Dreamweaverの使い方なら「Dreamweaverチュートリアル」がおすすめ

画像引用:DreamweaverチュートリアルWebサイトより

Adobe社公式のDreamweaverのチュートリアル。Webサイトの仕組み構造からWebページへどのように展開していくのかが丁寧に説明されていてわかりやすくまとめられています。

サイトテーマAdobe公式のDreamweaverのチュートリアル
レベル★☆☆☆☆
こんな人におすすめ初心者〜中級者
料金無料

Webデザインの情報収集としてチェックするべきサイト6選

わかりやすく学びたいなら「サルワカ」がおすすめ

画像引用:サルワカWebサイトより

サルワカは、デザイン・Web制作がメインのオウンドメディアサイトです。サイトのネーミングにもあるように、誰でもわかるように丁寧に図解で解説してくれているので、初心者におすすめです。
Webデザインの内容以外にもコーディング・Wordpress関連の記事も多く、特にデザイン全般を0から勉強する方におすすめです。

サイトテーマ誰でもわかるように
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料

Web構築の情報を網羅している「コリス」はおすすめ

画像引用:コリスWebサイトより

コリスは、Web制作に関わる人が1は知っている老舗のブログです。
昔からUIが変わってないので、すこし古いようにも思いますが、Web制作の構築に関わる情報量が多いのでブックマークして読んでほしいサイトです。

サイトテーマウェブサイトの制作に役立つ情報やインスピレーションを刺激するような情報
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料

海外のWeb情報も知りたいなら「Webクリエイターボックス」がおすすめ

画像引用:WebクリエイターボックスWebサイトより

Webクリエイターボックスは、Webデザイナー / Webデベロッパー「Mana」さんのブログサイトです。
いろいろな国で仕事をされてきたみたいで、海外のWeb情報に関する有益記事も多く紹介されています。
Webで活躍する人に向けて役立つ情報をわかりやすく書いてあるので、説明がわかりやすいのでおすすめです。

サイトテーマWebデザインやサイト制作・最新のWeb業界情報などを紹介しているブログ
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料

Web制作の最新情報は「PhotoshopVIP」がおすすめ

画像引用:PhotoshopVIPWebサイトより

PhotoshopVIPは、Photoshop専門のサイトのように思ってしまいますが、Web制作・グラフィック制作全般の内容もあるブログサイトです、毎日チェックしたいサイトの一つです。

サイトテーマフリーフォントなどの無料素材や、フォトショップの使い方、
最新デザインニュースをお届けするブログメディア
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料

Webデザイナーを目指すなら一度は「LIGブログ」がおすすめ

画像引用:LIGブログWebサイトより

LIGは上野にあるweb制作会社で、主にweb制作、プロモーション、広告、コワーキングスペースの運営などを手広く手掛けているベンチャー企業です。この会社が運営している「LIGブログ」はいろいろなジャンルの情報満です。
Webデザイナーを目指す方向けのコンテンツがカテゴリされているので、一度は覗いてほしいブログです。

サイトテーマLIG社員が1ヶ月に1本その月に学んだことや
考えたことを書いているオウンドメディア
レベル★☆☆☆☆
こんな人におすすめ初心者
料金無料

1ヶ月でWebデザインを身に付けたいなら「baigieさんのメディア」がおすすめ

画像引用:knowledge / baigie Webサイトより

デザイン制作会社baigieさんのメディアは、webデザイン独学している方向けではないのですが、「1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開」は独学中の方にぜひ読んでほしい記事です。

デザイン会社側から見た、未経験デザイナーの採用を進める時に「こういう知識は早い段階で身に付けておいてほしい」という知識がもとまったものですので、転職を頭に入れている方は一読してほしい内容です。

サイトテーマベイジ社員がお届けする情報発信メディア
レベル★☆☆☆
こんな人におすすめ初心者
料金無料

独学でWebデザインが学べる無料学習サイト20選まとめ

独学でWebデザインが学べる無料学習サイト、20選をお伝えしました。
無料とはいえ、プログラミングからWebデザインも学習できるサイトやコンテンツはどんどん増えています!

何をやるにしても最初の一歩は最低限の努力として必要になってくるので、「興味ある」と思ったサイトでぜひ学習してみてくださいね。

  • URLをコピーしました!

この記事を書いた人

安藤ほなみのアバター 安藤ほなみ グラフィック・Webデザイナー

デザイン業界経験20年。Mac使用歴も20年。グラフィックデザイン・Webデザイン両方経験したからこそ、どんなデザインでも使える基礎から、グラフィック・Webの違いや気をつけること、Macの使い方から知っておくと良いことをお伝えします。

目次