学習・作業効率アップ間違いなし！駆け出しエンジニアにおすすめのWebサイト14選！
どうもよしむです。
プログラミングの勉強していると「えぇ…この情報もっと早く知りたかった…！！！」と思うことって結構ありませんか？（僕はめちゃめちゃあります涙）
他の駆け出しエンジニアさんたちが僕と同じ悔しさを味合わないように、今回は「駆け出しエンジニアに教えたいお役立ちサイト」をまとめてご紹介させていただきます！
HTML&CSS入門 Webデザインをイチから学ぼう
サルワカさんのWebデザイン入門では、オシャレなWebサイトを作るための知識を非常にわかりやすく解説してくれています。（各ページがめちゃめちゃ見やすくて感動しますよ！）
「Webサイトの仕組み」から「パンくずリストの作り方」まで、超基礎知識～実践的なノウハウが幅広くまとまっているので、初心者であればあるほどおすすめしたいサイトです。
全部で30ステップになっており、1日1コンテンツずつやっていくと1ヶ月で終了します。プログラミング初心者の方は教材や技術本に課金する前の準備運動として是非やってみてはいかがでしょうか。
WEBデザインをはじめよう
Web制作界で圧倒的な信頼と実績を誇るLIGさんが公開しているWebデザイン入門コース。
※もしも「LIG？なにそれおいしいの？」という不届き者がいたらこの記事を読みましょう
WEBデザイナーを目指す人が学ぶべき内容が33記事にまとめられています。先程ご紹介したサルワカさんの記事同様、こちらも1日1記事やれば約1ヶ月で終了する計算。しかも無料。超おすすめです。
Web制作界で圧倒的な信頼と実績を誇るLIGさんがやってるWebデザイン入門コースがあるの知ってましたか？
▼WEBデザインをはじめようhttps://t.co/XsBqQlGdrU
WEBデザイナーを目指す人が学ぶべき内容が33記事にまとめられてて1日1記事やれば約1ヶ月で終了する計算！
しかも無料！これやるしかない！ pic.twitter.com/8UoaKogiym— よしむ@ 駆け出しエンジニアの役に立つことを書く愛妻家 (@yoshimu_play) 2020年2月1日
Progate
駆け出しエンジニアで知らない人はいないであろうProgate様。わざわざ紹介する必要もないと思いますが、万が一知らない人がいたら即登録することをおすすめします。
また、これまで紹介した2サイトをやってみて「そこまでプログラミング嫌いじゃないな…」（※注：「好き」「得意」である必要はありません。あくまで「嫌いじゃないかも」くらいのレベル感でOKです。）」と思ったら、即課金してください。月額980円でこれだけ内容が充実しているコンテンツは存在しません。
ただ、Progateは快適すぎるがゆえにハマりすぎるとその先のステップへ抜け出せなくなります。ここらへんは別途「Progate 勉強方法」などで調べて効率的に学習を進めていくことをオススメします。
Progateは「楽しい、安い、わかりやすい」と三拍子揃った最高の教材です！
ただ、Progateに慣れすぎると実際にエディタで模写を始めたときに勝手がわからず挫折しやすくなります。
なので「Progateで学んだことをエディタにも書いてみる」など早い時期からエディタに慣れる工夫をしておきましょう！— よしむ@ 駆け出しエンジニアの役に立つことを書く愛妻家 (@yoshimu_play) 2020年2月4日
Udemy
駆け出しエンジニアが最初に課金して学ぶなら圧倒的にProgateがオススメなんですが、少しプログラミングに慣れてきたらUdemyもオススメです。
Udemyは動画でプログラミングを学べるサービス。初心者から上級者まで多種多様なラインナップが揃っているので、あなたのレベル感やプログラミングを学ぶ目的に応じた講座を選ぶことができます。
また、「90%オフ！」などの特別セールをよく実施しているので大体1000~2000円くらいで4~5時間くらいの講座を購入できます。
ちなみにUdemyを使った勉強方法はこちらの記事が参考になりますよ。
「はじめて」でも簡単！Emmetの使い方とよく使うパターン集
コーディングに少し慣れてきたらEmmetを使って時短コーディングを目指しましょう。
特に独学者はショートカットキーやEmmetを疎かにする人が多い印象があります。変なクセが付く前に早めにマスターしてしまいましょう！
記述量が多くて面倒なタグなども一瞬で作成できるようになるので作業効率が半端なくアップします！Time is Money！
LP模写コーディング初心者におすすめの方法と無駄な練習
ProgateやUdemyで一通りの勉強を終えたら、サイト模写に入る人も多いはず。そんなときに読んでほしいサイトです。
HTML・CSSの模写の解説をしているサイトは多いんですが、「模写を通じて何を学ぶべきか」を書いているサイトは意外と少ないんですよね。
こちらのサイトは「LP模写を通じて学べき8つのポイント」「おすすめの練習教材」を紹介してくれてます。その他にも効率的にプログラミングを勉強するためのノウハウを惜しげもなく公開してくれてるので是非覗いてみてください。
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開
こちらもコーディングの練習に超役立つサイトです。
約140ページの参考書兼問題集になっており、まずは出題される問題に回答。その上で解説を読んで理解し、再度問題を解き直すという流れの教材です。（なんと演習用のPSD/XDファイルもドリルに含まれてるんですよ！）
筆者が実際に未経験デザイナーの採用をしてきた中で「こういう知識は早い段階で身に付けておいてほしい」と感じた採用担当者視点の内容がまとめられているのが特徴です。
コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）
簡単なLPを作るだけでも書くべきコードの量は膨大ですよね。ましてやWebサイトとなるとなおさら。
駆け出しのうちは理解を深めるために自分でコード書くのも大切ですが、慣れてきたらコピペで実装できるCSSデザインサンプルなども上手に活用していきましょう。すべて自分で手打ちしてたら時間がいくらあっても足りません。
こちらのサイトはボタン、リスト、見出し、リボン、引用、吹き出し、パンくずリストなどデザインサンプルが計250個以上まとまってます。どれもコピペだけで使えるのでどんどん活用して作業効率上げていきましょう！
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
Progateなどで言われた通りに命名してたときは気づかないけど、いざ自分で模写するときに困るのが「IDやclassの命名」です。これも変なクセがついちゃう前に、効率的な命名規則を学んでおくのがおすすめです。
命名について解説しているサイトはたくさんありますが、とりあえずは上記のものがわかりやすくてオススメです。地味かもしれませんが、複雑なコードを書くようになればなるほど命名は大切になってきますので必ず一読しておきましょう。
配色パターン見本40選：ベストな色の組み合わせを探せるツール
配色一覧をまとめているサイトは他にもありますが、「実際に使ったときにどういう見た目になるのか想像がしづらい」というものが多いんですよね。
その点、こちらのサイトは表示されている配色パターンをクリックするとサイドバーにその配色の使用イメージが表示される仕様になっているので使い勝手が良いです。
また、スマホにも対応しているのでレスポンシブデザインの確認にも便利な点も特徴の一つとなってます。
「配色ツールで色だけ並べられても、実際デザインで使うときのイメージが湧かない…」と悩んでいるあなた！
— よしむ@ 駆け出しエンジニアの役に立つことを書く愛妻家 (@yoshimu_play) 2020年1月23日
ぜひサルワカさんの「配色パターン見本40選」を使ってみてください！
気になる配色をクリックするとスマホサイトでの使用イメージが確認できて超便利なんですよ！https://t.co/exeq4L6X6s pic.twitter.com/UqZMIg51xn
フォントを見分けるために役立つ10のツール
サイト模写を始めると「え！このフォント素敵！でもフォント名がわからない…」みたいなことが出てきます。そんなときに使って欲しいのがこちらのサイト。
フォントを見分けるときに使えるおすすめツールが紹介されています。正直10個すべてを使いこなす必要はないので、いくつか使ってみて使いやすいものを自分が使いやすいものを探してみてください。
BLISK
レスポンシブデザインに悩まされている方におすすめのサイト。
画面表示をPC版スマホ版で並べて確認できるうえ、同時スクロールできるありがたすぎるブラウザ。同時にサクサク検証できて作業効率が半端なくアップします。
ランサーズ
言わずとしれたクラウドソーシングサイト。
もちろん自分で案件を獲得するために登録するのもいいんですが、実はコンペ式の案件ページがめちゃめちゃ勉強になります。詳しくはちづみさんの以下ツイートを参照ください。
定期的にランサーズのデザインのコンペ式の案件のページを見ていますが、ここめっちゃ勉強になります🤔提案しなくても提案作品を一覧で見ることができます。
— ちづみ (@098ra0209) 2019年9月28日
ワイヤーフレーム、デザインの意図、表現方法、発注者の依頼内容、選ばれる提案の傾向などを覗くことができます😃https://t.co/t6XZNNkBie pic.twitter.com/cJKMS6oiIJ
クラウドワークス
おすすめ理由はランサーズとほぼ同じです←
違いをあげるとすれば、ランサーズと比べると単価が安い案件も多いため、駆け出しエンジニアの実績作りにはオススメのサイトとなっています。
番外編
今回は勉強する際に便利なサイトやツールを紹介してきたんですが、「そもそもどのプログラミング言語勉強すればいいんだろう？」「プログラミング勉強したらどんな仕事ができるようになるんだろう？」という疑問をお持ちの方もいるはず。
そんな方は、一度プログラミングスクールの説明会やキャリア相談会に行ってみるのをオススメしてます。僕も最終的に通いはしなかったんですが、右も左もわからないときに説明を聞きに行ってとても参考になりました！
（さすがに有名スクールは無理に営業してくることもなかったですし、説明慣れしてるのでわかりやすいです。）
僕が実際に説明会に行ってよかったスクールをいくつか掲載しておきますので興味があれば是非行ってみてください！
TECH::EXPERT
デジタルハリウッド STUDIO by LIG
今回の記事が少しでもみなさまのお役に立てれば嬉しいです！ツイッターもやってますので是非フォローお願いします！
