コーディングの練習模写サイトをレベル別に紹介。
完全無料でできる方法で、コーディングの無料素材も紹介しています。
コーディングの実案件はpsd（photoshop）からの書き出しが圧倒的に多いので、photoshopの無料素材を紹介しています！
目次
コーディングの練習模写サイト：無料素材つき
photoshopデータから模写しよう
コーディングの実案件はpsd（photoshop）からの書き出しが圧倒的に多いので、ねこポンさんのphotoshopの無料素材を紹介しています！（サイトごとにリンクあります）
photoshopからの画像取得方法や、文字情報の取得方法など、コーディングで稼ぐのに必要最低限の情報を以下にまとめました。
これを参照しつつ行ってください！
動画ver
テキストver
ただし、これをやる余裕がない、とりあえず細かいところは気にせずに形にしてモチベーションを上げたい！という方は、どんどん進めていってOKです。
Progate終わったレベルの頻出デザイン
以前紹介していた模写サイトは、レベル1でも難しいとの声が多かったので、さらに簡単なものを紹介します。
また、これよくありそうだなという頻出のパターンなものを紹介しました。
無料素材で安心して練習
さらにねこぽんのサイトは、以下の引用にある通り、
無料で商用・非商用問わずお使いください。改変自由です。無許可の再配布・再販売は禁止します。
無料で商用・非商用問わず使えるそうなので、安心です。
コーディングの練習模写サイトレベル1
コーディング練習レベル1の概要
コーポレートサイトの模写コーディングです。
このデザインはよくある定番パターンで、かつ、シンプルなので結構簡単だと思います。
Progateの演習と被っているところもあるので、終わったらすぐできるレベルなのでは？と思います。
ねこポンさんのこちらの記事からphotoshopデータをダウンロードできます。
この模写で学べること
- ヘッダーの横並び
- お問い合わせボタン
- NEW一覧の横並びや下線など
- SERVICE部分の余白が均等な横並び
この模写で必要ない部分
全部模写して無駄にならないと思います。
ただし文字の内容を全く同じにはしなくて良いです。（字数は同じくらいにした方がズレてるとかが、分かりやすいので良い）
コーディングの練習模写サイト：レベル2
コーディング練習レベル2の概要
ファッションサイトの模写コーディングです。
このデザインの「スライダー」も結構ある定番のデザインパターンです。
スライダーとは、メインビジュアルにある矢印を押すと画像が切り替わるやつです。
ねこポンさんのこちらの記事からphotoshopデータをダウンロードできます。
この模写で学べること
- スライダー（ググりつつ行ってください）
- メインビジュアルの長丸の配置方法
- 横並び
- Primitiveの四角を重ねる実装
この模写で必要ない部分
これも、全部模写して無駄にならないと思います。
ただし文字情報（フォントや文字の間隔など）を全て同じにするのがダルかったら飛ばしてOK
多分ですが、それぞれ違うフォント・文字の行間・文字の間隔を使っており、それをいちいち測るのが面倒臭くなるかもしれないので。
まあ文字でかなりオシャレになっているサイトなので、文字データをきちんと反映させることは大事なのですが、練習に過ぎないので、消耗しないようにやっていきましょう。
コーディングの練習模写サイト：レベル3
コーディング練習レベル3の概要
パーソナルジムのサイト模写です。
ねこポンさんのこちらの記事からphotoshopデータをダウンロードできます。
文字の位置をどう配置するかにつまずきやすそうなサイトです。
この模写で学べること
「気持ちも人生も変わっちゃったよ」っていう文字の位置の実装
「最短最速のダイエットシステム」と「その後ろの英語」が重ねて見えるようにどうするか
「満足度99%」をどう配置するか
「Why EYP?」をメインビジュアルと、その下のセクションの間にどう持ってくるか
コーディングの練習模写サイト：レベル4
コーディング練習レベル4の概要
幼稚園のサイト模写です。
ねこポンさんのこちらの記事からphotoshopデータをダウンロードできます。
メインビジュアルにある「気持ちも人生も変わっちゃったよ」っていう文字の位置の実装につまずくかもしれません。
この模写で学べること
要素をどう重ねるか（灰色と緑の重なり）
ヘッダーのそれぞれの文字間の仕切りの実装（よくありました）
この模写で不要なこと
外側を黄色で囲う実装、
左側の縦書きの「アクセス」「よくあるご質問」の実装。
初心者には難しい、そして頻出のデザインとは言えないため。
コーディングの練習模写サイト：レベル5
コーディング練習レベル5の概要
模写コーディングの練習として、界隈で有名なisaraのLPです。
レベル4までで紹介した練習とは異なり、PC→SPのレスポンシブにするサイトです。
分量も多く、初心者はかなり骨が折れるサイトです。私は初めて取り組んだとき、完璧にするまで1週間かかりました。
コーディング練習レベル5の模写で学べること
今までのサイトの集大成と言う感じです。
- 固定ヘッダー
- お問い合わせフォーム
- レスポンシブ対応
- jqueryでの開閉ボタン
- jqueryでのpagetopボタン
- 要素の横並び→スマホで縦並び
- SNS連携
コーディングの練習、模写はどこまで極めるべき？
ピクセルコーディングまでが必須
実務のコーディングは1ピクセルもずらさない、ピクセルコーディングができるようになるまでが必要です。
ピクセルコーディングするための、photoshopの書き出し術は以下を参考にしてください。
無駄な模写してる気がする人は？
コーディングの練習で無駄なことをしない方法は以下を参考にどうぞ。
全部終わった人は？
以下の記事で、足りていない勉強はないかチェックしてみてください。
この記事では私が実体験からフリーランスとして最短で稼ぐために、無駄なこと（後回しで良いこと）も含めて書いています。
コーディングの練習まとめ
コーディングの練習はこのようにネット上のサイトを見てできるし、無料でコーディング練習ができるphotoshopデータ素材も複数作ってくださっている方がいるので、お金をかけなくてOKです！
まずは無料で勉強をするのがオススメです。
コーディングの練習注意点
ちなみに、コーディングの練習を今回紹介した無料配布素材ではなく、「企業などの既存サイト」で行う場合、以下に注意してください。
それ以外の人は読み飛ばしてOKです。
コーディングしたファイルはFTPなどでネットにアップロードしないように注意してください。
自分だけのものとして手元に留めて、面談などで必要があれば、「練習で模写コーディングしました」と言いましょう。
最後に紹介したiSaraのサイトは柔軟な対応をしてくれていますが、これもサーバー上にはあげないようにしましょう。
以前紹介した模写サイトについて
以前紹介した模写サイトの記事内容（レベル1~4）は、難易度が高いとの声を多数いただいたので、消去しました（ごめんなさい）。
が、もしみたいという人がいれば、お問い合わせフォームからご連絡ください。3/12までなら内容をメールで送ります。
