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

コーディングというのはサイトを作るうえで、必要な技術ですが、スキルを身に付けるのはなかなか難しいですよね?

ある程度基礎を覚えたら、次は模写コーディングをしたらいいらしい。

最近よくそんな情報を見るので、無料学習サイトで学び終わった人のためにそのやり方を紹介します。

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

 

 

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

 

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

 

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

 

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

メガネさん
メガネさん

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

 

スポンサーリンク

初心者の僕は模写コーディングするためのサイトを探してみた

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

 

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

 

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

 

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

 

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

 

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

メガネさん
メガネさん

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

 

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

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

Google神
Google神

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

 

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

 

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

メガネさん
メガネさん

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

 

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

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

 

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

Google神
Google神

なるべく自分のスキルにないくらいのレベルのサイトを見つけて、模写コーディングするぞ!という意気込みが必要なんじゃ…。

 

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

メガネさん
メガネさん

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

 

Pinterestを使えば模写コーディングしやすいサイトがたくさん

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

Google神
Google神

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

 

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

 

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

 

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

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

 

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

 

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

メガネさん
メガネさん

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

 

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

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

 

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

 

 

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

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

画質がキレイなままというのもありますが、とくに大きい要因が、背景を透明にしたまま保存できるところ。

メガネさん
メガネさん

模写コーディングしたサイトの背景を崩さないまま、画像が再利用できるのは勉強しやすいです。

 

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

 

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

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

 

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

メガネさん
メガネさん

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

 

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

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

 

このコードを使う場合は最後にして、最初はHTMLとCSSを使って、模写コーディングするのが1番!

Google神
Google神

わしも初心者の頃はjQueryにかなり苦戦したが、数をこなせばこれも慣れてくるもんじゃ!

 

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

 

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

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

 

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

 

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

 

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

Google神
Google神

模写コーディングというのは、初心者としてはピッタリの学習法なわけじゃ。

 

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

 

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

メガネさん
メガネさん

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

 

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

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

 

上記で紹介した模写コーディングで勉強する状態を似ているので、作るスピードが早くなってくると仕事でもアピールポイントになってくる

 

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

 

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

 

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

メガネさん
メガネさん

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

この記事を書いたのは…

メガネさん

元美容師webライター

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

コーディング
スポンサーリンク
メガネ通信