【おすすめサイト】模写コーディングを徹底解説【やり方も解説】

[st-kaiwa1]模写に挑戦したいけど何からやったらいいかわからない…。おすすめのサイトや効率的なコーディングのやり方が知りたい。どこまでやったら稼げるのかも教えてください。[/st-kaiwa1]

こういった疑問に答えます。

本記事の内容

この記事を書いている僕は、プログラミング学習開始から半年で月収20万達成。現在はWebサイトの構築やコーディングのお仕事をこなす大学生フリーランスです。

※この記事は5分ほどで読み終わります。5分後には模写コーディングの理解が深まるほか、コーディングの効率をあげる方法がわかるはずです。

目次はこちら

模写コーディングとは

模写とは、サイトやデザインをみながら、同じサイトを作っていくということです。

模写は2種類あります。

コーディングの学習において、模写は一番成長できます。

おすすめは「デザインカンプからのコーディング」

理由は、実際の案件はデザインしか渡されないからです。

模写からデザインツールを使い、デザインカンプからのコーディングに慣れておくことで、案件をスムーズに行うことができます。

【よくある疑問】デザインカンプはどこで入手すればいいの？

Figmaという無料のデザインツールを使うと、【全てのサイトをデザインカンプ化】することができます。

読むべき記事が「一本」あります。

こちらを見ながら、Webサイトをデザインカンプ化し、実案件のようにコーディングしていきましょう。

Figmaはデスクトップアプリがあるので、この機会にダウンロードしておきましょう。（ダウンロードはこちら）

※「HTML to Figma」は、たまに画像がうまく取得できないなどがあります。そこはサイトから引っ張ってきましょう。

Figmaの使い方はこちら

Figmaの基本的な使い方が解説されています。無料&質が高いので、辞書的な感じでありがたく使わせてもらいましょう。

【レベル別】模写コーディングにおすすめなサイト【全て無料】

模写コーディングにおすすめなサイトを紹介します。

上級までやるとかなりコーディング力がつくので、どんどん挑戦しましょう。

模写コーディングにおすすめのサイト- 初級

これらをやりましょう

ドットインストールやProgateで基礎学習を終えた方は挑戦してみましょう。

ちょっと難しいかもですが、Progateを100周するより、模写を一回した方が成長できます。

【無料】建設会社のデザインカンプを配布します。

完成イメージ：【無料配布】建設会社のデザインカンプ

デザインカンプのダウンロードはこちら

実績としてポートフォリオに掲載OKです。（自作発言や再配布はNGです。）

頑張ってコーディングしてみてください。完成したら、サーバー・ドメインをとって公開してください。ぼくのTwitterにメンションしてくれたら、みにいきます！

模写の公開方法は下記の記事で丁寧に解説しています！

