
これから稼いでいくため最低限コーディングが必要なのはわかったけど、コーディングって難しそう。
まず何から勉強するのがいちばんいいんだろう。
なるべく早く習得できる方法とかないかな。
といったお悩みをもった方へ向けた記事になります。
先日のツイートです。
コーディングを最短で習得する3ステップ
— モリ|Web系フリーランス (@MockRoll) January 19, 2022
①プロゲート1~2、多くて3周
②参考書のマネしてサイト制作1~2周
③デザインカンプからコーディング2~3サイト
これで習得可能
JavaScriptはあくまで、「アコーディオンとかハンバーガーを実装する用途」で勉強する
あとは明確にゴールを設定すること
コーディングを最短で習得する3ステップ
①プロゲート1~2、多くて3周
②参考書のマネしてサイト制作1~2周
③デザインカンプからコーディング2~3サイトこれで習得可能
JavaScriptはあくまで、「アコーディオンとかハンバーガーを実装する用途」で勉強するあとは明確にゴールを設定すること
- なるべく早くコーディングを習得するための方法がわかります
- コーディングを習得する上で、やらなくていいことがわかります
コーディングの勉強は何から?最短習得のためやること&やらないこと


本記事では、コーディングを最短で習得するために、やった方がいいことと、やらない方がいいことを紹介します。
Web制作やデザインを勉強しているのであれば、避けて通れないのがコーディングです。コーディングは基本中の基本なので、サクッと勉強して押さえておきたいところ。
しかし、コーディング習得のためにムダな勉強してる人が多いように感じます。
ムダな勉強を避けて早く稼ぐために参考にしてみてください。
最短とはいえ「簡単にすぐ成果が出る」わけじゃありません。
コツコツと毎日努力することが大切だし、それなりの時間もかかります。
そんな中でも「なるべく効率的にやろう」というニュアンスです。
最短で成果出ないことを理由に、逆に挫折しないように。
最短で習得するためにやること


コーディングを最短で習得するためにやることとして、以下3つがあります。
順序①:プロゲートで基礎を1〜2周
順序②:参考書で実際にサイトを作る
順序③:デザインカンプからコーディング
それぞれ解説します。
順序①:プロゲートで基礎を1〜2周


まずはプログラミング有料サービス「プロゲート」で、HTML、CSSの基礎を学習しましょう。
プロゲートは、「大まかな概要」を学ぶにはもってこいのサービスだからです。
具体的には、「HTML&CSS講座」の最後の「FlexBox編」までやりましょう。
これをせいぜい1~2周、多くても3周くらいやって、「HTML、CSSってこういう感じなんだな」という感覚を掴んでください。
そしたら、次のフェーズにうつります。
順序②:参考書で実際にサイトを作る


プロゲートの「HTML&CSS講座」が終わったら、参考書を買って実際に手を動かしつつ、サイトを作ります。
参考書を使うことで、プロゲートでは学習しきれなかった深い部分まで習得することができるから。
プロゲートでは得られる知識は断片的ものなので、実践フェーズではまだまだ足りません。
その点、参考書で学習すると、「1つのサイトを実際に手を動かして作る」ことができます。
注意点として、参考書も何周もする必要はありません。
わからなくても勇気を持ってテンポよく前に進むこと。中身を全てカンペキに覚えようとするのはもってのほか。時間もったいないです。
また、これから参考書を買うのであれば「FlexBox」に対応した参考書を買ったほうがいいと思います。
「 FlexBoxに対応した参考書 」は以下の「HMTL5&CSS3デザインきちんと入門」がオススメ。flexについての丁寧な解説に定評があり、Amazonでの評価も高いからです。
順序③:デザインカンプからコーディング


参考書で体系的にコーディングをインプットしたら、アウトプットです。
実際に「デザインカンプからコーディング」をやってみましょう。
デザインカンプとは、簡単に言うと「Webサイトの完成見本」です。要は「完成見本どおりにコーディングしてみましょう」ということです。
デザインカンプにも初級~上級みたいにレベルがあり、「コーディング デザインカンプ」で検索するとたくさん出てきます。
デザインカンプは基本的に何を選んでもOK。初級~上級にこだわらず、「気に入ったデザインのもの」をコーディングすればいいと思います。レベル感うんぬんより、気にいったサイトを作るほうがモチベ上がるからです。
このデザインカンプからのコーディングを2~3サイトやれば、コーディングの感覚は確実に掴めてきます。感覚が掴めてくれば「習得した」といってもいい状態です。
あとは+aで
- デザインやマーケティングを勉強する
- クラウドソーシングで仕事を見つけてみる
- 自分のオリジナルサイトを作る
などなど、行動しましょう。
酷なようですが、コーディングを最短で習得する方法と釘打ってるものの「コーディングを習得したらゴール」ではありません。


