【2025年最新】コーディングが練習できるサイトを徹底解説！

「Web制作やコーディングについて色々情報収集をしたは良いけど、結局次に何をやれば良いの？」と悩んでしまう人は多いかと思います。

特に今の時代は情報量が多くてどれが最適なものなのかを分かりにくく、初心者のコーダーさんは迷ってしまいますよね…。

ということで今回は、2025年最新版のコーディングが練習できるサイトを徹底解説していきたいと思います！

紹介するサイトは全て無料からでも始められるので、試しに使ってみて自分に合いそうなものを見つけてみるのもお勧めです！

僕もWeb制作やプログラミングの勉強を始めたての頃は模写修行以外のサイトは全て利用したことがあり、初心者時代に大いに活用させていただきました。

では、始めていきましょう！

個人的に思うベストな流れ

この記事では4つのコーディング練習サービスを紹介していきますが、僕個人が思うベストな流れというものがあります。

それは

①Progateかドットインストールのどちらかを学習する

②①が終わったらCodejumpか模写修行のどちらかをやる

です。

なぜなら、特色の違いはあると思いますが、個人的には

Progateとドットインストール、Codejumpと模写修行を比較した際にそれほどできることは変わらないと思うからです。

もし、例えばProgateをやってみたけど自分には合わないな、と思ったらドットインストールをやればいいと思います。

同様に、模写コーディングを行う際もCodejumpをやってみたけど自分には合わないと思ったら、模写修行を行なってみましょう。

ただ主観も若干入っていると思いますので、絶対この通りに行なっていくというよりかは、「そういう考えもあるんだな」という感じで参考程度に聞いてほしいと思います。

①Progate

1つ目は、「Progate」です。

Progateは、Web制作やWeb開発などで使用するあらゆる言語をスライド + ハンズオン形式で学習することができます。

学習できる言語は、HTML、CSS、JavaScript、PHP、Ruby、Java、Python、MySQLなど多岐に渡ります。

ちなみに僕は1番最初はPythonコースを受講してなんならほとんど終わらせてしまいましたが、Web制作で案件を取っていきたいだけならPythonは使わないのでやる必要はありません。

Web制作に必要なコースは

・HTML&CSS初級編

・HTML&CSS中級編

・HTML&CSS上級編

・jQuery初級編

・jQuery中級編

・jQuery上級編

などです。

JavaScriptコースは、jQueryの理解を深めたいならやってもいいと思いますが、どちらも中途半端になってしまう恐れがあるならまずはjQuery初級編、中級編、上級編をしっかりと学習しましょう。

PHPコースは全く役に立たないというわけではないですが、WordPressで利用する関数以外の内容も含んでいるので、WordPress案件だけを取っていきたい場合はあまりやる必要はありません。

それより、自分でWordPress用の書籍を勉強したり、PHP関数を調べた方がいいでしょう。

WordPressはデータベースを利用してサイトを表示するのでデータベースの知識も大切ですが、データベースの内容を書き換える案件はほとんどないですし、あってもそういう案件は断ればいいのでMySQLコースもあまりやる必要はありません。

そのかわり、phpmyadminにログインするときにはどのファイルに情報が載っているのかとか、データベースのバックアップをとっておく方法とかを知ることに時間をかけましょう。

また、道場コースは結構難しめに作られているので、試しにやってみたらあまりの難しさに挫折しそうになるかもしれません。

しかし、現時点で完璧にこなせなくても大丈夫ですので、挫折しても今までやってきた初級編や中級編などをもう1周するか、次のステップに進みましょう。

2周したら模写コーディングや別のサイトに取り組もう！

Web制作初心者にとって、「Progate何周やるか問題」があると思いますが

結論、2周くらいやったら次のコースに行くか模写コーディングなどに移りましょう。

5周も10周もやっていても、パターンを覚えてしまっているだけの可能性もあり

あまり繰り返す意味がないからです。

では具体的に次に何をすればいいかというと、おすすめはCodejumpの初級〜中級編に挑戦してみることです。

デザインからコーディングすることになると思いますが、実際の案件でもデザインカンプを参考にコーディングすることはよくあるので丁度いい練習になるでしょう。

また、「Progateの後にドットインストールをやるのはどう？」と思う方もいるかもしれませんが

Progateもドットインストールもレベル的には同じくらいだと思いますので、それならCodejumpでコーディングの練習をした方がいいと思います。

ちなみに今回の記事を書く際に自分のレベルがどれくらいだったかが気になって確認してみたんですが

Lv. 100を超えていたので結構時間を割いてやっていた印象ですねw

②ドットインストール

2つ目は、「ドットインストール」です。

ドットインストールは、動画講座形式でプログラミングを学ぶことができるサイトです。

スライド形式より動画講座の方が集中できるという方は、ドットインストールを選択するのもアリでしょう。

また、あまり学習とは関係ないかもしれませんが、動画内の講師の声を男性と女性で選べるようになっています。

ドットインストールの特徴は、以下の通りです。

動画の時間が短く、集中しやすい

ドットインストールの講義動画は、1動画3分程度と比較的短めなので

ストレスなく受けれるのが特徴です。

実際の画面は下のような感じ。

左側の動画で講義を受け、右側でコーディングをしてから「コードを実行」というボタンを押すと

実行結果が下に反映されるので、合っているか確認ができるという仕組み。

