HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

【初心者向け】模写コーディングがオススメな理由とやり方を解説

約10分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

【初心者向け】模写コーディングがオススメな理由とやり方を解説
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • HTML,CSSの基礎が終わったけど実践的なスキルが身につかない。
  • 模写コーディングのやり方を教えて欲しい!
  • 模写コーディングは何から始めればいいの?

今回はこのような悩みを解決する記事です。

プログラミング初心者の一連の流れとして、

【Progate、ドットインストールで基礎学習→基礎勉強しまくる→実践スキルが身につかない→何をすればいいか悩む】

このようになる方が多いかと思います。

Progateなどで基礎学習はもちろん効率的で良いですが、学習後インプットした物を実践的なスキルに変えなければ何の意味もありません。

そもそもProgateだけではHTML,CSSの全てを網羅できておらず、100がプロとすると10にも到達していません。

【実体験】Progate(プロゲート)でどこまでスキルが身につくの?【HTML,CSS編】

そこでオススメの学習方法がこれからご紹介する「模写コーディング」という方法です。

この模写コーディングをマスターすれば、クラウドソーシングにある簡単なLP案件くらいはこなせるレベルに到達するかと思います。

そこで本記事では、模写コーディングの具体的なやり方を解説するのでぜひ最後までご覧ください!

✔︎こんな方にオススメ

  • HTML,CSSの基礎学習の後に何をすれば良いか分からない方
  • クラウドソーシングで案件をこなせるようになりたい方
  • 模写コーディングのやり方が分からない人

無料の教材作りました▶︎【独学でWeb制作】月5万稼ぐための学習マップ【0円!未経験でもOK】

模写コーディングとは?

さて、これから学習していく「模写コーディング」とはそもそも何なんでしょうか?

動画で解説しているので、一気に理解したい人はご覧ください!

読んで字の如く既存で存在するサイトを模写しコーディングするという事です。

Hiko
Hiko

もう少し模写コーディングについて詳しくご説明しますね!

もうご存知の方も多いかと思いますが、HTML,CSSはサイトの外枠(見た目)を作るプログラミング 言語でしたね!

つまりこのような(WordPres.com)サイトの見た目もHTML,CSSで作られています。

模写コーディングとはこのようにHTML,CSSですでに出来上がっているサイトを見ながら、全く同じサイトを作ることを言います。

ネコ君
ネコ君

美術で例えると、モナリザの絵を見ながら同じように書き写すことだね!

模写コーディングとは、「既存で存在するサイトを見る」→「全く同じ見た目を0からコーディングして作る」この作業のことを言います。

模写コーディングのメリット

ではなぜ初心者の方に模写コーディングをお勧めするのかご紹介します。

✔︎模写コーディングのメリット

  • プロのコーディングを真似することができる
  • 綺麗なコーディングができるようになる
  • コーディング速度が上がる
  • HTMLの組み立て方が上手くなる
  • 仕事の時と似た状況にある
  • 使えるタグやメソッドの幅が増える
  • デザイン力が上がる
  • 完成物をポートフォリオ(実績)として使える
  • プログラミングが楽しくなる

ざっとまとめるとこれだけメリットがあります。

まず始めに参考にするサイトはプロのエンジニアが作ったものなので、今まで使ったこと無いメソッドや組み立て方を学ぶことができます。

コーディングの方法に正解はありませんが、綺麗なコーディングは存在します。

WordPress.comなどの有名なサイトのソースコードを見てみると、無駄のない綺麗なコーディングがされているのが分かるかと思います。

綺麗なコーディングができるようになると、コーディングの速度が上がる、CSSの書く量が減る、HTMLの組み立てが上手くなるようになります。

✔︎綺麗なコーディングをするメリット

  • コーディング速度が上がる
  • CSSを書く量が減る
  • サイトの編集作業する際にやりやすい
  • HTMLの組み立て方が上手くなる
  • サイトを見ただけで、瞬時にHTMLの構成が頭に浮かぶ

模写コーディングは個人で仕事を受注した時と同じ状況に近いので、将来フリーランスを目指す方にもオススメの学習です。

その理由として、、、

  1. デザインカンプと呼ばれるサイトの見本を渡される
  2. 見本を参考に同じサイトを作る
  3. 納品

このような流れで作業を進めるので、この状況が模写コーディングと似ているからです。

仕事の際には色が違っていたり、配置がずれていると話にならないので、模写コーディングする際には誰が見ても同じ見た目にするようにしましょう。

もう一点模写コーディングの魅力をお伝えすると、模写コーディングしたサイトを自分の実績として使えるようになります。※著作権には注意してください

初心者の方にはサイト制作の実績が無く仕事が取りにくいですが、模写コーディングしたサイトを自分の武器にして営業している駆け出しフリーランスの方も多いですよ!

✔︎挫折しそうならスクールに通うのもアリ

プログラミング学習の設計は、プロに任せた方が「最速最短」で走り抜けることができます。

独学だとつい無駄なことや、脱線した学習をしてしまいがちなので、TechAcademy のような比較的安いスクールでもいいので、プロに学習のサポートをしてもらった方が効率よく学習できます。

TechAcademyは1週間の無料体験があるので、これを利用して自分の学習計画を見直してみるのもありですね。

▶︎ TechAcademyの公式サイト

