Webデザイナー必見！コーディングを気軽に練習できる無料Webサービスまとめ

更新日: 2018年05月31日

HTML

2015年12月25日の記事を再編集しています。

現在、Webデザイナーには、デザインだけでなく、コーディング技術も期待されるようになっています。
コーディングを理解しないままでWebデザインを構築すると、実装不可能なものができ上がってしまう場合もあるため、コーディングに関する最低限の知識を持つことは前提となるケースが多く、Webデザイナーとして仕事をしていきたいのであれば、コーディングスキルは必須となるでしょう。

今回は、コーディングをゼロから初めたい方でも気軽に学べる日本語対応しているコーディング学習サービスをまとめました。
Webデザイナーを目指している方、Webデザイナーとしてスキルアップを担っている方は是非チェックしてみてください。

無料のコーディング学習サービス4選

1.Progate

http://prog-8.com/
ゲーム感覚でコードの基礎を学ぶことができる無料の学習サービスです。
HTMLの基本のコードを1つずつ実際に書きながら学べる実践的なプログラムが組まれています。設問ごとにわかりやすいヒントが設置されており、自分だけの力でコードの勉強ができるような工夫が施されています。

学習の進捗状況もわかりやすいため、モチベーションも維持しやすく、なかなかコーディングの勉強に時間が取れないという方は利用してみると良いでしょう。

2.ドットインストール

http://dotinstall.com/

Web制作を行なっている方なら、一度は「ドットインストール」の名前を聞いた事があるのではないでしょうか。
プログラミング学習サービスとしては定番となりつつあるドットインストールでは、HTML、CSSやPHPやRubyなどのプログラム言語からWordpressの構築方法まで幅広い分野を扱っています。
3分間で完結する動画コンテンツで学習するスタイルなので、自分のペースで少しずつ進めることができるうえ、カテゴリも細分化されているので、「この部分だけ忘れたから復習したい」というような復習ツールとしても有用です。

3.Codeprep

http://codeprep.jp/

Codeprepは、実際にプログラムコードを記述しながら学べるWebサービスです。
HTML、CSSからアプリ開発まで幅広くカテゴリが豊富なサイトであり、カテゴリの充実度で言うと1,2を争うほどのボリュームです。

すべてのカテゴリに「はじめての」と見出しがあるように、Web初心者にも入りやすいよう導線設計されているので、コーディングの知識がほとんど無い状態でも安心してスタートできるでしょう。

4.Schoo

https://schoo.jp/guest

無料のオンライン動画学習サイトである「Schoo」は、2015年2月に3.4億円の資金調達を実施しており、高校や中学校でも授業の一環として導入されるなど現在急速に成長しているサービスです。
コーディングやプログラミング、WebデザインなどのWeb制作関連カテゴリだけに留まらず、ビジネスやスタートアップ、マーケティングまで網羅しているため、自分で新しいサービスを立ち上げたいと考えている方にオススメです。

schooの最大の特徴として、「すべての授業を生放送配信している」点が挙げられます。
各業界で活躍されている方が講師として登壇しており、その場で質問することもできます。

参考：
動画学習サービスのスクー、既存株主とDDHなどから3.4億円の資金調達 | TechCrunch Japan

コーディングとは？

コーディングとは、プログラム言語をソースにコードを記述することを指します。code + ing でcoding（コーディング）と呼ばれます。

TOPページやバナーのデザインを作成しただけではホームページにはなり得ません。
そこに、「このテキストには外部リンクを設置する、このバナーにはこの内部リンクを設置する」等様々な指示を設置し、ホームページとして機能するようにするための作業が「コーディング」です。

具体的には、HTMLやCSSなどを仕様書に沿って形成していく作業がメインとなり、Web制作の現場では欠かせない工程です。
「プログラミング」とよく混同されていますが、意味合い的にはほぼ一緒ではあるものの、コードを書く作業のみを指す「コーディング」に対して、プログラミングは「プログラムの設計段階から携わり、仕様書作成やデバッグまで一貫して行う」という意味合いで使われる場合がほとんどです。

主にエンジニアが持つスキルですが、Webデザインにも大きな影響を及ぼすため、Webデザイナーも知っておくべき分野と言えるでしょう。

参考：
タグ・HTMLとは。ホームページの基礎技術|ferret
CSSの基本～スタイルシートとは|ferret

まとめ

Webデザイナーとして働く分には、コーディング関連の知識が無くても業務は行えます。
しかし、実装可能な使用を検討するためにエンジニアの方々との打ち合わせが多くなって工数がかかってしまったり、デザインとして取り入れられる技術（動的な要素等）の取り入れ方がわからず、訴求力が不十分になってしまうというのは非常にもったいないことです。

Webデザインは、ユーザーに対して情報をわかりやすく提示するための手段であり、コーディングもその一環です。
ユーザーに合ったデザインを考える際、選択肢は多ければ多いほど良いに越したことはなく、そのためにもWebデザイナーとしてコーディング技術を得ることは重要です。