おすすめプログラミングスクールの口コミ・評判・体験談がわかる比較サイト

プログラミングスクール 掲載数No1 * プログラミングスクール 掲載数No1 *

模写コーディングでスキル爆上げ!手順からおすすめの模写サイトまで

プログラミング学習

公開日 : 2019年12月18日 | [更新日]

HTML・CSS・JQuary・javascriptの基礎を学んだ後に、必ずWebサイトの模写コーディングをおすすめされますよね、、、。

正直、基礎を学び終わった後に、いきなりWebサイトの模写コーディングしろと言われても初心者なので「どんな手順でやったらいいの?」「どんなWebサイトを模写したら上達するの?」といった疑問が生まれ、戸惑っていることでしょう。

お察しします、、、笑

私もそんな戸惑いを覚えた1人で、何から初めていいのか分からず上達に時間がかかってしまったので、みなさんには迷わず上達して欲しいという思いがあります。

そこで今回は、Webサイトの模写コーディングの手順と初心者向けの模写すべきおすすめサイトをいくつか用意したのでぜひ参考にしてみてください。

プログラミングスクールで、転職に有利なスキルが学べる!

  • RUNTEQ(ランテック)高クオリティで人気急上昇現役エンジニアからの評価も高い。800時間以上の学習量で現場で通用する技術力を!

  • TECH I.S.(テックアイエス)転職のみならず副業・フリーランスにもオススメ!一生モノのプログラミングを身につけるならここ!

  • DMM WEBCAMP転職成功率98%。転職できなければ全額返金DMM.comグループならではの非公開求人も多数。

  • TECH CAMP(テックキャンプ)エンジニア転職 or フリーランス志望を選べる。ポートフォリオ制作も体験

↓プログラミングを学びたい方は以下の記事がおすすめ

【2022年最新】おすすめのプログラミングスクールを徹底比較!口コミや評判も紹介

模写コーディングの手順

テキストエディタを準備する

まず初めにテキストエディタを準備しましょう。「テキストエディタって何?」「どのテキストエディタを使えばいいのか分からない」といった方は以下の記事を参考にしてみてください。

【初心者エンジニア必見】テキストエディタ機能付きのツール13選

模写コーディングで利用する素材のダウンロード

テキストエディタの準備が完了したら、模写コーディングで利用するWebサイトの画像をダウンロードしましょう。ダウンロードの方法は、基本的に以下の2通りです。
①Chromeの拡張機能「Image Downloader」を利用

1.以下のリンクからChromeの拡張機能「Image Downloader」をダウンロード

 

インストール後、設定画面が表示されます。特に設定画面の変更をする必要はありません。

 

2.画像をダウンロードしたいWebサイトに行き、右上にある「Image Downloader」のアイコンをクリック

 

好きな画像をダウンロードするとダウンロードフォルダに画像が取り込まれます。

 

②Chromeの検証ツールを利用
1.画像を保存したいページで右クリック→検証をクリック

 

2.Google Chromeの検証ツール内のタブを「Element」→「Source」へ切り替える

 

3.「Source」の中の「img」フォルダーから該当する画像をクリックして表示させる

4.画像を右クリックして画像を保存する

 

以上の2通りの画像を保存する方法がありますが、コードラン編集部は1つ目のChromeの拡張機能「Image Downloader」を利用する方法をおすすめします。

ルール決め

上記の2つが揃えば、あとは実際に模写コーディングをしていくだけなのですが、ただ模写をするだけでなくルールを決めましょう。

このルールが結構大事で、筋トレでいう負荷(何キロのバーベルをあげるか)をどれだけかけるのかみたいなものです。←

ルールが厳しければ厳しいほど、上達のスピードが上がります(筋トレでいうとマッチョになります)。

もちろん初心者が負荷をかけすぎるのもよくないので、自分に合ったルールを設定することも重要です。

コードラン編集部が選ぶ「上達する6つのルール」を紹介するので参考にしてみてください。

  1. 文字のコピペはOK
  2. フォントの種類は何でもOK
  3. 少しのズレはOK
  4. 背景画像も入れる
  5. 角丸やフォントの大きさも近いものにする
  6. レスポンシブデザインにも対応する

