WEB制作

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

2021年7月7日

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

me
悩んでいる人

web制作の基礎学習が終わって模写コーディングをしたいけど、おすすめのサイトってあるの?

web制作を学習している人にとって、模写コーディングは馴染みのある言葉ですよね。

しかし、基礎学習を終えた後に、どのサイトを模写コーディングすれば良いのかわからないと悩んでいる人は多いのではないでしょうか。

今回はそんな悩みを解決するために、効率の良いサイト、順番を解説する記事を書きました。

模写コーディングはただやればいい訳ではなく、サイト選びが重要です。

サイト選びを間違えると「挫折する」可能性が非常に高まりますので、ぜひこの記事の順番通りやってほしいです。

cropped secondfavicon 1
よし

僕はいきなりiSaraの模写コーディングに挑戦して、挫折した経験があります、、

それではいきましょう!

模写コーディングとは

模写コーディングとはProgateやドットインストールでの基礎学習が終わり、一気に実務レベルまで上げる為の学習方法です。

基礎学習も重要ですが、実際にサイトを作りながらわからない所を調べて吸収していく事で圧倒的に成長できます。

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

模写コーディングおすすめサイト「初級編」

プロゲイト上級編

模写コーディングおすすめサイト プロゲイト上級編

Progate 上級編

プロゲイトの上級編をクリアした人は、アプリ内で一度作成しましたよね。

このレベルは簡単だよと思う人もいると思いますが、実際に0からコーディングするのは簡単な事ではありません。

まずは基礎学習→模写へ移る準備運動として、自分のパソコンで一から模写コーディングをしてみましょう。

ポイント

・横並び配置

・ホバーアクション

・メニューの固定

・背景画像の設置

などの超基礎を実際に使用しながら身につけていきましょう!

cropped secondfavicon 1
よし

Progateアプリ内で作るのと、0から作るのでは全然難易度がちがう!!

模写コーディングおすすめサイト「中級編」

FLOWER

スクリーンショット 2021 07 07 17.59.03

FLOWER  かわいいが届くお花便

FLOWERというサービスアプリのダウンロードに誘導するLPサイトです。

プロゲイト上級編を0から作成できたら、本格的に模写コーディングに入っていきます。

自信がある人はいきなり難易度の高いサイトや、後ほど紹介する「iSara」の模写に挑戦してもいいと思いますが、挫折の危険性があります。

難しいサイトで挫折するより、まずは達成感を得る事が大切なので、こちらのサイトがおすすめです。

プロゲイトなどの基礎学習を終え、模写コーディング初心者にちょうど良いレベルのサイトです。

ポイント

・ヘッダーやハンバーガーメニューがない

・複雑なアニメーションや装飾がない

・サイトの長さが最適

・ブロックで作られているので、レスポンシブ化が比較的簡単

・デザイン性が高く、モチベーションが上がる

こちらのサイトはデザイン性も高く、完成が近づくにつれかなり達成感が得られます。

PAS-POL

模写コーディングおすすめサイト POS-PAL

PAS-POL 旅のモノづくりブランド

次に模写コーディングしておきたいサイトは、こちらのPAS-POLというサイトです。

こちらも構造としては比較的簡単で、ボリュームもそれほど多くありません。

しかし、実務でもかなり出てくる技術を一気に学べるので、ぜひやっておきたいですね。

ポイント

・ヘッダーメニュー、ロゴの配置

・スマホ時のハンバーガーメニュー

・スライドショーの実装

・jQueryクリックアクション

トップビューの下の丸みを帯びている部分は少し特徴的ですが、できれば調べながら実装しましょう!

cropped secondfavicon 1
よし

ヒントは、background-imgを使う事です!

レスポンシブまでしっかり実装しましょう。

この時点で実務に通用する技術はついています。

最後の模写コーディングは実務だと思って挑戦しましょう!

模写コーディングおすすめサイト「上級編」

イサラ

模写コーディングおすすめサイト iSara

iSara

模写コーディング界で王道となっている「iSara」のLPです。

多くのweb制作系フリーランスの方が模写をおすすめしているLPなので、是非挑戦してみましょう。

レベル感やボリュームがこれまでのサイトとは異なり、かなり上級者向けです。

しかし、ここまでのサイトをしっかり模写できていれば、技術的には問題はないかとお思います。

この段階で挫折してします人はかなり多いですが、逆にここをクリアすればコーディング案件はこなせるレベルと言えるでしょう。

ポイント

・jQueryクリックアクション

・CSS擬似要素

・フォームの作成(HTML,CSSのみ)

・ボリュームに耐え切る根性

模写コーディングが難しいと感じたら

残念な事ですが、web制作の学習は挫折率がめちゃくちゃ高いです。

特に、あと少しで結果を出せる模写コーディングの段階で挫折する人は多いみたいです

cropped secondfavicon 1
よし

もったいない!!!!!

模写コーディングで難しすぎると感じたら、一旦基礎学習に戻るのも全然ありです。

焦らずにいきましょう。

模写コーディングが終わったら

模写コーディングが無事終わったら、実案件をこなす技術は身についているはずです!おめでとうございます。

しかし、いきなり営業しても案件を取ることは簡単ではありません。

他の初学者と差別化しながら、効率よく案件獲得を目指しましょう!

模写コーディングが終わったら、自作サイトを作ろう! 

それでは!

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