web制作で稼ぐなら最初に読んで欲しい記事

コーディングの練習模写サイト!無料素材あり【頻出】

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

完全無料でできる方法で、コーディングの無料素材も紹介しています。

コーディングの実案件はpsd(photoshop)からの書き出しが圧倒的に多いので、photoshopの無料素材を紹介しています!

 

コーディングの練習模写サイト:無料素材つき

photoshopデータから模写しよう

コーディングの実案件はpsd(photoshop)からの書き出しが圧倒的に多いので、ねこポンさんのphotoshopの無料素材を紹介しています!(サイトごとにリンクあります)

photoshopからの画像取得方法や、文字情報の取得方法など、コーディングで稼ぐのに必要最低限の情報を以下にまとめました。

これを参照しつつ行ってください!

動画ver

テキストver

Photoshopからコーディングする方法【10分】

 

ただし、これをやる余裕がない、とりあえず細かいところは気にせずに形にしてモチベーションを上げたい!という方は、どんどん進めていって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の模写で学べること

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

 

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

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

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

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

web制作会社案件で最低限必要なスキル6つ

 

 

無駄な模写してる気がする人は?

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

LP模写コーディング初心者におすすめの方法と無駄な練習

 

全部終わった人は?

以下の記事で、足りていない勉強はないかチェックしてみてください。

この記事では私が実体験からフリーランスとして最短で稼ぐために、無駄なこと(後回しで良いこと)も含めて書いています。

web制作で稼ぐ勉強方法!無駄な勉強をやめて速く稼ごう

 

コーディングの練習まとめ

コーディングの練習はこのようにネット上のサイトを見てできるし、無料でコーディング練習ができるphotoshopデータ素材も複数作ってくださっている方がいるので、お金をかけなくてOKです!

まずは無料で勉強をするのがオススメです。

コーディングの練習注意点

ちなみに、コーディングの練習を今回紹介した無料配布素材ではなく、「企業などの既存サイト」で行う場合、以下に注意してください。

それ以外の人は読み飛ばしてOKです。

コーディングしたファイルはFTPなどでネットにアップロードしないように注意してください。

自分だけのものとして手元に留めて、面談などで必要があれば、「練習で模写コーディングしました」と言いましょう。

最後に紹介したiSaraのサイトは柔軟な対応をしてくれていますが、これもサーバー上にはあげないようにしましょう。

以前紹介した模写サイトについて

以前紹介した模写サイトの記事内容(レベル1~4)は、難易度が高いとの声を多数いただいたので、消去しました(ごめんなさい)。

が、もしみたいという人がいれば、お問い合わせフォームからご連絡ください。3/12までなら内容をメールで送ります。