2023年9月17日web制作の学習を始めたいけどどこから始めたらいいかわからないな。初心者はまずどこから始めるべきか教えてください!今回はこういった疑問について解説していきます。学習する時の注意点この記事を書いてる僕は普段web制作をしながらお仕事してます。フロントエンドのエンジニアとして働いているので一定の信頼担保になるかと思います。web制作学習の目的と目標達成日を決める適切な情報収集をする取り組む継続するweb制作学習の目的を決めるまずweb制作の学習をする目的をはっきりさせます。これがないと途中で目的を見失って紆余曲折したり挫折してしまうためです。web制作をして副業で稼ぐ自分で好きなサイトを作る会社で必要だから到達日を決める目的を決めたら達成までのスケジュールを立てていきます。明確に目標に近づくことができます。平均して簡易サイトを作れるまでの学習時間は300〜1,000時間と言われてます。(個人差あり)自分の普段の学習時間で単純計算して割り出しましょう。適切な情報収集をする基本的には扱う言語の「公式ドキュメント」をベースに情報収集します。公式ドキュメントは辞書のようなものでその言語の情報が網羅されています。開発者向けweb技術HTML公式ドキュメントCSS公式ドキュメントJavaScript公式ドキュメントこちらの公式ドキュメントは情報が多い分、取捨選択が難しい面もあります。全てを見るというよりは、サイトを作る時につまづいたら参照するといった逆引きで検索する方が効率的です。取り組む・継続する前提条件が揃った段階で早速取り組み始めます。ここが最も重要で大変なフェーズにな流と思います。つまづいた時は先ほどの公式ドキュメントを参照しながら次に紹介するおすすめ教材などを活用して学習していきます。書籍・YouTube・Udemy・webサービス・ネット記事の種類で紹介します。現場で必須となるCSS設計の方法をまとめた本で1冊WordPressの制作時に必要な知識習得に1冊で合計4冊になります。最初は売れ筋の本に目がいきたくさん買ってしまうなどの沼にはまりがちなので、不安な人はぜひ書店に行って自分の目で確かめて購入検討してください。この4冊は、普段から僕も使っていてどれも優良書籍です。WordPressの本に関しては、後に紹介するYouTubeとUdemyでカバーできるので無理に購入はしなくて問題ありません。Web制作チャンネルこちらはフリーランスエンジニアのアキユキさんという方で、主にXDを使ったwebデザインWordPress構築の方法フリーランスエンジニアとしての経験談その他webデザインで使えるテクニックをとても細かく紹介されています。どれもためになる動画でもちろん無料で視聴可能なのでまずはアキユキさんの動画を見るところからはじめることをおすすめします!書籍やUdemyなどは安いとはいえお金がかかるので、抵抗感がある人はYouTubeを有効活用するといいです。まこと(ともすた)合計:セールで3,200円くらいUdemyは頻繁にセールを開催してるため、そのタイミングで買います。この2つの教材は僕がweb制作を学習する際に大変参考になった教材です。わかりやすく網羅的に紹介されているので今でも復習として使っています。Udemyのセールは24,000円ほどの教材なども含めほぼ全ての教材が1,600円前後の値段で買えるため、たくさん教材を買いたくなりますが、厳選して選んだ教材を徹底的にマスターした方が効率的です。WebサービスProgateドットインストールMENTAProgateとドットインストールは無料版で体験してみて、いいなと感じたら有料版を利用します。どちらも月額1,000円ほどなので、1〜2ヶ月だけ利用すれば十分です。何度もやる必要はないので課金のしすぎには注意が必要です。MENTAは、現役のエンジニアにサポートしてもらいながら学習ができるサービスです。月に1万〜2万円ほどで、優秀なエンジニアのサポートをもらいながら学習ができます。メンターさんによってサービス内容や値段は異なるので相談しながら見つけていきます。Memeコードステップは無料で模写サイトの制作が学習できるサイトです。開発者は現役にエンジニアなので内容がとてもわかりやすく、ソースコードなども公開されているので学習に最適です。動くWebアイディア帳はjQueryを使ったいろいろなWebデザインのアイディアがまとまったサイトで、自由に利用が可能です。リッチなサイトに仕上げる時に役立ちます。muuuuu.orgはおしゃれなサイトが豊富に紹介されているメディアでWebデザインの学習をする時に役立ちます。デザインセンスは、どれだけサイトをみて考えたかによるので日頃からおしゃれなサイトをたくさん見て自分のアイディアの引き出しを増やしていきます。Memeはwebフォントを豊富に紹介してるサイトです。フォントは見る人の印象を大きく変える役割があるので定期的にフォントを見て知識を増やしていきます。流れは以下の通りです。アウトプットするリファクタリングをする日頃からたくさんのデザインに触れるデザインの意図を考える習慣をつけるたくさんアウトプットする一番重要なことはアウトプットすることです。初めは1行でも多くコードを書くことを意識します。学習教材はあくまで「コードを書くために必要な知識を集めるため」と考えます。インプットは必要なタイミングでとっていくことを心がけましょう。好きな画像をブラウザに10枚表示するこのサイトのトップページの模写をする友人に自分で作ったサイトを公開すると約束するなど、自分なりに小さな目標を作りながら学習を進めていきます。リファクタリングをする一度書いたコードは、日を開けて修正(リファクタリング)します。スタイルがあたってないクラスがあるプロパティが重複してるまとめて記述できる箇所がある最初のうちは中々きれいなコードは書けません。アウトプットする中でコーディングの感覚をつかみ、インプットする中でどのようなコードがきれいなコードなのかを学習していきます。して修正を重ねていくうちにスキルの高いコーディングができるようになります。面倒くさいと感じるところですが、1つ1つこなしていきましょう。日頃からたくさんのデザインに触れる先ほど紹介したmuuuuu.orgなどのデザインサイトで普段からどのようなデザインがあるか情報収集をします。毎日10分取り組み、良かった点、いまいちと思った点、その理由などを自分なりにまとめるだけでも大きな差が出てきます。初学者はデザインのストックがないため少ない時間でも日々デザインに触れることをしていくことで知識が増えていきます。デザインの意図を考える習慣をつけるデザインに触れていく中で、そのデザインがなぜそうなっているのかを自分なりに仮説を立てます。その色にした意図は?その配置にした意図は?このフォントサイズはなぜここのあしらいはどういう理由でそうなってるのかこのCTAはどうして目立つように設計されてるのかデザインは1つ1つが意図を持って作られています。その意図を学習した経験から照らし合わせていきます。コントラストを意識するだけでも今まで以上にデザインの知識は増えてきます。日頃からデザインに触れ、そのデザインの意図を考察するクセをつけていきましょう。下記の点に気をつけて学習します。インプットに偏らないたくさん教材を買わない、利用しないむやみに騙されない諦めない勉強のための勉強は無意味です本や教材を買って満足するのはとても危険です。アウトプットありきで学習教材は購入検討すべきです。そのため作りたいものや得たいスキルを明確にしてから買うようにします。「〇〇でおすすめだったから」「なんとなくよさげだから」などの理由で購入してしまうとインプット過多になり学習効率が下がる確率が高まります。インフルエンサーの情報には慎重にweb制作の学習する上でインフルエンサーの情報は時に有益で、時に初学者には危険な場合もあります。自分に知識がないためについつい大金を使ってしまうこともあります。納得すればどんなものでも買って問題ないです。時間とお金は有限で、うまく選択と集中をしていこうということを念頭に置いて学習しましょう。あきらめないここまできたら後は結果が出るまで粘り強く継続するのみです。Slackなどのコミュニティを探して一緒に学習できる環境を利用するのも1つの手です。Meme焦らず一つずつ確実にクリアしていきましょう。目安は半年〜10ヶ月間、時間で言うと300時間〜1,000時間です。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。