コーディングの実践的な勉強はサイト模写!初心者がするべきやり方

コーディングというのはサイトを作るうえで、必要な技術ですが、スキルを身に付けるのはなかなか難しいですよね?ある程度基礎を覚えたら、次は模写コーディングをしたらいいらしい。最近よくそんな情報を見るので、無料学習サイトで学び終わった人のためにそのやり方を紹介します。

僕はサイトを作るHTMLとCSSというマークアップ言語といわれるものを使って、コーディングをしてサイトを作った経験があります。

 

 

ところがまだまだ未熟で自分の納得のいくサイトが作れていないと思い、効率のいい勉強法はないかと探していたら、「模写コーディング」という学習法を見つけました

 

Twitter上ではたくさんの人は挑戦していて、これは早く使わないと…と思っていたんですが、ただ模写するだけでもいいのか不安でもっと深く調べていたんです。

 

コーディングのお仕事に関しての勉強法は、その仕事の環境に使い状態で、そのまま勉強したほうがいいと過去記事で紹介しました。

 

じつは模写コーディングというのは、比較的その状態に近いんですよ。

メガネさん
メガネさん

ちょっと調べただけでたくさんの人が取り組んでいるんだし、いい勉強法なんだろうな…と思っていましたが、どうせなら効率的にやってみたいですよね!

  1. コーディングで仕事を受ける流れを把握しておけば勉強しやすいよ | メガネ通信

 

スポンサーリンク

初心者の僕は模写するためのサイトを探してみた

模写コーディングがちょうどいい理由は、予めデザインされた状態のサイトを、見ながらコーディングをするという仕事をもらった状態に似ているからなんです。

 

コーディングというのはHTMLとCSSというコードを、テキストエディタに書き込んでいくもので、デザインというものは省かれています。

 

勉強ではまっさらの状態ですから、参考になるものを探す必要があるわけです。

 

模写コーディングというのは、先に完成しているサイトを見ながらコーディングするので、勉強法としては最適ですよね?

 

ところが模写するサイトなら、なにを選んでもいいわけでなく、デザインが洗練されたものを選んだほうがいいでしょう。

 

そこでその模写するためのサイトが、たくさん集まったおすすめのサイトを紹介しますね。

メガネさん
メガネさん

おしゃれなものほど作るのが難しそうですが、意外に慣れれば簡単になるみたい…。模写を続けていくとコーディングするスピードも早くなって、仕事に役立ちますよ。

 

自分の気に入ったデザインのサイトを模写!

まずどのサイトがいいの?聞かれたら、自分が気に入ったおしゃれなサイトを模写コーディングするのが1番!これはモチベーションが全然違うからなんですよね!

 

コーディングに限らずプログラミングの世界では、初心者が勉強していて挫折する人が、全体の99%だといわれています

 

なるべくモチベーション高めて、勉強を続けないとものになりません。そこで自分の好みのサイトを模写していると、好きなデザインというのもあって、続けやすくておすすめというわけです。

 

どのサイトを模写していいのかわからない人は、とにかく自分の好みのデザインのサイトを、コーディングしてコピーしてしまいましょう。

メガネさん
メガネさん

好きこそものの上手なれっていうやん!

 

簡単すぎるサイトはあまり選ばないほうがいい

いくら自分の好みのデザインだからと、簡単にコーディングができてしまうサイトは、勉強としてはよくないですよね?

 

最初作ったサイトが僕にもあるんですが、個人的にスラスラ作れたのですが、自分よりレベルが低いサイトというのはあまりスキルが身に付いた気がしませんでした

 

なるべく自分のスキルにないくらいのレベルのサイトを見つけてきて、模写するぞ!という意気込みが必要です。

 

ちなみに僕はjQueryを使ったコーディングしましたが、かなり時間がかかったけど勉強になりましたよ。

 

メガネさん
メガネさん

