読むだけでWebデザインを独学できる！絶対押さえておくべきサイト10選

WEBデザインを独学するにあたって、すぐに情報が変わってしまうWEB業界では書籍での勉強に限界があります。

そのため、WEBサイトから情報を得ながら勉強できるようにしておくことが重要です。
無料でWEBデザインを学ぶことができるサイトをまとめて紹介します。

 

WEBデザインの全体がわかる記事 ×３

①ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７｜commte blog

あらゆる言語やサーバー、画像制作などWEBデザインに関連する情報を網羅した記事です。WEBデザインを勉強したいと思っている人は必読の記事です。

②WEBデザイナーの仕事内容| 職業情報サイトCareer Garden

WEBデザインって何をするの？WEBデザイナーになるには？といった初心者にありがちな疑問を一気に解決してくれるサイトです。

③HTML/CSS最短勉強法！素人が5日でWebサイトをデザインするためにやったこと｜Monosyブログ

HTML/CSSの勉強法から配色などのデザインまで、実際に素人だった方が5日でWEBサイトを作るためにやった最短勉強法が解説されています。

HTML/CSS/JavaScriptがわかる記事 ×３

①プログラミングを勉強したい人は、まずは「HTML・CSS・JavaScript」から始めよう｜Via career

厳密にはHTMLはマークアップ言語、CSSはスタイルシート言語、JavaScriptはスクリプト（簡単なプログラミング）言語で、この３つを使えば簡単にWEBサイトやWEBアプリが作れます。この記事では、それぞれの役割とはたらきをわかりやすく説明しています。

②HTML5とは何かを簡単にまとめてみた | Yahoo! JAPAN Tech Blog

HTML5とは、これまでのHTMLに様々な機能が追加された最新バージョンです。HTML5ではそれまで実装するのが難しかった機能を簡単に使えたり、いままでFlashが必要だったアニメやアプリケーションがHTML5だけで作れてしまいます。実際にどのようなコードが書かれるのかが解説されています。

③htmlコーディングの勉強方法とコーディング練習用デザインの配布｜知って得する×遠まわりしないホームページ制作＆運用講座

WEBデザインの概要がわかったら、実際にコーディングをしてみるのが一番の上達法です。この記事では、実際のサイトを作る練習問題が配布されています。実際に一つのサイトを完成させることができたら、WEBデザイン初心者脱出の第一歩になります。

スマホサイトやレスポンシブデザインがわかる記事 ×２

 

①初心者も分かる！レスポンシブ・デザインの作り方｜Syncer
レスポンシブデザインの概要と作り方が解説されています。実際のサンプルデモがあるので、初心者でも簡単にレスポンシブデザインのサイトを作り始めることができます。

 

②スマートフォンサイトのHTMLコーディングメモ12個｜LIG inc.

 

参考になるギャラリーサイト ×２

①ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集

有名なサイトの配色を解説しているサイトです。とても勉強になります。

縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG

記事ではありませんが、ハイクオリティなデザインのサイトを検索できるギャラリーサイトです。

例えば「フラットデザイン」と検索すれば、フラットデザインのサイトが一覧で表示されるので、実際に見てみるだけでもかなり勉強になります。すごいサイトを見ているとモチベーションも上がります。

まとめ

以上のサイトに目を通したうえで、実際に自分のサイトを作るなどコーディングを実践することですぐにWEBデザインを独学できます。

WEBはとても奥が深いので、一度最初の壁を越えてしまえばどんどん上達していきます。

また、WEB業界では上手に情報収集ができることもスキルの一つですので、このようなまとめを活用して新しい情報を集めましょう！