【随時更新】プログラミングスクール総合ランキングはこちら

【難易度別】初心者にもオススメな模写コーディングにうってつけな無料サイト9選

【難易度別】初心者にもオススメな模写コーディングにうってつけな無料サイト9選

模写コーディングをこれから始めようと思うのですが、おすすめのサイトってありますか?
初心者から脱初心者まで網羅して、難易度別に模写用のサイトを教えて欲しいです!

こんな悩みに答える記事になっています。

HTML・CSSの基礎が終わったら模写コーデイング!というのは、かなりオススメされている手順です。

しかし、世界には数え切れないほどのWebサイトがあり、模写コーディングをするには難しすぎるものまで含まれています。

そこでこの記事では、初心者・中級者・上級者の3段階に分けておすすめの模写コーディングサイトを紹介していきます。

最初は初級 or 中級に取り組み、最後に上級の模写に取り組めばHTML,CSSの学習は卒業です。

上級の模写も終えた辺りで簡単なWeb制作の案件は受注できるレベルになるかと思います。

この記事はこんな人におすすめ
  • HTML・CSSの基礎学習を終えて、実践的な練習がしたい人
  • 模写コーディングをしたいが、良いサイトが見つからない人
  • 効率よくHTML・CSSの学習を進めていきたい人

なお、模写コーディングのための準備編として、『【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】』も参考にしつつ進めてみてください!

maipyon
maipyon

公開しない場合は自由ですが、公開する場合は著作権などに十分注意して、練習として取り組んでください!

不安な人はここから!初心者向け模写コーディング

初心者向けの模写コーディングでは、以下の2サイトを紹介していきます。

  • クナイプのLP
  • FLOWER(花のサブスクリプションのLP)

対象者としては、HTMLとCSSの基礎を終えた人ですね。

例えば私はProgateで基礎を学習したのですが、道場コースにはまだ挑戦していない or 道場コースを1周したくらいの人が対象者になるかと思います。

上記どちらのコーディングができるようになれば結構なアドバンテージがあるのでたとえスクールに通っても挫折率はかなり少ないでしょう。

オススメスクールについては『プログラミングスクールの9社比較ランキング【目的別】』の記事にて紹介しています。

クナイプのLP

クナイプのLP

まず最初に紹介するのはクナイプのLP(ランディングページ)ですね。

参考 クナイプ バスソルト ユズ&ジンジャーの香り
ランディングページって?

ランディングページとは、簡単に言えば「商品を売るためのページ」ですね。

その商品だけに特化したページでして、シンプルなものも多いです。
「売るためのデザイン」についての勉強にもなりますね。

こちら、素材を入手するのが多少大変(右クリック→名前をつけて画像を保存)なのですが、ページのほとんどが画像でできていまして、難易度も低いです。

ボタンや背景も画像で表現していますし、ボーダーさえも画像で表現。

一応PC/スマホで切り替わるようにレスポンシブなサイトなのですが変化も少なく取り組みやすいですね。

要素の配置など、定番の技術をサクッと学べる初心者向けのサイトです!

FLOWER(LP型)

FLOWER(LP型)

こちらは花のサブスクリプションのサイトですね。

参考 FLOWER

レスポンシブデザインで、PC・スマホでの差が非常に分かりやすいです。

特に2列→1列への変化を学べるので、レスポンシブの基礎を学習するならうってつけです。

他には、アプリDLボタンがスマホの場合常にフッターに出てくるので、要素を固定する方法も学べますね。

画像も多く、ページ自体もシンプルなので初心者向けです。

ちょっと難しいかも!中級者向けの模写コーディング

続いて中級者向けの模写コーディングを紹介していきます。

ここからスタートしてもいいのではないかと思います!

時間はかなりかかってしまいますが、練習量は多くなります。

ぴょんなことから for programmerのポートフォリオデモサイト

ポートフォリオサイトトップページ

当サイトで公開中のポートフォリオデモサイトです。

maipyon
maipyon

当サイトのもので申し訳ないのですが・・・無料公開中ですし、結構わかりやすい構造になっているので紹介します。

レスポンシブデザインとなっているので、中級編としてもぴったりかと。

参考 ぴょんなことから for programmerのポートフォリオデモサイト

Bootstrapを使用しているので、Bootstrapでのコーディングに慣れたいという人にはピッタリかなと思います!

Bootstrapとは

レスポンシブデザインに対応したフロントエンドのフレームワーク。

