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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

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

 

Webデザインとは

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

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

  • HTML/CSS
  • Sass/Compass
  • Photoshop
  • Illustrator

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

 

Schoo

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

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

Schoo

 

SkillHub

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

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

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

Skillhub

 

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デザインを基礎から学びたい方はぜひご覧ください!