[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”381″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

悲報：模写はおそらく挫折します。

スミマセン、基礎学習をさらっとしただけだと、模写はかなり難易度高いかもです。

以下の教材で基礎を深掘りしましょう。

ドットインストールやProgateで基礎学習→上記で深掘りすることで、かなり知識が深まるはず。

模写コーディングで「つらいな」と感じたら、一度利用してみるのをおすすめします。

模写コーディングにおすすめのサイト- 中級

これらをやりましょう

こちら、初心者の最難関です。

どちらも結構ボリュームがあり、実装も初心者にとっては難易度が高めです。ぼくもAirbnbは3回挫折しました。

ここを乗り越えると世界変わるので、頑張っていきましょう。

模写コーディングはどこまでやれば稼げるの？→結論「iSara」の模写

iSaraのサイトの模写ができるようになれば、稼げる最低ラインになれると思います。

イメージ的には、「1ページ5000円のコーディング案件」が取れるレベルです。

まずは「iSara」の模写ができるようになることを目標にしていきましょう。

[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]おすすめ記事[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”160″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

模写コーディングにおすすめのサイト- 上級

これらをやりましょう

初見だと「うわ、難しそう…」と思うかもですが、かなりスキルアップできます。

ある程度コーディングができるようになったら挑戦してみるのもありですね。

このレベルまでコーディングできるようになると、個人で受注できるほとんどのコーディング案件は対応できるようになると思います。

模写コーディングのルール

先日、下記ツイートをしました。

✅ぼく流の模写のルール

・画像の取得はOK
・幅はしらべてOK
・色はしらべてOK
・フォントは調べてOK
・ブレイクポイントも調べてOK
・CSSはなるべく見ない←重要😌

基本ソースを見る以外はOK🙆‍♂️
しかし、「ググっても分からない」ならがっつり見ましょう。

辛くなったら、カンニングです😌

— だん＠Web制作 (@dan03301) November 29, 2020

模写のルールは以下の通り

それぞれを解説していきます。

画像の取得方法

追加すべきChrome拡張機能があります。

この拡張機能を使うことで、サイトの画像を取得できます。

select all → Download で、画像を一括取得できます。便利ですね。

Image Downloaderで画像がダウンロードできない場合

Chromeのディベロッパーツールの Sources > 画像フォルダ > 画像 > save からダウンロードできます。

Image Downloaderはたまに画像が取得できなかったりするので、この辺りも覚えておきましょう。

画像は「必ず」圧縮しよう

こちらのサイトを使用しましょう

Webサイトに使う画像が重いと、サイトのスピードが遅くなります。

サイトスピードが遅いと、サイトの離脱率が上がってしまうので、このサイトで画像の容量を削減してあげましょう。ぼくも案件では必ず画像圧縮をしています。

フォントを調べる方法

追加すべきChrome拡張機能があります。

「WhatFont」を使うと、フォントの種類・色・スタイルなどの情報が一気に確認することができます。

模写をするなら、必須の拡張機能の一つです。

色を調べる方法

追加すべきChrome拡張機能があります。

「ColorPick Eyedropper」を使うと、要素をクリックするだけでカラーコードがわかります。

こちらも簡単に使えるので、僕もよく利用してます。

幅 / ブレイクポイントを調べる方法

幅とブレイクポイントはディベロッパーツールで確認しましょう。

使い方はこの動画を参考にしましょう

この動画を見れば、ディベロッパーツールの基本的な使い方は理解できます。

CSSはなるべく見ない

CSSは限界まで見ないようにしましょう。

検索スキルはエンジニアにとって最重要なスキルなので、模写コーディングの段階で、自力で問題を解決できるようにしましょう。

初心者の疑問は、ほぼ全てGoogle検索で解決することができます。

模写コーディングの効率的なやり方（ぼく流です）

ぼくのコーディング手順は以下の通り

詳しく解説していきます。

①サイトをパーツごとに分ける

先日、下記ツイートをしました。

✅コーディングは、まず「パーツ分け」しよう

・実装方法がみえてくる
・サイトの構成がわかる

自力でコーディングするなら、絶対やりましょう。

全体を見て「どこからやればいいんだ…」ってなっても、パーツごとに見るとできそうかもと思えます😌#駆け出しエンジニアと繋がりたい pic.twitter.com/clbEA7Hwil

— だん＠Web制作 (@dan03301) November 30, 2020

この画像のように、サイトをパーツごとに分解します。

サイト全体をみて、「めちゃむずいな…」とおもっても、パーツ単位でみると、意外といけそうと思えます。

いきなり手を動かす前に、頭の中だけでもいいので、サイトをパーツごとにみるようにしましょう。

②上から順にコーディングしていく

パーツ分けがある程度できたら、サイトの上からコーディングしていきます。

つまずいたら、どんどんググって解決していきましょう。

③ブロックごとにレスポンシブ化する

例えば、ヘッダーをコーディングしたら、先に進まず、レスポンシブ化までしましょう。

メリット

あくまで僕のやり方ですが、色々試してこれは結構効率がいいと思ってます。

PCサイズコーディング→スマホサイズコーディングだと、たびたびclass名を忘れて、再確認しなければならない手間が発生します。

コーディングの時短になるので、結果的に時給を上げることができます。

模写コーディングができたら公開しよう

サーバーとドメインを取得して、模写したサイトを公開しましょう。

サイトを公開するメリット

実績になるのはもちろんですが、サーバーやドメインが扱えるのは、制作会社と仕事する上では必須になります。

また、実案件でサーバーやドメインの取得代行や、運用代行も受注できるので、単価を上げることができます。

おすすめのサーバーは「ヘテムル」、ドメインは「ムームードメイン」です。

サーバー・ドメインの取得、サイトの公開方法は後日解説します。

この辺りはぼくもつまずいたので、疑問点があれば、TwitterのDMで質問してください。

模写コーディングができるようになったら、案件を受注しよう

模写コーディングがある程度できるようになったら、実際に仕事を受注するフェーズに入っていきます。

コーディング案件の受注先

クラウドソーシングサイトで案件を受注する

定番なのが、クラウドソーシングという、フリーランスにお仕事を発注・受注で切るサイトで、案件を受注することです。

上記、全て登録しておきましょう。また、個人的におすすめなのは「ココナラ」です。

ココナラはスキルの出品ができ、営業をしなくても仕事を受注できる仕組みがつくれます。

読むべき記事が「一本」あります。

LILiさんという主婦の方が、ココナラで2ヶ月で20万円の売り上げを出した手法が公開しています。

この記事を参考にすることで、ココナラでの受注がしやすいと思います。

※ココナラは手数料が高いので、実績づくりを目的にすべきです。ココナラで戦い続けるとおそらく消耗します。

Twitterで案件を受注する

実績がない状態で、クラウドソーシングでの案件獲得は「かなり厳しい」のが現状です。

なので、Twitterでの受注はかなりアリかなと思います。

Twitterやコミュニティで案件を受注するメリット

最近、Twitter上でコーダー募集のツイートを結構みるようになりました。

実際に募集している方と話をした際に、「学習したことをしっかり発信し、模写やポートフォリオサイトをある人なら、実績がなくても仕事を任せる」と言っていました。

スキルアップだけでなく、Twitterでの発信を心がけましょう。

制作会社のアルバイト/インターンをする

こちら、大学生ならかなりおすすめです。

制作会社にアルバイト/インターンするメリット

制作会社にアルバイト/インターンすることで、学びながらお金がもらえます。最高ですね。

模写数件+ポートフォリオサイトがあれば、制作会社にアルバイトとして採用してもらうことは可能だと思います。

※制作会社で働いた経験は、大きな付加価値になると思うので、脳死でできるアルバイトをやっているなら、制作会社でアルバイトやインターンをさせてもらうのがいいかなと思います。

まとめ

模写コーディングはかなり難易度高いですが、一番スキルが上がる学習法です。レベルアップしたら実務に挑戦していきましょう。

コーディングがある程度できるようになったら、WordPressも学習すると単価をあげられるのでおすすめです。以下の記事で学習法を解説しています。

[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]おすすめ記事[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”160″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

少しずつステップアップしていきましょう。