新人Webプログラマの学習が捗るリンク集 #初心者

はじめに

この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。
新年度になりましたので、少し更新をしました。よろしくおねがいします。

ターゲット

この記事はこんな人に向けて書いています。

これからWebプログラマを目指す人
Webプログラマになったばかりの人
コーディングだけでなくデザインやマーケティングにも興味がある人
早く一人前のWebプログラマになりたいと思ってる人
つまりわたしのようなへっぽこのこと

学習が捗るリンク集

1. コーディングを身につける

▼まずはここから

何から始めて良いかわからない！新しい言語を学びたい！という方に。

ドットインストール https://dotinstall.com/: 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の声に癒されます。
Progate https://prog-8.com: UIがシンプルながらかわいらしく、エディタなどを自分で用意しなくてもブラウザ上で進められるのも魅力的。無料プランだとちょっと物足りないかもです。

▼もっと理解を深める

とりあえず入門編はクリアしたけど、まだまだ不安だ・・・という方に。

サルワカ https://saruwakakun.com/: 入門的な内容から、実践的なツールまで紹介されているサイト。画像付きでわかりやすい上に、記事自体のデザインも綺麗なので勉強になります。
Udemy https://www.udemy.com/ja/: 有料にはなりますがコンテンツが豊富かつハイクオリティなオンラインレクチャーです。実はまだ見たことがないので、オススメの動画があればぜひ教えてほしいです…。
LearnWebCode (Youtube): 有名どころが続いている中で、突然、個人的なオススメになりますが、こちらのチャンネルの「The 10days of Javascript」と「Git Tutorial」がめちゃくちゃわかりやすいです。ただし全編英語です。
このほかにも、Youtubeで検索すると思いがけず良い動画講座に出会えたりするので、自分の勉強している言語で検索してみるのも良いかも。

▼疑問や悩みを解決する

独学で進めていると必ずぶつかる疑問や悩み。偉大な先輩方に助けてもらいましょう。

Qiita https://qiita.com/: 同じ悩みを抱える仲間や、それを乗り越えた先輩方に出会えるサイト。
note https://note.mu/: テクノロジーやデザインのカテゴリがあるので参考になります。新しいサービスや機能のリリースなどを告知している企業さんの記事を読むのも勉強になります。
特にUI関連はとても良い記事がたくさん書かれているので通勤時などにゆっくり読むと良いかんじです。
→ 「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた
→ アプリUIデザインで使ってるツールまとめ。
→ 配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド
Teratail https://teratail.com/: Yahoo!知恵袋のITエンジニア特化版という感じ。自分で質問するのはちょっと・・・という方（私とか）は、過去の他の方の質問・回答を参考にするのも良いです。
Google https://www.google.com/: エラーが出たら、とりあえずコピペしてGoogle先生に聞けば大抵解決。日本語のサイトだとなかなか見つからないものも、英語のサイトだと一瞬で見つかったりもします。

▼とにかく練習あるのみ！（プレイグラウンド）

コーディングの練習って言語によっては環境を作る必要があったり、ローカルだとうまく動かなかったり、結構面倒だったりします。そんなときはこんなサイト。

CodePen https://codepen.io/: 「Create Pen」すると、特に登録などしなくても、HTML、CSS、JSとプレビューの枠が出てきます。若干重いのですが、他の人のコーディングを見てみたり、Qiitaに埋め込んでみたり、色々とできることは多い印象です。私はもっぱらCodePenを使ってます。
JSFiddle https://jsfiddle.net/: CodePenよりも老舗だそうです。個人的にはCodePenのほうが直感的に使えて好きですが、私の上司はこちらを使っているようです。
JSBin https://jsbin.com/: 今回この記事を作るにあたって知ったので、使ったことはないのですが、「動作が軽いからこっちが好きだわ」というご意見をよくお見かけしました。色々と使い比べるのが良いかもです。

2. 情報収集をする

▼情報に敏感になろう：IT・Webの最新情報を追う

プログラミング言語に限らず、デバイスやらOSやらブラウザやらとにかく変化が速いのがIT業界。常に最新の情報を追っていきたいものです。

TechCrunch Japan https://jp.techcrunch.com/: 最新のデバイスやサービスなどの情報が次々と記事になっていきます。全部読むというよりは、トレンドを追いつつ、興味のあるものだけピックアップして読むぐらいがちょうど良いです。
CNet Japan https://japan.cnet.com/: こちらもトレンドを追うのに役立ちます。ちょっと最近、広告が増えて来ているのが気になります…。私はTechCrunchとCNetはTwitterでフォローして、通勤中などにざっとチェックしています。
Web担当者Forum https://webtan.impress.co.jp/: 今日からでも使えそうな情報が色々載っているのが魅力的です。アンケートや統計なども載っているので、企画書を作るときに引用する裏付けデータ探しにも良いかもしれません。
ネットショップ担当者フォーラム https://netshop.impress.co.jp/: EC限定にはなりますが、とにかくネットショップのトレンドを追うにはぴったりです。
コリス https://coliss.com/: ウェブデザイナー向けの最新情報まとめブログ。期間限定セールなどのお得な情報も掲載。

