【Web制作】独学でコーディングを身につけるための具体的な勉強法
こんにちはTERUです。
フリーランスでWEB制作をしています。
プログラミング初学者Aさん「コーディングって独学で習得できるの？」「効率的な勉強方法が知りたい」
本記事では、こういった疑問に答えます。
目次
スポンサードサーチ
独学でもコーディング（Web制作）の勉強は可能です！【具体的な勉強方法】
結論として、独学でもコーディングを習得することは可能です。
個人差は有りますが、頑張れば２〜３ヶ月である程度サイト制作に必要なスキルは習得できます。
※僕の場合、平日４時間、休日２時間程度の学習で約２ヶ月ぐらいでした。
なぜなら、最近はインターネット上に無料・有料含めて、コーディングを独学で勉強できる環境が整っているからです。
以下のようなサービスが有名です。
- Progate
- ドットインストール
- デイトラ
ここでは、僕が実際にどのような流れでコーディングの勉強を行ったのかを解説します。
※コーディングを無料で勉強できるWebサービスについては、以下の記事でまとめています。
コーディングを無料で学べるWebサービス４選【練習用デザインあり】
こんにちはTERUです。 フリーランスでWEB制作（コーディングとディレクション業務）をしています。 読者の悩み コーディングを無料から学べるサービスが知りたい コーディング練習用のデザインデータが欲
勉強の流れ
- ProgateでHTML/CSSに慣れる
- ドットインストールでHTML/CSSの理解を深める
- 模写または実践で経験値をあげる
１つずつ順番に解説いたします。
ProgateでHTML/CSSに慣れる
Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
Progateはオンラインでプログラミング学習ができるサービスです。
コードの記述や結果の確認も全て、ブラウザ上で学習が完結します。
環境構築など初心者がつまずきやすいポイントがないので、ゲーム感覚で学習を進めていけます。
おすすめは「HTML & CSS」コースの初級、中級、上級コースを２周ぐらいすれば、なんとなくHTMLとCSSの使い方に慣れると思います。
中級、上級コースについては有料プラン（980円/月額）ですが、そんなに高くないので僕は１ヶ月間だけ有料プランにして、やり込みました。
おまけ
Progateはアプリのサービスも提供されています。
アプリの場合、コードを打つというよりは、選択肢の中から回答を選ぶスタイルですが
通勤中などの移動時間にサクッと出来るので、一度試してみて下さい。
ドットインストールでHTML/CSSの理解を深める
ドットインストール
HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。
Progateの次にドットインストールを利用しました。
1回約3分ほどの動画をみながら、学習を進めていくサービスです。
Progateとは違い、ブラウザ上で完結せずに環境構築からサイト制作までを一通り行うのでHTML/CSSの理解が深まります。
ひたすら手を動かして経験値をあげる
ここまで勉強すると、あとは手を動かして、ひたすら経験を積むだけです。
経験値を上げる方法としては、大きく２点あります。
- 自分の好きなサイトを模写コーディング
- 練習用のデザインデータをもとにコーディング
自分の好きなサイトを模写コーディング
自分が好きなサイトがある方は、そのサイトの模写をしてみるのが一番早く成長できます。
僕の場合は、ここで予定外のいきなり実案件を経験することになったので苦労しました。。
模写または、実践に近い形でサイトを１から作っておく経験は早めに積んでおいた方がいいと思います。
何から模写したらいいか分からない方には
以下のサイトがオススメです。
iSara[イサラ]｜バンコクのノマドエンジニア育成講座
iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。
一般的なLPですが、コーディングでよく使うコンテンツの並べ方や装飾については勉強できます。
おまけ
Discover recipes, home ideas, style inspiration and other ideas to try.
Pinterestはデザイナーさんがよく使うサービスで、HP含めた様々なデザインが見れるサイトです。そこで「lp デザイン」で検索してもらうとオシャレなLPデザインが出てくるので、そこから模写するサイトを探すのもいいと思います。
練習用のデザインデータをもとにコーディング
模写以外の練習方法としては、練習用のデザインデータをもとにコーディングする方法です。
模写コーディングよりも実案件の流れに近いので、僕自身は模写よりこちらの方法がオススメです。
スポンサードサーチ
【Web制作初心者におすすめ】コーディング練習用デザインデータ
おすすめのコーディング練習用デザインを紹介します。
実作業でコーディングを行う場合、デザインデータを基に作業を行います。
デザインデータの中でも多いのが下記の２つです。
- Photoshopのデザインデータ（PSD）
- Adobe XDのデザインデータ（XD）
各デザインデータのコーディング方法については、こちらを参考にしてください。
PSDデータの場合
Photoshop（PSDデータ）からコーディングする具体的な方法
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 プログラミング初学者Aさん「デザインデータからどうやってコーディングするの？」「デザインデ
XDデータの場合
Adobe XD（xdデータ）からコーディングする具体的な方法
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 読者の悩み Adobe XDのデザインデータからどうやってコーディングするの？ デザインデ
デザインデータからのコーディングは、なかなか独学では学習できない（そもそもデザインデータがない）ので僕も実案件で四苦八苦しながら覚えていきました。。
今回、WEBデザイナーの【いぐちようこ】さんが、コーディング練習用に架空サイトのデザインデータ（PSDとXD）を無償で提供してくれているので、是非ダウンロードして実際に、デザインデータからのコーディング作業を経験してみてください。
【PSDデータのコーディング練習用架空サイト（コーヒーショップ）】
以上がWeb制作のコーディングを独学で身につけるための具体的な勉強法になります。
これからコーディングを勉強してみようという方の参考になれば嬉しいです。
何かご質問がありましたら、気軽にご連絡ください。
スポンサードサーチ