Webディレクターでいこう

フリーランスWebディレクターのアレコレを書いていきます

【初心者向け】Web制作に必要なツールを無料で学べるサイトまとめ

f:id:sala1107:20170330141434j:plain

今日は私がお勧めするWeb制作に関するツールを無料で学べるサイトをまとめます。

「わからないことあったらググります。」

という人もおりますが、Web検索の弱点は自分が知らないことは検索できないんですよね。基本をひと通り勉強すると業務がとてもはかどりますよ。

Adobeソフト

 Adobeラーニング

helpx.adobe.com

 AdobeラーニングはAdobe製品の機能を短時間のムービーでわかりやすく、しかも無料で解説してくれるサイトです。PhotoshopIllustratorなど主要なアプリケーションはここで使い方を無料で学ぶことができます。

Adobe Creative Station

https://blogs.adobe.com/creativestation/

ひと通り機能が使いこなせるようになれば、新機能の使い方を丁寧に教えてくれる“Adobe Creative Station”がお勧めです。

adobe製品関連の最新機能や使い方、Tips紹介がされています。

コーディング

Codeprep(コードプレップ)

codeprep.jp

HTML、CSSJavascriptjQueryPHPSVG、アニメーションなど様々なカリキュラムが組まれています。自分のペースで自分の学びたいことを1件ずつ学べますし、正解したときのUIもゲーム感覚で気持ちいいです。個人的にはイチオシです。

Progate(プロゲート)

prog-8.com

DODEPREPでひと通り勉強したら、今度はこちらで勉強することをお勧めします。Progate(プロゲート)はよくあるUIのお題を、実際に自分でコーディングすることで、コードを学ぶことができます。かわいいイラストもなごみます。

 ドットインストール

http://dotinstall.com/

上記2件を使いこなせるようになれば、ドットインストールに移行することをお勧めします。HTML、CSSJavaScriptPHPなどWeb制作に必要なコードをレベルや目的に合わせて3分以内の動画でわかりやすく講義してくれます。制作で行き詰ったときのヒントになるものもあるかもしれません。

有料プランもありますが、無料プランでも十分勉強できます。

MDN(開発者向けのWeb技術)

developer.mozilla.org

HTML、CSSJavaScript、Web APIs、SVGなど、Web制作で必要な言語をチュートリアルから丁寧に基本を学べます。ただ、テキストベースで少しマニアックな情報も多いかもしれません。私は正式な情報を知りたい時に使っています。

なお、公式情報ならW3Cを閲覧するのがベストですが、MDNの方が分かりやすくまとまっているのでこちらを推したいと思います。

 WEB技術の世界標準化機構W3C(英語)の公式サイトはこちら。

www.w3.org

 

Git

猿でもわかるGit入門

www.backlog.jp

Backlogを運営しているNulubさんのGitリファレンスがとても分かりやすいです。なお、SVNもGitと非常によく似ていますが、個人が作業したバージョン管理が楽、マージ作業も楽、など様々なメリットから今はGitが主流ですのでこちらを勉強するのをお勧めします。

 まとめ

基本的な使い方が分かれば、あとはWeb検索で様々な情報を調べやすいと思います。また、私が普段チェックしている制作ブログやサイトを紹介しようと思ったのですが、思いの外、膨大な量であることに気付いたので、それはまた別の機会に。