以上のルールになりますが、文字の入力やフォントも同じにするなど細かい部分は、省いた方が効率的です。

逆にコーディングに関わってくるレスポンシブデザインなどの部分はしっかりと真似しましょう。

これで準備が整いました。さあ実際に模写コーディングしていきましょう!

【ステップ1】HTML・CSSのみの模写コーディング

HTML・CSSの基礎が終わって、復習したいという方におすすめのWebサイトをご用意しました。以下のWebサイトをソースを見ずに模写コーディングできると、HTML・CSSはバッチリだと思います。

facebookログインページ

 

https://www.facebook.com/
HTML・CSSのみのコーディングにおすすめのWebサイトは、「facebook」のログインページです。こちらは私がHTML・CSSを学習した後に初めて模写コーディングしたWebサイトで、ラジオボタンや、プルダウンなどの機能も付いているのでいい勉強になります。

【ステップ2】HTML・CSS・jQueryを使用した模写コーディング

次はHTML・CSSに加えてjQueryを使用した模写コーディングにおすすめのWebサイトを紹介します。

こちらはLP・コーポレートサイト ・ブログ型の3種類に分けました。Webサイトといってもそれぞれに特徴があるので、大きく分けてこの3種類を模写コーディングしておくことをおすすめします。

LP

< ISARA >

 

こちらは、マナブさんふるさんなど多くのフリーランスエンジニアが模写コーディングをおすすめしているLPです。コーディングの量が多いので、難易度は少し高いですが、こちらのLPを模写できるとHTML・CSS・jQueryは習得したといってもいいでしょう。最新の技術が盛り込まれているのもおすすめできる点です。

コーポレートサイト

<住友商事>

 

こちらは住友商事のコーポレートサイトです。オーソドックスなコーポレートサイトになっているので模写コーディングにぴったりです。ヘッダーの追従などの機能も備わっているのもおすすめの点。

大企業のWebサイトは、ユーザーテストや専門家の分析が行われていることが多いので、使いやすく良質なWebサイトになっています。他のコーポレートサイトも模写したいという場合は、大企業のWebサイトを選んで見てください。

ブログ型

< JIN Demo 10 >

 

こちらは、WordPressの大人気テーマJIN Demo 10です。WordPressの利用を考えている場合は、こちらを模写しておきましょう。動的な部分や、flexboxの使い方を勉強できる点がおすすめです。

JINには他にもシリーズがあり勉強になるので、そちらも模写してみるとかなり腕が上がるでしょう。

もっと模写コーディングで勉強したい方へ

もっと模写コーディングして上達したい!という方におすすめのサイトを紹介します。
おすすめのWebサイトをまとめたサイトなので、この中から模写するものを選んでみてください。

MUUUUU.ORG

 

Web Design Trends

 

ランディングページ集めました。

 

↓模写コーディングで挫折してしまった方はプログラミングスクールも検討しよう

【2022年最新】おすすめのプログラミングスクールを徹底比較!口コミや評判も紹介

まとめ

Webサイトの模写コーディングの手順からおすすめサイトを紹介しましたがいかがでしたか?

私がそうだったように初めは何から始めていいのか分からないと思います。ですが、慣れてくると簡単に感じてくるので安心して下さい。

初めのうちは少ししんどいですが、少し踏ん張って今回紹介した手順を参考にWebサイトの模写コーディングをしてみてください。

多くのWebサイトを模写をすることで、必要なスキルを網羅的に習得できますし、どういったWebサイトが質がいいのかなどが分かってきます。上達するには、手を動かしてコードを書くのが一番重要なので、どんどん模写コーディングしていきましょう!

プログラミングスクールで、転職に有利なスキルが学べる!

  • RUNTEQ(ランテック)高クオリティで人気急上昇現役エンジニアからの評価も高い。800時間以上の学習量で現場で通用する技術力を!

  • TECH I.S.(テックアイエス)転職のみならず副業・フリーランスにもオススメ!一生モノのプログラミングを身につけるならここ!

  • DMM WEBCAMP転職成功率98%。転職できなければ全額返金DMM.comグループならではの非公開求人も多数。

  • TECH CAMP(テックキャンプ)エンジニア転職 or フリーランス志望を選べる。ポートフォリオ制作も体験

