コーディングの練習模写サイト【頻出のみ40件以上の実務経験から集めた】

コーディングの練習模写サイトをレベル別に紹介。

独立9ヶ月目までの40件以上の実務制作経験から、頻出だったパターンのみを紹介しているので、駆け出しフリーランスには参考になると思います。

よくあるパターンの模写をすることで、無駄な作業をしないように気をつけましょう

色々なパターンの模写サイト制作をするのも良いですが、それが無駄になったら悲しいです。

各模写サイトごとに、練習しなくて良いことも紹介。

 

コーディングの練習模写サイト:レベル1

コーディング練習レベル1の概要

東京リバブル(PC版)のLPです。

とてもよくあるパターンのLPで、画像が多いので、実装が楽です。

さらにサイトボリューム自体も短いので、progateやったら最初にやる模写サイトとして良いと思います。

 

コーディング練習レベル1の模写で学べること

  • 選択ボタン(フォーム)
  • 影付きボタン
  • 横並びの実装
  • OKボタンの「丸い形」の実装
  • fontawesomeなどのアイコンを使ったお問い合わせボタンの実装

 

コーディング練習レベル1の模写で不要なこと

このサイトで模写しなくて良いことは、以下の画像の「選択ボタンで選択すると灰色の「OK」マークが青色になる」実装です。

 

選択ボタン選択前の状態

選択ボタン選択後の状態

 

初心者は、まだできなくてOK。これ以外ができたら次に進みましょう。

さらに他のサイトにも共通ですが、chromeの検証で見て、画像になっているところはコードで書き起こす必要はないです。

 

コーディングの練習模写サイト:レベル2

コーディング練習レベル2の概要

東京リバブル(スマホ版)のLPです。

コーディング練習1のスマホ版です。全体的に縦の構成になっており、あまり複雑ではありません。

 

コーディング練習レベル2の注意点

コーディング練習レベル1のLPとは、異なるLPとして作成してください。

そもそもURLが異なっており、画像なども少し変わっているページです。

chromeの「検証」で、よくあるスマホサイズである375pxなどにして模写サイトを見て、コーディング練習をしましょう。

chromeの検証は、模写サイトを右クリック→検証クリックして、左下にあるデバイスマーク(上の画像で青くなっているスマホマーク)を押せばOKです。

 

コーディング練習レベル2の模写で不要なこと

レベル1と同様。

 

コーディングの練習模写サイト:レベル3

コーディング練習レベル3の概要

zen place yoga(PC版)のLPです。

これもとてもよくあるパターンのLPで、画像が多いので、実装が楽です。

 

コーディング練習レベル3の模写で学べること

 

コーディング練習レベル3の模写で不要なこと

スタジオ一覧に店舗がたくさんありますが、単純作業になるので、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の模写で学べること

今までのサイトの集大成と言う感じです。

 

コーディング練習レベル5の模写で不要なこと

以下の「ピンクで囲まれた部分の実装」は、あまり頻出のデザインではないので、諦めてOKです。

 

1.カギカッコの実装

 

2.流れの線の実装

 

3.箱の線の上に文字が来る実装

 

コーディングの練習、模写はどこまで極めるべき?

psdデータから書き出して練習すべき

実務では、ほぼpsdデータからの書き出し

本当はpsd(photoshop)データから書き出してコーディングをするのが良いです。

実務ではphotohopから書き出すパターンがほとんどだからです。

ですが、コーディング練習に適した無料のphotoshopデータ配布がなかなか見つからないこと、

それを実装までしたサイトの見本が見つからないので、今回は模写サイトのみ紹介しました。

無料のpsdデータを見てみたい人は?

無料のphotoshopデータとして、LIGさんが配布しているデータがあるので、実際どんなものかを見てみてください。(photoshoopで開いてください)

こんな感じのものを見て実際に実装します。

 

コーディング練習はピクセルコーディングまでが必須

実務のコーディングは1ピクセルもずらさない、ピクセルコーディングができるようになるまでが必要です。

ピクセルコーディングするための、photoshopの書き出し術は以下を参考にしてください。

web制作会社案件で最低限必要なスキル5つ。初心者フリーランス向け

 

コーディングの練習で無駄なことしてる気がする人は?

コーディングの練習で無駄なことをしない方法は以下を参考にどうぞ。

LP模写コーディングのやり方!誰も気づいてない無駄な練習はコレ

 

コーディング練習でエラーにつまづいたら?

コーディングの練習のエラーで躓いたら、よくあるエラーをまとめた以下の記事を参考にどうぞ

プログラミング・コーディングができない?progate卒業後の初心者がしがちなエラー15

 

コーディングの練習向け模写サイトまとめ

今回は、LPの初心者向け模写サイトのみを集めました。

wordpressのブログ型メディアなどは、既存のwordpressテーマをカスタマイズするのがちょっと難しいので

初心者は、上のようなLP型の方が簡単だと思い、これらを集めました。

ちなみに、5サイトも模写する人はあまりいないだろうと思い、これだけしか紹介していませんが、これをやるだけでもかなり骨が折れて、力がつくと思うので是非頑張ってください。