はじめに
この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。
新年度になりましたので、少し更新をしました。よろしくおねがいします。
ターゲット
この記事はこんな人に向けて書いています。
- これからWebプログラマを目指す人
- Webプログラマになったばかりの人
- コーディングだけでなくデザインやマーケティングにも興味がある人
- 早く一人前のWebプログラマになりたいと思ってる人
- つまりわたしのようなへっぽこのこと
学習が捗るリンク集
1. コーディングを身につける
▼まずはここから
何から始めて良いかわからない！新しい言語を学びたい！という方に。
- ドットインストール https://dotinstall.com/
- 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の声に癒されます。
- Progate https://prog-8.com
- UIがシンプルながらかわいらしく、エディタなどを自分で用意しなくてもブラウザ上で進められるのも魅力的。無料プランだとちょっと物足りないかもです。
- サルワカ https://saruwakakun.com/
- 入門的な内容から、実践的なツールまで紹介されているサイト。画像付きでわかりやすい上に、記事自体のデザインも綺麗なので勉強になります。
- Udemy https://www.udemy.com/ja/
- 有料にはなりますがコンテンツが豊富かつハイクオリティなオンラインレクチャーです。実はまだ見たことがないので、オススメの動画があればぜひ教えてほしいです…。
- LearnWebCode ([Youtube](https://www.youtube.com/channel/UCHRp19HU7Y2LwfI0Ai6WAGQ))
- 有名どころが続いている中で、突然、個人的なオススメになりますが、こちらのチャンネルの「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/
- 今回この記事を作るにあたって知ったので、使ったことはないのですが、「動作が軽いからこっちが好きだわ」というご意見をよくお見かけしました。色々と使い比べるのが良いかもです。
- 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](https://www.advertimes.com/)」も面白い記事がたくさんあります。
- 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/
- こちらはダウンロードして使うものですが、とにかく種類が豊富。デザイナーさんなら一度は使ったことがあると思います。バナーなどにポイントで使うとかわいいです。
- 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/
- ダミーです、ダミーです、…とコピーすれば良いような気もしますが、文字数を指定するだけで一発で作ってくれるのは便利です。坊ちゃんや徒然草もあります。
- 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](https://www.adobe.com/jp/products/xd.html)をダウンロードするところから丁寧に動画で解説されている上に、レクチャーの最後に作ったデザインを投稿してSNSのような感覚でシェアできるのも新鮮です。
- Atom https://atom.io/
- 定番の無料エディタなので使っている人も多いのではないでしょうか。PackageやThemeもいろいろあるので楽しいです。調子に乗ってPackageを入れすぎると重くなるので、要らないものは適宜消したほうが良さそうです。
- Terapad https://tera-net.com/
- メインで使う、ということはないかもしれませんが、超軽量なので、他のエディタで開くとめちゃくちゃ時間がかかってしまうファイルも、とりあえず開きたい！という時には便利です。そういった大きなファイルを使用するときは下記の記事が大変参考になります。 [テキストエディタの大ファイル事情【2017年Windows編】](https://qiita.com/asny/items/d77cb5a510678bfb0dda)
- AWS Cloud9 https://aws.amazon.com/jp/cloud9/
- 2016年からAWS（Amazon Web Services）に加わりました。まずAWSの設定自体が気の遠くなる作業で、わたしはなんとかCloud9で開発環境を立ち上げるところまでたどり着いたものの、それ以降使ってません…。
- Codeanywhere https://codeanywhere.com/
- こちらは英語のみですが、シンプルでAtomと使用感が似ている印象があり、使いやすそうだなと思っています。アプリがあるということでiPadにDLしてみましたが、まだアプリから編集する機能はないようでした。
- 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は技術的負債もたらす」](https://japanese.engadget.com/2019/02/08/internet-explorer-ie/) それでもなぜかIEユーザーの多い不思議の国ニッポン。しばらくは対応せざるをえないかもしれません。
- [Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja)
- Web制作をしている上でイライラする原因のひとつがキャッシュだと思います。一々履歴から削除しなくても、ブラウザの更新とともにキャッシュクリアしてくれるのがこちらの拡張機能です。クリアする期間なども選べます
- [Fire Shot](https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja)
- パソコンのスクリーンショットだと表示されている画面しかキャプチャできないので、ページ全体をキャプチャしたいときは拡張機能を入れておくと便利です。ちなみにデベロッパーツールでスマホ画面サイズにしておくと、スマホ表示でのスクリーンショットが撮れます。
- [Alt & Meta viewer](https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja)
- 画像にaltを入れ忘れてないかチェックできます。altが入っていない画像をピックアップして一覧にして表示しつつ、altが入っている画像はどのようなテキストが入っているのかも表示してくれます。
追記（2019.3.23）
こんなにたくさんの方々にご覧いただけるとは思っておらず、驚くばかりです。ありがとうございます。あらためて、リンクさせていただいたサイトの制作者のみなさまにも感謝いたします。これからもお世話になります。
まだ途中のつもりだったので、追って更新したいとは思いますが、取り急ぎ、おとといの段階ではうまく分類できず紹介できなかったサイトで、最近の一番のおすすめをご紹介します。
- Cocoda! https://cocoda-design.com/
- これまであまりなかったデザインやUIを学習できるサイトです。[Adobe XD](https://www.adobe.com/jp/products/xd.html)をダウンロードするところから丁寧に動画で解説されている上に、レクチャーの最後に作ったデザインを投稿してSNSのような感覚でシェアできるのも新鮮です。