例えば以下のようなコードを書くだけで2:8:2のレスポンシブなデザインができます。

<div class="row">
  <div class="col-sm-2">左列</div>
  <div class="col-sm-8">中央</div>
  <div class="col-sm-2">右列</div>
</div>

いちいちCSSを書かずとも実装できるのが最高。

フレームワークの中でもダントツで使われているもので、コーディングをスピーディにできるものなので是非模写コーディングしつつ学習するのがオススメです。

「フレームワークってなんやねん」というのを体験することで(今後使うか使わないかは置いといて)理解も深まります。

なお、ソースを『ポートフォリオサイトテンプレート(シンプル)無料配布とカスタム方法』の記事で無料DLできるなので、答えつきというのも大きな利点。

Javascriptについては難しい部分があるのでDLするなどして、HTMLとCSSを自力でやってみてください。

maipyon
maipyon

模写ついでにポートフォリオサイトトップページにしちゃうのもOKです!
公開の際はデザインをできるだけ変更した状態での公開をオススメします。(バレるので)

以下の記事でポートフォリオサイトを実際に公開する手順について分かりやすく解説しています!

参考ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】

PAS-POL(コーポレート型)

PASPOL

こちらは企業サイトとなっていまして、ホバーしたときの挙動なども学習できます。

参考 PAS-POL -旅のモノづくりブランド-

一点、ハンバーガーメニューにはJavascriptが用いられています。

しかし、nav要素のclass名を変更しているだけでして、jQueryをちょろっと学べば実装可能です。

maipyon
maipyon

画像が自動で変わるのもJavascriptでの実装ですが、練習の際は固定で良いかと思います!

難しくないので、挑戦してみてください。

コーディング内容としては非常にシンプルでして、中級者向けの中でも簡単な方ですね。

デイトラの無料の模写コーディング練習(LP型)

デイトラの無料の模写コーディング練習(LP型)

オンラインWebスクールのデイトラの「Web制作コース」での課題が無料で紹介されていまして、こちらも取り組みやすいです。

参考 【無料練習素材】あなたはできる?模写コーディング腕試し!

素材も上記リンク先からDLできまして、とっつきやすいのもポイントですね。

紹介されているページのキャプチャに沿ってコーディングしていく形となるので、真っ白な状態から構成していく力が求められます。

PCでの見た目とスマホでの見た目2種類が用意されていまして、レスポンシブになるように構成していく必要があります。

maipyon
maipyon

サイトを参考にすると、デベロッパーツールで答えを見れちゃうのですが、こちらはキャプチャなので不可能。
0からのコーディング力が試されるので、かなりの学習になりますね!

まさに実践形式になり、オススメです。

なお、デイトラの「Web制作コース」では、99,800円(税込)で上記のような課題に取り組みつつ稼げる人材を目指せるスクールになっています。

詳しくは『デイトラの評判は悪い?コスパ最強のスクール間違いなし【運営者インタビュー】』の記事にて紹介しています。

スクールに行こうか迷っているという人は候補の1つに入るスクールかと思いますので、記事を読んで判断してみてください。

くりのすけさんのnote-デザインカンプからのコーディング練習(LP型)

くりのすけさんのnote-デザインカンプからのコーディング練習(LP型)

完全無料でデザインカンプからのコーディング練習ができる内容になっています。

参考 【完全無料-回答コード有り-】デザインカンプからのコーディング練習【超初級編】

ここから多少変更して自分なりのサイトに仕上げるのも良いでしょうし、素材も揃っているので取り組みやすいですね。

そしてなにより、デザインカンプからの模写コーディング(AdobeXDを使用)なので、より実務に近い環境で学ぶことが可能です。

maipyon
maipyon

Webデザイナーを目指す方は、ここでAdobeXDを使う練習をするのもいい機会になると思います!

デザインカンプからのコーディングをする際は・・・

デザインカンプからのコーディングと書いてあるものは、どれもAdobeXDが必須となります。

まずAdobeXDをダウンロードする必要がありますので、AdobeXDの公式サイトからDLしておきましょう。

AdobeXDでの模写を進める際に知っておきたいポイント
  • 画像を取得する際は、画像を選択した状態でCtrl+E
  • 要素を選択すると、文字の大きさや色、要素の幅など各種値を取得できる。
  • 要素を選択した状態でAltを押しながら他の要素にホバーすると、余白の幅を取得できる。

