こんにちはTERUです。
フリーランスでWEB制作（コーディングとディレクション業務）をしています。
読者の悩み
- コーディングを無料から学べるサービスが知りたい
- コーディング練習用のデザインデータが欲しい
本記事では、こういった疑問に答えます。
最近は無料でも質の高い学習ができるサービスが増えてきたのでコーディングを独学で身につけることも可能です。
今回は、コーディングを無料で基礎から学べることができるWebサービスを紹介します。
コーディングはWeb制作の基本となる作業です。
web業界で働きたい人やフリーランスを目指している方は、参考にしてみてください。
また、デザイナーの方もコーディングを身につけることで、デザインからコーディングまでまとめて制作案件を請け負うことができるのでスキルアップに最適です。
そもそもコーディングって何？どんな働き方や学習方法があるの？という事が気になる方は「コーディングとは？働き方や学習方法を解説する【初心者向け】」の記事をご覧ください。
本記事の信頼性
- 制作会社でWEBディレクターとしての勤務経験あり
- 自身も現在フリーランスとして制作会社案件も対応している。
- コーディング歴2年でだいたい月収３０〜50万
コーディングを無料で学べるWebサービス４選
コーディングを無料から学べるwebサービスは以下の4つになります。
- Progate
- ドットインストール
- CreatorQuest
- w3schools
１つずつ説明しますね。
Progate
Progateはゲーム感覚でプログラミング学習ができるサービスです。
特徴は下記の３点です。
- スライド形式の丁寧な説明
- ブラウザ上に直接プログラムを記述
- 結果が即時反映、エラー箇所の指摘もあり
各セクション毎にスライド形式の丁寧な説明と問題が用意されています。
ブラウザ上に直接プログラムを記述することができるので、ブラウザ上で全ての学習が完結するので簡単に楽しみながら継続ができます。
HTML & CSS初級編やPHP、JQueryなど無料でも基礎部分は学習可能です。
オススメは有料プラン（980円/月額）に入り「HTML & CSS」コースの初級、中級、上級コースを２周ぐらいすれば、なんとなくHTMLとCSSの使い方に慣れると思います。
僕も学習当初は、１ヶ月間だけ有料プランにして、やり込みました。
レッスン内容の詳細については公式サイトの『学習レッスン一覧表』ページから確認する事ができます。
ドットインストール
プログラミング学習サービスとしては、定番のドットインストールです。
特徴は下記の３点です。
- １レッスン３分で完結
- コースが多く幅広いスキルをカバー
- わからない点も質問可能（有料版のみ）
１レッスン３分で気軽に始めることができ、カテゴリが細かく分かれているので、復習にも便利です。
HTMLとCSSだけでなく、Wordpressやサーバー環境構築などweb制作の案件を行う際に必要となるスキルを学ぶことができます。
有料プラン（1080円/月額）にすることで全コースの受講とソースコートの閲覧・比較、質問機能がついていますが、無料版でも概要や基礎部分は勉強できるので、まずは使ってみましょう。
CreatorQuest
CreatorQuestは、現役フリーランスの方が作られたWeb制作スキルを学べるオンライン学習サイトです。
特徴は下記の３点です。
- 現役フリーランスの方が作られた学習サービス
- アクセシビリティを意識したコーディングのスキルが学べる
- まだHTMLコースしかない（今後コースは充実していくみたい）
現役フリーランスの方が作られたサービスで、Youtubeチャンネルに動画も無料でアップされています。
各タグの用途や使い方など、Progateやドットインストールではカバーできないアクセシビリティを意識したコーディングのスキルが学べます。
全て無料で公開されているので、素晴らしいのですが、まだHTMLコースしかありません。。
来年はCSSなど、もっとコースを増やしていくみたいなので楽しみです。
w3schools
https://www.w3schools.com/
W3Schoolsとは、Refsnes Dataというノルウェーの会社によって作成された、プログラミング学習サイトです。
特徴は下記の３点です。
- Web技術のオンライン学習サイト
- HTML、CSS、JavaScript、PHP、SQL、Bootstrap、jQueryなどに関するチュートリアルが全て無料
- 海外サイトだが、日本語に翻訳可能
英語が中学レベルの文法で読みやすく、ある程度は翻訳しなくても理解できると思います。
プログラミングと一緒に英語の勉強もしたい人にはおすすめです。
無料のデザインデータ提供します
【コーディング練習用】
無料で学べるWebサービスをご紹介しましたが、それだけではコーディングは身につきません。
なぜなら、コーディングについての基礎知識は身につきますが、結局量をこなさないとコーディングは身につかないからです。
また、実際の案件ではデザインデータをもとに作業を行いますが、そこまでカバーできている学習サービスは少ないです。
案件作業を獲得するためにデザインデータからのコーディングは必須スキルです。
この機会に身につけましょう！
デザインデータで多いのは下記の２パターンです。
- PSDデータ（Photoshop）からのコーディング
- XDデータ（Adobe XD）からのコーディング
この２種類に対応できれば８割がた案件に対応可能です。
※残り２割はイラストレータ
デザインデータからコーディングする具体的な方法は下記の記事を参考にしてください。
コーディング練習用のデザインデータ（架空サイト）を下記のサイトからダウンロードできます。
https://yokokoblog.com/free-download/#coding
※WEBデザイナーの【いぐちようこ】さんが無償で提供してくれています。
ゆくゆくは、自身のポートフォリオサイトを制作し、サーバにアップロードしてポートフォリオサイトを公開しましょう。
サーバーやドメインなど、インフラ関連のスキルも身につけることで自分のできる作業範囲が広がります。