WEB制作

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

2021年7月7日

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

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

me
悩んでいる人

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

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

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

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

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

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

IMG 5924
よし

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

それではいきましょう!

模写コーディングとは

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

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

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

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

プロゲイト上級編

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

Progate 上級編

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

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

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

ポイント

・横並び配置

・ホバーアクション

・メニューの固定

・背景画像の設置

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

IMG 5924
よし

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

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

FLOWER

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

FLOWER  かわいいが届くお花便

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

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

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

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

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

ポイント

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

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

・サイトの長さが最適

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

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

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

PAS-POL

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

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

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

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

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

ポイント

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

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

・スライドショーの実装

・jQueryクリックアクション

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

IMG 5924
よし

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

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

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

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

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

イサラ

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

iSara

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

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

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

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

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

ポイント

・jQueryクリックアクション

・CSS擬似要素

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

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

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

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

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

IMG 5924
よし

もったいない!!!!!

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

焦らずにいきましょう。

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

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

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

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

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

それでは!

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