ざっくりと上記の内容だけ覚えておけば進められるハズ。

デザインカンプからのコーディングは当然サイトを見ながら模写するのとは全然違った知識も必要となるので、中級者向けとしてみました。

これができれば最高!上級者向け模写コーディング

中級者向けの模写コーディングができた人は、大抵のコーディングはできるようになっているかと思います。

上級者向けの模写コーディングでは、さらに難しい内容であったり、コーディング量が多いものを紹介していきます。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

模写コーディングするならうってつけの本ですね。

参考 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

内容的には中級レベルなのですが、1冊を通すと量が膨大になるので上級と中級の架け橋というレベルでしょうか。

maipyon
maipyon

入門書、という立ち位置の本ではありますが、一旦簡単な模写コーディングをやったあとで挑戦した方がよさそうなレベル感です。
レビューでも「始めて間もない時に読んでもわからない」という声もありました。

最終的に、以下の画像のようなページを作ることができます。

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

解説アリで学習できるので、模写コーディングで苦手意識を持っている人にとってもよさそうです。

初級編のコーディング終わりに、こちらの本の内容を学んで上級編への架け橋とするのが良いかと思います!

クリスタさんの課題(中規模サイト)

クリスタさんの課題(中規模サイト)

デザインカンプから、中規模サイトのコーディング練習ができます。

参考 【コーディング課題】XDからコーディングをしよう【上級編】

クリスタさんが作成された未経験からWebデザイナーを目指している方向けのコーディング課題です。

こちら、ポートフォリオの掲載も許可されています!(詳しくはクリスタさんのサイトをご確認ください)

解答・解説もついていまして、不安な人でも安心して取り組める形式になっています。

難しいポイントはいくつかあるのですが、このレベルのコーディングができるようになれば簡単なコーディング案件くらいであれば受注できるレベルと判断してもいいでしょう!

なお、WordPress型のサイトという事もあるので、ここまで出来たらWordPressでのデザイン作成を学習するステップに入っても良いと思います。

参考WordPressを独学でテーマ自作まで学習した方法【ステップ別】

ISARA(LP型)

ISARA(LP型)

バンコクで開催されているノマドエンジニア育成講座のISARAのLPです。

参考 ISARA

圧倒的なボリュームがあり、かなりの学習量になります。

模写サイトは探すのでさえ大変なのですが、ISARAであれば1ページで数サイト分の学習に匹敵するのではないかと・・・。

また、ルールに従えばポートフォリオとしての掲載も許可されています。

他にもISARAの模写は多くの人が挑戦しているため、先人の知恵も借りられます。

maipyon
maipyon

模写コーディングと言えばISARAっていう人もいるくらい有名。

分からない部分があっても、ググれば同じような悩みを持った人からヒントを得られるのでやりやすいですね。

その他サイト制作に欠かせない知識も身に付きます

jQueryによるアコーディオンメニュー
アイコン部分のfontawesomeの使い方
bootstrapやtwitterとfacebookボタンの挿入などですね。

時間はかかってしまいますが、できたときはかなりの自信になりますので挑戦してみましょう!

ある程度学べたら、オリジナルのサイトも作って公開してみよう

模写コーディングで目指すべき場所は

分からないところがあっても調べたらどんな見本出されてもコーディングできるな

というレベルです。

そのレベルまで達したら、デザインも自分でやってみて、オリジナルのサイトも作成してみてください。

かなり頭を使いますし、デザインの勉強にもなって一気に成長できます。

今回の記事でおすすめした9サイトですが

  • 初級者向け1つ、中級者向け1つ、上級者向け1つ
  • 中級者向け1つ、上級者向け1つ

上記のどちらかの組み合わせで学習して、自分の到達レベルを確認しつつ進めてみてください。

著作権に気を付けつつ、オリジナルサイトを公開するところまでやればかなりのスキル証明になります!

なお、この後の流れですが「月5万円稼ぎたい」という人向けのロードマップを作成していますので、そちらもご覧ください!

関連記事【目標月5万】プログラミングで稼ぐ全手順【副業を始めよう!】

いくつか見せられるものができたら、『ポートフォリオサイトテンプレート(シンプル)無料配布とカスタム方法』を参考にポートフォリオサイトを作成して案件獲得などを目指しましょう!

私も模写コーディングで鬼成長できました。

初心者の最初の難関でもありますが、うまく乗り越えていきましょう!