▼情報に敏感になろう：マーケティングも忘れずに

もともとマーケティングや企画をしていたこともあり、エンジニアとして転職してからもこういった分野の情報はチェックするように心がけています。特にクライアントの競合他社の情報などは、常に入れておきたいところです。

宣伝会議 https://www.sendenkaigi.com/: 本屋さんで見たことがあるという人も多いかもしれません。雑誌も良いのですが、Webだと過去記事も含めて自分の興味の分野で絞れるので便利です。宣伝会議が運営する「AdverTimes」も面白い記事がたくさんあります。
MarkeZine（マーケジン） https://markezine.jp/: 会員登録（無料）が必要な記事も多いですが、「なぜこのサービスを作ったのか？」「なぜこの広告を作ったのか？」といったインタビュー記事が特に勉強になります。
日経電子版 https://www.nikkei.com/: 「日経電子のバーン！」でおなじみの日本経済新聞のWeb版。あの孔明も読んでるぐらいですから、読まないわけにはいきません。
Googleアラート https://www.google.com/alerts: Yahoo！ニュースならアプリ入れてるけど、Googleニュースは見ないわね…という方も多いかと思いますが、便利なのが通知機能。競合他社や気になるサービスなどのキーワードを登録しておくと、その日リリースされたニュースがまとめて届きます（設定方法は各自調べてネ）。

3. デザインする

▼素材を探す：フォント

フォントって見てるだけでワクワクしますよね。昔は個人サイトから、ちょっとずつダウンロードして、画像に埋め込んで…とかしてましたけど、気付いたらそんな時代じゃなくなってました。

Google Fonts https://fonts.google.com/: Webの勉強を改めて始めた時に一番びっくりしたのが、このGoogle Fontsの存在。おしゃれなフォントをダウンロードしなくてもライブラリで読み込める、しかも環境に依存せず表示されるって、すごく画期的だと思いました。
Adobe Fonts https://fonts.adobe.com/: Adobe CCを使っている人ならこちらも便利。一度は目にしたことがあるような有名なフォントも入っているので、見ているだけでテンションが上がります。

▼素材を探す：アイコン

アイコンも昔は個人サイトから…（以下同文）。

Font Awesome https://fontawesome.com/: 一部有料のものもありますが、よく使うアイコンをGoogle Fonts同様、ライブラリとして読み込むことができます。classが付いているので、CSSで色やサイズを変えられるのも便利です。
ICOOON MONO http://icooon-mono.com/: こちらはダウンロードして使うものですが、とにかく種類が豊富。デザイナーさんなら一度は使ったことがあると思います。バナーなどにポイントで使うとかわいいです。

▼素材を探す：写真

Webに載っている写真を勝手に使っちゃいけないんだよ、って今の小学校なら習うんでしょうか？でも、最近は商用フリーのサイトも増えて来ました。でも仕事で使うときは、一度上司に確認しましょう（多くの場合、すでに登録している有料素材サイトがあると思います）。

Pixabay https://pixabay.com/ja/: 海外テイストのおしゃれな写真がたくさんあります。
Pexels https://www.pexels.com/ja-jp/: 同上。
O-DAN（オーダン） http://o-dan.net/ja/: 「世界中の無料写真素材の中から理想の一枚を探す」というキャッチコピーとタイトルの通り、複数の無料写真サイトを横断して検索できるサービスです。PixabayとPexelsも入ってます。
ぱくたそ https://www.pakutaso.com/: おしゃれすぎない、日本っぽさのある写真がほしい…という時はかなり重宝します。「パロディ」のタグで検索すると使いどころのわからない写真がたくさん出てきて楽しいです。

▼素材を探す：とりあえずダミー

就職するまで知らなかったのですが、ダミー画像やダミーテキストを生成してくれるサイトってあるんですね。これなら、とりあえずコーディングしてあとから画像は探そう、という時も困りません。

Placehold https://placehold.jp/: 使い方は一目瞭然。imgタグの代わりに入れるだけでOKです。しかも、ダミー画像にサイズまで表示してくれるので、本番の画像に差し替える時もいちいち調べなくて良いのでめっちゃ便利です。
Placekitten https://placekitten.com/: Placeholdと使い方は同じですが、すべてのサイズでかわいらしい子猫さんが表示されます。便利さでは劣りますが、かわいいは正義。優勝です。
ダミーテキストジェネレータ https://webtools.dounokouno.com/dummytext/: ダミーです、ダミーです、…とコピーすれば良いような気もしますが、文字数を指定するだけで一発で作ってくれるのは便利です。坊ちゃんや徒然草もあります。

