コーディングが出来るようになれば、クラウドワークスやランサーズでの案件獲得に近づけるということですが、コーディングスキルを高めるためにはどうすれば良いのでしょうか…？
色々調べてみると、
「模写コーディングが良い」
という情報が多いので「模写コーディングの方法」についてまとめてみます。
今回は「準備」編です。
progateなどで一通り基礎を学んだ方なら行けますので、すぐにチャレンジしてみましょう！
模写コーディングを繰り返すことで、デザインをパッと見て「どうすれば同じ構成になるか」を組み立てられるようになります。
目次
模写するサイトを決める
まずはどのサイトを模写するか決める必要がありますが、私は『iSara』をオススメしています。
ノマドプログラミングエンジニア養成講座のLP（ランディングページ）
模写したものを成果物として自分のポートフォリオに掲載可（※条件あり）
模写していいよ！と宣言してくれているサイトはあまり無いので、とてもありがたいですね！
是非チャレンジして自分のポートフォリオに掲載してみましょう！
ちょっとコードの量が豊富で大変かもしれませんが、完璧でなくても良いので一度挑戦することで一気に成長出来ます。
模写コーディング準備編
模写コーディングするサイトの画像をダウンロードする
「Image Downloader」というgoogle chromeの拡張機能をダウンロードします。
この機能を使うことで、模写したいサイトの画像を一括保存することが可能になります。
「Chrome ウェブストア」の画面左上、検索窓に「Image Downloader」と入力すると導入画面で出ますので、画面右上の「拡張機能を追加」をクリックすれば使用可能になります。
※私は導入済みなので「Chromeから削除します」となっています
模写コーディングするサイトの文字情報が分かる拡張機能
正確に模写するためには、文字情報も必要です。
WEBサイトは
・フォントサイズ
・カラー
・太さ
などによって印象がだいぶ変わってしまうものなので、この辺りもきちんと再現するようにしましょう。
「WhatFont」というChromeの拡張機能が便利なので、ダウンロードします。
ImageDownloaderと同じく、Chromeウェブストアで拡張機能を追加しましょう。
この機能を使うと、以下のようにマウスでクリックした箇所のフォント情報がわかります。
・フォントスタイルは「Hiragino Kaku Gothic Pro」
・文字の太さは「600」（Weight）
・文字の大きさは「28px」
・文字色は「#ffffff」
おお、詳細がひと目で分かる！
大体以上の４つがわかれば十分で、これをコーディングする際に適用するだけです。
ColorPick EyedropperでWEBサイトのカラー情報を取得
ColorPick Eyedropperという、「色」を取得できる拡張機能も使いましょう。
これを導入すると、カーソルを合わせた箇所の色情報を取得できるようになります。
Chromeウェブストアから検索して「Chromeに追加」しましょう。
見事、カーソルを合わせた場所の色が判明しました。
模写コーディング開始！
拡張機能も追加できたので、あとはひたすら模写コーディングしましょう。
色々なやり方があるとは思いますが、私はGoogleChromeで「模写するサイト」と「自分が作るサイト」の二つだけを開いて見比べながらコーディングしています。
調べ物がある場合は、Safariなど別のインターネットブラウザを開いておき、適宜ググると作業を効率化できるのでオススメです！
Macの場合、「control + tab」でタブを切り替えられるので確認が楽ですね。
最初はなかなか上手く調整できなくてしんどいかもしれませんが、続けることで知識が蓄積されて
「あ、この場合はこのCSSをを使えば良いな」
というイメージが出来るようになるので、
最初は大変だけど、とにかく時間をかけて継続することを意識しましょう。
