WEB制作

【web制作】模写コーディングのやり方を解説!

2021年7月7日

こんにちは、よし(@yoshi120208)です。

me
悩んでいる人

web制作の基礎学習が終わって模写コーディングをしたいけど、やり方がわからない!!

今回は、web制作を学習している人ならおなじみの模写コーディングのやり方について解説していきます。

この記事でわかること

・模写コーディングの具体的なやり方

・模写コーディングのルール設定

・模写コーディング時に便利なツール

こちらもCHECK

【簡単→難しい】模写コーディングおすすめサイト4選
【簡単→難しい】模写コーディングおすすめサイト4選

続きを見る

こちらもCHECK

web制作 稼げない人の特徴
【web制作】稼げないで挫折する人の特徴と解決策

続きを見る

 

模写コーディングとは 

模写コーディングとは
模写コーディングとは

模写コーディングとは、既にあるサイトを真似して0からwebサイトを作成する学習方法です。

Progateなどの基礎学習を終えた後にもってこいの学習方法です。

模写コーディングのメリット

・基礎学習のアウトプット、復習になる

・自分に不足してるスキルがわかる

・0から自分のPCでコーディングできるようになる

・分からない部分をググって解決できるようになる

これらのように、模写コーディングではかなり実務に近いスキルを身に付けられます。

難易度も当然上がりますので、挫折してしまわないよう注意しましょう。

まだこのレベルに達していない場合はまずはしっかり基礎を学習するべきです。

模写コーディングのやり方【ルール設定】

模写コーディングを始める前に、まずはルールを設定しましょう。

ルールには正解がある訳ではないので、今の自分が成長するために必要なルールを作りましょう。

今回は、僕が模写コーディングをしていた際のルールを解説しますので、ぜひ参考にしてみてください!

cropped secondfavicon 1
よし

僕はProgateが終わってすぐに模写コーディングを始めました!

模写コーディングのルール

・フォントは合わせなくてもいい

・検証ツールは見てはいけない

・レスポンシブ化する

・数ピクセルのずれは許容する(一回だけパーフェクトピクセルで模写してみる)

・アニメーションは可能な限り似せる

解説していきます。

フォントは合わせなくてもいい

のちに紹介する、what fontを使用すればフォントを簡単に確認する事はできますが、毎回フォントを合わせる必要はありません。

フォントの使用方法さえ知っておけば良いので、出来る事を繰り返して無駄な時間を使わないようにしましょう。

検証ツールは見てはいけない

ここは一番大切です。検証ツールは最後の答え合わせの時以外、使わないようにしましょう。

模写コーディングをする時は、実案件を意識する事が大切です。

実装方法がわからくても、答えは見れませんよね?ググりまくってください。

検証ツールを見てしまうと、模写コーディングで身に付く大切なスキルが身につきません

このルールだけは絶対に守るようにしましょう!

レスポンシブ化する

模写コーディングでPC版だけで終わらせてしまっている人はもったいないです。

スマホの普及率を考えてもわかりますが、現状、コーディング案件でもレスポンシブ化はほぼ確実に必要です。

新しいサイトをいくつも模写したい気持ちもわかりますが、一つずつしっかりレスポンシブ化していきましょう。

数ピクセルのずれは許容する

個人的にマージンやパディングの数ピクセルのずれは許容しても良いと思います。

ただ、注意点として一度はパーフェクトピクセルで模写コーディングをしておいた方が良いです。

一度パーフェクトピクセルで模写しておけば、今後もおそらくできるので、何度も繰り返す必要はありません。

cropped secondfavicon 1
よし

毎回パーフェクトピクセルは大変そう、、

アニメーションは可能な限り似せる

jQueryやCSSのアニメーションは可能な限り本物に似せるようにしましょう。

実案件でもクライアントさんから「このアニメーションを参考にして」のように依頼されることが多いので、同じような感覚です。

似たような動きが多いのでテンプレート化して数値を変えるだけにしておけばそれほど難しい事ではありません。

模写コーディングのやり方【具体的な手順】

模写コーディングのやり方「具体的な手順」
模写コーディングのやり方「具体的な手順」

ルールを確認できたら、早速コーディングを始めましょう。

模写コーディングする際のやり方に絶対はありませんが、僕の手順とポイントを解説しておきます。

  1. HTMLを書く
  2. CSSを書く
  3. レスポンシブ化する
  4. 毎セクション繰り返す
  5. アニメーションを実装する
  6. ソースコードの確認、復習

模写コーディングのポイント

・1ブロック毎にレスポンシブまで作成していく

・アニメーション等は最後に実装する

・一通り終わったら検証ツールで答え合わせ+復習

ポイントを解説していきます。

1ブロック毎にレスポンシブまで作成していく