ただ、このフェーズが初学者にとって正念場になります。
必ずと言っていいほど全く手が動かず、イヤになるからです。
なので結果的にかなりの高確率で、参考書に出戻りするハメになります。「参考書を何周もする必要はない」と前述したのはそのため。
しかも実務レベルとなると、デザインカンプをピクセル単位で再現する技術が求められます。
最初からできる人はいません。僕もヘッダーすら作れず挫折を経験しています。
最短とはいえ、焦る必要はありません。ここはじっくり、いちばん時間をかけるべきフェースです。
模写コーディングは不要です。
実績として使えないし、著作権も絡んでくるのでメンドイからです。
これまでは「デザインカンプがなかったから、模写コーディングがメインだった」感じです。
そこで「実績にも使えて著作権も問題ないデザインカンプ」が普及し、今や主流になってます。


最短で習得するためにやらない方いいこと


コーディングを最短で習得するためにやらなくていいこととは、以下2点です。
やらないこと①:プロゲート何周もする
やらないこと②:インプット詰め込みまくり
それぞれ解説します。
やらないこと①:プロゲート何周もする


やらない方いいこと1つ目は、「プロゲートを何周もすること」です。
たとえプロゲートの内容を100%にしたところで、プロゲートで得られる知識だけでは足りないからです。
プロゲートの後、参考書でより深くまで学習し、その後デザインカンプでアウトプットするフェーズが待っています。
デザインカンプのアウトプットで全く手が出ず出戻りすることになるので、プロゲートには時間をかけないことです。
カンペキに理解できてなくても、勇気を持ってテンポよく先に進みましょう。
やらないこと②:インプット詰め込みまくり


やらない方がいいこと2つ目は、「インプット詰め込みまくり」です。
具体的には、
- 「HTMLやCSSでのWebサイトのコーディングには、JavaScriptの習得も必要だ。」
- 「また今後WordPressをやるなら、PHPの知識も必要だ。」
みたいな情報を鵜呑みにし、HTML、CSSの他にJavaScriptやPHPの勉強も始めてしまうことです。
確かにゆくゆく必要になるかもしれませんが、「最短でコーディングを習得する」目的を考えると、ムダです。
初学者のうちにそんなに様々な知識を詰め込んだところで頭に入らないし、退屈で挫折する原因にもなるからです。
なので最短での習得を目指すなら、コーディングをある程度取得してから、JavaScriptなどを学んだ方いいです。
必要な場面が来てから、必要に応じて学習していきましょう。例えば、
- アコーディオンメニューを実装するために、JavaScriptが必要だ
- ハンバーガーメニューを実装するために、JavaScriptが必要だ
となればJavaScriptの勉強というよりも、「アコーディオンメニューを実装するための勉強」や、「ハンバーガーメニューを実装するための勉強」をするイメージです。


最短を目指すコツは、ゴールを明確にすること


最短での習得を目指すのであれば「ゴールを明確にすること」はかなり重要になります。
ただ単に「コーディングできるくなりたい」みたいにゴールがあやふやだと、どんな学習が必要で、逆にどんな学習が不要か見極めできず、意味のない学習に時間をかけ、習得が遠のいてしまうからす。
コーディングに限らず何事も「ゴールが明確になっている人」は成長が早いです。
なので、コーディングも最短の習得を目指すなら、
- コーディングを習得して、デザイナーとして転職する
- コーディングを習得して、とりあえず月10万を稼ぐ
みたいに、まず「ゴールを明確にすること」を意識してみてください。
プログラミング情報サイト「プログラミング副業の教科書」でも、ゴールを明確にする大切さについて回答しました。よければご覧ください。
今考える一番効率いい学び方は何ですか?|現役プログラマーに聞いてみた
スクールという手もあり


これまで独学での習得方法を書いてきましたが、スクールという手もありです。
先生にわからないところを質問できるのは、独学に比べて大きな時短につながるため、投資効果が高いからです。
また「やらざるを得ない状況」に追い込むことで、挫折対策にもつながります。
ただ、スクールに身を委ねるようではいけません。
スクールはあくまで補助輪で、前にすすむのはあなた自身。
プログラミングスクールからカモられないよう、目的をはっきりさせ、必要と判断したらスクールを検討してください。


ちなみにカモられないスクールを求めるのであれば、デジハリがいいと思います。Webスクール大手で知名度もあるため、安心だからです。
まとめ


以上、「コーディングの勉強は何から?最短習得のためやること&やらないこと」でした。
最短とはいえコーディングはそれなりに難しく、時間もかかります。
しかし、ムダな勉強を削って効率的に学んでいくことはできます。
なるべく効率的かつ最短ルートで習得するために、目的意識を持って、それに必要な勉強をしていきましょう。








1992年生まれ|2020年10月フリーランスとして独立|Web制作、SEOライティングを軸に活動中|接客→生産管理→システム開発会社→現在|モリブログ運営。Web制作、フリーランスジャンルを中心に更新中。PV数は年間14万人以上||温泉、旅行、甘いものが好き。