WEB制作

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

2021年7月7日

【web制作】模写コーディングのやり方、手順を解説!
me
悩んでいる人

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

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

既に模写コーディングについて詳しく知っている人は、早速手を動かしましょう。
以下の記事では【簡単→難しい】の難易度順におすすめサイトを解説しているので、「どのサイトから模写するべきかわからない!」人はぜひ参考にしてください。
>>>【簡単→難しい】模写コーディングおすすめサイト4選

この記事でわかること

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

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

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

模写コーディングとは 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

IMG 5924
よし

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

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

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

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

・レスポンシブ化する

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

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

それぞれ詳しく解説していきます。

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

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

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

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

ここは一番大切です。

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

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

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

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

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

レスポンシブ化する

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

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

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

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

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

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

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

IMG 5924
よし

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

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

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

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

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

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

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

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

模写コーディングする際のやり方に絶対はありません。

僕は以下の手順でコーディングしていたので、参考にしてみてください。

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

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

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

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

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

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

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

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

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

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

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

IMG 5924
よし

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

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

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をダウンロードする

模写コーディングができないと感じたら

模写コーディングを試しにやってみて、

「全然できない!」

と思ったら、基礎学習が足りてないかもしれません。

参考書やテックアカデミーの無料講座でHTML,CSSの基礎を復習するのも一つの手です。

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

いかがでしたか?

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

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

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

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

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

それでは!

no image

NFT

2022/4/8

【OpenSea】Polygon(ポリゴン)NFTは売れない?デメリットはある?

no image

NFT

2022/4/16

OpenSeaで予約販売(List)する方法【自動で出品】

no image

NFT

2022/4/5

売れないNFTアートと売れたNFTアートを徹底比較【実体験】

no image

NFT

2022/3/3

【超簡単】OpenSeaのアイテムをコレクション移動させる方法【販売後も可能】

no image

NFT

2022/2/5

写真のNFT化・販売方法について徹底解説!

no image

NFT

2022/2/2

OpenSeaが突然の出品制限【50作品×5コレクションが上限に?】

no image

NFT

2022/1/26

【簡単】OpenSeaのアカウントを複数作る方法

no image

WEB制作

2022/4/3

テックアカデミー「はじめての副業コース」のLiteプランがヤバすぎる!

no image

仮想通貨 NFT

2022/1/5

【簡単】コインチェックで仮想通貨を購入・MetaMaskに送金する手順

no image

NFT 仮想通貨

2022/1/5

【2022年】メタマスクの使い方・送金方法を徹底解説【初心者でも簡単】

no image

仮想通貨

2022/1/24

【実体験】仮想通貨初心者にコインチェックがおすすめな理由

no image

仮想通貨

2022/1/24

【2022年】コインチェックの口座開設方法を5段階で解説

no image

NFT

2022/1/6

【バズるコツも紹介】NFTギブアウェイ(Giveaway)のやり方とメリット・デメリットを解説

no image

仮想通貨

2022/1/6

Hi Dollars(ハイダラーズ)アプリのマイニングで仮想通貨を貰おう【無料でゲット】

no image

NFT

2021/12/30

NFTエアドロップの受け取り方・送り方を解説【初心者でも簡単】

no image

NFT

2021/12/26

NFTアートが売れないときの対処法と稼ぐコツ【今すぐできる】

no image

NFT

2022/1/5

OpenSeaでのNFTアートの作り方【出品手数料やガス代も解説】

no image

WEB制作 プログラミング

2021/12/21

分割払いできる?デイトラの支払い方法を解説!【結論:カード使えば分割可能】

no image

プログラミング

2021/12/7

【退会料はかかる?】レバテックルーキーの退会方法【他のIT就活サービスも紹介】

no image

WEB制作

2021/12/5

デジタルハリウッドSTUDIO by LIG(Webデザイナー専攻)の学習内容と評判【2021年最新】

-WEB制作

© 2022 よしブログ Powered by AFFINGER5