▼アイデアが浮かばない…

この世の中、既に素晴らしいデザイナーさんたちがUIの最適解を出してしまっているので、わたしのようなへっぽこが1からアイデアを出しても大したものはできないものです。なので、まずはとにかく「良いデザイン」をたくさんインプットすること。でも、パクリはダメ、ゼッタイ。

Awwwards https://www.awwwards.com/: 海外のオシャレなサイト集（オシャレすぎて真似できないので見る専門）。
One Page Love https://onepagelove.com/gallery: 海外のサイト集ですが、1ページ完結型に特化しているので、なんとか頑張れば作れそう…な気がしなくもないレベル。
現代デザイン http://gendaidesign.com/: こちらは日本のサイトメイン。個人的にここのデザインは好きなものが多く、目指すところだなぁと思って眺めています。カテゴリが細かいのも嬉しいです。
Responsive Web Design JP http://responsive-jp.com/: 今や誰もが避けて通れなくなったレスポンシブデザイン。PC、タブレット、SPと横並びで表示されているのがめちゃくちゃ見やすくて好きです。
Pinterest https://www.pinterest.jp/: むかーしむかし使ってたことがあるんですけど、すぐに使いどころがわからくなり遠退いてました。最近周りの人がよく見てるので、どうやって使っているんだろう？と思ったら、バナーや広告のデザイン画像を検索して、参考にしてるんですよね。たしかに「バナー　○○」とかで検索すると色々なデザインが出て来ます。

▼デザインを作る

ワイヤーフレームやデザインを作るためのツール、というのは比較的新しいジャンルかと思いますが、Photoshopのような複雑さはなく、Powerpointのような感じで要素をぽこぽこ配置するだけで使えるのが魅力です。そのままコードにしてくれるものもあります。

Adobe XD https://www.adobe.com/jp/products/xd.html: Adobeといえば重くて機能過多で使いこなせなくて私なんぞにはとてもとても…という感じだったのですが、XDは軽量で直感的に使いやすいので、ぜひ一度ダウンロードして試してみるのがおすすめです。体験版もあります。
Sketch https://www.sketch.com/: 私はXDがしっくり来たのでsketchは使ったことがないのですが、機能としては同じようなものが揃っているそうです。ただし利用はMacのみになりますので注意してください。
Figma https://www.figma.com/: Figmaと聞くとどうしても動くフィギュアを思い出してしまうのですが、こちらはブラウザで使えるデザインツールです。デスクトップ版もありますし、無料版もありますし、Adobeのような登録も不要なので手軽さが魅力です。ちょとツール自体の操作が難しい印象があるので、多少慣れる必要がありそうです（私も勉強中です）。
Cocoda! https://cocoda-design.com/: いまいちイメージがわかない…という方にはCocoda!がおすすめです。これまであまりなかったデザインやUIを学習できるサイトです。Adobe XDをダウンロードするところから丁寧に動画で解説されている上に、レクチャーの最後に作ったデザインを投稿してSNSのような感覚でシェアできるのも新鮮です。

4. コーディング

▼エディターを使う

さあ準備はOK、コーディングを始めよう！ということで準備しておいたほうが良いツールというのはいくつかあるかと思います。まずはエディタですね。昔はメモ帳でぽちぽち…なんてこともしましたが、今はとても便利になりました。
本当は色々紹介したいのですが、Atomを使い始めてから一途に使い続けたせいで、浮気したことがありません…たくさんありますので、ぜひ下記の記事など参考にしてみてください。
プログラミングに使える！フリーのテキストエディタ15選

Atom https://atom.io/: 定番の無料エディタなので使っている人も多いのではないでしょうか。PackageやThemeもいろいろあるので楽しいです。調子に乗ってPackageを入れすぎると重くなるので、要らないものは適宜消したほうが良さそうです。
Terapad https://tera-net.com/: メインで使う、ということはないかもしれませんが、超軽量なので、他のエディタで開くとめちゃくちゃ時間がかかってしまうファイルも、とりあえず開きたい！という時には便利です。そういった大きなファイルを使用するときは下記の記事が大変参考になります。
テキストエディタの大ファイル事情【2017年Windows編】

▼クラウドIDEも気になる

Atomばかり使い続けてきたのですが、最近クラウド開発環境が気になっています。まだ勉強中ですが、ローカルに保存しないで開発するというスタイルが今後定着することもあるかと思いますので、早めに適応していきたいところです。一部有料のものもあるのでご注意を。

