WordPressで企業サイトを作る方法

無料でできる模写コーディングの練習!素材配布サイトのおすすめ

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

完全無料でできる方法で、コーディングの無料素材を提供してくださっている方のサイトも紹介しています。

コーディングの実案件はpsd(Photoshop)からの書き出しが圧倒的に多いです。

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

Photoshopデータから模写しよう

まずコーディングの練習方法ですが、Photoshopデータから書き出しながら行いましょう。

理由はコーディングの実案件はpsd(Photoshop)からの書き出しが圧倒的に多いからです。

Photoshopからの画像取得方法や、文字情報の取得方法など、コーディングで稼ぐのに必要最低限の情報を以下にまとめたので、これを参照しつつ行ってください!

動画説明バージョン↓

ブログ説明バージョン↓

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

 

 

無料素材で安心して練習

さらに今回紹介するPhotoshopデザインデータの無料素材を作ってくださっている、ねこぽんのサイトは、以下の引用にある通り、

無料で商用・非商用問わずお使いください。改変自由です。無許可の再配布・再販売は禁止します。

無料で商用・非商用問わず使えるので、安心です。

 

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

コーポレートサイトのデザインテンプレート

 

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

コーポレートサイトの模写コーディングです。

このデザインはよくある定番パターンで、かつ、シンプルなので結構簡単だと思います。

Progateの演習と被っているデザインもあるので、Progate後にすぐできるレベルだと思います。

ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。

 

このコーディング練習で学べること

  • ヘッダーの横並び
  • お問い合わせボタン
  • NEW一覧の横並びや下線など
  • SERVICE部分の余白が均等な横並び

 

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

ファッションサイトのデザインテンプレート

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

ファッションサイトの模写コーディングです。

このデザインの「スライダー」も結構ある定番のデザインパターンです。

スライダーとは、メインビジュアルにある矢印を押すと画像が切り替わるやつです。

ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。

 

この模写で学べること

  • スライダー(ググりつつ行ってください)
  • メインビジュアルの長丸の配置方法
  • 横並び
  • Primitiveの四角を重ねる実装

 

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

パーソナルジムサイトのデザインテンプレート

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

パーソナルジムのサイト模写です。

ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。

文字の位置をどう配置するかにつまずきやすそうなサイトです。

 

この模写で学べること

「気持ちも人生も変わっちゃったよ」っていう文字の位置の実装

「最短最速のダイエットシステム」と「その後ろの英語」が重ねて見えるようにどうするか

「満足度99%」をどう配置するか

「Why EYP?」をメインビジュアルと、その下のセクションの間にどう持ってくるか

 

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

幼稚園・学校サイトのデザインテンプレート

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

幼稚園のサイト模写です。

ねこポンさんのこちらの記事からPhotoshopデータをダウンロードできます。

 

この模写で学べること

要素をどう重ねるか(灰色と緑の重なり)

ヘッダーのそれぞれの文字間の仕切りの実装(よくあるデザインです)

 

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

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

isaraの公式サイト

模写コーディングの練習として、界隈で有名なisaraのLPです。

こちらはpsdからのコーディングではなく、実際にあるサイトの模写コーディングになります。

なのでChromeの検証ツールを開いて、答えを見ることができます。

レベル4までで紹介した練習とは異なり、PC→SPのレスポンシブにするサイトです。

分量も多く、初心者はかなり骨が折れるサイトです。

私は初めて取り組んだとき、完璧にするまで1週間かかりました。

 

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

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

  • 固定ヘッダー
  • お問い合わせフォーム
  • レスポンシブ対応
  • jQueryでの開閉ボタン
  • jQueryでのpagetopボタン
  • 要素の横並び→スマホで縦並び
  • SNS連携

 

注意点

運営者によると、isaraのサイトをポートフォリオとして掲載することを許可するとのことです。

しかし注意点があるので、それを守るようにしましょう。

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

初心者は見た目が同じならOK

初心者は最初は見た目を同じようにするというのを目標にしましょう。

その都度出た疑問点はメモしながらも、進めていくことをおすすめします。

疑問点にこだわりすぎても手が進まないため。

 

仕事ではピクセルコーディングまで

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

これは多くのWeb制作会社や一部の企業からの案件の場合です。

自分が直でお客さんから受注する直案件の場合は、デザインから任される(簡単なAdobe XDが使えればOK。使い方はAdobe XDの使い方を7分でマスター)ことが多いので、その場合はあまり厳密には問われません。

ピクセルコーディングするための、Photoshopの書き出し術は、前述したPhotoshopからコーディングする方法【10分】を参考にしてください!

 

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

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

テキストを全く同じにするとか、単純作業を行うのは時間がもったいないです。

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

 

答えがなくてわからない人は?

申し訳ないですが、最後のiSara以外は「答え」がないです。

なので自分で無料でできることとしては、

  • 「右寄せができない」などとググる
  • 「似ているデザインのサイトを探してそのソースコードを参考にする」
  • 無料で質問できる場所を見つけて聞く

という感じになります。

私も模写コーディングをしていた時は実際こんな感じで自力で頑張っていました(スクールに通っていたので、どうしても無理な場合は最終的にメンターに聞きましたが)。

質問については、「無料のプログラミングのコミュニティがあったらそこで聞いてみる」などが挙げられます。

 

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

ポートフォリオにするなら模写と明示

模写したサイトを自分のポートフォリオとするなら「模写したサイト・練習用のサイトです」などと明示し、

自分がデザインから作ったものではないこと、実務で作ったものではないこと示しましょう。

 

サーバー上にアップしない

基本的に模写したサイトと全く同じもの、類似しているものをサーバー上にアップするのはやめましょう。

特にiSaraなど既にあるサービスの場合、iSaraと検索したときにiSaraの偽物サイトが乱立しており、運営自体に迷惑がかかるからです。

例えばiSaraのホームページと間違えて偽物サイトからお問い合わせをした場合、本物の運営にそのメッセージが届かないという深刻な問題も発生します。

 

全部終わった人は?

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

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

 

模写コーディングの練習はまず無料で

コーディングの練習はこのようにネット上のサイトを見てできるし、

無料でコーディング練習ができるPhotoshopデータ素材も複数作ってくださっている方がいるので、まずはお金をかけなくてOKです。

お金をかけても買って満足してしまって、結局やらない人も多いです。

そんなもったいないことにならないように、まずは無料で勉強できることを全てやりましょう。

上記で紹介した無料で勉強できる範囲をやれずに挫折する人のほうが多いと思うので。