icon
icon

【独学におすすめ!】無料でWebデザインを学習できるサイト12選

独学でWebデザインを学習したい人は必見です。無料でWebデザインを学習できるサイトをまとめて紹介しています。初心者向けの学習サイトが多いので、これからWebデザイナーになりたいという人は今後も間違いなく役立つサイトになるでしょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

Webデザインを学びたいけど何したら良いか分からないという方必見です!

無料でWebデザインを学習できるサイトをまとめて紹介していきます。自分の好きな時間に独学で進めていきたいという人におすすめでしょう。

そもそも「Webデザインとは」何なのか分からないという方にも分かりやすく説明していきます。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

Webデザインとは

Webデザインとは、Webサイトのデザインを美しくし使いやすいサイトを目指します。他にもロゴやバナーの作成などを行うことも多いでしょう。Webデザイナーという人の仕事は一概には言えませんが、こういった業務が一般的でしょう。

Webデザインをする上で必要な知識は以下のものがあります。

  • HTML/CSS
  • Sass/Compass
  • Photoshop
  • Illustrator
1時間でできる無料体験!

HTML/CSSやSass/Compassは実際にサイトのレイアウトを作った後にコーディングする上で必要な技術です。PhotoshopやIllustratorは、サイトのレイアウトやバナー作成など様々なデザイン作成で必要になります。

企業によっては、レイアウトの作成と実際のコーディングを別々の人が行っているケースもありますが、Webデザイナーとして活躍するためにはどちらも出来ることが必須でしょう。

 

以下では、実際にHTML/CSSやPhotoshopなどを独学で勉強できるサイトをまとめています。多くの学習サイトが初心者向けに設計されているので、これから始めようと思っている人にはおすすめです。

 

Codecademy

スクリーンショット 2016-04-27 13.27.40

海外のプログラミング・デザイン学習サイトです。実際に自分でコーディングしながら学習をすすめていくスタイルです。

実践編でWebサイトを作ってみるといったものもあるので、英語も一緒に学習してみてはいかがでしょうか。

Codecademy

 

[PR] Webデザインで副業する学習方法を動画で公開中

ドットインストール

スクリーンショット 2016-04-27 13.36.37

3分程度の動画でWebデザインを学習することができます。メインはプログラミングの動画ですが、Webデザインも入門から実践まで学習できます。

好きな時間に自分のペースで進めたいという人におすすめです。

ドットインストール

 

Progate

90a04f3928de659f6eed0bbaf2feccf6-620x310

Codecademy同様、コーディングしながら進めていきます。Webデザインに必要なHTML/CSSは、初級編から上級編まで3つのコースが用意されているので初心者でも安心して学習できるはずです。

ある程度学習したら実践編で0からWebサイトを作ってみると良いかもしれませんね。

Progate

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

Schoo

スクリーンショット 2016-04-27 13.28.01

Web業界で有名なデザイナーやプログラマーの方が動画で授業をしてくれるオンライン上の学校です。1時間程度の動画で色々なテーマで学習できるので仕事終わりなどに利用してみると良いでしょう。

Schoo

 

SkillHub

スクリーンショット 2016-04-27 13.30.12

入門向けのWebデザイン学習サイトです。

Webサイトを制作する講座やWebデザインを身につける上で大事な知識などをまとめた基礎講座を無料で学習できます。そこまでレッスンも多くないので、普段忙しい人でも独学で進められるはずです。

Skillhub

 

1時間でできる無料体験!

codeprep

スクリーンショット 2016-04-27 13.31.05

オンライン上で書きながらWebデザインを学習できるサービスです。HTMLやCSSといった技術単体で学ぶこともできますし、アプリやWebサイトを実際に作りながら学習を進めることもできます。

PC一つあればできるので、独学に最適といえるでしょう。

codeprep

 

Web Design Recipes

スクリーンショット 2016-04-27 13.32.02

Webデザインなどに関しての記事をアップしているブログサイトになります。Webデザインに関するツールの操作方法やフロントエンド全般について細かく解説してくれているので、読み物としてはとても勉強になります。

ブックマークしておいて、ちょっとした時間に読んでみるとWebデザインについていろいろと知れると思います。

Web Design Recipes

 

ShareWis

スクリーンショット 2016-04-27 13.36.12

隙間時間に気軽に学習したいという人におすすめです。

ShareWisは、動画で色々な分野を学習できるサービスとなっています。自分の進み具合も一目で分かるので独学でやっていてもモチベーションを維持して進められるはずです。

ShareWis

 

lynda

スクリーンショット 2016-04-27 13.33.02

lyndaも動画学習サービスですが、特徴としてはレッスン数の多さです。Webコースだけ見てもWebデザイン、Webグラフィックス、レスポンシブWebデザインなど学習コンテンツは多岐に渡ります。

独学で進めるには多すぎて選べないというほど十分に揃っているので、ぜひスキルアップしていきましょう。

lynda

 

Adobe TV

スクリーンショット 2016-04-27 13.33.39

PhotoshopやillustratorなどAdobeツールに関する使い方の動画学習サイトです。上記で紹介した他のサイトではWebデザインの大枠や実際にサイトを制作しながら学習するものが多かったですが、Adobe TVではツールの具体的な使い方をしている動画が多いです。

より細かい部分にも凝ったり、ツールの使い方に慣れるためにはおすすめの学習サイトです。

Adobe TV

 

コリス

スクリーンショット 2016-06-08 12.19.31

毎日Webデザイン関連の記事が更新されているサイトです。

Webデザイナーが業務で使う中で便利なツールやライブラリなどを紹介してくれていますが、初心者でも大いに勉強になるはずです。

記事単位なので、少ない時間で読み終わることができ独学で進めたいという人には最適でしょう。

コリス

 

PhotoshopVIP

スクリーンショット 2016-06-08 12.22.38

PhotoshopVIPも上記のコリス同様毎日のように記事が更新されていきます。

写真素材やアイコン素材など最新のコンテンツに関しては、ここから得ている人も多くいるでしょう。勉強を進める中で何か成果物を作っているという方は参考になるサイトになるはずです。

PhotoshopVIP

 

いかがだったでしょうか。

今ではプログラミングだけでなく、Webデザインも学習コンテンツがどんどん増えてきています。何をやるにしても最初の一歩目は難しいものですが、独学からスタートさせられるので「興味はあるけどやったことがない」という人でも学習しやすいでしょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

初心者でも挫折せず進められると思うので、ぜひWebデザインを学習していきましょう!

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインを基礎から学びたい方はぜひご覧ください!

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する