Web制作の基礎学習が終わって模写コーディングをしたいけど、やり方がわからない！！
今回は、web制作を学習している人ならおなじみ、模写コーディングのやり方について解説していきます。
既に模写コーディングについて詳しく知っている人は、早速手を動かしましょう。
以下の記事では【簡単→難しい】の難易度順におすすめサイトを解説しているので、「どのサイトから模写するべきかわからない！」人はぜひ参考にしてください。
>>>【簡単→難しい】模写コーディングおすすめサイト4選
この記事でわかること
・模写コーディングの具体的なやり方
・模写コーディングのルール設定
・模写コーディング時に便利なツール
模写コーディングとは
模写コーディングとは、既にあるサイトを真似して0からwebサイトを作成する学習方法です。
Progateなどの基礎学習を終えた後にもってこいの学習方法です。
模写コーディングのメリット
・基礎学習のアウトプット、復習になる
・自分に不足してるスキルがわかる
・0から自分のPCでコーディングできるようになる
・分からない部分をググって解決できるようになる
模写コーディングではかなり実務に近いスキルを身に付けられます。
難易度も当然上がりますので、挫折してしまわないよう注意しましょう。
まだこのレベルに達していない場合はまずはしっかり基礎を学習するべきです。
模写コーディングのやり方【ルール設定】
模写コーディングを始める前に、まずはルールを設定しましょう。
ルールには正解がある訳ではないので、今の自分が成長するために必要なルールを作りましょう。
今回は、僕が模写コーディングをしていた際のルールを解説しますので、ぜひ参考にしてみてください！
僕はProgateが終わってすぐに模写コーディングを始めました！
模写コーディングのルール
・フォントは合わせなくてもいい
・検証ツールは見てはいけない
・レスポンシブ化する
・数ピクセルのずれは許容する（一回だけパーフェクトピクセルで模写してみる）
・アニメーションは可能な限り似せる
それぞれ詳しく解説していきます。
フォントは合わせなくてもいい
のちに紹介する、what fontを使用すればフォントを簡単に確認する事はできますが、毎回フォントを合わせる必要はありません。
フォントの使用方法さえ知っておけば良いので、出来る事を繰り返して無駄な時間を使わないようにしましょう。
検証ツールは見てはいけない
ここは一番大切です。
検証ツールは最後の答え合わせの時以外、使わないようにしましょう。
模写コーディングをする時は、実案件を意識する事が大切です。
実装方法がわからくても、答えは見れませんよね？ググりまくってください。
検証ツールを見てしまうと、模写コーディングで身に付く大切なスキルが身につきません。
このルールだけは絶対に守るようにしましょう！
レスポンシブ化する
模写コーディングでPC版だけで終わらせてしまっている人はもったいないです。
スマホの普及率を考えてもわかりますが、現状、コーディング案件でもレスポンシブ化はほぼ必須です。
新しいサイトをいくつも模写したい気持ちもわかりますが、一つずつしっかりレスポンシブ化していきましょう。
数ピクセルのずれは許容する
個人的にマージンやパディングの数ピクセルのずれは許容しても良いと思います。
ただ、注意点として一度はパーフェクトピクセルで模写コーディングをしておいた方が良いです。
一度パーフェクトピクセルで模写しておけば、今後もおそらくできるので、何度も繰り返す必要はありません。
毎回パーフェクトピクセルは大変そう、、
アニメーションは可能な限り似せる
jQueryやCSSのアニメーションは可能な限り本物に似せるようにしましょう。
実案件でもクライアントさんから「このアニメーションを参考にして」のように依頼されることが多いので、同じような感覚です。
似たような動きが多いのでテンプレート化して数値を変えるだけにしておけばそれほど難しい事ではありません。
模写コーディングのやり方【具体的な手順】
ルールを確認できたら、早速コーディングを始めましょう。
模写コーディングする際のやり方に絶対はありません。
僕は以下の手順でコーディングしていたので、参考にしてみてください。
- HTMLを書く
- CSSを書く
- レスポンシブ化する
- 毎セクション繰り返す
- アニメーションを実装する
- ソースコードの確認、復習
模写コーディングのポイント
・１ブロック毎にレスポンシブまで作成していく
・アニメーション等は最後に実装する
・一通り終わったら検証ツールで答え合わせ＋復習
以下でポイントを解説していきます。
ブロック毎にレスポンシブまで作成していく
HTMLを全て書いてからCSSを書いていく方法もあると思いますが、個人的にはお勧めしません。
慣れていないと全体を一気に組み立てるのは難しく、結局あとで修正するはめになってしまいます。（僕はそうでした）
また、早く進めたいと思い、レスポンシブなしで作成することもあまりおすすめ出来ません。
長い時間をかけてやっと完成した後に、また１からレスポンシブ化させていくのは単純にモチベーションがゲキ落ちします。
僕はこれで、レスポンシブ化せずに終わらせたサイトがいくつかあり、後悔してます。。
アニメーション等は最後に実装する
jQueryなどを使用したアニメーションは最後にまとめて実装した方がいいです。
一度実装したことがある人はわかると思いますが、Web制作で使うjQueryの記述はそれほど多くありません。
同じ記述の一部だけ変えて使用することが多いです。
そのため、ひとつずつ実装していくよりも、最後にまとめて実装した方が効率よく終わらせることができます。
ソースコードの確認、復習
一通り模写コーディングが完了したら、検証ツールを使って答え合わせしましょう。
そこまで細かくチェックする必要はありませんが、自分の知らないCSSの機能やHTMLの記述方法は次の模写コーディングで使えるよう学習しておきましょう。
模写コーディングに使うツール
模写コーディングを行う際、便利なツールをご紹介します。
Image Downloader
サイトに使用されている画像を一気に保存する事ができます。
注意点として、background-imgで設定されている画像は保存できません。
背景画像は代用を使うか、検証ツールからURLを確認して直接保存するかで対応しましょう。
Full Page Screen Capture
模写コーディングしたいサイトの全体をスクリーンショットする事ができます。
サイトの全体を一気に確認することができる為、ぜひ使用しましょう。
>>>Full Page Screen Captureをダウンロードする
PerfectPixel
Full Page Screen Captureで保存した画像と、自分がコーディングしたサイトを重ね合わせることができます。
実際の案件でもデザインとコーディングはズレがないのに越したことはないので、こちらのツールで練習しておきましょう。
WhatFont
模写コーディングするサイトでどのフォントが使用されているか一瞬で確認することができます。
いちいち検証ツールで確認するのはかなり面倒なので、使用をおすすめします。
模写コーディングができないと感じたら
模写コーディングを試しにやってみて、
「全然できない！」
と思ったら、基礎学習が足りてないかもしれません。
参考書やテックアカデミーの無料講座でHTML,CSSの基礎を復習するのも一つの手です。
模写コーディングのやり方は臨機応変に！
いかがでしたか？
この記事では模写コーディングのやり方を解説しましたが、必要なスキルさえ身につけばどんなやり方でも問題ありません。
今の自分に足りないスキルを補えるよう、臨機応変にルールを設定することがおすすめです。
模写コーディングをしっかりこなせば、実際の案件で使うスキルは十分身についています！
すぐに営業を始めても問題ありませんが、他の初学者と差別化をした方が効率よく案件獲得につながるのでおすすめです。
それでは！
