Web制作初心者さん向け！オンライン学習サービス
この春からWeb制作に携わる仕事に就いた方、これからWebデザインやコーディングを勉強したい方、興味はあるけど何から始めたらいいかわからない…といったWeb制作初心者さんへ向けて、デザインやコーディングの基礎を学べるオンライン学習サービスの中から無料のものを中心にいくつかご紹介します。
毎日ちょっとずつ学習できる：chot.design
chot.designはその名の通り、毎日ちょっとずつWeb、UI/UX※デザインなどを幅広く学べる無料のサービスです。デザインってどんなことをするの？という方も分かりやすく学習できると思います。
※UI…ユーザーインターフェース。ユーザーの目に触れたり使用したりする画面の全ての情報。
※UX…ユーザーエクスペリエンス。ユーザーがサービスなどを利用して得る体験。
Point1 毎日ちょっとずつ学習できる！
5～10分で読めるレッスンがたくさん用意されています。全体のボリューム感はありますが1つ1つのレッスンが短いため、スキマ時間を有効活用しながら学習できます。
Point2 各ツールの使い方を詳しく学べる！
chot.designはアプリケーション初心者さんにも優しい説明がされています。実際の操作画面が載っており、手順を動画で見られるレッスンもあるのでとても分かりやすいです。
Point3 運営や他のユーザーに質問、相談ができる！
Q&Aフォーラムがあるので気軽に質問、相談ができます。同じ学習サービス内で質問できる機能があるのは他にあまりないのでとても良い機能！
chot.designはこれからデザインの勉強を始めたい、という方におすすめのサービスです。デザイン全般の基本的な考え方や原則、アプリケーションの使い方、LP、バナー、名刺などの制作テクニック、コーディングの基礎知識までテキストを何冊も買わなくても無料で詳しく学べます。chot.designでは知識はつくものの、自分で手を動かすことがないのでレッスンを見ながら実際に制作してみると良いと思います。
基礎のコーディング知識をつけたいときに：Progate
ProgateはHTML、CSS、SaSS、 Javascript、jQueryなど、Web制作に必要な知識の基礎を学べるサービスです。他にもRubyやPHPなど、様々なプログラミング言語も学習できます。学習の流れは スライドで概要を把握→実際にコードを書いてみる→答え合わせ→次のレッスンへ といった感じでゲーム感覚で進められます。
Point1 スライドがわかりやすい！
わかりやすい図解が書いてあるスライドを見て学習できます。後からでも何度も見返せるのでいつでも復習できます。
Point2 ブラウザ上に直接コードを書き込める！
専用のソフトなどは一切使わず、PCとネット環境があればいつでも始められます。同じ画面内で問題を見ながらコードを書き込めるので分かりやすい！
Point3 書いたコードはプレビュー画面にすぐ反映！
ブラウザ上で書いたコードが隣のプレビュー画面にすぐ反映されるので視覚的にも理解しやすいです。
Progateは無料プランと有料プランがあり、有料プランは月額980円で全てのレッスンを学べます。私も入社してからの3ヶ月程はProgateの有料プランでコーディングの学習をしましたが、無料プランだけでは学べる範囲が狭く、実務で活かせる知識はほんの触りしか身につかないと感じました。まずは無料プランで試してみてから有料プランに切り替えるのがオススメです。
かわいいカエルとflexboxの学習ができる：flexbox froggy
flexbox froggyはflexboxのコードを書いてカエルを助けてあげるというユニークなコンセプトの無料の学習サービスです。
Point1 シンプルで分かりやすい！
CSSコードを書いてカエルを蓮の葉まで移動させたらクリア！というシンプルな問題なので難しいことは考えずに楽しく学習できます。Lv.1～24まであるのでゲーム感覚で進められます。
Point2 ブラウザ上に直接コードを書き込める！
Progateと同様に専用のソフトなどは一切ありません。会員登録も不要なのでPCとネット環境があればすぐ始められます。
Point3 書いたコードはプレビュー画面にすぐ反映！
これもProgateと同様にブラウザ上で書いたコードが隣のプレビュー画面にすぐ反映されるのでflexboxのコードがそれぞれどういう働きをするのかが視覚的に理解できます。
flexboxがいまいち身についてない…という方はここで動きを確認してみるのもいいかもしれません。
XDでのUIデザインの学習ができる：Cocoda!
Cocoda!は様々なお題からアプリのUI、UXデザインを学べる無料のサービスです。豊富なお題をこなしながらXDの使い方も学べます。
Point1 お題が豊富！
Cocoda!ではたくさんのお題が用意されており、ECサイトの画面やアプリのマイページのデザインなど、自分の好きなお題を選んで学習できます。さらに、実際の企業とコラボしたお題もあり、デザインを提出するとレビューがもらえるものや優秀なデザインにはスカウトが届くようなものもあるのでチャレンジしてみましょう！
Point2 他の人のデザインが見られる！
完成したデザインはみんなのフィードに掲載されます。(非公開の設定も可能)他の人のデザインも見られるので参考になります。
Point3 XDの使い方も身につく！
Cocoda!ではAdobe XDを使用して制作するので、Photoshopよりも簡単で気軽に使えるXDの便利な機能を学習できます。クラウドドキュメントに保存すれば、iPhoneなどの端末で共有して実際の見え方を確認しながら制作できます。
Cocoda!での学習で余白の取り方やボタンの大きさ、色の使い方など、ユーザーにとって分かりやすいデザインの仕方が身につくのではないでしょうか。また、Web制作での使用頻度はまだまだ低いXDですが、とっても便利な機能がたくさんなので使い方を押さえておくと役に立つ機会があるかもしれません。XDは無料の体験版もあるのでまずはお試ししてみるのが良いと思います。
XDのダウンロードはこちらから
まとめ
デザインやコーディングは自分で1から学ぼうとするとなかなか難しいと思います。今回紹介したもの以外にもたくさんオンライン学習サービスがありますので自分に合ったものを見つけて有効活用し、楽しく学びましょう！
WEBデザイナー ／ I.T