模写コーディングをする場合は、シンプルで素朴の造りのサイトで模写しないように気を付けよう!

 

Pinterestを使えば模写しやすいサイトがたくさん

かといってどこからそんな勉強になるサイトを見つけてきたらいいのか、全然わからない…なんて言う人は、Pinterestというサイトを見てみてください!

 

このサイトはインスタグラムのような、画像に関するSNSのような位置づけです。

 

もちろんSNSに関しての機能は少ないですが、どちらかというと画像をブックマークするものがメインとなっています。

 

たくさんの人が利用しているので、たくさんのwebデザインが掲載されているので、模写するサイトを見つけるのにちょうどいいでしょう。

ピンタレスト (日本 / Japan)
Discover recipes, home ideas, style inspiration and other ideas to try.

 

模写コーディングする前にそろえておくべきおすすめのツール

サイトを模写してコーディングするのは、デザインされたものを見ながら、それをマネするためにです。ただサイトを見ただけでは、なかなか模写するのは、初心者の段階では難しいでしょう。

 

というより仕事では距離などもしっかり指定されている場合が多いみたいなので、その通りにコーディングして模写できていないと、やり直ししなくてはいけなかった…なんて声もよく耳にします

 

そこでなるべく正確に模写コーディングするために、以下のツールを使うのがおすすめです。

メガネさん
メガネさん

模写しやすくなるし、これから仕事を受けていくのにも使えて便利だね!

 

Googleの拡張機能がおすすめ!サイトのデザインを把握

コ-ディングの基礎を身に付けさせてくれた学習サイトであるドットインストールでは、インターネットブラウザはGoogle chromeがいいと紹介してくれていました。

  1. プログラミング初心者の味方であるドットインストールの使い方は簡単 | メガネ通信

 

じつは模写コーディングでも、拡張機能というものを使えば、模写するサイトのデザインを把握できてしまうんです。Twitterでもたくさんの人がおすすめしていました。

 

 

まずサイト内の色を把握するために使える「color zilla」というもの。知りたい色のところでクリックするだけで、その色のコードがコピーできてしまいます。

 

その他にもフォントの種類を教えてくれる拡張機能や、表示されている素材の距離など、さまざまな機能が用意されてました

 

おすすめされている拡張機能を以下でチェックしてみてくださいね。

  • One tab…調べもののために開いたタブを、ひとつのタブにまとめる機能
  • Fire shot…1ページの長いサイトを1回のスクリーンショットで画像にできる
  • Color zilla…サイト上に表示されている色をコードとしてコピーできる
  • Page ruler…サイト上の対象物の長さを測れる機能
  • Clear cash…ワンクリックでブラウザのキャッシュを消去できる
  • Web marker…コードを入力できるチェックツールをワンクリックで表示

 

テキストエディタは使いやすいものでコーディング

模写コーディングをするためには、テキストエディアが必要になってきますが、自分の使いやすいものを選んでおきましょう。

 

じつは僕は無料のテキストエディタを使っていますが、むしろ不便を感じていません。それが「Atom」といわれるツールで、これも拡張機能が付いていて、かなり使いやすくなっています

 

これもドットインストールという学習サイトで紹介されていたので、初心者というのもあって、言われた通りにダウンロードして使っていました。

 

あとでこの拡張機能のついて知ったのですが、かなり使いやすくておすすめですよ。

 

最近知った最強ツールPhotoshop!

さらにここ最近になって知ったのが、模写コーディングでは必要不可欠といっていいのがPhotoshopです。

 

写真を加工するツールだと思っていましたが、じつはサイト上の画像をきれいに切りぬいて使えるので、レベルの高い模写ができてしまいます

 

画質がキレイなままというのもありますが、とくに大きい要因が、背景を透明にしたまま保存できるところ。模写したサイトの背景を崩さないまま、画像が再利用できるのは勉強しやすいです。

 

