コーディングの練習模写サイトをレベル別に紹介。完全無料でできる方法です！
独立9ヶ月目までの40件以上の実務制作経験から、頻出だったパターンのみを紹介しているので、駆け出しフリーランスには参考になると思います。
よくあるパターンの模写をすることで、無駄な作業をしないように気をつけましょう。
色々なパターンの模写サイト制作をするのも良いですが、それが無駄になったら悲しいです。
各模写サイトごとに、練習しなくて良いことも紹介。
目次
コーディングの練習模写サイト：レベル1
コーディング練習レベル1の概要
東京リバブル（PC版）のLPです。
とてもよくあるパターンのLPで、画像が多いので、実装が楽です。
さらにサイトボリューム自体も短いので、progateやったら最初にやる模写サイトとして良いと思います。
コーディング練習レベル1の模写で学べること
- 選択ボタン（フォーム）
- 影付きボタン
- 横並びの実装
- OKボタンの「丸い形」の実装
- fontawesomeなどのアイコンを使ったお問い合わせボタンの実装
コーディング練習レベル1の模写で不要なこと
このサイトで模写しなくて良いことは、以下の画像の「選択ボタンで選択すると灰色の「OK」マークが青色になる」実装です。
選択ボタン選択前の状態
選択ボタン選択後の状態
初心者は、まだできなくてOK。これ以外ができたら次に進みましょう。
さらに他のサイトにも共通ですが、chromeの検証で見て、画像になっているところはコードで書き起こす必要はないです。
コーディングの練習模写サイト：レベル2
コーディング練習レベル2の概要
東京リバブル（スマホ版）のLPです。
コーディング練習１のスマホ版です。全体的に縦の構成になっており、あまり複雑ではありません。
コーディング練習レベル2の注意点
コーディング練習レベル1のLPとは、異なるLPとして作成してください。
そもそもURLが異なっており、画像なども少し変わっているページです。
chromeの「検証」で、よくあるスマホサイズである375pxなどにして模写サイトを見て、コーディング練習をしましょう。
chromeの検証は、模写サイトを右クリック→検証クリックして、左下にあるデバイスマーク（上の画像で青くなっているスマホマーク）を押せばOKです。
コーディング練習レベル2の模写で不要なこと
レベル１と同様。
コーディングの練習模写サイト：レベル3
コーディング練習レベル3の概要
zen place yoga（PC版）のLPです。
これもとてもよくあるパターンのLPで、画像が多いので、実装が楽です。
コーディング練習レベル3の模写で学べること
- 角なしボタン
- youtubeの埋め込み
- リンクホバー
- 横並び
- jqueryでのpagetopボタン
- リスト構造
コーディング練習レベル3の模写で不要なこと
スタジオ一覧に店舗がたくさんありますが、単純作業になるので、３つくらいでOK
もちろんテキストは全てダミーでOKです。
コーディングの練習模写サイト：レベル4
コーディング練習レベル4の概要
レベル4は、zen place yoga（SP版）です。
レベル3のヨガのLPのスマホ版の模写です。レベル3より断然レベルが上がっています。
こちらもURLが異なるので、レベル3のサイトとは別に作成するタイプです。
コーディング練習レベル4の模写で学べること
コーディング練習レベル3で書いてある内容以外を追加して書きます
- ハンバーガーメニューの作成
- ハンバーガーメニューのjqueryでの開閉ボタン
- ハンバーガーメニューの追従
- CVボタンの追従（右下の体験レッスンお申し込みはこちらと言うオレンジのボタン）
- スライダー（メインビジュアル）
- テーブル作成（footer）
- SNSボタン
- タイトルの一部に下線を引く実装
コーディング練習レベル4の模写で不要なこと
SNSボタンのホバー時の動き。この動きをするLPは多くはありません。
お知らせ画像のホバー時の動き。この動きをするLPは多くはありません。
コーディングの練習模写サイト：レベル5
コーディング練習レベル5の概要
模写コーディングの練習として、界隈で有名なisaraのLPです。
レベル4までで紹介した練習とは異なり、PC→SPのレスポンシブにするサイトです。
分量も多く、初心者はかなり骨が折れるサイトです。私は初めて取り組んだとき、完璧にするまで1週間かかりました。
コーディング練習レベル5の模写で学べること
今までのサイトの集大成と言う感じです。
- 固定ヘッダー
- お問い合わせフォーム
- レスポンシブ対応
- jqueryでの開閉ボタン
- jqueryでのpagetopボタン
- 要素の横並び→スマホで縦並び
- SNS連携
コーディング練習レベル5の模写で不要なこと
以下の「ピンクで囲まれた部分の実装」は、あまり頻出のデザインではないので、諦めてOKです。
1.カギカッコの実装
2.流れの線の実装
3.箱の線の上に文字が来る実装
コーディングの練習、模写はどこまで極めるべき？
psdデータから書き出して練習すべき
実務では、ほぼpsdデータからの書き出し
本当はpsd（photoshop）データから書き出してコーディングをするのが良いです。
実務ではphotohopから書き出すパターンがほとんどだからです。
ですが、コーディング練習に適した無料のphotoshopデータ配布がなかなか見つからないこと、
それを実装までしたサイトの見本が見つからないので、今回は模写サイトのみ紹介しました。
無料のpsdデータを見てみたい人は？
無料のphotoshopデータとして、LIGさんが配布しているデータがあるので、実際どんなものかを見てみてください。（photoshoopで開いてください）
こんな感じのものを見て実際に実装します。
コーディング練習はピクセルコーディングまでが必須
実務のコーディングは1ピクセルもずらさない、ピクセルコーディングができるようになるまでが必要です。
ピクセルコーディングするための、photoshopの書き出し術は以下を参考にしてください。
コーディングの練習で無駄なことしてる気がする人は？
コーディングの練習で無駄なことをしない方法は以下を参考にどうぞ。
コーディング練習でエラーにつまづいたら？
コーディングの練習のエラーで躓いたら、よくあるエラーをまとめた以下の記事を参考にどうぞ
コーディング練習、次のステップは？
wordpressの模写コーディングも行ってみましょう。
コーディングの練習向け模写サイト注意点
成果物はサーバー上に上げない
注意点として、コーディングしたファイルは絶対FTPなどでネットにアップロードしないように気をつけましょう。理由は、元のサイトの作成者に迷惑がかかるからです。
基本的に自分だけのものとして手元に留めて、面談などで必要があれば、Google Driveなどに保存してリンクを知っている人だけがみられるようにしましょう。
また「自分の制作物」というと誤解されるので、「練習で模写コーディングしました」と言いましょう。
最後に紹介したiSaraのサイトはスクールとして柔軟な対応をしてくれていますが、これもサーバー上にはあげないようにしましょう。
TwitterやSNSに画像をあげない
また、Twitterに成果物・もしくは途中の状態の画像をあげるのもやめておきましょう。
この点については、最初型ブログに注意点として書くのを失念しており、すいません。
SNSにあげることでモチベーションはアップするのですが、これも元のサイト制作者や、サービス企業に迷惑がかかる可能性があるからですm(__)m
ただし、最後に紹介したiSaraのサイトの場合は、Twitterに練習過程や成果物の画像をあげても良いようです！
コーディングの練習まとめ
コーディングの練習はこのようにネット上のサイトを見てできるので、お金をかけなくてOKです！
もし安くメンターなどに添削してもらえるなら、添削してもらっても良いと思います。