WRITER

コードランとは、プログラミング初心者や副業/フリーランス向けに、プログラミングスクールの評判や口コミを比較できるサイトです。 スクール比較のほかに、現役エンジニアたちが現場で活躍できるようになるまでのストーリーや 「未経験でもプログラマーになれるの?」「 スキルアップするには何からはじめればいいの?」「 フリーランスはみんなどうやって稼いでるの?」 「実際のお給料は?」 など、プログラミングを志すみなさん向けの記事を集めています。

オススメの
プログラミングスクール

RUNTEQ

Ruby

ウェブカツ

Webアプリ

ポテパンキャンプ

Ruby

TechAcademy(テックアカデミー)

AI・人工知能

TECH CAMP(テックキャンプ)

CSS

侍エンジニア塾

HTML/CSS/jQuery

tech boost

HTML/CSS/jQuery

.Pro(ドットプロ)

Python

おすすめの
プログラミングスクール記事一覧

コードランとは
コードランとは、プログラミング初心者や副業/フリーランス向けに、プログラミングスクールの評判や口コミを比較できるサイトです。 実際に受講をした方の生の声を配信することで、プログラミングスクール選びの際に、自分にあったスクールを選べるよう、サポートしています。また、コードラン編集部では、プログラミング学習や、副業/フリーランスなどの働き方、副業の時の見積もりの出し方などなどをわかりやすく伝えております。

コードランの特徴①リアルな受講生の声が見れる!
侍エンジニア塾,Progate(プロゲート),TECH::CAMP(テックキャンプ),CODE MONKEY(コードモンキー),インターネットアカデミーなど、プログラミングスクールに実際に通った方の口コミ情報を掲載しております。 中立・公平性を維持するために弊社では口コミ内容の修正、削除は原則行っておりませんので、他のサイトよりも信頼性が高いと評判です。

コードランの特徴②目的にあったプログラミングスクールが見つかる!
東京や大阪などの場所はもちろん、作りたいサービスや、学びたい言語、転職支援があるか、Webサイトを作ってみたい、iOSアプリを作りたいなど、プログラミングを学ぶ目的からスクールを探します。未経験歓迎か、オンラインでの受講があるかなど、プログラミングスクールごとに特徴も選択できるようになっています。もちろん調べる際には価格や時間も大事な要素になってくるかと思いますので、評判や口コミも是非参考にしつつ、目的別に徹底的に比較をして、自分に合ったスクールを見つけてみてください。

コードランの特徴③現役エンジニアの体験談や学習記事がたくさん!
プログラマーと一言に言っても、使っている言語や働く環境が違えば、気付きのヒントや新たな視点は必ずあるはずです。コードランでは現役エンジニアたちが現場で活躍できるようになるまでのストーリーやスクールのインタビューをご紹介しています。また、 IT業務が未経験でもプログラマーになれるの? スキルアップするには何からはじめればいいの? フリーランスはみんなどうやって稼いでるの?実際のお給料は? など、プログラミングを志すみなさん向けの記事を集めています。 今もし何かの壁にぶち当たり悩んでいるのだとしたら、あなたの不安の解決の糸口が見つかるかもしれません。

コードランはこんな方におすすめ
はじめてスクールに通ってみたい方や、独学で学んでプログラマーを目指している方、スキルアップのために新たにスクールを探している方におすすめです。実際の口コミや評判をもとに、コードランではプログラミングスクールを徹底解剖していますので、あなたに合ったプログラミングの学び方やスクールが必ず見つかるはずです。 コードランはブログランキングサイトに参加しています
コードランは、人気ブログランキングのシステムエンジニアおよびアプリ開発、WordPressなどのカテゴリーでランキングに参加しています。また、にほんブログ村 プログラミング教育IT技術ブログWebエンジニアの各カテゴリーのランキングに参加しています。

*1 当社調べ