もちろんその他にも使い勝手がいいので、webデザインを学びたい人にも、絶対に持っておいたほうがいいツールでしょう。詳しくは過去の記事を読んでみてくださいね。

  1. PhotoshopをUdemyで覚えたらコーディングしやすかったぞ | メガネ通信

 

コーディングのやり方の基本は完成品のコードを見ずに模写

上記で紹介した模写コーディングで必要なものが準備できたら、後はコーディングをしてサイトを作ってしまいましょう。

 

模写コーディングの基本としては、完成したサイトのコードを見ないこと。これだけです。後はひたすらコードを打ち込んで模写したサイトを完成させてくださいね。

メガネさん
メガネさん

模写するだけと書きましたが、この学習法の本質は、わからなかったら調べるという作業らしいです。本当のサイト作成でも同じ作業ですよね!

 

最初はHTMLからCSSで装飾してjQueryで動きを

模写しているサイトの中には、アニメーションで動きを出しているサイトもあります。これは何度も出てきているHTMLとCSSだけでなく、jQueryという言語が使われているんです。

 

このコードを使う場合は最後にして、最初はHTMLとCSSを使って、模写するのが1番!初心者の僕はjQueryにかなり苦戦しましたが、数をこなせばこれも慣れてくるみたいですね。

 

模写コーディングを何度も続けているとなれてきますが、最初はJavascriptといわれる言語の基礎を、無料の学習サイトで学んでおいてくださいね。

  1. Progateでのレベル上げはどれくらいの効果が?無料と有料の違いとは? | メガネ通信

 

わからない部分はGoogleで検索

上記でも紹介しましたが、模写コーディングの本質はコードになれるだけでなく、自分で分からないところは調べるというところです。

 

Googleで分からない部分は検索するといいのですが、これにもコツがあるようで、プログラミングの業界では有名なマナブさんという方も動画で言っていました

 

プログラミングで「エラー」が起きたときの対処方法【3つあります】

 

むしろプロの方のほうがググっている率が高くて、検索力が高いほうがプログラミングで、失敗しにくいそうです。

 

このやり方を見つけるためにも、模写コーディングというのは、初心者としてはピッタリの学習法になります。

 

基本的にやり方としてはエラーが出たら、そのエラー名でググったらいいらしいです。ところがこれはHTMLやCSSではあまりエラーというのは少ないでしょう。

 

マークアップ言語はたくさんの人が使っている言語のため、検索したら他のものと比べて、かなりたくさんあってGoogleでほとんど解決できてしまいますよ。

メガネさん
メガネさん

「サイト幅 維持」といった感じで、完成品の状態をそのまま検索するだけでも、かなり精度の高い結果を出してくれます。

 

完成品はポートフォリオで!クラウドソーシングにも挑戦するぞ!

基本的にサイト作成で依頼をもらう場合は、Photoshopなどのファイルで渡されて、その設計図を見ながらサイトを作っていきます。

 

つまり模写する状態を似ているので、作るスピードが早くなってくると、仕事でもアピールポイントになってくるでしょう。

 

それくらい模写コーディングは、実務に近い環境で勉強ができてしまう、おすすめのやり方です。

 

今の僕個人してのスキルはまだまだで、学習サイトを見て基礎が把握できただけのレベルなります。

 

そこから飛躍できるのが模写コーディングだと思って、今も挑戦していますが、かなり勉強なると感じているんですよね。

メガネさん
メガネさん

学習サイトでの勉強が落ち着いたら、模写コーディングはおすすめ!ポートフォリオとして提出もできるし、実践的な勉強方法だね!

この記事を書いたのは…

メガネさん

元美容師webライター

元美容師が手荒れからWEBライターに転向。手荒れでも不自由なく生活できており、むしろ仕事で困らなくなりました。手荒れでも困らない人のために情報発信!今はプログラミングの勉強中です。

コーディング
スポンサーリンク

サブコンテンツ

メガネ通信