サイト模写の方法を大公開【実務レベルでコーディング】

どうもWEB系フリーンラスのがむしゃらワーカーしゅう丸(@shumarukiti)です！

この記事では、

といった疑問にお答えします。

ProgateやドットインストールでHTML、CSS、jQueryなどの基礎が終わった後によく”サイト模写”がおすすめされますが、どんなサイトを模写すれば良いのか、サイト模写をすればどんなスキルが身に付くのかわかりませんよね。

結論ですが、サイト模写では実務スキルは身に付きません…。
実務コーディングをすべきです。

ちなみにこの記事を書いている僕は未経験からプログラミングを勉強して、勉強開始3ヶ月目でWEB制作で月15万ほど稼げるようになって、ネットで稼ぐ楽しさに気づきました。そんな僕ですがサイト制作がある程度出来るようになった今、基礎が終えた段階でサイト模写ではなくある実務を想定した経験を積んでおけば良かったなと感じます。

こういった背景からサイト模写では実務レベルのスキルは身に付かない理由と、サイト模写より実務コーディングすべき理由を語ります。

〜この記事の内容〜

1. サイト模写では実務レベルのスキルは身に付かない【徹底検証】
2. 基礎レベルを終えたらサイト模写ではなく実務コーディングをすべき

サイト模写では実務レベルのスキルは身に付かない【徹底検証】

結論ですが”サイト模写”では、実務レベルのスキルは身に付きません。

サイト模写とは？

いきなりきつい言葉を言ってしまい申し訳ないのです…。とりあえずサイト模写を詳しく知らない人のために説明しておきます。

ProgateやドットインストールでHTML、CSS、jQueryあたりを勉強した人は、サイト模写を勧められることが多いですよね？

サイト模写は、一言で言うと、

ことです。

そのままの意味なんですけど、サイトを真似して作ってコーディングスキルを上げようというのがサイト模写です。

ちなみにサイト模写の流れは以下の通り、

1. 模写サイトを選ぶ
2. 素材（画像）をダウンロードする
3. HTML構造→CSSデザイン→jQuery動作

といった感じです。

サイト模写で身に付くスキルを理解する

サイト模写で実務レベルのスキルは身に付かないと言ったのですが、「サイト模写をやる＝案件が取れる」みたいに勘違いしている人が多いので厳しめに言いました。

ですが、サイト模写で身に付くスキルはありますし、基礎を終えた後には一度はやってみると良いかと思います。

サイト模写で身に付くスキルは以下の通り。

• Googleデベロッパーツールの使い方が学べる
• コーディングの大枠を理解できる

といったスキルが身に付くかなぁと思います。

ちなみにGoogleデベロッパーツールを使いこなすことは、サイト制作には必須なので必ず身に付けるべきスキルです。

サイトのフォントサイズや種類、余白や高さがわかることはもちろん、jQuryのコードやエラーなどもわかる優れものです。

早い段階でこのスキルは身に付けておくべきなので、サイト模写と一緒に身に付けましょう。
わかりやすい記事があったので参考にしてみてください。
>>初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

また素材をダウンロード→HTML→CSS→jQueryと実際のサイト制作の流れを体験出来るので、コーディングの大枠を捉えることができます。

とはいえこの「素材をダウンロード」の部分は実務ではほぼありません。実際はデザインをpsd、aiデータでもらってそこから画像を書き出してコーディングしていくことがほとんどです。

基礎レベルを終えたらサイト模写ではなく実務コーディングをすべき

そんなサイト模写よりも実務レベルに近い方法でコーディングスキルを身に付ける方法があって、それは実務を想定してpsd、aiデザインデータを元にコーディングするというもの。

と言うかpsd、aiデザインデータからコーディングするのは実務です。

実務はpsd、aiデザインデータでのコーディングがほとんど

というのも実務でコーディングを経験するとわかるのですが、psd、aiデザインデータを元にコーディングをすることがほとんどです。

ちなみに、

です。

なので実務でコーディングする場合はPhotoshopかIllustratorが必要になります。また感覚的ですがaiデータよりpsdデータでデザインを受け取る方が多いです。

実務コーディングで求められるスキル

サイト模写にせよ実務を想定したpsd、aiデザインデータのコーディングにせよ、目的は実務をこなすことですよね？

そんな実務コーディングに求められるスキルは下記の通り。

• デザイン通りのコーディング
• psd、aiデザインを元にしたコーディング

とにかく実務でのコーディングはAdobe(Photoshop、Illustrator)で作られたpsd、aiデータが元になります。

しかもデザイン通りにコーディングされることが要求されます。ほとんどの場合、少しでもずれていたりした場合は修正が入ります。

※上記ですが補足です。
デザインは基本的にコーディングがわからないデザイナーさんが作ったりしていて、どうしてもコーディング出来ないデザインだったりする場合もあるので、その場合はクライアントとその都度相談しましょう。

こういったスキルはサイト模写では身に付きません…。

なのでサイト模写をした後には、実務を想定したpsd、aiデータでコーディングするのが最適です。

とはいえそんなpsd、aiデータでのコーディングって世の中にあまりないですよね。

僕は初心者の当時こういった教材が喉から手が出るほど欲しかったこともあり、今回psdでのコーディングデザインデータを作成しました。

3万円くらいのLP制作を想定して作った教材なので、興味のある方はぜひチャレンジしてみてください。

>>練習用デザインカンプはこちら

そもそもコーディングスキルすら危うい人が多い話

サイト模写から実務レベルの話をしてきましたが、完全独学だとそもそもコーディングスキルが不十分な人が多い印象です。

シンプルに完全独学で業界未経験とかだと客観的に自分のスキルとかわからないですからね。

そんな人は学習環境が整って時間・場所を選ばないオンラインで完結するオンラインスクールを１度経験するのがおすすめ。

おすすめのオンラインスクールはこの3つ。

プログラミングを学ぶという点では大差ありませんが、おすすめはオンラインで完結するTechAcademyです。

無料体験授業があるのでまずは、無料体験授業を受けてカウンセラーの方の話を聞いてみるといいかと思います。無料体験期間中にメンターとの無料面談をうけると500円のAmazonギフト券ももらえますし経験と思って無料体験授業はありです。

まとめ：サイト模写はコーディングに最適だけど次が大切

以上ですが、サイト模写はコーディングの練習に最適ですが、実務スキルまでは到達しないというお話でした。

とはいえサイト模写もやっておいて損はないので、時間がある方はぜひ練習してみればいいかと思います。

効率良く実務レベルまでコーディングレベルを持って行きたい人は、僕が制作したpsdデザインデータでのコーディング教材にチャレンジしてみて欲しいです。

>>練習用デザインカンプはこちら