また、動画下に秒数ごとの字幕も表示されるので

講義を聞き逃しても、字幕を見ることによって内容を理解することができます。

0.5倍速や2倍速で見れる

ドットインストールは動画講座なので、0.5倍速や2倍速など速度を変更して学習することができます。

なので初めて見たり難しい内容の動画は0.5倍速にし、2回目以降や簡単な学習の復習をしたい時などは2倍速で視聴するといったことができるので、時間や学習の定着度を効率化できるでしょう。

サポート体制がしっかりしている

プレミアムプランでの話になりますが、動画を視聴していて分からない箇所があったら、現役のエンジニアに質問することもできます。

時に最初のうちは、1人で学習していてもなかなか理解できないのがプログラミングの難点なので

いつでも質問ができる環境を作ることができるのは大きなメリットですね！

③Codejump

3つ目は、「Codejump」です。

Codejumpでは、出来上がっているサイトをコーディングを利用して再現をすることを目標とした

コーディング練習サイトで、いわゆる模写コーディングを行うことができます。

ボリュームが結構多く

・入門編

・初級編

・中級編

・上級編

・応用編

・実践編

・番外編

に分かれています。

全ての課題を終えるのは困難だと思いますが、あまり自信がない人や手堅くいきたい人は初級編、少し自信がある人は中級編からチャレンジしてみるのが良いと思います！

僕も上級編の「明るいHOUSE」をやったことがありますが、なかなか手強かったのを覚えています！

加えてCodejumpでは、ただ模写コーディングを行えるだけではなく

レイアウト構成を確認してヒントを得たり、どうしても分からなかったらHTMLやCSSなどの答えを見ることができます。

入門編として、プロフィールサイトの制作があるのですが

プロフィールサイトのレイアウト構成は以下のような感じです（示しているのは途中まで）。

このようなヒントを見れば

「header要素の下がどのような構造か分からなかったけど、mainタグの中にdivタグとセクションタグがあるんだ！」

という感じで気づきを得られたり、コーディングし終わって答えを見る際にレイアウトの確認ができます。

ここで1つ注意点ですが、Codejumpは、先ほどから再三話しているように模写コーディングサイトです。

なので、HTML、CSS、JavaScript(jQuery)の基礎を理解していることが前提ですので、Progateやドットインストールでの学習を終えることができたら、取り組むことをおすすめします。

④模写修行

4つ目は、「模写修行」です。

模写修行では、完全無料でコーディングの練習が行えるサイトです。

模写修行の特徴は以下の通りです。

精度の高い教材が無料で利用できる

模写修行の教材は、2025年9月現在で完全無料で使用できます。

元々は1本980円や、3本1980円/2本2980円といった価格帯だったらしいですが、2025年1月から完全に無料になったようです。

模写修行の教材を見てみましたが、ハイクオリティなものが多い印象です。

1本980円や、3本1980円/2本2980円でも相当コスパが良いと思いますが、完全無料であれだけのクオリティの教材で練習できるので利用しない手はないと思いますよ！

課題が実務を意識して作られている

模写修行の教材をやっておけば実務でカバーができることが多い印象です。

なぜなら、模写修行では教材を選択したらまずデザインデータをダウンロードしてそれを見ながらコーディングをしていくわけですが

その作業がデザインカンプを見ながらコーディングをする、案件でよくある流れとほとんど一緒だから。

また、頻出しそうなレイアウトを多く盛り込んでいる点でも実務に活かせそうですね！

実際に案件に取り組むようになった際には「あ、これ模写修行でやったやつだ！」と思わず口に出してしまうかもしれません。笑

学習や模写コーディングが一通り終わったら。。

Web制作の学習や模写コーディングがひと通り終わったら、実際に案件を取りにいきましょう。

おすすめは、クラウドソーシングで簡単なサイト改修などの案件を取っていくことです。

ただ、ここまで独学でやっていたとしても、案件を取る際は完全独学で挑むのはやめておいた方がいいです。

なぜなら、わからないところがあった際に聞ける人がおらず、納期に間に合わなかったり納品ができずに低評価をもらってしまう可能性が高いからです。

個別サポートしてくれるスクールに入るなど方法は色々ありますが、僕がおすすめするのはMENTAというサービスを活用することです。

MENTAは、プログラミングやデザインなどを学習したい人（メンティー）と、教えたい人（メンター）とを繋ぐスキルシェアサービスのこと。

僕も初案件を取った際にはMENTAでメンターさんに教えてもらいながら作業をし、無事初案件を納品することができましたが

「簡単そう！」と思った案件でしたが、指示されている内容と解釈に齟齬があったりして

メンターを雇っていなかったら無事に納品できていたかもしれないです。。

なので、納品までの全ての作業を自分1人で完了させられるレベルになるまでは

必ず誰か先生となるべき人に指導してもらいながら案件を受注した方がいいです。

ただ、メンター選びも慎重に行なってください。

迷ったら、「実績数が多い」+「評価が高い」人を選びましょう！

最後に

というわけで、今回は2025年最新版コーディングが練習できるサイト4選を紹介してきましたが、いかがでしたでしょうか？

まだ自分のコーディングレベルに自信がない、あるいはこれからコーディングを始めたい人はProgateやドットインストール、少し自信がある人や学習はひと通り終わった人はCodejumpや模写修行に取り組んでみてくださいね！

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。