ガチでおすすめするWeb制作学習教材と学習方法【初学者必見】

web制作の学習を始めたいけどどこから始めたらいいかわからないな。初心者はまずどこから始めるべきか教えてください！

今回はこういった疑問について解説していきます。

　本日の内容

この記事を書いてる僕は普段web制作をしながらお仕事してます。またフロントエンドのエンジニアとして働いているので一定の信頼担保になるかと思います。

学習のすすめ方

先に結論です。

 web制作学習の目的を決める

まずweb制作の学習をする目的をはっきりさせます。これがないと途中で目的を見失って紆余曲折したり挫折してしまうためです。

• web制作をして副業で稼ぐ
• 自分で好きなサイトを作る
• 会社で必要だから

 到達日を決める

目的を決めたら達成までのスケジュールを立てていきます。より明確に目標に近づくことができます。

平均して簡易サイトを作れるまでの学習時間は300〜1,000時間と言われてます。（個人差あり）
自分の普段の学習時間で単純計算して割り出しましょう。

 適切な情報収集をする

基本的には扱う言語の「公式ドキュメント」をベースに情報収集します。公式ドキュメントは辞書のようなものでその言語の情報が網羅されています。

こちらの公式ドキュメントは情報が多い分、取捨選択が難しい面もあります。
全てを見るというよりは、サイトを作る時につまづいたら参照するといった逆引きで検索する方が効率的です。

 取り組む・継続する

前提条件が揃った段階で早速取り組み始めます。ここが最も重要で大変なフェーズにな流と思います。

つまづいた時は先ほどの公式ドキュメントを参照しながら次に紹介するおすすめ教材などを活用して学習していきます。

おすすめ教材の紹介

書籍・YouTube・Udemy・webサービス・ネット記事の種類で紹介します。

　書籍

4冊の合計：11,264円

書籍は

• デザイン基礎、デザインパターンの学習面で2冊
• 現場で必須となるCSS設計の方法をまとめた本で1冊
• WordPressの制作時に必要な知識習得に1冊

で合計4冊になります。

特に最初は売れ筋の本に目がいきたくさん買ってしまうなどの沼にはまりがちなので、不安な人はぜひ書店に行って自分の目で確かめて購入検討してください。

この4冊は、普段から僕も使っていてどれも優良書籍です。WordPressの本に関しては、後に紹介するYouTubeとUdemyでカバーできるので無理に購入はしなくて問題ありません。

　YouTube

こちらはフリーランスエンジニアのアキユキさんという方で、主に

• XDを使ったwebデザイン
• WordPress構築の方法
• フリーランスエンジニアとしての経験談
• その他webデザインで使えるテクニック

をとても細かく紹介されています。どれもためになる動画でもちろん無料で視聴可能なのでまずはアキユキさんの動画を見るところからはじめることをおすすめします！

書籍やUdemyなどは安いとはいえお金がかかるので、抵抗感がある人はYouTubeを有効活用するといいです。

　Udemy

合計：セールで3,200円くらい

Udemyは頻繁にセールを開催してるため、そのタイミングで買います。

この2つの教材は僕がweb制作を学習する際に大変参考になった教材です。わかりやすく網羅的に紹介されているので今でも復習として使っています。

Udemyのセールは24,000円ほどの教材なども含めほぼ全ての教材が1,600円前後の値段で買えるため、たくさん教材を買いたくなりますが、厳選して選んだ教材を徹底的にマスターした方が効率的です。

　Webサービス

Progateとドットインストールは無料版で体験してみて、いいなと感じたら有料版を利用します。どちらも月額1,000円ほどなので、1〜2ヶ月だけ利用すれば十分です。

何度もやる必要はないので課金のしすぎには注意が必要です。

MENTAは、現役のエンジニアにサポートしてもらいながら学習ができるサービスです。月に1万〜2万円ほどで、優秀なエンジニアのサポートをもらいながら学習ができます。

メンターさんによってサービス内容や値段は異なるので相談しながら見つけていきます。

　ネット記事

コードステップは無料で模写サイトの制作が学習できるサイトです。開発者は現役にエンジニアなので内容がとてもわかりやすく、ソースコードなども公開されているので学習に最適です。