HTMLを全て書いてからCSSを書いていく方法もあると思いますが、個人的にはお勧めしません。

慣れていないと全体を一気に組み立てるのは難しく、結局あとで修正するはめになってしまいます。(僕はそうでした)

また、早く進めたいと思い、一旦レスポンシブなしで作成することもあまりおすすめ出来ません。

長い時間をかけてやっと完成した後に、また1からレスポンシブ化させていくのは単純にモチベーションがゲキ落ちします。

cropped secondfavicon 1
よし

僕はこれで、レスポンシブ化せずに終わらせたサイトがいくつかあり、後悔してます。。

アニメーション等は最後に実装する

jQueryなどを使用したアニメーションは最後にまとめて実装した方がいいです。

一度実装したことがある人はわかると思いますが、web制作で使うjQueryの記述はそれほど多くありません。

同じ記述の一部だけ変えて使用することが多いです。

そのため、ひとつずつ実装していくよりも、最後にまとめて実装した方が効率よく終わらせることができます。

ソースコードの確認、復習

一通り模写コーディングが完了したら、検証ツールを使って答え合わせしましょう

そこまで細かくチェックする必要はありませんが、自分の知らないCSSの機能やHTMLの記述方法は次の模写コーディングで使えるよう学習しておきましょう。

模写コーディングに使うツール

Image Downloader

サイトに使用されている画像を一気に保存する事ができます。

注意点として、background-imgで設定されている画像は保存できません。

背景画像は代用を使うか、検証ツールからURLを確認して直接保存するかで対応しましょう。

Image Downloaderをダウンロードする

Full Page Screen Capture

模写コーディングしたいサイトの全体をスクリーンショットする事ができます。

サイトの全体を一気に確認することができる為、ぜひ使用しましょう。

Full Page Screen Captureをダウンロードする

PerfectPixel

Full Page Screen Captureで保存した画像と、模写コーディングしたサイトを重ね合わせることができます。

実際の案件でもデザインとコーディングはズレがないのに越したことはないので、こちらのツールで練習しておきましょう。

PerfectPixelをダウンロードする

WhatFont

模写コーディングするサイトでどのフォントが使用されているか一瞬で確認することができます。

いちいち検証ツールで確認する必要がないので、使用をおすすめします。

WhatFontをダウンロードする

模写コーディングのやり方は臨機応変に!

いかがでしたか?

この記事では模写コーディングのやり方を解説しましたが、実際は必要なスキルさえ身につけばどんなやり方でも問題ありません。

今の自分に足りないスキルを補えるよう、臨機応変にルールを設定することがおすすめです。

模写コーディングをしっかりこなせば、実際の案件で使うスキルは十分身についています!

すぐに営業を始めても問題ありませんが、他の初学者と差別化をした方が効率よく案件獲得につながるのでおすすめです。

クラウドソーシングでweb制作案件を獲得する手順

それでは!

no image

大学生

2021/10/18

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/9/30

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

ブログ運営

2021/9/5

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

WEB制作

2021/9/30

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

簡単なサムネ、バナーの作り方!

WEB制作 ブログ運営

2021/8/19

【簡単】短時間でサムネ、バナーを作る手順!

no image

WEB制作

2021/8/18

webデザイナーはコーディングできないといけない??

no image

WEB制作

2021/8/19

【web制作は大変?】実際に経験した感想を語る

no image

WEB制作

2021/10/8

webデザイナーは絵が下手でもなれる?!

no image

WEB制作

2021/8/15

web制作案件に必要なスキルセット【初心者必見】

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想

プログラミング

2021/10/16

【文系もOK】レバテックルーキーの評判と使ってみた感想

【Udemy】web制作が学べるおすすめ講座  

WEB制作

2021/10/14

【Udemy】web制作が学べるおすすめ講座  

5149301 s

ブログ運営

2021/8/20

【特化ブログ運営2ヶ月目】アクセス数と収益は先月から変わった??

fv e1622358020615

ブログ運営

2021/8/13

ブログのコンタクトフォームの必要性と実装方法

【Local By Flywheel】WordPressのローカル環境構築手順

WEB制作 wordpress

2021/8/23

Local By FlywheelでWordPressローカル環境を構築する方法

undraw warning cyit

プログラミング

2021/8/23

プログラミングスクール卒業生が「使えない」と言われる理由と解決策

WordPressの子テーマのメリットデメリット

wordpress

2021/10/12

【WordPress】子テーマの作成方法とメリットを解説

undraw researching 22gp

プログラミング

2021/10/12

文系大学生が新卒でエンジニア就職する方法

【安い】大学生に本気でおすすめのwebデザインスクール4選!

WEB制作

2021/9/29

大学生におすすめのwebデザインスクール4選【安い】

-WEB制作

© 2021 よしブログ Powered by AFFINGER5