コーディングの練習模写サイトをレベル別に紹介。
完全無料でできる方法で、コーディングの無料素材を提供してくださっている方のサイトも紹介しています。
コーディングの実案件はpsd（Photoshop）からの書き出しが圧倒的に多いです。
目次
コーディングの練習模写サイト：無料素材紹介
Photoshopデータから模写しよう
まずコーディングの練習方法ですが、Photoshopデータから書き出しながら行いましょう。
理由はコーディングの実案件はpsd（Photoshop）からの書き出しが圧倒的に多いからです。
Photoshopからの画像取得方法や、文字情報の取得方法など、コーディングで稼ぐのに必要最低限の情報を以下にまとめたので、これを参照しつつ行ってください！
動画説明バージョン↓
ブログ説明バージョン↓
ただし、これらを見る余裕がない、細かいところは気にせずに形にしてモチベーションを上げたい！という方は、どんどん進めていってOKです。
頻出デザインで無駄な練習をしない
今回紹介するコーディングの練習をする見本サイトは「よくありそうだな」と思う頻出のデザインです。
頻出でないデザインのコーディングを練習しても時間がもったいないからです。
もちろんその中でも「頻出でないから練習しなくても良い」と思う部分を全て書いてあるので、そこは実装しなくてOK。
無料素材で安心して練習
さらに今回紹介するPhotoshopデザインデータの無料素材を作ってくださっている、ねこぽんのサイトは、以下の引用にある通り、
無料で商用・非商用問わずお使いください。改変自由です。無許可の再配布・再販売は禁止します。
無料で商用・非商用問わず使えるので、安心です。
コーディングの練習模写サイトレベル1
コーポレートサイトのデザインテンプレート
コーディング練習レベル1の概要
コーポレートサイトの模写コーディングです。
このデザインはよくある定番パターンで、かつ、シンプルなので結構簡単だと思います。
Progateの演習と被っているデザインもあるので、Progate後にすぐできるレベルだと思います。
ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。
このコーディング練習で学べること
- ヘッダーの横並び
- お問い合わせボタン
- NEW一覧の横並びや下線など
- SERVICE部分の余白が均等な横並び
この模写で不要なこと
全部模写して無駄にならないと思います。
ただし文字の内容を全く同じにはしなくて良いです（字数は同じ数にした方がズレてるか、分かりやすいです）。
文字は全部「あ」とかでOK。
コーディングの練習模写サイト：レベル2
ファッションサイトのデザインテンプレート
コーディング練習レベル2の概要
ファッションサイトの模写コーディングです。
このデザインの「スライダー」も結構ある定番のデザインパターンです。
スライダーとは、メインビジュアルにある矢印を押すと画像が切り替わるやつです。
ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。
この模写で学べること
- スライダー（ググりつつ行ってください）
- メインビジュアルの長丸の配置方法
- 横並び
- Primitiveの四角を重ねる実装
この模写で不要なこと
これも、全部模写して無駄にならないと思います。
ただし文字情報
- フォント
- 文字の間隔
- 文字の行間
は全て同じにしなくてもOKです。
理由はデザインはそれぞれの文字で違うフォント、文字の行間、文字の間隔を使っており、
それをいちいち全て同じにするという単純作業の部分が面倒かもなので。
どれか一部の文字で文字情報をそのまま実装できたらOKです。
文字でかなりオシャレになっているサイトなので、文字データをきちんと反映させることは大事なのですが、これは練習に過ぎないので、消耗しないようにやっていきましょう。
レベル1と同じで文字は全てデザインと同じにしなくてOK。
コーディングの練習模写サイト：レベル3
パーソナルジムサイトのデザインテンプレート
コーディング練習レベル3の概要
パーソナルジムのサイト模写です。
ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。
文字の位置をどう配置するかにつまずきやすそうなサイトです。
この模写で学べること
「気持ちも人生も変わっちゃったよ」っていう文字の位置の実装
「最短最速のダイエットシステム」と「その後ろの英語」が重ねて見えるようにどうするか
「満足度99%」をどう配置するか
「Why EYP?」をメインビジュアルと、その下のセクションの間にどう持ってくるか
この模写で不要なこと
レベル1、2と同じで文字は全てデザインと同じにしなくてOK。
その他は全てデザイン通りにして無駄な練習にならないです。
コーディングの練習模写サイト：レベル4
幼稚園・学校サイトのデザインテンプレート
コーディング練習レベル4の概要
幼稚園のサイト模写です。
ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。
この模写で学べること
要素をどう重ねるか（灰色と緑の重なり）
ヘッダーのそれぞれの文字間の仕切りの実装（よくあるデザインです）
この模写で不要なこと
- サイトの外側を黄色で囲う実装
- 左側の黄色の縦書きの「アクセス・よくあるご質問・Facebook」
初心者には難しいし、頻出のデザインとは言えないためです。
コーディングの練習模写サイト：レベル5
コーディング練習レベル5の概要
isaraの公式サイト
模写コーディングの練習として、界隈で有名なisaraのLPです。
こちらはpsdからのコーディングではなく、実際にあるサイトの模写コーディングになります。
なのでChromeの検証ツールを開いて、答えを見ることができます。
レベル4までで紹介した練習とは異なり、PC→SPのレスポンシブにするサイトです。
分量も多く、初心者はかなり骨が折れるサイトです。
私は初めて取り組んだとき、完璧にするまで1週間かかりました。
コーディング練習レベル5の模写で学べること
今までのサイトの集大成と言う感じです。
- 固定ヘッダー
- お問い合わせフォーム
- レスポンシブ対応
- jQueryでの開閉ボタン
- jQueryでのpagetopボタン
- 要素の横並び→スマホで縦並び
- SNS連携
注意点
運営者によると、isaraのサイトをポートフォリオとして掲載することを許可するとのことです。
しかし注意点があるので、それを守るようにしましょう。
せっかく多くの方が https://t.co/41tkKy1Ku7 のLPを模写してくださってるので、iSaraのLPを模写コーディングした場合、ご自身の制作ポートフォリオとして掲載することを許可しようと思います。
要は、「ご自身の制作実績として公開してOK」です。※ただし注意点があるので、添付画像をごらんください pic.twitter.com/kxamsjGTHK— ケースケ🇹🇭バンコク (@Keisukexlife) December 1, 2018
コーディングの練習、模写はどこまで極めるべき？
初心者は見た目が同じならOK
初心者は見た目が同じようにできればOKです。
あまりコーディング規約にこだわりすぎて手が進まないのは良くないので。
クラス名のつけ方に迷っている方はCSSのクラス名規則・コーディングルール最低限覚えるべきことを参考にしてみてください。
仕事ではピクセルコーディングまで
実務のコーディング案件では1ピクセルもずらさない、ピクセルコーディングができるようになるまでが理想です。
ただしこれは制作会社や企業からの案件の場合です。
自分が直でお客さんから受注する直案件の場合は、デザインから任される（簡単なAdobe XDが使えればOK。使い方はAdobe XDの使い方を7分でマスター）ことが多いので、その場合はあまり厳密には問われません。
ピクセルコーディングするための、Photoshopの書き出し術は、前述したPhotoshopからコーディングする方法【10分】を参考にしてください！
無駄な模写してる気がする人は？
コーディングの練習で無駄なことをしない方法は以下を参考にどうぞ。
テキストを全く同じにするとか、単純作業を行うのは時間がもったいないです。
答えがなくてわからない人は？
申し訳ないですが、最後のiSara以外は「答え」がないです。
なので自分で無料でできることとしては、
- 「右寄せができない」などとググる
- 「似ているデザインのサイトを探してそのソースコードを参考にする」
- 無料で質問できる場所を見つけて聞く
という感じになります。
私も模写コーディングをしていた時は実際こんな感じで自力で頑張っていました（スクールに通っていたので、どうしても無理な場合は最終的にメンターに聞きましたが）。
質問については、
- オンラインもくもく会などに参加して心優しい人がいたら聞いてみる
- 無料のプログラミングのコミュニティがあったらそこで聞いてみる
などが挙げられます。
全部終わった人は？
以下の記事で、足りていない勉強はないかチェックしてみてください。
この記事では私が実体験からフリーランスとして最短で稼ぐために、無駄なこと（後回しで良いこと）も含めて書いています。
コーディングの練習まとめ
コーディングの練習はこのようにネット上のサイトを見てできるし、無料でコーディング練習ができるPhotoshopデータ素材も複数作ってくださっている方がいるので、お金をかけなくてOKです！お金をかけると買って満足してしまって、結局やらない人も多いです。
そんなもったいないことにならないように、まずは無料で勉強しましょう。