【初心者向け】模写コーディングのやり方

では早速、初心者の方向けに、模写コーディングのやり方を解説していきます。

これからご紹介するステップに沿ってやると、効率よく模写コーディングの学習ができるので、ぜひ参考にしてみてください。

初心者向けの模写コーディングのやり方は以下の5つのステップです。

✔︎模写コーディングのやり方5STEP

  1. 模写するサイトを決める
  2. 検証ツールは使わずに自力で完成させる
  3. レスポンシブデザインもCSSで実装する
  4. 検証ツールを見て答え合わせ
  5. 模写したサイトのデザインを参考にする

これらの5つのやり方について詳しく解説します。

1.模写するサイトを決める

まず初めに、模写するサイトを決めるところから始まります。

模写するサイトを決めるのがとても重要で、レベルに合っていないサイトを選んでしまうと100%挫折します。

最初は無理せず自分のレベルに合ったサイト選びが重要です。

↓スキル別にオススメの模写サイトを選んでみました↓

まずは、上記のページの初級編から取り組んでみてください。

模写コーディング学習の途中に習得するべきスキルも同時に解説しているので、非常に有益な記事だと思います。

2.検証ツールは使わずに自力で完成させる

模写コーディングをしていると、必ずつまづくことが多々あると思います。

初めての方は必ずつまずいてGoogleChromeの検証ツール(答え)を見てしまいがちですが、我慢して自力で解決するようにしてください。

もしこれが仕事の場合は検証ツールで答えなんて見れません。

そのことを考えてこの学習の過程でググる力(調べる力)を身につけましょう。

HTML,CSSの事であれば必ず答えはGoogleに載っています。

分からない→自分で考える→ググる→実行する

検証ツールは使わずにこの流れで完成に近づけていってください。

3.レスポンシブデザインもCSSで実装する

最近ではモバイルファーストなので、レスポンシブ化も欠かせません。

初心者の方であれば、ブレイクポイントは1つでいいので、CSSの@mediaを使ってレスポンシブ対応にしましょう。

Webサイトをレスポンシブ対応にする方法は下記の記事をご覧ください。

CSSでメディアクエリ(@media)を使ってレスポンシブ(スマホ対応)にする方法

Webサイト制作の案件をするときでも、必ずと言っていいほどレスポンシブ対応を求められます。

模写コーディングでレスポンシズデザインのコーディングもマスターしておくと、効率よく仕事を進めることができるので、ぜひ何度も練習してみてください!

4.検証ツールを見て答え合わせ

完成物は見本に90%くらい近ければ、検証ツールを使って答え合わせをしましょう。

このステップが最も重要で、見本と自分でコーディングしたコードとどこが違うのか確認して見ましょう。

おそらく、divタグの使い方が全く違うかったり、classやidの指定、posisionの指定方法がかなり違うかと思います。

検証ツールを見て、知らないメソッドやタグがあった場合はメモして、使い方を調べて次回使えるようにしましょう。

【Chrome検証ツール使い方】初心者が抑えておくべき便利な4つの機能の使い方

✔︎このステップでやる事

  • 自分のコードと見本を見比べる
  • HTMLの構造をみる
  • class,idの指定の仕方をみる
  • 知らないCSSメソッドをメモする
  • メモしたものを調べて使い方を学ぶ
HikoPro

見本のサイトはプロがコーディングしたサイトなので、非常に綺麗な構造でHTMLが組み立てられたいたりしているので、そんな点も見ながら答え合わせをするといいでしょう!

5.模写したサイトのデザインを参考にする

おそらく模写コーディングにチャレンジしている方は将来フリーランスやエンジニアを目指している方が多いかと思います。

フリーランスを目指す方ならなおさら、サイトの設計やWebデザインの能力も必要になってきます。

この学習の中でレイアウトやデザインの勉強も同時にするといいでしょう。

ここにはアイコンを使ったら見やすいとか、影やhoverさせると閲覧者にクリックしてもらいやすくなるなとか、デザイン例は無限にあるので、少しずつ吸収していきましょう。

✔︎Webデザインをみるべきポイント

  • margin、paddingでの余白の取り方
  • 色の使い分け
  • レイアウト配置
  • コンテンツのグルーピング

HTML,CSSコーディングができて、Webデザインもできるとなると、エンジニアとしての市場価値も非常に高くなるので、余裕がある人は、Webデザインも同時に学ぶといいでしょう!

TechAcademyのWebデザインコースでは、Adobe Photoshopを使った画像加工やワイヤーフレームの使い方をプロに教えてもらえるので、ぜひ活用してみるといいでしょう!

▶︎Webデザインコース公式ページ

まとめ:模写コーディングのやり方をマスターしよう!

いかがでしたでしょうか!

この記事を参考に模写コーディングの学習効果や実践力がつくことがお分かり頂けたかと思います。

3サイトくらい模写コーディンすれば、かなりの実力がつくかともいます。

コーディングするだけ実力もつきますし、実績として使える武器も増えるので、基礎学習が終わった方はぜひチャレンジしてみてはいかがでしょうか!

HikoPro

最後までご覧いただきありがとうございました!

YouTubeTwitterInstagramやってますのでぜひフォローお願いします!!

↓合わせて読みたいプログラミングの記事↓

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)