どこまで正確に再現すればいいんだろう？
Progateの後は模写コーディングをしよう！って聞いて挑戦する人が多いと思います。
見た目とまったく同じように作るのはとってもとってもいいことです！
しかし効率よく進めていくために「実はこだわらなくても影響はないよ！」って部分もありまして。
今回は私が何回も模写していった経験から学んだことを伝えていきます！
本記事の内容
模写コーディングとは
実際にあるサイトを見ながら、そのサイトの見た目と同じものと自分で一からコーディングしていくことです。
書写と同じようなものです。
模写コーディングって1人で黙々とやるものなので独学の人にとって良い勉強方法です！
私はたくさん模写コーディングをしたおかげで仕事ができるようになりました。
でも実は完璧に揃える必要もなくて(^^;;
今回はその経験から学んだことをシェアしたいと思います！
実はテキトーでいいポイント
模写コーディングって、「全部ぴっちり書かないといけない！！」って思いますよね。
私も当初そんな感じで１px単位までこだわり、一言一句正確に模写していました。（良いことではある）
でもたくさん模写しているうちに「あれ？これは毎回こだわらなくても良いんじゃない？？」と感じる部分がありまして。
今回この記事を読んでくださっているあなたには効率的に勉強してもらいたいので、まとめてみました。
それがこの３ポイントです！
- まったく同じ文章にする
- 文字サイズや余白を１px単位で揃える
- 色を細かく指定する
（※あくまでも練習段階の話です！実務ではデザイン通りきっちり揃えてください！）
まったく同じ文章にする
コピーしてペーストする作業って地味に面倒くさいですよね。
実務なら仕方ないものの、練習で延々とやるのはちょっと非効率かな思うので文章は使い回しで大丈夫です！
だって<p>タグの中に文章入れるだけじゃないですか。単純作業にこだわる必要はありません。
最初はまず構造を掴むことや配置の仕方を考えることの方が大事です！
LPをみただけでなんとなく構造が浮かぶくらいになったら見本と同じ文章を書くようにしましょう。
文字サイズや余白を１px単位で揃える
これもやってみて無駄だったなぁと思ったことです。
見た目とだいたい同じであれば合格です！
文字サイズに関しては、font-sizeの使い方さえ知っていれば細かく揃える必要はありませんし、
余白に関してもmarginの使い方・paddingの使い方が分かっていれば、これも細かくきにする必要はありません。
「ある程度」で大丈夫です。
色を細かく指定する
これもcolorの使い方やbackground-colorの使い方をマスターしているなら適当で大丈夫です！
こだわるべきポイント
模写コーディングにおいてこだわるべきポイントは以下の５ポイントです。
- ヘッダー・フッター
- 背景画像の位置
- ボタンの動きや色
- ハンバーガーメニューやアコーディオンの動き
- レスポンシブにした時の配置
ヘッダー・フッター
ヘッダーやフッターにはいい練習になる要素がたくさん入っています。
hoverした時の線の出し方や、横並びの配置、SNSボタンの設置、positionの使い方などなど。
是非ともヘッダー・フッターに関しては完璧に仕上げてください！
背景画像の位置
これはたくさん練習を積んでおくべきものです。
背景画像の表示開始位置を指定することができるbackground-position、
背景画像をどのように繰り返すかを指定できるbackground-repeat、
背景画像の寸法を設定できるbackground-size
などがあるので頑張って習得してください！
ボタンの動きや色
こういう動きや影をつけるHPやLPは多いので練習段階でマスターしておきましょう！
ハンバーガーメニューやアコーディオンの動き
jQueryを使う部分ですね。
サンプルコードをコピペしてきてOKです。
その後自分でコードを書き換えたりして「このコードはこういう動きをするために書いているんだ」と認識するようにしましょう。
レスポンシブにした時の配置
気をつけるべきブレークポイントはタブレットの768px、スマホの425px、320pxです。
模写コーディングはレスポンシブ制作の練習と考えてもいいくらい大事なところなので気をつけてください。
いろんな画面サイズの表示を確認できるデベロッパーツールを使ってチェックしてみてくださいね！
模写コーディングの活かし方
せっかく作ったコード。どうやって活かせるのかな？？
模写コーディングをした後、「はい終わり！」ではなく
自分で作成したコードをコピペ用ファイルとしてまとめておきましょう！
そのコピペ用ファイルの中に「ハンバーガーメニュー」「ヘッダー」「ボタン」など細かく分けておくんです。
そうすれば今後仕事をする際に、コピペするだけで済むのでとても速く仕事を完成させることができます。
自分で書いたコードだから理解しやすいし、カスタマイズしやすいですね。
模写コーディングを何回も繰り返すうちに「よく使うコード」ってのが定番化してくるので是非まとめておきましょう！