動くWebアイディア帳はjQueryを使ったいろいろなWebデザインのアイディアがまとまったサイトで、自由に利用が可能です。リッチなサイトに仕上げる時に役立ちます。

muuuuu.orgはおしゃれなサイトが豊富に紹介されているメディアでWebデザインの学習をする時に役立ちます。デザインセンスは、どれだけサイトをみて考えたかによるので日頃からおしゃれなサイトをたくさん見て自分のアイディアの引き出しを増やしていきます。

Font Memeはwebフォントを豊富に紹介してるサイトです。フォントは見る人の印象を大きく変える役割があるので定期的にフォントを見て知識を増やしていきます。

効果的な学習方法

流れは以下の通りです。

たくさんアウトプットする

一番重要なことはアウトプットすることです。
初めは1行でも多くコードを書くことを意識します。学習教材はあくまで「コードを書くために必要な知識を集めるため」

と考えます。インプットは必要なタイミングでとっていくことを心がけましょう。

• 好きな画像をブラウザに10枚表示する
• このサイトのトップページの模写をする
• 友人に自分で作ったサイトを公開すると約束する

など、自分なりに小さな目標を作りながら学習を進めていきます。

リファクタリングをする

一度書いたコードは、日を開けて修正（リファクタリング）します。

• スタイルがあたってないクラスがある
• プロパティが重複してる
• まとめて記述できる箇所がある

最初のうちは中々きれいなコードは書けません。アウトプットする中でコーディングの感覚をつかみ、インプットする中でどのようなコードがきれいなコードなのかを学習していきます。そうして修正を重ねていくうちにスキルの高いコーディングができるようになります。

面倒くさいと感じるところですが、1つ1つこなしていきましょう。

日頃からたくさんのデザインに触れる

先ほど紹介したmuuuuu.orgなどのデザインサイトで普段からどのようなデザインがあるか情報収集をします。

毎日10分取り組み、良かった点、いまいちと思った点、その理由などを自分なりにまとめるだけでも大きな差が出てきます。

初学者はデザインのストックがないため少ない時間でも日々デザインに触れることをしていくことで知識が増えていきます。

デザインの意図を考える習慣をつける

デザインに触れていく中で、そのデザインがなぜそうなっているのかを自分なりに仮説を立てます。

• その色にした意図は？
• その配置にした意図は？
• このフォントサイズはなぜ
• ここのあしらいはどういう理由でそうなってるのか
• このCTAはどうして目立つように設計されてるのか

デザインは1つ1つが意図を持って作られています。その意図を学習した経験から照らし合わせていきます。

デザインの基礎である・近接・整列・反復・コントラストを意識するだけでも今まで以上にデザインの知識は増えてきます。
ぜひ日頃からデザインに触れ、そのデザインの意図を考察するクセをつけていきましょう。

学習する際の注意点

下記の点に気をつけて学習します。

　勉強のための勉強は無意味です

本や教材を買って満足するのはとても危険です。アウトプットありきで学習教材は購入検討すべきです。

そのため作りたいものや得たいスキルを明確にしてから買うようにします。「〇〇でおすすめだったから」「なんとなくよさげだから」などの理由で購入してしまうとインプット過多になり学習効率が下がる確率が高まります。

　インフルエンサーの情報には慎重に

web制作の学習する上でインフルエンサーの情報は時に有益で、時に初学者には危険な場合もあります。
自分に知識がないためについつい大金を使ってしまうこともあります。

もちろん納得すればどんなものでも買って問題ないです。
あくまで時間とお金は有限で、うまく選択と集中をしていこうということを念頭に置いて学習しましょう。

　あきらめない

ここまできたら後は結果が出るまで粘り強く継続するのみです。

一人で不安な人はconnpass やSlackなどのコミュニティを探して一緒に学習できる環境を利用するのも1つの手です。

頑張りましょう！

まとめ

　学習手順

　おすすめ教材

焦らず一つずつ確実にクリアしていきましょう。目安は半年〜10ヶ月間、時間で言うと300時間〜1,000時間です。

例）1日3時間学習の場合

• 300時間：100日　約3ヶ月
• 500時間：167日　約5ヶ月半
• 1,000時間：333日　やく1年間

　効果的な学習方法

　学習の際の注意点