web制作を始めたいんだけど、オススメの教材ある？
Progateは終わったけど、次に何をやればいいの？
挫折しない教材を選びたい
今回はこのような疑問に答えます。
結論から言うと1冊目の教材はHTML&CSSの教材がオススメです。
オススメの教材の紹介
次にやるべきこと
「web制作」はプログラミングブームで流行っている副業の一つですが、
- 在宅でできる
- 副業に向いている
- プログラミングの中でも比較的簡単
- 個人でもクラウドソーシングで案件をとれる
などの理由から現在も人気の副業です。
最近では「WEB制作 オワコン」という話も出てきていますが、半年から一年間の期間しっかりと力を付ければ全然仕事は取れるので安心して学習してください！
自己紹介をしておくと、僕は現在大学生で2020年から1年以上web制作を勉強してきましたShinと申します。
僕は参考書とUdemyの映像授業で勉強してきたのですが、スクールに通わなくても案件をとることができました。その過程の中で、20冊以上の「web制作」に関する教材に触れてきた経験をもとに「この参考書だったらもっと早く理解が深まっていたな」「使い勝手がよかったな」という参考書を紹介していきます。
ぜひ最後までご覧ください。
なぜHTML&CSSの教材をオススメするのか
② ほかのスキルと比べて難易度が低いから
③ 基本的なwebサイトはHTMLとCSSを勉強すれば作れるから
このあたりが理由です。
HTMLとCSSは厳密にいうとプログラミング言語ではないこともあって操作が単純なことから挫折しにくいという特徴があります。
その分できることも少ないですが、プログラミング言語を学習するときに拒絶反応を起こしにくくなるので、準備運動として学ぶには最高の言語です。
webサイトを作るときにはプログラミング言語としてJavascriptやPHPを学習する必要があります。
詳しくは1分でわかる！web制作で無双するのに必要なスキル[完全版]で解説していますが、特にデザイン面ではCSSが主体になるので「制作」というだけあって重要な要素になります。
オススメの教材の紹介
今回紹介する本の共通点として
- 分かりやすい（読みやすく、図解が多い）
- デザインが学べる
- 基本的なHTML＆CSSの操作が分かる
- サイト設計やプログラミングを始めるまでの設定について詳しい
- そのほか知っておくと便利な情報が多い
- 出版が最近（情報が新しい）
などがあります。
僕を含めて、多くの人は参考書の前にProgateの学習をオススメしていますが、「progate」の学習範囲を網羅していることや知っておくと視野が広がる情報がたくさん載っているので、1冊手元に置いとくと学習がスムーズに進みます。
もちろん、掲載されている内容の一つ一つは検索すれば出てくる場合が多いですが、「どうやって検索すればいいかわからない…」状態が想定されるので、視野を広げる意味でも参考書をオススメしています。
オススメの参考書3選
| 見やすさ（図を使った説明が多いか） | ５ |
| わかりやすさ | ４ |
| 網羅性 | 3.5 |
| デザイン面の学習 | 3.5 |
| 総合 | 4.0 |
2020年に出版された書籍で、最近の「flexbox」についての解説や以前まで使われていた「float」の概念まで網羅している書籍は少ないので、これからweb制作の学習を始める人にはオススメです。
・イメージしながら学習を進めたい人
・最新のHTML&CSSを勉強したい人
| 見やすさ（図を使った説明が多いか） | ３ |
| わかりやすさ | ４ |
| 網羅性 | 4.5 |
| デザイン面の学習 | 4 |
| 総合 | 4.0 |
この書籍は「HTML&CSSに関する情報が一番網羅されている」印象です。
具体的には「疑似クラス」の説明やデザイン面での説明が細かく説明されているなど、「1冊目」の書籍の中では群を抜いて情報量が多いです。
ここに、現場で使えるテクニックやデザインについての使用例なども書かれているので、より実践的な1冊になります。
ただ、情報量が多いために活字が多いこと・初心者向けにしては扱う範囲が広いことなどから万人受けする教材ではないかなーという印象です。
オススメできる人は
・活字ベースの教材に抵抗がない人
・一冊からより多くの学習をしたい人
です。
| 見やすさ（図を使った説明が多いか） | 4 |
| わかりやすさ | ４ |
| 網羅性 | 3.5 |
| デザイン面の学習 | 3 |
| 総合 | 3.5 |
基本的なHTML&CSSの学習に加えて、サイト設計を淡々と説明している教材です。
・癖のない教材で勉強したい人
僕が一番オススメする参考書
3冊もの教材を紹介しましたが、僕が一番よかったと思う参考書は今のところ1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]ですね。
理由としては以下の通り。
・著者がこの参考書の解説をyoutubeで公開している（twitterも）
・2冊目（中級者向け）の書籍も同じ著者が出版しているので、親和性が高い
・情報が新しい
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]を執筆しているのは、webクリエイターボックスに所属しているMana（@chibimana）さんです。
Manaさんは現役のwebデザイナーで、その経験をもとに書籍を出版されていますが、わかりやすい！！
更にyoutubeで、1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]を分野ごとに解説しているので、わからない部分も解決しやすいので挫折率を下げられます。
次に紹介する書籍は、同じくManaさん執筆の教材ですが、この教材は「2冊目」としてオススメしています。
アイディアから、多くのwebサイトで使われている文法まで、仕事レベルまで網羅している教材なので、興味のある方は見てみるとよいのではないでしょうか。
ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座／Mana【3000円以上送料無料】
まとめ
② CSSの入門を学ぶ
③ HTMLとCSSを使ってカフェのポートフォリオサイトを作る
次にやるべきこと
ここから先はHTML&CSSの基礎が終わった人向けですが、
その次にやるべきことは
- HTML&CSSの応用
- CSS設計
- Sass
の3つがオススメですね。
HTML&CSSを幅広く使えるようにして、誰が読んでもわかるコードにし、更にはコードを素早く書けるようにするのが目的です。
よく、「HTML&CSSのコードが書けるようになったらJQueryをやれ」という人がいるのですが、地盤が固まっていない状態で新しい言語に触れるとつまらないところで挫折しやすくなるのでオススメしません。
僕自身はSassの存在すら知らなかったですし、インターネットで公開されているサイトで結構使われていたので苦労しました。
CSS設計に関しては、コードを書く際のルールみたいなものなので、収益化するうえでは持っていなければいけないスキルです。
たまに自己流のコードの書きかたをしている方もいるのですが、ルールを勝手に決めているので他人が見ると分かりにくいですし、コードから構築が分かりにくいです（笑）。
SassやCSS設計については1分でわかる！web制作で無双するのに必要なスキル[完全版]で解説しています。
参考書選びについては別の記事で解説しているので、そちらをぜひ。
