コーディングというのはサイトを作るうえで、必要な技術ですが、スキルを身に付けるのはなかなか難しいですよね？
ある程度基礎を覚えたら、次は模写コーディングをしたらいいらしい。
最近よくそんな情報を見るので、無料学習サイトで学び終わった人のためにそのやり方を紹介します。
僕はサイトを作るHTMLとCSSというマークアップ言語といわれるものを使って、コーディングをしてサイトを作った経験があります。
やっと完成した✨でも完璧！と思ってなくて、8割くらいのできなんだ💦追及してもキリがないから、妥協してしまいました😭
でもまあ形にできたので、これはこれで満足できました👆こんな感じでポートフォリオを残しつつ、案件の応募をそろそろ始めていくぞ👊https://t.co/r1LszPpEzu
— メガネ🤥const＝ネットビジネス挑戦フリーランス (@sekibiyou1984) April 11, 2019
ところがまだまだ未熟で自分の納得のいくサイトが作れていないと思い、効率のいい勉強法はないかと探していたら、「模写コーディング」という学習法を見つけました。
Twitter上ではたくさんの人は挑戦していて、これは早く使わないと…と思っていたんですが、ただ模写コーディングするだけでもいいのか不安でもっと深く調べていたんです。
自分のサイトを作ってて思うのは
イメージからデザインに
落とし込むのが難しすぎる。模写コーディングは
デザインの部分を考える必要が
全くなかったから、
ある意味、簡単だったな、、、。デザインの部分も勉強していきたい💪💪
— soso@大学生 (@soso_student_pr) April 19, 2019
コーディングのお仕事に関しての勉強法は、その仕事の環境に使い状態で、そのまま勉強したほうがいいと過去記事で紹介しました。
じつは模写コーディングというのは、比較的その状態に近いんですよ。
ちょっと調べただけでたくさんの人が取り組んでいるんだし、いい勉強法なんだろうな…と思っていましたが、どうせなら効率的にやってみたいですよね！
初心者の僕は模写コーディングするためのサイトを探してみた
模写コーディングがちょうどいい理由は、予めデザインされた状態のサイトを、見ながらコーディングをするという仕事をもらった状態に似ているからなんです。
コーディングというのはHTMLとCSSというコードを、テキストエディタに書き込んでいくもので、デザインというものは省かれています。
勉強ではまっさらの状態ですから、参考になるものを探す必要があるわけです。
【 Webデザインはpinterestからパクれ 】
私はデザインが苦手で、
いつもどのサイトを参考にするか
悩んでしまうのですが、
pinterestを利用すれば検索が捗ります。1. https://t.co/FJKjvHoFtf にアクセス
2. [web design][landing page]などで検索
3. 沢山でてくる😍😍😍完璧におすすめです🙆♀️ pic.twitter.com/bvRQJYERfE
— 上田 真理子 / startupの開発相談窓口👩💻🍓 (@mariguranule) December 19, 2018
模写コーディングというのは、先に完成しているサイトを見ながらコーディングするので、勉強法としては最適ですよね？
ところが模写コーディングするサイトなら、なにを選んでもいいわけでなく、デザインが洗練されたものを選んだほうがいいでしょう。
そこでその模写コーディングするためのサイトが、たくさん集まったおすすめのサイトを紹介しますね。
おしゃれなものほど作るのが難しそうですが、意外に慣れれば簡単になるみたい…。
模写コーディングを続けていくとコーディングするスピードも早くなって、仕事に役立ちますよ。
自分の気に入ったデザインのサイトを模写コーディング！
まずどのサイトがいいの？聞かれたら、自分が気に入ったおしゃれなサイトを模写コーディングするのが1番！これはモチベーションが全然違うからなんですよね！
コーディングに限らずプログラミングの世界では、初心者が勉強していて挫折する人が、全体の99％だといわれているんじゃ…。
なるべくモチベーション高めて、勉強を続けないとものになりません。
そこで自分の好みのサイトを模写コーディングしていると、好きなデザインというのもあって、続けやすくておすすめというわけです。
どのサイトを模写コーディングしていいのかわからない人は、とにかく自分の好みのデザインのサイトを、コーディングしてコピーしてしまいましょう。
好きこそものの上手なれっていうやん！
簡単すぎるサイトはあまり選ばないほうがいい
いくら自分の好みのデザインだからと、簡単にコーディングができてしまうサイトは、勉強としてはよくないですよね？
最初作ったサイトが僕にもあるんですが、個人的にスラスラ作れました。
ところが自分よりレベルが低いサイトというのは、あまりスキルが身に付いた気がしなかったんです。
なるべく自分のスキルにないくらいのレベルのサイトを見つけて、模写コーディングするぞ！
という意気込みが必要なんじゃ…。
ちなみに僕はjQueryを使ったコーディングしましたが、かなり時間がかかったけど勉強になりましたよ。
模写コーディングをする場合は、シンプルで素朴の造りのサイトで模写コーディングしないように気を付けよう！
Pinterestを使えば模写コーディングしやすいサイトがたくさん
かといってどこからそんな勉強になるサイトを見つけてきたらいいのか、全然わからない…なんて言う人は、Pinterestというサイトを見てみてください！
このサイトはインスタグラムのような、画像に関するSNSのような位置づけじゃ！
もちろんSNSに関しての機能は少ないですが、どちらかというと画像をブックマークするものがメインとなっています。
たくさんの人が利用しているので、たくさんのwebデザインが掲載されているんです。
模写コーディングするサイトを見つけるのに、ちょうどいいでしょう。
模写コーディングする前にそろえておくべきおすすめのツール
サイトを模写コーディングするのは、デザインされたものを見ながら、それをマネするためにです。
ただサイトを見ただけでは、なかなか模写コーディングするのは、初心者の段階では難しいでしょう。
というより仕事では距離なども、しっかり指定されている場合が多いみたいです。
その通りに模写コーディングできていないと、やり直ししなくてはいけなかった…なんて声もよく耳にします。
そこでなるべく正確に模写コーディングするために、以下のツールを使うのがおすすめです。
模写コーディングしやすくなるし、これから仕事を受けていくのにも使えて便利だね！
Googleの拡張機能がおすすめ！サイトのデザインを把握
コ－ディングの基礎を身に付けさせてくれた学習サイトであるドットインストールでは、インターネットブラウザはGoogle chromeがいいと紹介してくれていました。
じつは模写コーディングでも、拡張機能というものを使えば、模写コーディングするサイトのデザインを把握できてしまうんです。
Twitterでもたくさんの人がおすすめしていました。
【 ウェブサイト作成に便利なChrome拡張機能】
■WhatFont：カーソルを合わせると、サイト上で使用されているフォントの種類を教えてくれる。
■ColorZilla：サイト上で使用されている色を特定し、クリックすると自動的にコピーしてくれるので、そのままCSSファイルに貼り付けれる。#セブ #IT留学— グローバルIT留学@セブ島 (@global_it_study) February 22, 2019
まずサイト内の色を把握するために使える「color zilla」というもの。
知りたい色のところでクリックするだけで、その色のコードがコピーできてしまいます。
その他にもフォントの種類を教えてくれる拡張機能や、表示されている素材の距離など、さまざまな機能が用意されてました。
おすすめされている拡張機能を以下でチェックしてみてくださいね。
- One tab…調べもののために開いたタブを、ひとつのタブにまとめる機能
- Fire shot…1ページの長いサイトを1回のスクリーンショットで画像にできる
- Color zilla…サイト上に表示されている色をコードとしてコピーできる
- Page ruler…サイト上の対象物の長さを測れる機能
- Clear cash…ワンクリックでブラウザのキャッシュを消去できる
- Web marker…コードを入力できるチェックツールをワンクリックで表示
テキストエディタは使いやすいものでコーディング
模写コーディングをするためには、テキストエディアが必要になってきますが、自分の使いやすいものを選んでおきましょう。
じつは僕は無料のテキストエディタを使っていますが、むしろ不便を感じていません。
それが「Atom」といわれるツールで、これも拡張機能が付いていて、かなり使いやすくなっています。
コーディング記事を作ろうとしてたんだけど、atomのプラグインってこんなにあるの知らなかった💦
これ導入したらもっと高速のサイト作れるじゃね✨そりゃ人気があるツールだわ😻#記事にするっきゃないhttps://t.co/PlVVdhM3L3
— メガネ🤥const＝ネットビジネス挑戦フリーランス (@sekibiyou1984) March 16, 2019
これもドットインストールという学習サイトで紹介されていたので、初心者というのもあって、言われた通りにダウンロードして使っていました。
あとでこの拡張機能のついて知ったのですが、かなり使いやすくておすすめですよ。
最近知った最強ツールPhotoshop！
さらにここ最近になって知ったのが、模写コーディングでは必要不可欠といっていいのがPhotoshopです。
写真を加工するツールだと思っていましたが、じつはサイト上の画像をきれいに切りぬいて使えるので、レベルの高い模写コーディングができてしまいます。
画質がキレイなままというのもありますが、とくに大きい要因が、背景を透明にしたまま保存できるところ。
模写コーディングしたサイトの背景を崩さないまま、画像が再利用できるのは勉強しやすいです。
もちろんその他にも使い勝手がいいので、webデザインを学びたい人にも、絶対に持っておいたほうがいいツールでしょう。
詳しくは過去の記事を読んでみてくださいね。
模写コーディングのやり方の基本は完成品のコードを見ない
上記で紹介した模写コーディングで必要なものが準備できたら、後はコーディングをしてサイトを作ってしまいましょう。
模写コーディングの基本としては、完成したサイトのコードを見ないこと。
これだけです。
後はひたすらコードを打ち込んで模写コーディングしたサイトを完成させてくださいね。
模写コーディングするだけと書きましたが、この学習法の本質は、わからなかったら調べるという作業らしいです。
本当のサイト作成でも同じ作業ですよね！
最初はHTMLからCSSで装飾してjQueryで動きを
模写コーディングしているサイトの中には、アニメーションで動きを出しているサイトもあります。
これは何度も出てきているHTMLとCSSだけでなく、jQueryという言語が使われているんです。
このコードを使う場合は最後にして、最初はHTMLとCSSを使って、模写コーディングするのが1番！
わしも初心者の頃はjQueryにかなり苦戦したが、数をこなせばこれも慣れてくるもんじゃ！
模写コーディングを何度も続けているとなれてきますが、最初はJavascriptといわれる言語の基礎を、無料の学習サイトで学んでおいてくださいね。
わからない部分はGoogleで検索
上記でも紹介しましたが、模写コーディングの本質はコードになれるだけでなく、自分で分からないところは調べるというところです。
Googleで分からない部分は検索するといいのですが、これにもコツがあります。
じつはプログラミングの業界では有名なマナブさんという方も動画で言っていました。
むしろプロの方のほうがググっている率が高くて、検索力が高いほうがプログラミングで、失敗しにくいそうです。
模写コーディングというのは、初心者としてはピッタリの学習法なわけじゃ。
基本的にやり方としてはエラーが出たら、そのエラー名でググったらいいらしいです。
ところがこれはHTMLやCSSではあまりエラーというのは少ないでしょう。
マークアップ言語はたくさんの人が使っている言語のため、検索したら他のものと比べて、かなりたくさんあってGoogleでほとんど解決できてしまいますよ。
「サイト幅 維持」といった感じで、完成品の状態をそのまま検索するだけでも、かなり精度の高い結果を出してくれます。
完成品はポートフォリオで！クラウドソーシングにも挑戦するぞ！
基本的にサイト作成で依頼をもらう場合は、Photoshopなどのファイルで渡されて、その設計図を見ながらサイトを作っていきます。
それくらい模写コーディングは、実務に近い環境で勉強ができてしまう、おすすめのやり方です。
今の僕個人してのスキルはまだまだで、学習サイトを見て基礎が把握できただけのレベルなります。
そこから飛躍できるのが模写コーディングだと思って、今も挑戦していますが、かなり勉強なると感じているんですよね。
学習サイトでの勉強が落ち着いたら、模写コーディングはおすすめ！ポートフォリオとして提出もできるし、実践的な勉強方法だね！