AWS Cloud9 https://aws.amazon.com/jp/cloud9/: 2016年からAWS（Amazon Web Services）に加わりました。まずAWSの設定自体が気の遠くなる作業で、わたしはなんとかCloud9で開発環境を立ち上げるところまでたどり着いたものの、それ以降使ってません…。
Codeanywhere https://codeanywhere.com/: こちらは英語のみですが、シンプルでAtomと使用感が似ている印象があり、使いやすそうだなと思っています。アプリがあるということでiPadにDLしてみましたが、まだアプリから編集する機能はないようでした。

▼ブラウザでチェック

みなさんブラウザは何をお使いでしょうか。一昔前はWindowsならみんなとりあえずIEを使っていたように思いますが、環境はがらりと一変し、Google Chromeがトップとなりました。
WebブラウザシェアランキングTOP10(日本国内・世界)
でも海外と比較するとまだまだIEの利用が高いことも見受けられます。複数インストールしてチェックの環境を整えておくのが良さそうです。Web制作会社に就職すれば、おそらくチェック用のデバイスがいくつか用意されているはずです。

Google Chrome https://www.google.com/intl/ja_ALL/chrome/: Chromeの「デベロッパーツール（F12を押すと開くやつ）」はめちゃくちゃ便利です。ブラウザ上でレスポンシブ対応の確認や、各種エラーのチェック、この要素にはどんなCSSのスタイルが適用されているか…というのが簡単にわかります。さらに、ツール上でスタイルを編集して、表示崩れの原因を調査することもできます。ほかにも色々な機能が搭載されているのでチェックしてみてください。
Firefox https://www.mozilla.org/ja/firefox/: こちらも必須ですね。
Microsoft Internet Explorer https://support.microsoft.com/ja-jp/help/17621/internet-explorer-downloads: マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」
それでもなぜかIEユーザーの多い不思議の国ニッポン。しばらくは対応せざるをえないかもしれません。

▼Google Chromeを使うなら

Chromeを使うなら、入れておくと便利な拡張機能をいくつかご紹介します。この他にもたくさんあるかと思いますので、ぜひおすすめがありましたらご紹介ください！なお導入は自己責任でお願いします。

Clear Cache: Web制作をしている上でイライラする原因のひとつがキャッシュだと思います。一々履歴から削除しなくても、ブラウザの更新とともにキャッシュクリアしてくれるのがこちらの拡張機能です。クリアする期間なども選べます
Fire Shot: パソコンのスクリーンショットだと表示されている画面しかキャプチャできないので、ページ全体をキャプチャしたいときは拡張機能を入れておくと便利です。ちなみにデベロッパーツールでスマホ画面サイズにしておくと、スマホ表示でのスクリーンショットが撮れます。
Alt & Meta viewer: 画像にaltを入れ忘れてないかチェックできます。altが入っていない画像をピックアップして一覧にして表示しつつ、altが入っている画像はどのようなテキストが入っているのかも表示してくれます。

おわりに

今回（2019.4.8）の更新はここまで。ここのサイトもおすすめだよ！というのがあれば、ぜひ教えてください。そして、よろしければ追加させてください。逆に載せないでくれっていう場合も教えてください。そっと消します。

追記（2019.3.23）

こんなにたくさんの方々にご覧いただけるとは思っておらず、驚くばかりです。ありがとうございます。あらためて、リンクさせていただいたサイトの制作者のみなさまにも感謝いたします。これからもお世話になります。
まだ途中のつもりだったので、追って更新したいとは思いますが、取り急ぎ、おとといの段階ではうまく分類できず紹介できなかったサイトで、最近の一番のおすすめをご紹介します。

Cocoda! https://cocoda-design.com/: これまであまりなかったデザインやUIを学習できるサイトです。Adobe XDをダウンロードするところから丁寧に動画で解説されている上に、レクチャーの最後に作ったデザインを投稿してSNSのような感覚でシェアできるのも新鮮です。

追記（2019.3.25）

引き続きたくさんの方にご覧いただけて嬉しい限りです。ちょうど新年度のシーズンで需要も高かったのかもしれません。
Webエンジニアじゃなくてプログラマorデザイナーじゃね？というご指摘を見かけて、本当にその通りだと思いましたので、タイトル変えました。私自身はHTMLとCSSとJavascript（あとjQuery）ぐらいしかできないへっぽこです、その他言語は鋭意勉強中です。でも、職種に関わらずIT界隈で走り出したばかりの皆さんに参考にしてもらえたら嬉しいです。

追記（2019.4.8）

少し更新したのですが、だいぶ全体が長くなってしまいました。
右側の見出しから、気になるコンテンツに飛んでいただくのが良いかもしれません。今回も紹介させていただいたサイトの皆様に感謝いたします。今後もがんがん使わせていただくと思うので、よろしくお願いします。