独学でお金をかけずにWebデザインをマスターしたい、という人向けに、プロのWebクリエイターの視点から選んだおすすめの本や無料で学べるプログラミングサイト「ドットインストール」の紹介をします。
初心者向けの本は、初心者でも挫折せず、かつWebデザインを勉強するのに必要なものを網羅して説明しているものを選びました。
当サイトで人気のプログラミングスクール
- TechAcademy
（オンラインで好きな時間に学べる）
- DMM WEBキャンプ
（3ヵ月でRubyエンジニアに）
- CodeCamp
（オンラインなのにマンツーマン指導。300社以上の大手IT企業が社員研修に導入する質実ともに評判が高い）
ドットインストール
「ドットインストール」は「プロゲート」と並んで有名な無料で学べるオンラインプログラミングサイトですが、プロゲートはWebデザインを勉強できません。プログラミングに特化しているのでエンジニア向けです。
ドットインストールはデザインからWebサイトを作る流れを一通り学べるので、Webクリエイターをめざすならドットインストールで勉強し、プラスアルファとして書籍で勉強してください。
ドットインストールのデメリット
ただし、正直にいうと未経験の初心者がいきなりドットインストールから始めると、かなりの高確率＆早い段階で挫折すると思います。
というのは、致命的なデメリットがあるからです。
もともとIT業界で働いていて、なんとなくコードはわかるよ、ちょっとやったことあるよ、という人じゃないとついていけないと思います。
また、ドットインストールの主催者さん自ら仰っていますが、「難しくて面倒なことは省き、プログラミングの楽しさを知ってもらうことに注力した」とのことで、初心者にとって「え？なんで？」というポイントが多すぎるのです。
頭の中に「？？？」が並ぶと、脳が思考停止してわからなくなっちゃうと思います。
「シノゴの言わず、こう書けばいいんだよ！」的な雰囲気で進んでいくので、「なぜそうなるのか」ということを順序立ててわかりたい、という人には不向き。
理解せずにただ右から左に流すだけでは本当に理解できるはずがない、というのが私の意見です。
ただし、有料会員は月額980円ですし、学習期間の制限はないので（お金さえ払っていれば）、速度の調整や文字起こしを読むことで理解しやすいのかな、とも思います。
Webデザイナーのためのおすすめ良書
Webデザイナーをめざすあなたにおすすめの本をご紹介します。
HTML&CSS
まずは基本のHTMLとCSSをガッツリ覚えましょう。CSSを覚えてしまうと、すべてのデザインの配置は楽勝です。どんな複雑な配置もできるようになります。
いちばんよくわかるHTML5&CSS3デザインきちんと入門
Webサイトのファイル・フォルダ構造など、独学と意外と身につかずにそのまま進んでしまう人が多いなか、現場でも通用する作り方できちんと書かれています。
今後はSEOの観点からもモバイルファースト×レスポンシブデザインは必須です。フレックスボックスの使い方も書かれているので、最新のWeb制作を初心者向けのレベルでがっつり勉強できます。サンプルコードあり。
HTML＆CSSとWebデザインが1冊できちんと身につく本
サンプルコードもあり、ステップbyステップで学べます。HTML5とCSS3を採用していて、プロの現場でも使う基本レイアウト4パターンが習得できます。フルスクリーン、シングルカラム、２カラム、グリッドレイアウト、マルチデバイス対応ページ制作などが学べます。この本でガッツリ学んでポートフォリオを作りましょう。
ドットインストール
ドッとインストールではHTMLの基本を全15回に渡って勉強できます。開発環境はAtomを使っていますね。Dreamweaverがなくても大丈夫です。CSSは、プロの現場でも良く使うbox-shadowやborder-radiusなども学べます。これ全部、やってください。
- HTML/CSSの学習環境を整えよう [Windows編] (全4回)
- HTML/CSSの学習環境を整えよう [macOS編] (全4回)
- HTML入門 (全15回)
- CSS入門 (全17回)
- Firebaseでウェブサイトを公開してみよう (全9回)
- HTML基礎文法入門 (全30回)
- CSS基礎文法入門 (全37回)
- 実践！ウェブサイトを作ろう (全16回)
- CSSで吹き出しを作ろう (全8回)
Google ディベロッパーツール
プロの現場で使っているのがGoogleディベロッパーツール。Google ChromeでチェックしたいWebページを表示し「F12」キーを押すと表示されます。Webサイト開発時にはGoogleディベロッパーツールは必須といってもいいほど使い倒すので、HTMLとCSS勉強時に並行して利用し覚えてしまいましょう。
使い方はこちらのサイトが詳しくおすすめです。
プログラミング関連
Web制作の現場で使うjQueryデザイン入門
とりあえず、Webサイトを作れるようになるにはHTMLとCSSが一番重要ですが、Wordpressも作れる、jQueryも使えます、というなら未経験のあなたでも面接に通る可能性大です。
ただし、Wordpressでオリジナルテーマをつくるにも、HTMLとCSSできちんと作れるようにならないと作れません。いきなりWordpress！なんて思っても、PHPでつまづいてジエンドになるので、初級者はHTML×CSSをマスターしてから勉強しましょう。
ドットインストール
ドットインストールでもjQueryのコースがあります。動画で学べるのでわかりやすいですね。
WordPress
ひととおりHTMLとCSSでデザインからオリジナルWebサイトが作れるようになったら、それを元にWordpressテーマを作れるようになりましょう。
ドットインストール
サーバー契約しなくても、ローカル（自分のPC）にサーバー環境を構築してWordpressをインストールできます。ローカルでのサーバー構築は、仕事をするようになっても必要な知識なので覚えておきましょう。
独学のデメリットを回避する方法
独学のデメリットは、「つまづいたときに頓挫してしまう」「毎日勉強できずにコードを忘れてしまう」などです。そのデメリットは、最終的なゴールを設定し、計画的に勉強をすすめることで回避できます。
学校に通っていると思って、半年間でスケジュールを組みましょう。
| 1ヶ月目： | Photoshopでデザインを作成 |
|---|---|
| 2ヶ月目： | ドットインストールでHTMLとCSSをマスター |
| 3ヶ月目： | HTML5とCSS3をマスター。4レイアウト作れるようになる |
| 4ヶ月目： | レスポンシブデザインサイト制作 |
| 5ヶ月目： | jQueryをマスター |
| 6ヶ月目： | オリジナルWordpress作成＆ポートフォリオ作成 |
こんな感じで、ひと月に何をマスターするか決め、そこに集中して勉強してください。
独学が難しいと感じたら、迷わずスクールに通おう
Webクリエイターになるための大きなポイントは、未経験からWebデザイナーとして就職するまでの勉強期間をギュっと短縮して集中して終わらせることです。
もし、ここで紹介した独学向けサイトや本でもよくわからない、難しい、と感じるなら、迷わずスクールに通って効率よく勉強しましょう。
Webデザイナーの勉強は、けして難しいものではありません。独学で「難しい」と感じて諦めてしまうのは非常にもったいないです。
Webデザイナーのためのスクールは、他業種と違って短期で習得できるのが特徴です。３ヵ月～6カ月の勉強期間があれば大丈夫です。
独学は無料ということだけがメリットで効率が悪く、ネット上に転がっている古いコードで覚えてしまうなど、デメリットがあるので注意してください。
おすすめのWebデザインスクールをまとめた記事をご紹介しておきます。
余談
HTMLとCSSは、サクっと集中して覚えるのがいいです。Webデザインではとても重要な部分なのでしっかり覚える必要がありますが、何カ月もかけて覚えるレベルのものではありません。
HTMLとCSSをマスターしたら、HTML5とCSS3でレスポンシブサイトも作れるようにし、最終的にはオリジナルのWordpressテーマも作れるようになりましょう。
そこまでマスターするのに6か月間程度を目標にするといいでしょう。
難しいようだったら、スクールに通うことも検討してみてください。