コーディングの練習模写サイトをレベル別に紹介。
独立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の書き出し術は以下を参考にしてください。
コーディングの練習で無駄なことしてる気がする人は？
コーディングの練習で無駄なことをしない方法は以下を参考にどうぞ。
コーディング練習でエラーにつまづいたら？
コーディングの練習のエラーで躓いたら、よくあるエラーをまとめた以下の記事を参考にどうぞ
コーディングの練習向け模写サイトまとめ
今回は、LPの初心者向け模写サイトのみを集めました。
wordpressのブログ型メディアなどは、既存のwordpressテーマをカスタマイズするのがちょっと難しいので
初心者は、上のようなLP型の方が簡単だと思い、これらを集めました。
ちなみに、5サイトも模写する人はあまりいないだろうと思い、これだけしか紹介していませんが、これをやるだけでもかなり骨が折れて、力がつくと思うので是非頑張ってください。
