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

プログラミング学習

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

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

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

お察しします、、、笑

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

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

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

【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】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サイトが質がいいのかなどが分かってきます。上達するには、手を動かしてコードを書くのが一番重要なので、どんどん模写コーディングしていきましょう！